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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 290
      src/pages/sfel/index.vue

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

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

Write Preview
Loading…
Cancel
Save