deming/pageB/components/sdetails/guige.vue

64 lines
1.7 KiB
Vue
Raw Normal View History

2020-07-06 03:42:12 +00:00
<template>
<view class="guige">
<view class="title">
2020-07-07 06:45:57 +00:00
{{title}}
2020-07-06 03:42:12 +00:00
</view>
<view class="item">
2020-07-07 06:45:57 +00:00
<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> -->
2020-07-06 03:42:12 +00:00
</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;
}
.xuanzhong{
border: #ff780f 1rpx solid;
color: #FF780F;
background-color: #FFF1E6;
}
}
}
</style>
<script>
export default {
name:"guige",
data(){
return {
2020-07-24 11:48:57 +00:00
select: 0
2020-07-07 06:45:57 +00:00
}
},
props:['item','title'],
watch:{
select(){
// console.log(this.select)
2020-07-23 12:58:56 +00:00
this.$emit("sel", this.select);
2020-07-06 03:42:12 +00:00
}
}
}
</script>