数据穿透优化
This commit is contained in:
“hhk”
parent
ad17736e30
commit
b8f7311e67
@ -40,35 +40,41 @@
|
||||
</div>
|
||||
|
||||
<!-- 实践项目 -->
|
||||
<div v-if="item.id == '1813831932748894208'" class="list">
|
||||
<div v-else-if="item.id == '1813831932748894208'" class="swiper-list">
|
||||
<div class="item" v-for="(item, index) in teachingAchievements2" :key="index">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
<img :src="imgurl + item.contentImg" alt="" class="imgWO">
|
||||
</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
<div class="desc">
|
||||
<div class="desc" v-html="item.summary"></div>
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
|
||||
<div class="time">{{ item.publishDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实践项目 -->
|
||||
<div v-if="item.id == '1813832045458231296'" class="list">
|
||||
<!-- 自制仪器设备 -->
|
||||
<div v-else-if="item.id == '1813832045458231296'" class="swiper-list">
|
||||
<div class="item" v-for="(item, index) in teachingAchievements3" :key="index">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
<div class="desc">
|
||||
<div class="desc" v-html="item.summary"></div>
|
||||
</div>
|
||||
<!-- <div class="desc">
|
||||
{{ item.summary }}
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 通用 -->
|
||||
<div class="neirong" v-html="pageContextList[index]" v-else></div>
|
||||
|
||||
<!-- 详情数据穿透 -->
|
||||
<div class="team" v-if="currentActive == 999 && isShowDetails">
|
||||
<div class="neirong" v-html="detailsContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -100,6 +106,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 实践项目 -->
|
||||
<!-- <div class="xjxm" v-if="currentActive == 2">
|
||||
<div class="list">
|
||||
@ -115,6 +122,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" class="">
|
||||
</el-pagination>
|
||||
@ -158,6 +166,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowDetails:false,
|
||||
detailsContent:"",
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
teachingAchievements: [],
|
||||
teachingAchievements2: [],
|
||||
@ -196,12 +206,18 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDetails(value){
|
||||
this.isShowDetails = true;
|
||||
this.currentActive = 999;
|
||||
this.detailsContent = value.contentDetail;
|
||||
},
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
this.currentActive = value
|
||||
this.currentActive = value;
|
||||
this.isShowDetails = false;
|
||||
},
|
||||
initPageData() {
|
||||
|
||||
@ -220,17 +236,19 @@ export default {
|
||||
});
|
||||
|
||||
this.pageContextList.push(context);
|
||||
|
||||
//实践平台
|
||||
if (cloumnItem.id == "1813831828977618944") {
|
||||
cloumnItem.children.list.forEach(element => {
|
||||
this.teachingAchievements.push(element);
|
||||
});
|
||||
}
|
||||
//实践项目
|
||||
if (cloumnItem.id == "1813831932748894208") {
|
||||
cloumnItem.children.list.forEach(element => {
|
||||
this.teachingAchievements2.push(element);
|
||||
});
|
||||
}
|
||||
//自制仪器设备
|
||||
if (cloumnItem.id == "1813832045458231296") {
|
||||
cloumnItem.children.list.forEach(element => {
|
||||
this.teachingAchievements3.push(element);
|
||||
@ -611,7 +629,7 @@ export default {
|
||||
|
||||
.list .item .img {
|
||||
width: 100%;
|
||||
height: 287px;
|
||||
height: 19rem;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -945,4 +963,71 @@ export default {
|
||||
margin-bottom: -85px;
|
||||
/* padding-bottom: 20px; */
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
width: 80%;
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.swiper-list .item {
|
||||
width: 31%;
|
||||
height: 432px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper-list .item .img {
|
||||
width: 100%;
|
||||
height: 287px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-list .item .img img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-list .item .tt {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #005375;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.swiper-list .item .desc {
|
||||
overflow: hidden;
|
||||
/** 隐藏超出的内容 **/
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
/** 多行 **/
|
||||
display: -webkit-box;
|
||||
/** 对象作为伸缩盒子模型显示 **/
|
||||
-webkit-box-orient: vertical;
|
||||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||||
-webkit-line-clamp: 2;
|
||||
/** 显示的行数 **/
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.swiper-list .item .time {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #005375;
|
||||
}
|
||||
|
||||
.equip-img {
|
||||
width: 100%;
|
||||
height: 19rem;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
|
||||
<!-- 详情数据穿透 -->
|
||||
<div class="team" v-if="currentActive == 999 && isShowDetails">
|
||||
<div class="neirong" v-html="detailsContent"></div>
|
||||
</div>
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
pageContextList: [],
|
||||
teachingAchievements: [],
|
||||
detailsContent:[],
|
||||
detailsContent:"",
|
||||
teachingTeam: [],
|
||||
nav: [
|
||||
// { name: '教学团队' },
|
||||
|
||||
@ -13,25 +13,71 @@
|
||||
<div class="left"> <img src="../../assets/gw/home.png" alt="">
|
||||
<p><a href="/gw">首页</a><i class="el-icon-arrow-right"></i> <span href="">虚拟专业频道</span></p>
|
||||
</div>
|
||||
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
<!-- <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
@click="getCurrentActive(index)">
|
||||
{{ item.categoryName }}
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-swiper">
|
||||
<!-- main -->
|
||||
<!-- <div class="top-swiper">
|
||||
main
|
||||
<div v-for="(item, index) in nav " :key=index>
|
||||
<div class="teaching-list" v-if="currentActive == index">
|
||||
<div class="neirong" v-html="pageContextList[index]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="list"> -->
|
||||
<div v-if="!isShowDetails">
|
||||
<!-- 顶部块 -->
|
||||
<div class="top-swiper">
|
||||
|
||||
<swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
|
||||
<swiper-slide class="banner-box" v-for="(item, index) in teachingAchievements" :key="index" >
|
||||
<div class="left">
|
||||
<img :src="imgurl + item.contentImg" alt="" class="imgWO">
|
||||
<!-- <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" > -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="time">{{ item.publishDate }}</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
<div class="desc">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
<div class="more" @click="showDetails(item)">
|
||||
<i class="el-icon-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
</div>
|
||||
<!-- 下部块 -->
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item, index) in teachingAchievements " :key="index">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="" class="imgWO">
|
||||
</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
<div class="desc">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
<div class="time">{{ item.publishDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
<div class="page-box">
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" class="">
|
||||
</el-pagination>
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" class="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详情数据穿透 -->
|
||||
<div class="team" v-if="isShowDetails">
|
||||
<div class="neirong" v-html="detailsContent"></div>
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
@ -57,6 +103,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowDetails:false,
|
||||
detailsContent:"",
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
topSwiperData: {},
|
||||
teachingAchievements: [],
|
||||
pageContextList: [],
|
||||
swiperOptions: {
|
||||
navigation: {
|
||||
@ -93,7 +144,7 @@ export default {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
created() {
|
||||
// 页面加载完毕调用
|
||||
this.initPageData();
|
||||
},
|
||||
@ -102,6 +153,11 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDetails(value){
|
||||
debugger;
|
||||
this.isShowDetails = true;
|
||||
this.detailsContent = value.contentDetail;
|
||||
},
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
@ -126,6 +182,18 @@ export default {
|
||||
});
|
||||
|
||||
this.pageContextList.push(context);
|
||||
// 虚拟专业频道
|
||||
if (cloumnItem.id == "1818243334464999424") {
|
||||
if (cloumnItem.children) {
|
||||
//取首条数据作为顶部块展示
|
||||
// this.topSwiperData = cloumnItem.children.list[0];
|
||||
//除首条以外，用作下部块展示
|
||||
for (let i = 0; i < cloumnItem.children.list.length; i++) {
|
||||
|
||||
this.teachingAchievements.push(cloumnItem.children.list[i]);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// cloumnItem.categoryName
|
||||
});
|
||||
@ -149,10 +217,12 @@ export default {
|
||||
width: 240px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.page-box{
|
||||
|
||||
.page-box {
|
||||
width: 82%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
/* 圆形分页按钮样式 */
|
||||
::v-deep .el-pagination .el-pager li:not(.disabled) {
|
||||
border-radius: 100%;
|
||||
@ -622,4 +692,6 @@ export default {
|
||||
line-height: 18px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user