< viewclass = " list" > < blockv-for = " (item,index) in 8" :key = " index" > < viewclass = " item" @click = " choosePackage(item)" :class = " {'active':item == current}" > < viewclass = " i_money" > < textclass = " i_num" > </ text> </ view> < viewclass = " 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; } }
