65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<template>
|
|
<view class="guige">
|
|
<view class="title">
|
|
{{title}}
|
|
</view>
|
|
<view class="item">
|
|
<text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
|
|
{{i}}
|
|
</text>
|
|
<!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
|
|
<!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.guige{
|
|
margin-top: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
border-bottom: #ececec solid 2rpx;
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 29rpx;
|
|
|
|
}
|
|
.item{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
>text{
|
|
min-width: 120rpx;
|
|
height: 60rpx;
|
|
background-color: #ececec;
|
|
color: #999;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 6rpx;
|
|
margin-right: 26rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.xuanzhong{
|
|
border: #ff780f 1rpx solid;
|
|
color: #FF780F;
|
|
background-color: #FFF1E6;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
name:"guige",
|
|
data(){
|
|
return {
|
|
select: 0
|
|
}
|
|
},
|
|
props:['item','title'],
|
|
watch:{
|
|
select(){
|
|
console.log(this.select)
|
|
this.$emit("sel", this.select);
|
|
}
|
|
}
|
|
}
|
|
</script> |