jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

sfel联调

Browse Source
mobile
yujialong 2 years ago
parent fa4d149b79
commit 373f1646a1
1 changed files with 136 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 228
      src/pages/sfel/index.vue

228
src/pages/sfel/index.vue
Unescape View File

@ -3,24 +3,22 @@
<el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <el-carousel height="480px" :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)"> <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" height="959" :src="item.pic" alt="" @click="openLink(item)">
<img :src="item.pic" alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="block banner-block"> <div class="block banner-block">
<div class="inner" v-if="modules[1].list[curColumn].articles.length"> <div class="inner">
<div class="title"> <div class="title">
<h5> <h5>
新闻动态 {{ modules[1].form.title }}
<span class="sub"> NEWS CENTER</span> <span class="sub">{{ modules[1].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])"> <template v-if="articles.length">
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
<img width="50%" height="410" :src="curArticle.titleImg" alt=""> <img width="50%" height="410" :src="curArticle.titleImg" alt="">
<div class="right"> <div class="right">
<h6>{{ curArticle.title }}</h6> <h6>{{ curArticle.title }}</h6>
@ -33,17 +31,18 @@
</div> </div>
<ul class="card"> <ul class="card">
<template v-for="(item, i) in modules[1].list[curColumn].articles"> <template v-for="(item, i) in articles">
<li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"> <li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic" :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p> <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
<div class="des">{{ item.title }}</div> <div class="des">{{ item.title }}</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])"> <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].list[curColumn])">
</div> </div>
</li> </li>
</template> </template>
</ul> </ul>
</template>
</div> </div>
</div> </div>
@ -51,53 +50,43 @@
<div class="inner lg"> <div class="inner lg">
<div class="title"> <div class="title">
<h5> <h5>
通知公告 {{ modules[3].form.title }}
<span class="sub"> ANNOUNCEMENTS</span> <span class="sub">{{ modules[3].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<div class="shop-shows" v-if="articles.length"> <div class="shop-shows" v-if="articles1.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)"> <div class="left wow fadeInLeft" data-wow-delay="0.5s">
<el-carousel height="432px"> <el-carousel height="432px">
<el-carousel-item> <template v-for="(item, i) in articles1">
<div class="item"> <el-carousel-item v-if="i < 4" :key="i">
<img src="@/assets/images/survey3.png" alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<img src="@/assets/images/survey3.png" alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item"> <div class="item">
<img src="@/assets/images/survey3.png" alt=""> <img :src="item.titleImg" alt="">
<p class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</p> <p class="text">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</template>
</el-carousel> </el-carousel>
<div class="cards" style="margin-top: 18px;"> <div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;">
<h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6> <h6>{{ articles1[4].title }}</h6>
<div class="sum">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div> <div class="sum">{{ articles1[4].mainBody }}</div>
<p class="date">2022/02/26</p> <p class="date">{{ articles1[4].createTime }}</p>
</div> </div>
<div class="card-wrap"> <div class="card-wrap">
<div class="cards" style="margin-right: 18px"> <div v-if="articles1.length > 5" class="cards" style="margin-right: 18px">
<h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6> <h6>{{ articles1[5].title }}</h6>
<p class="date">2022/02/26</p> <p class="date">{{ articles1[5].createTime }}</p>
</div> </div>
<div class="cards"> <div v-if="articles1.length > 6" class="cards">
<h6>关于2021年度深圳综合粒子设施研究院采购意向公开表</h6> <h6>{{ articles1[6].title }}</h6>
<p class="date">2022/02/26</p> <p class="date">{{ articles1[6].createTime }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="right wow fadeInRight" data-wow-delay="0.5s"> <div v-if="articles1.length > 7" class="right wow fadeInRight" data-wow-delay="0.5s">
<ul class="card-list"> <ul class="card-list">
<template v-for="(item, i) in articles"> <template v-for="(item, i) in articles">
<li v-if="i > 2" :key="i"> <li v-if="i > 6 && i < 10" :key="i">
<img class="pic" :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -106,9 +95,9 @@
</li> </li>
</template> </template>
</ul> </ul>
<div class="slide"> <div v-if="articles1.length > 10" class="slide">
<img src="@/assets/images/survey3.png" alt=""> <img :src="articles1[10].titleImg" alt="">
<p class="text">深圳综合粒子设施研究院与中国科学院</p> <p class="text">{{ articles1[10].title }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -119,23 +108,23 @@
<div class="inner lg"> <div class="inner lg">
<div class="title"> <div class="title">
<h5> <h5>
学术活动 {{ modules[5].form.title }}
<span class="sub"> ACADEMIC ACTIVITIES</span> <span class="sub">{{ modules[5].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<div class="shows" v-if="articles1.length"> <div class="shows" v-if="articles2.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)"> <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
<img width="100%" height="100%" :src="articles1[0].titleImg" alt=""> <img width="100%" height="100%" :src="articles2[0].titleImg" alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">{{ articles2[0].title }}</div>
</div> </div>
<ul class="card-list wow fadeInRight" data-wow-delay="0.5s"> <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
<template v-for="(item, i) in articles1"> <template v-for="(item, i) in articles2">
<li v-if="i" :key="i" @click="toArtice(item, modules[5].form)"> <li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
<img class="pic" :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p> <p class="sum">{{ item.summary }}</p>
<p v-if="item.keynoteSpeaker" class="text"> <p v-if="item.keynoteSpeaker" class="text">
<img class="icon" src="@/assets/images/mine.png" alt=""> <img class="icon" src="@/assets/images/mine.png" alt="">
{{ item.keynoteSpeaker }} {{ item.keynoteSpeaker }}
@ -160,43 +149,37 @@
<div class="inner"> <div class="inner">
<div class="title"> <div class="title">
<h5> <h5>
媒体采风 {{ modules[7].form.title }}
<span class="sub"> MEDIA COVERAGE</span> <span class="sub">{{ modules[7].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<div class="media-wrap"> <div v-if="articles3.length" class="media-wrap">
<div class="left"> <div class="left">
<div class="slides"> <div class="slides">
<div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px"> <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px">
<img width="100%" height="100%" :src="articles1[0].titleImg" alt=""> <img width="100%" height="100%" :src="articles3[0].titleImg" alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">{{ articles3[0].title }}</div>
</div> </div>
<div class="item wow fadeInLeft" data-wow-delay="0.5s"> <div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s">
<img width="100%" height="100%" :src="articles1[0].titleImg" alt=""> <img width="100%" height="100%" :src="articles3[1].titleImg" alt="">
<div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div> <div class="text">{{ articles3[1].title }}</div>
</div> </div>
</div> </div>
<ul class="list"> <ul class="list">
<li> <template v-for="(item, i) in articles3">
<h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6> <li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div> <h6>{{ item.title }}</h6>
</li> <div class="des">{{ item.mainBody }}</div>
<li>
<h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
<div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
</li>
<li>
<h6>对话未来科学奖得主杨学明：真正自立自强要靠在实验科学先进仪器</h6>
<div class="des">6月12日上午，深圳综合粒子设施研究院与深圳大学签署战略合作框架协议。深圳大学党委书记、校长李清泉深大学签署圳大学党委…</div>
</li> </li>
</template>
</ul> </ul>
</div> </div>
<div class="right"> <div v-if="articles3.length > 5" class="right">
<img src="@/assets/images/survey3.png" alt=""> <img :src="articles3[5].titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>关于2021年度深圳综合粒子设施研究院采购公开表</h6> <h6>{{ articles3[5].title }}</h6>
<div class="des">把一个基因切成两段，分别翻译成两段蛋白片段，还会有原来的功能吗？实多数蛋白片段会…</div> <div class="des">{{ articles3[5].mainBody }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -207,19 +190,19 @@
<div class="inner"> <div class="inner">
<div class="title"> <div class="title">
<h5> <h5>
出版物 {{ modules[9].form.title }}
<span class="sub"> PUBLICATIONS</span> <span class="sub">{{ modules[9].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<ul class="news"> <ul class="news">
<!-- <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[10].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des">{{ item.des }}</div> <div class="des">{{ item.des }}</div>
</div> </div>
</li> --> </li>
</ul> </ul>
</div> </div>
</div> </div>
@ -228,33 +211,29 @@
<div class="inner"> <div class="inner">
<div class="title"> <div class="title">
<h5> <h5>
工程进展 {{ modules[11].form.subTitle }}
<span class="sub">PRROJECT PROGRESS</span> <span class="sub">{{ modules[11].form.subTitle }}</span>
</h5> </h5>
<span class="more">MORE</span> <span class="more">MORE</span>
</div> </div>
<template v-if="articles4.length">
<div class="slide"> <div class="slide">
<div class="texts"> <div class="texts">
<h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6> <h6>{{ articles4[0].title }}</h6>
<div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段。对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标，面向国民经济主战场和世界科技前沿…</div> <div class="des">{{ articles4[0].title }}</div>
<div class="meta">发表日期：2022.01.10 &emsp;浏览量：备份</div> <div class="meta">发表日期：{{ articles4[0].createTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
</div> </div>
<img class="pic" src="@/assets/images/survey3.png" alt=""> <img class="pic" :src="articles4[0].titleImg" alt="">
</div> </div>
<ul class="list"> <ul class="list">
<li> <template v-for="(item, i) in articles3">
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div> <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<p class="date">2022.10.10</p> <div class="des">{{ item.title }}</div>
</li> <p class="date">{{ item.createTime }}</p>
<li>
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
<p class="date">2022.10.10</p>
</li>
<li>
<div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
<p class="date">2022.10.10</p>
</li> </li>
</template>
</ul> </ul>
</template>
</div> </div>
</div> </div>
@ -282,9 +261,11 @@ export default {
curColumn: 0, curColumn: 0,
articles: [], articles: [],
articles1: [], articles1: [],
articles2: [],
articles3: [],
articles4: [],
curInd: 0, curInd: 0,
curArticle: {}, curArticle: {},
timer: null
} }
}, },
mounted() { mounted() {
@ -303,34 +284,35 @@ export default {
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json) console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
// 获取文章列表 // 获取文章列表
const { list } = json[1] if (json[2].form.column.length) {
if (list.length) { const { column, articleNum } = json[2].form
list.map((e, i) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
if (e.site && e.column.length) { this.articles = Util.removeTag(data.slice(0, articleNum || 7))
const id = e.column[e.column.length - 1] this.curArticle = this.articles[0]
e.id = id }).catch(err => {})
if (e.columnTitle === 2) e.columnName = e.columnTitleCustom }
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => { if (json[4].form.column.length) {
const list = Util.removeTag(data.slice(0, e.articleNum || 6)) const { column, articleNum } = json[4].form
this.$set(e, 'articles', list) this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
if (list.length && !i) this.curArticle = list[0] this.articles1 = Util.removeTag(data.slice(0, articleNum || 11))
}).catch(err => {}) }).catch(err => {})
} else {
this.$set(e, 'articles', [])
} }
}) if (json[6].form.column.length) {
const { column, articleNum } = json[6].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => {})
} }
if (json[8].form.column.length) {
if (json[3].form.column.length) { const { column, articleNum } = json[8].form
const { column, site, articleNum } = json[3].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 6)) this.articles3 = Util.removeTag(data.slice(0, articleNum || 6))
}).catch(err => {}) }).catch(err => {})
} }
if (json[5].form.column.length) { if (json[12].form.column.length) {
const { column, site, articleNum } = json[5].form const { column, articleNum } = json[12].form
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles1 = Util.removeTag(data.slice(0, articleNum || 4)) this.articles4 = Util.removeTag(data.slice(0, articleNum || 4))
}).catch(err => {}) }).catch(err => {})
} }
@ -345,14 +327,14 @@ export default {
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.curInd++ this.curInd++
if (this.curInd > 2) this.curInd = 0 if (this.curInd > 2) this.curInd = 0
this.curArticle = this.modules[1].list[this.curColumn].articles[this.curInd] this.curArticle = this.articles[this.curInd] || {}
}, 5000) }, 5000)
}, },
// 手动轮播切换 // 手动轮播切换
switchCarousel(i) { switchCarousel(i) {
if (this.curInd !== i) { if (this.curInd !== i) {
this.curInd = i this.curInd = i
this.curArticle = this.modules[1].list[this.curColumn].articles[i] this.curArticle = this.articles[this.curInd] || {}
} }
}, },
// tab回调 // tab回调
@ -446,7 +428,7 @@ export default {
.banner-block { .banner-block {
background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat; background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat;
} }
.banner { .sfel-banner {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.pic { .pic {

Write Preview
Loading…
Cancel
Save