From f0660d19d2a62f68dc83ecc30859877dcfb1ffdf Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Wed, 29 Mar 2023 15:40:10 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=8E=202023/03/29=20-15:40:01?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/allSections/AllSections.vue | 374 ++++++++++++++------------
 1 file changed, 195 insertions(+), 179 deletions(-)

diff --git a/src/views/allSections/AllSections.vue b/src/views/allSections/AllSections.vue
index fa95d84..4471f89 100755
--- a/src/views/allSections/AllSections.vue
+++ b/src/views/allSections/AllSections.vue
@@ -2,14 +2,15 @@
 	<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>
+			<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="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 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="空星">
@@ -21,195 +22,210 @@
 </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
+export default {
+	name: "AllSections",
+	data() {
+		return {
+			allActive: 0,
+			showStar: [],
+			star: -1,
+			list: [
+				{
+					title: "2023招生官"
+				},
+				{
+					title: "香港澳门台湾留学版"
+				},
+				{
+					title: "美国留学版"
+				},
+				{
+					title: "加拿大留学版"
+				},
+				{
+					title: "英国留学版"
+				},
+				{
+					title: "欧洲留学版"
+				},
+				{
+					title: "欧洲留学版"
+				},
+				{
+					title: "欧洲留学版"
+				},
+				{
+					title: "欧洲留学版"
 				}
-				
-				console.log(this.showStar);
-				this.$forceUpdate()
-			}
+			],
+			starList: [
+				{
+					title: "2023招生季[你好 招生官]",
+					text: "[权威、官方]的第一手信息。"
+				},
+				{
+					title: "2023招生季[你好 招生官]",
+					text: "全球博士项目信息发布，查找23fall博士交流群 点击加入微信群 QQ群号461086769"
+				},
+				{
+					title: "2023招生季[你好 招生官]",
+					text: "[权威、官方]的第一手信息。"
+				}
+			]
+		}
+	},
+	methods: {
+		allClick(index) {
+			this.allActive = index
 		},
-		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
+		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;
+.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;
-		margin-top: 0.666667rem;
-		filter: drop-shadow(0.05rem 0 0.09rem rgba(0, 0, 0, 0.1));
-		margin: 0 0.35rem;
+		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-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;
+}
+
+.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;
-		flex-direction: column;
-		text-align: center;
-		span{
-			height: 1.28rem;
-			line-height: 1.28rem;
-			border-radius: 0.32rem;
+		justify-content: space-between;
+		position: relative;
+
+		.item-content {
+			width: 80%;
+		}
+
+		.item-title {
+			color: #000;
 			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;
+
+		.item-text {
+			margin: 0.266667rem 0;
+			color: #aaa;
+			font-size: 0.28rem;
 		}
-		.allSections-right-item{
-			padding: 0.4rem 0;
-			margin: 0 0.32rem 0 0.7rem;
-			border-bottom: 0.013333rem solid #ddd;
+
+		.item-star {
 			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;
+			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>
\ No newline at end of file
+}</style>
\ No newline at end of file