GterForumWeB/src/views/allSections/AllSections.vue

<template>
	<div class="allSections">
		<!-- 左选项 -->
		<div class="allSections-left">
			<span v-for="(item,index) in list" :class="{'active':index == allActive}" :key="index" @click="allClick(index)">{{item.title}}</span>
		</div>
		<!-- 右选项 -->
		<div class="allSections-right" :class="{'active':index == allActive}" v-for="(item,index) in list" :key="index">
			<div class="allSections-right-item" v-for="(i,k) in starList" :key="k">
				<div class="item-content">
					<div class="item-title">{{i.title}}</div>
					<div class="item-text">{{i.text}}</div>
				</div>
				<div class="item-star" @click="starClick(k)">
					<img v-if="!showStar[k].checked" src="~assets/img/allSections/nullStar.png" alt="空星">
					<img v-else src="~assets/img/allSections/star.png" alt="实星">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "AllSections",
		data() {
			return {
				allActive: 0,
				showStar: [],
				star: -1,
				list:[
					{
						title: "2023招生官"
					},
					{
						title: "香港澳门台湾留学版"
					},
					{
						title: "美国留学版"
					},
					{
						title: "加拿大留学版"
					},
					{
						title: "英国留学版"
					},
					{
						title: "欧洲留学版"
					},
					{
						title: "欧洲留学版"
					},
					{
						title: "欧洲留学版"
					},
					{
						title: "欧洲留学版"
					}
				],
				starList:[
					{
						title: "2023招生季[你好 招生官]",
						text: "[权威、官方]的第一手信息。"
					},
					{
						title: "2023招生季[你好 招生官]",
						text: "[权威、官方]的第一手信息。"
					},
					{
						title: "2023招生季[你好 招生官]",
						text: "[权威、官方]的第一手信息。"
					}
				]
			}
		},
		methods: {
			allClick(index) {
				this.allActive = index
			},
			starClick(k) {
				this.star = k
				if(this.showStar[k].checked){
					this.showStar[k].checked = false
				}else{
					this.showStar[k].checked = true
				}
				
				console.log(this.showStar);
				this.$forceUpdate()
			}
		},
		created() {
			for(var i = 0; i < this.starList.length; i++) {
				this.showStar.push(this.starList[i])
			}
			for(let i in this.showStar){
				this.showStar[i].checked = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.allSections{
		display: flex;
		flex-direction: row;
		border-radius: 0.32rem;
		margin-top: 0.666667rem;
		filter: drop-shadow(0.05rem 0 0.09rem rgba(0, 0, 0, 0.1));
	}
	.allSections-left{
		width: 35%;
		border-left: 0.013333rem solid #ddd;
		background-color: rgba(235, 235, 235, 0.556862745098039);
		border-radius: 0.32rem 0 0 0.32rem;
		display: flex;
		flex-direction: column;
		text-align: center;
		span{
			height: 1.28rem;
			line-height: 1.28rem;
			border-radius: 0.32rem;
			font-size: 0.32rem;
			// padding: 0 0 0 0.2rem;
			position: relative;
			&.active{
				background-color: #fff;
				font-weight: bolder;
				border-radius: 0.32rem 0 0 0.32rem;
				color: #000;
				width: 105%;
				margin-left: -0.133333rem;
				filter: drop-shadow(0 0 0.08rem rgba(0, 0, 0, 0.1));
			}
			&.active::before{
				content: "";
				width: 0.36rem;
				height: 101%;
				position: absolute;
				right: 0;
				top: -100%;
				box-shadow: 0.14rem 0.14rem #fff;
				border-radius: 0 0 0.32rem 0;
			}
			&.active::after{
				content: "";
				width: 0.36rem;
				height: 101%;
				position: absolute;
				right: 0;
				bottom: -100%;
				box-shadow: 0.14rem -0.14rem #fff;
				border-radius: 0 0.32rem 0 0;
			}
			&:first-child.active::before{
				display: none;
			}
			&:last-child.active::after{
				display: none;
			}
		}
	}
	.allSections-right{
		width: 65%;
		background-color: #fff;
		border-radius: 0 0.32rem 0.32rem 0;
		/* box-shadow: 0px 0px 8px rgb(0 0 0 / 20%); */
		display: flex;
		flex-direction: column;
		z-index: 1;
		display: none;
		padding-bottom: 0.4rem;
		&.active{
			display: block;
		}
		.allSections-right-item{
			padding: 0.4rem 0;
			margin: 0 0.32rem 0 0.7rem;
			border-bottom: 0.013333rem solid #ddd;
			display: flex;
			justify-content: space-between;
			position: relative;
			.item-content{
				width: 80%;
			}
			.item-title{
				color: #000;
				font-size: 0.32rem;
			}
			.item-text{
				margin: 0.266667rem 0;
				color: #aaa;
				font-size: 0.28rem;
			}
			.item-star{
				display: flex;
				align-items: center;
				img{
					width: 20px;
				}
			}
			&::before{
				content: "";
				width: 0.12rem;
				height: 0.32rem;
				border-radius: 0.16rem;
				position: absolute;
				top: 0.48rem;
				left: -0.35rem;
				background-color: #62b1ff;
			}
		}
	}
</style>