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: "全球博士项目信息发布，查找23fall博士交流群 点击加入微信群 QQ群号461086769"
				},
				{
					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));
	margin: .64rem 0.35rem 0;
}

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