a1300399510@qq.com 提交于 2023/03/30 -12:00:02
This commit is contained in:
parent
0d44925907
commit
02078d3212
@ -23,6 +23,8 @@
|
|||||||
<div class="search-label">
|
<div class="search-label">
|
||||||
<span>香港大学</span>
|
<span>香港大学</span>
|
||||||
<span>香港大学</span>
|
<span>香港大学</span>
|
||||||
|
<span>香港大学</span>
|
||||||
|
<router-link to="/searchResult">香港大学</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 热门搜索 -->
|
<!-- 热门搜索 -->
|
||||||
|
|||||||
@ -1,231 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,123 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="recommend">
|
|
||||||
<!-- 热门版块 -->
|
|
||||||
<div class="hot-box">
|
|
||||||
<div class="hot-label" :class="{ 'active': hotActive == index }" v-for="(item, index) in list" :key="index"
|
|
||||||
@click="hotLabelClick(index)">{{ item.label }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 路径 -->
|
|
||||||
<plate-navigation stairname="香港澳门台湾" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
|
|
||||||
<!-- <div class="path-box">
|
|
||||||
<div>论坛</div>
|
|
||||||
<div class="oneEllipsis">论坛论坛论坛论坛论坛</div>
|
|
||||||
<div class="oneEllipsis">论坛</div>
|
|
||||||
</div> -->
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
<section>
|
|
||||||
<!-- 帖子 -->
|
|
||||||
<div class="card-box">
|
|
||||||
<div class="top moreEllipsis">
|
|
||||||
<div class="top-label">经验</div>
|
|
||||||
<div class="top-title">23fall 美国llm 求定位</div>
|
|
||||||
</div>
|
|
||||||
<div class="center">
|
|
||||||
<div class="center-text moreEllipsis">背景：生于80年代中期，英语基础不好，备考托福3个月，刚好100分。2018年8月开始读LLM. 读书期间Point
|
|
||||||
Bar6666666666666666666666</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="bottom-box">
|
|
||||||
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
|
|
||||||
<div class="bottom-name">匿名用户</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-box">
|
|
||||||
<div class="bottom-right">
|
|
||||||
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
|
||||||
<div>1552</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-right">
|
|
||||||
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
|
||||||
<div>12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 精华 -->
|
|
||||||
<div class="rightTop">
|
|
||||||
<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
|
|
||||||
<span>精华</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-box">
|
|
||||||
<div class="top moreEllipsis">
|
|
||||||
<div class="top-label">经验</div>
|
|
||||||
<div class="top-title">23fall 美国llm 求定位</div>
|
|
||||||
</div>
|
|
||||||
<div class="center">
|
|
||||||
<div class="center-text-visible">
|
|
||||||
回复可见
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<div class="bottom-box">
|
|
||||||
<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
|
|
||||||
<div class="bottom-name">匿名用户</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-box">
|
|
||||||
<div class="bottom-right">
|
|
||||||
<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
|
|
||||||
<div>1552</div>
|
|
||||||
</div>
|
|
||||||
<div class="bottom-right">
|
|
||||||
<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
|
|
||||||
<div>12</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 广告 -->
|
|
||||||
<div class="banner-box">
|
|
||||||
<svg-icon icon-class="test-banner" class-name="banner"></svg-icon>
|
|
||||||
</div>
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="paging-box">
|
|
||||||
<el-pagination layout="prev, pager, next" :total="100">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import plateNavigation from '@/components/PlateNavigation.vue'
|
|
||||||
export default {
|
|
||||||
name: "Recommend",//推荐阅读
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
hotActive: -1,//热门版块活跃点击
|
|
||||||
list: [
|
|
||||||
{
|
|
||||||
label: "香港留学"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "香港留学"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "香港留学"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "香港留学"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
plateNavigation
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
hotLabelClick(index) {
|
|
||||||
this.hotActive = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style></style>
|
|
||||||
@ -83,12 +83,8 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
// 处理点击取消的返回上一页
|
// 处理点击取消的返回上一页
|
||||||
handCancel() {
|
handCancel() {
|
||||||
// console.log("this.$router",this.$route.params.page > 214);
|
if (this.$route.fullPath != "/") this.$router.go(-1)
|
||||||
this.$router.go(-1)
|
else this.$router.push('/recommend')
|
||||||
// console.log(this.$router.params.page, "this.$route.params.page");
|
|
||||||
// if (this.$route.params.page > 1) this.$router.go(-1)
|
|
||||||
// else this.$router.push('/recommend')
|
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user