案例
代码
< view class = " list" >
< block v-for = " (item,index) in 8" :key = " index" >
< view class = " item" @click = " choosePackage(item)" :class = " {'active':item == current}" >
< view class = " i_money" >
< text class = " i_num" > 2</ text> 元
</ view>
< view class = " i_txt" > 套餐</ view>
</ view>
</ block>
</ view>
export default {
components : { } ,
data ( ) {
return {
current : 0 ,
} ;
} ,
watch : {
} ,
onLoad ( ) {
} ,
onShow ( ) {
} ,
methods : {
choosePackage ( item ) {
console. log ( item) ;
this . current = item
}
}
}
.list {
margin-top : 44rpx;
display : grid;
grid-template-columns : repeat ( 3, 1fr) ;
grid-gap : 16px 14px; //行间距 列间距
.item {
background : #FFFFFF;
border-radius : 10rpx 10rpx 10rpx 10rpx;
border : 1rpx solid #BCBCBC;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
padding : 20rpx 0;
.i_money {
font-weight : bold;
font-size : 22rpx;
color : #292929;
.i_num {
font-size : 30rpx;
}
}
.i_txt {
font-size : 22rpx;
color : #292929;
margin-top : 5rpx;
}
}
.active {
background : #FFFDFA;
border : 1rpx solid #FE8300;
position : relative;
}
.active::before {
content : '' ;
position : absolute;
right : 5rpx;
top : 6rpx;
width : 12rpx;
height : 9rpx;
border-right : 2rpx solid #FFFFFF;
border-top : 2rpx solid #FFFFFF;
transform : rotate ( 135deg) ;
z-index : 2;
}
.active::after {
content : '' ;
position : absolute;
right : 0;
top : 0;
border-radius : 0 6rpx 0 10rpx;
width : 26rpx;
height : 26rpx;
background-color : #FE8300;
}
}