a1300399510@qq.com 提交于 2023/03/29 -15:40:01

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" :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-item" v-for="(i, k) in starList" :key="k">
 				<div class="item-content">
-					<div class="item-title">{{i.title}}</div>
+					<div class="item-title">{{ i.title }}</div>
-					<div class="item-text">{{i.text}}</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,14 +22,14 @@
 </template>
 
 <script>
-	export default {
+export default {
 	name: "AllSections",
 	data() {
 		return {
 			allActive: 0,
 			showStar: [],
 			star: -1,
-				list:[
+			list: [
 				{
 					title: "2023招生官"
 				},
@@ -57,14 +58,14 @@
 					title: "欧洲留学版"
 				}
 			],
-				starList:[
+			starList: [
 				{
 					title: "2023招生季[你好 招生官]",
 					text: "[权威、官方]的第一手信息。"
 				},
 				{
 					title: "2023招生季[你好 招生官]",
-						text: "[权威、官方]的第一手信息。"
+					text: "全球博士项目信息发布，查找23fall博士交流群 点击加入微信群 QQ群号461086769"
 				},
 				{
 					title: "2023招生季[你好 招生官]",
@@ -79,9 +80,9 @@
 		},
 		starClick(k) {
 			this.star = k
-				if(this.showStar[k].checked){
+			if (this.showStar[k].checked) {
 				this.showStar[k].checked = false
-				}else{
+			} else {
 				this.showStar[k].checked = true
 			}
 
@@ -90,26 +91,27 @@
 		}
 	},
 	created() {
-			for(var i = 0; i < this.starList.length; i++) {
+		for (var i = 0; i < this.starList.length; i++) {
 			this.showStar.push(this.starList[i])
 		}
-			for(let i in this.showStar){
+		for (let i in this.showStar) {
 			this.showStar[i].checked = false
 		}
 	}
-	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.allSections{
+.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: 0 0.35rem;
+	margin: .64rem 0.35rem 0;
-	}
+}
-	.allSections-left{
+
+.allSections-left {
 	width: 35%;
 	border-left: 0.013333rem solid #ddd;
 	background-color: rgba(235, 235, 235, 0.556862745098039);
@@ -117,14 +119,16 @@
 	display: flex;
 	flex-direction: column;
 	text-align: center;
-		span{
+
+	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{
+
+		&.active {
 			background-color: #fff;
 			font-weight: bolder;
 			border-radius: 0.32rem 0 0 0.32rem;
@@ -133,7 +137,8 @@
 			margin-left: -0.133333rem;
 			filter: drop-shadow(0 0 0.08rem rgba(0, 0, 0, 0.1));
 		}
-			&.active::before{
+
+		&.active::before {
 			content: "";
 			width: 0.36rem;
 			height: 101%;
@@ -143,7 +148,8 @@
 			box-shadow: 0.14rem 0.14rem #fff;
 			border-radius: 0 0 0.32rem 0;
 		}
-			&.active::after{
+
+		&.active::after {
 			content: "";
 			width: 0.36rem;
 			height: 101%;
@@ -153,15 +159,18 @@
 			box-shadow: 0.14rem -0.14rem #fff;
 			border-radius: 0 0.32rem 0 0;
 		}
-			&:first-child.active::before{
+
+		&:first-child.active::before {
 			display: none;
 		}
-			&:last-child.active::after{
+
+		&:last-child.active::after {
 			display: none;
 		}
 	}
-	}
+}
-	.allSections-right{
+
+.allSections-right {
 	width: 65%;
 	background-color: #fff;
 	border-radius: 0 0.32rem 0.32rem 0;
@@ -171,36 +180,44 @@
 	z-index: 1;
 	display: none;
 	padding-bottom: 0.4rem;
-		&.active{
+
+	&.active {
 		display: block;
 	}
-		.allSections-right-item{
+
+	.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{
+
+		.item-content {
 			width: 80%;
 		}
-			.item-title{
+
+		.item-title {
 			color: #000;
 			font-size: 0.32rem;
 		}
-			.item-text{
+
+		.item-text {
 			margin: 0.266667rem 0;
 			color: #aaa;
 			font-size: 0.28rem;
 		}
-			.item-star{
+
+		.item-star {
 			display: flex;
 			align-items: center;
-				img{
+
+			img {
 				width: 20px;
 			}
 		}
-			&::before{
+
+		&::before {
 			content: "";
 			width: 0.12rem;
 			height: 0.32rem;
@@ -211,5 +228,4 @@
 			background-color: #62b1ff;
 		}
 	}
-	}
+}</style>
-</style>