zhxy-desk/pages/studentRanked/tag.vue

<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>