案例
代码
html
复制代码
<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>
javascript
复制代码
export default {
components: {},
data() {
return {
current: 0,
};
},
watch: {
},
onLoad() {
},
onShow() {
},
methods: {
choosePackage(item) {
console.log(item);
this.current = item
}
}
}
css
复制代码
.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;
}
}