|
|
@@ -867,14 +867,33 @@
|
|
|
</el-link>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="tabCon">
|
|
|
+ <el-col :span="24" class="tabCon" v-if="cardIndex == 0">
|
|
|
<el-col :span="4" class="tabBox" v-for="(item, index) in tabConList" :key="index">
|
|
|
<el-link :underline="false" :href="item.link">
|
|
|
<el-col :span="24" class="BoxImg">
|
|
|
<el-image :src="item.imgSrc" style="width:150px;height:150px"></el-image>
|
|
|
</el-col>
|
|
|
<p class="title">{{ item.title }}</p>
|
|
|
- <p class="price">{{ item.price }}</p>
|
|
|
+ <p class="price">¥ {{ item.price }}</p>
|
|
|
+ <p class="close">X</p>
|
|
|
+ <p class="sameCon">
|
|
|
+ <span class="same"><i class="el-icon-view"></i>找相似</span>
|
|
|
+ </p>
|
|
|
+ </el-link>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="tabCon" v-else>
|
|
|
+ <el-col :span="4" class="tabBox" v-for="(item, index) in tabConListTwo" :key="index">
|
|
|
+ <el-link :underline="false" :href="item.link">
|
|
|
+ <el-col :span="24" class="BoxImg">
|
|
|
+ <el-image :src="item.imgSrc" style="width:150px;height:150px"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <p class="title">{{ item.title }}</p>
|
|
|
+ <p class="price">¥ {{ item.price }}</p>
|
|
|
+ <p class="close">X</p>
|
|
|
+ <p class="sameCon">
|
|
|
+ <span class="same"><i class="el-icon-view"></i>找相似</span>
|
|
|
+ </p>
|
|
|
</el-link>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
@@ -2237,6 +2256,56 @@ export default {
|
|
|
title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
price: 3399.0,
|
|
|
},
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend1.jpg'),
|
|
|
+ title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
|
|
|
+ price: 29.9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend2.jpg'),
|
|
|
+ title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
+ price: 3399.0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend2.jpg'),
|
|
|
+ title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
+ price: 3399.0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tabConListTwo: [
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend3.jpg'),
|
|
|
+ title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
|
|
|
+ price: 29.9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend4.jpg'),
|
|
|
+ title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
+ price: 3399.0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend4.jpg'),
|
|
|
+ title: '中国电信 电信流量卡4g手机号码卡腾讯5g大王卡电话卡日租卡不限速无限纯流量卡不限量上网卡 （战神卡二）19元/月58G全国流量300分钟',
|
|
|
+ price: 29.9,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend3.jpg'),
|
|
|
+ title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
+ price: 3399.0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ link: '',
|
|
|
+ imgSrc: require('../assets/recommend2.jpg'),
|
|
|
+ title: 'OPPO Reno5 Pro 5G 6400万人像四摄 65W超级闪充 8+128 星河入梦 全网通手机',
|
|
|
+ price: 3399.0,
|
|
|
+ },
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
@@ -4343,27 +4412,35 @@ export default {
|
|
|
margin: 0 5px 10px;
|
|
|
background-color: #fff;
|
|
|
padding: 0px 20px;
|
|
|
+ position: relative;
|
|
|
/deep/.el-link {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
/deep/.el-link--inner {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
text-align: center;
|
|
|
.BoxImg {
|
|
|
height: 140px;
|
|
|
+ margin: 30px 0px;
|
|
|
+ margin-bottom: 50px;
|
|
|
}
|
|
|
- .BoxImg:hover {
|
|
|
- .el-image {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .BoxImg:hover {
|
|
|
+ // .el-image {
|
|
|
+ // opacity: 0.8;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
.title {
|
|
|
height: 48px;
|
|
|
+ width: 100%;
|
|
|
font-size: 14px;
|
|
|
line-height: 24px;
|
|
|
text-align: center;
|
|
|
color: #666;
|
|
|
+ word-break: break-all;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
|
|
@@ -4371,10 +4448,77 @@ export default {
|
|
|
color: #e1251b;
|
|
|
font-size: 20px;
|
|
|
font-weight: 700;
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: -10px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .sameCon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 66px;
|
|
|
+ display: none;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0, white 35%, white);
|
|
|
+ // background-color: green;
|
|
|
+ .same {
|
|
|
+ display: inline-block;
|
|
|
+ height: 28px;
|
|
|
+ width: 120px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #353131;
|
|
|
+ border-radius: 15px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ // color: #333;
|
|
|
+ // margin-left: 10px;
|
|
|
+ // margin-top: 18px;
|
|
|
+ // background-color: #333;
|
|
|
+ background: #333333;
|
|
|
+ color: #fff;
|
|
|
+ .el-icon-view {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sameCon:hover .same {
|
|
|
+ background-color: #c81623;
|
|
|
+ border-color: #c81623;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-link--inner:hover .sameCon,
|
|
|
+ .close {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ /deep/.el-link--inner:hover .BoxImg {
|
|
|
+ .el-image {
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // .tabBox:hover {
|
|
|
+ // .BoxImg {
|
|
|
+ // .el-image {
|
|
|
+ // opacity: 0.8;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .sameCon {
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
+ // .close {
|
|
|
+ // display: block;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
}
|
