a1300399510@qq.com 提交于 2023/03/29 -15:40:01
This commit is contained in:
parent
45571c6f35
commit
f0660d19d2
@ -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>
|
||||
}</style>
|
||||
Loading…
x
Reference in New Issue
Block a user