<template> <view class="tag"> <view @click="itemClick(item)" :class="item.type == 1 ? 'outstanding' :'criticize'" v-for="(item,index) in list" :key="index" class="tag-item"> {{item.tab_name}} <view :class="item.type == 1 ? 'outstanding' :'criticize'" class="tag-item-right"> {{item.type == 1 ?'+':'-'}}{{item.num}} </view> <view v-if="item.show" :class="item.type == 1 ? 'outstanding' :'criticize'" class="tag-item-score"> <view @click="tagClick(item,item1)" v-for="(item1,index1) in [1,2,3,4]" :key="index1" class="tag-item-score-value"> {{item.type == 1 ?'+':'-'}}{{item1}} <!-- :class="color(item,index1)" --> </view> <view :style="`${item.type == 1 ? 'border-top: 5px solid rgba(228, 255, 250, 1)':'border-top: 5px solid rgba(255, 236, 229, 1)'}`" class="tag-item-score-bottom"> </view> </view> </view> </view> </template> <script> export default { components: { }, props: { list: { type: Array, default: () => [] } }, data() { return { active: 0 }; }, methods: { itemClick(item) { this.list.forEach(it => { if (it.tab_name == item.tab_name) { it.show = true } else { it.show = false } }) this.$emit('update:list', this.list) }, color(item, index) { if (index == this.active) { if (item.type == 'outstanding') { return 'blue' } else { return 'red' } } }, tagClick(item, score) { this.$emit('click', item, score) } }, watch: { list() { } }, mounted() { console.log(1111); } } </script> <style lang="scss" scoped> .tag { display: flex; flex-wrap: wrap; .tag-item { margin-bottom: 32rpx; padding: 20rpx 30rpx; margin-right: 10rpx; border-radius: 40rpx; position: relative; .tag-item-right { position: absolute; right: 0; top: -20rpx; width: 40rpx; border-radius: 50%; height: 40rpx; text-align: center; } .tag-item-score { position: absolute; top: -90rpx; left: 0; display: flex; padding: 10rpx; border-radius: 5px; .tag-item-score-value { width: 50rpx; } } } } .outstanding { background-color: rgba(228, 255, 250, 1); color: rgba(29, 206, 169, 1); } .criticize { background-color: rgba(255, 236, 229, 1); color: rgba(249, 132, 134, 1); } .tag-item-score-bottom { width: 0; height: 0; border-top: 5px solid skyblue; border-right: 5px solid transparent; border-left: 5px solid transparent; position: absolute; bottom: -5px; left: 10px; } .active {} .red { background-color: rgba(249, 132, 134, 1); color: #fff; border-radius: 50%; text-align: center; width: 46rpx; height: 46rpx; } .blue { background-color: rgba(29, 206, 169, 1); color: #fff; text-align: center; border-radius: 50%; width: 46rpx; height: 46rpx; } </style>