HTML内容
移动端商品详情选项卡
//删除了部分内容
<div id="detail">
<div class="detail-tabwrap">
<div class="back-left" @click="back()">
<img src="@/assets/imgs/left1.png" alt="">
</div>
<div class="detail-tab">
<div v-for="(item,index) in detailName" :key="item.id" class="commodity" @click="menuShow(index)" :class="{detailActive:index==num}">
<span>{{item.title}}</span>
</div>
</div>
<div class="detail-more">
<img src="@/assets/imgs/more1.png" alt="">
</div>
</div>
<div class="dtab">
<div class="commodity" v-if='num ===0'>
<div class="commodity-img">
<img src="@/assets/imgs/commondity.png" alt="">
</div>
</div>
<div class="details" v-if='num===1'>
详情内容
</div>
<div class="evaluate" v-if='num===2'>
评价
</div>
</div>
</div>
export default {
data(){
return{
num:0,
detailActive: true,
detailName:[
{title:'商品',id:1},
{title:'详情',id:2},
{title:'评价',id:3}
],
}
}
/**使用的是less**/
#detail{
margin-bottom: 2.4rem;
.detail-tabwrap{
width: 100%;
height: 2.05rem;
background: #fff;
position: fixed;
top: 0;
left: 0;
div{
float: left;
display: inline-block;
line-height: 2.05rem;
}
.back-left{
margin: 0.2rem 2.8rem 0 0.75rem;
}
.detail-tab{
div{
border-bottom: 0.15rem solid #fff;
height: 1.80rem;
margin:0 0.7rem;
span{
font-size: 0.8rem;
font-weight: 100;
}
}
.detailActive{
border-bottom: 0.15rem solid #EB483F;
}
}
.detail-more{
width: 25px;
height: 100%;
float: right;
margin-right: 0.6rem;
img{
margin-top: 0.5rem;
}
}
}
.dtab{
margin-top: 2.05rem;
.commodity{
width: 100%;
overflow: hidden;
background: #F2F2F2;
.commodity-img{
width: 100%;
height: 18.75rem;
overflow: hidden;
img{
display: block;
width: 100%;
}
}
.com-wrap{
width: 100%;
div{
width: 17.45rem;
overflow: hidden;
padding: 0 0.65rem;
background: #fff;
}
div.com-title{
height: 1.95rem;
padding: 0.85rem 0.65rem 0.4rem 0.65rem;
p{
color: #4A4A4A;
font-size: 0.9rem;
display: -webkit-box;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
}
.com-price{
color: #EB483F;
font-size: 1.15rem;
padding-top: 1.1rem;
padding-bottom: 1.1rem;
}
.com-tips{
height: 2.2rem;
background: #F7F7F7;
span{
overflow: hidden;
font-size: 0.6rem;
margin-right:0.8rem;
img{
width: 0.6rem;
height: 0.6rem;
margin-top: 0.8rem;
}
}
}
.com-detail{
height: 8rem;
width: 18.1rem;
padding-right: 0;
margin-top: 0.65rem;
margin-bottom: 0.65rem;
div{
padding: 0;
width: 100%;
line-height: 2.0rem;
border-bottom: 0.005rem solid #ccc;
span{
color: #4a4a4a;
font-size: 0.8rem;
}
section{
width: 80%;
float: left;
display: block;
span{
width: 100%;
display: block;
p.sec-address{
display:inline;
color: #4a4a4a;
font-size: 0.8rem;
padding-left: 0.6rem;
}
}
span:last-child{
color: #EB483F;
text-align: center;
}
}
span:last-child{
float: right;
overflow: hidden;
margin-right: 0.65rem;
img{
margin-top: 0.55rem;
}
}
span.sec-span{
margin-top: 1.0rem;
}
}
}
.com-eval{
width: 100%;
line-height: 2.0rem;
margin-bottom: 0.65rem;
span{
color: #4a4a4a;
font-size: 0.8rem;
p{
display: inline;
color: #8D8D8D;
font-size: 0.8rem;
}
}
span:last-child{
float: right;
overflow: hidden;
margin-top: 0.2rem;
margin-right: 1.25rem;
}
}
}
}
}
.det-foot{
left: 0;
bottom: 0;
width: 100%;
height: 2.4rem;
position: fixed;
background: #fff;
border-top: 0.05px solid #CCCCCC;
div{
float: left;
height: 100%;
line-height: 2.4rem;
text-align: center;
border-right: 0.05rem solid #ccc;
a{
display: block;
}
}
.customerservice,.det-shopcar{
width: 2.7rem;
a{
text-align: center;
span:first-child{
width: 1.2rem;
height: 1.2rem;
margin: 0 auto;
margin-bottom: 0.2rem;
img{
width: 100%;
}
}
span{
font-size: 0.6rem;
color: #828282;
display: block;
}
span:last-child{
height: 1.0rem;
line-height: 1.0rem;
}
}
}
.add-shopcar,.immed-pur{
width: 6.6rem;
font-size: 0.9rem;
}
.add-shopcar{
a{
color: #EB483F;
}
}
.immed-pur{
border: 0;
background: #FF3239;
a{
color: #fff;
}
}
}
}
通过数据获取选项卡标题内容
移动端分类页(通过数据渲染实现)
数据渲染获取li元素内容,通过点击事件判断当前的index值与对应的数据的index是否相同 通过v-if进行判断
<div class="classify-wrap">
<ul class="classify-menu">
<li v-for="(item,index) in classifyName" :key="item.id" :id="item.id" @click="classify(index)" :class="{listActive:index == num}">
<router-link to="">
{{item.title}}
</router-link>
</li>
</ul>
<div class="classify-menu-des">
<div class="class-menu-list" v-for="(item,index) in classifyMenu" :key="item.id" v-if='num === index' >
<div class="main-img">
<img :src="item.imgUrl1" alt="">
</div>
<div class="class-title1">
<span>——</span><span class="class-font1">{{item.title1}}</span><span>——</span>
</div>
<div class="classify-list1" v-for="item1 in imgsUrl" :key="item1.id">
<img :src="item1.imgsUrl1" alt="">
<span>{{item1.title2}}</span>
</div>
</div>
</div>
</div>
export default{
data(){
return{
num:0,
listActive:true,
classifyName:[
{title:'男装',id:1},
{title:'女装',id:2},
{title:'跆拳道鞋',id:3},
{title:'跆拳道周边',id:4},
{title:'茶叶',id:5},
{title:'红酒',id:6},
],
classifyMenu:[
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'外衣/道服',},
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'道服/外衣'},
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'外衣/道服'},
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'道服/外衣'},
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'外衣/道服'},
{imgUrl1:require('@/assets/imgs/csmenu1.png'),title1:'道服/外衣'},
],
imgsUrl:[
{imgsUrl1:require('@/assets/imgs/csmenu2.png'),title2:'T恤'},
{imgsUrl1:require('@/assets/imgs/csmenu3.png'),title2:'跆拳道服'},
{imgsUrl1:require('@/assets/imgs/csmenu2.png'),title2:'跆拳道周边'},
{imgsUrl1:require('@/assets/imgs/csmenu3.png'),title2:'外套/风衣'},
]
}
},
components: {
myFooter,
searchStyle
},
methods: {
classify(index){
this.num = index;
}
},
}
.classification{
.search_wrap{
position: static;
}
.classify-wrap{
width: 100%;
height: 100%;
overflow: hidden;
div,ul{
background: #fff;
}
.classify-menu{
float: left;
width:4.45rem;
height: 28.5rem;
border-right: 0.05rem solid #E5E5E5;
li{
width: 100%;
height: 2.2rem;
a{
width: 4.35rem;
display: block;
font-size: 0.7rem;
text-align: center;
line-height: 2.2rem;
border-left: 0.1rem solid #fff;
}
}
.listActive a{
border-color: #CA1C1D;
}
}
.classify-menu-des{
float: left;
width: 14.25rem;
height: 28.5rem;
div.class-menu-list{
height: 28.5rem;
width: 13.20rem;
padding: 0.55rem 0.5rem 0 0.55rem;
.main-img{
width: 100%;
height: 5.8rem;
img{
width: 100%;
}
}
.class-title1{
text-align: center;
margin: 0.8rem auto 0.3rem ;
span{
font-size: 0.75rem;
color: #CCCCCC;
}
span.class-font1{
color: #4A4A4A;
margin:0 0.5rem;
}
}
.classify-list1{
float: left;
width: 4.4rem;
height: 5.65rem;
text-align: center;
span{
font-size: 0.6rem;
color: #4A4A4A;
}
}
}
}
}
}