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

edu、news

Browse Source
mobile
yujialong 2 years ago
parent 9fd7b9a386
commit 7d1bf9814e
4 changed files with 196 additions and 158 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. 75
      src/pages/edu/index.vue
  2. 4
      src/pages/home/index.vue
  3. 268
      src/pages/news/index.vue
  4. 7
      src/styles/page/page.scss

75
src/pages/edu/index.vue
Unescape View File

@ -1,20 +1,29 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<img width="100%" height="480" src="@/assets/images/edu/1.png" alt=""> <el-carousel height="480px" :interval="6000">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div class="banner-item" @click="openLink(item)">
<img :src="item.pic" alt="">
<p class="banner-name">NEWS & EVENTS</p>
</div>
</el-carousel-item>
</template>
</el-carousel>
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">Partnership</h2> <h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">Together, Stronger</p> <p class="intro">{{ modules[1].form.des }}</p>
<img width="100%" height="536" src="@/assets/images/edu/2.png" alt=""> <img :class="{'cursor-pointer': modules[1].form.link}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">Programs</h2> <h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">Our campus is Shenzhen and Beyound</p> <p class="intro">{{ modules[2].form.des }}</p>
<img width="100%" height="536" src="@/assets/images/edu/2.png" alt=""> <img :class="{'cursor-pointer': modules[2].form.link}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
</div> </div>
</div> </div>
@ -23,28 +32,12 @@
<h2 class="b-title">Engagement</h2> <h2 class="b-title">Engagement</h2>
<p class="intro">Serving Community</p> <p class="intro">Serving Community</p>
<ul class="list"> <ul class="list">
<li> <li v-for="(item, i) in modules[3].list" :key="i">
<img class="pic" src="@/assets/images/edu/3.png" alt=""> <img class="pic" :src="item.pic" alt="" @click="openLink(item)">
<div class="texts"> <div class="texts">
<h6>community service</h6> <h6>{{ item.title }}</h6>
<p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p> <p class="sub">{{ item.subTitle }}</p>
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div> <div class="des">{{ item.des }}</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/edu/4.png" alt="">
<div class="texts">
<h6>community service</h6>
<p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/edu/5.png" alt="">
<div class="texts">
<h6>community service</h6>
<p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -54,20 +47,14 @@
</template> </template>
<script> <script>
import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
export default { export default {
mixins: [mixins],
data() { data() {
return { return {
id: this.$route.query.id,
columnId: '',
form: {},
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
} }
}, },
mounted() { mounted() {
@ -76,9 +63,16 @@ export default {
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { // 预览/详情
this.form = data this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
this.columnId = data.columnId if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).catch(err => {}) }).catch(err => {})
}, },
} }
@ -100,6 +94,7 @@ export default {
.pic { .pic {
width: 650px; width: 650px;
height: 730px; height: 730px;
cursor: pointer;
} }
.texts { .texts {
position: absolute; position: absolute;

4
src/pages/home/index.vue
Unescape View File

@ -135,14 +135,14 @@ export default {
data : data :
data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
// 获取文章列表 // 获取文章列表
const { column, site, articleNum } = json[5].form const { column, site, articleNum } = json[5].form
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
if (column.length) { if (column.length) {
this.$post(this.api.queryArticle, { this.$post(this.api.queryArticle, {
siteId: site, siteId: site,
columnIds: column, columnIds: [column[column.length - 1]],
pageNum: 1, pageNum: 1,
pageSize: articleNum || 6 pageSize: articleNum || 6
}).then(({ data }) => { }).then(({ data }) => {

268
src/pages/news/index.vue
Unescape View File

@ -1,48 +1,43 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<img width="100%" height="480" src="@/assets/images/news/1.png" alt=""> <el-carousel height="480px" :interval="6000">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div class="banner-item" @click="openLink(item)">
<img :src="item.pic" alt="">
<p class="banner-name">NEWS & EVENTS</p>
</div>
</el-carousel-item>
</template>
</el-carousel>
<ul class="tabs"> <ul class="tabs">
<li :class="{active: item.id == active}" v-for="(item, i) in tabs" :key="i" @click="tabChange(item)">{{ item.name }}</li> <template v-for="(item, i) in modules[1].list">
<li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
</template>
</ul> </ul>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">Seminars & Workshops</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<div class="banner"> <div class="banner">
<img width="100%" height="480" src="@/assets/images/about/5.png" alt=""> <img width="50%" height="480" :src="modules[1].list[this.curColumn].articles[0].titleImg" alt="">
<div class="right"> <div class="right">
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6> <h6>{{ modules[1].list[this.curColumn].articles[0].title }}</h6>
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div> <div class="des" v-html="modules[1].list[this.curColumn].articles[0].mainBody"></div>
<p class="meta">2022-07-24 | Research</p> <p class="meta">{{ modules[1].list[this.curColumn].articles[0].createTime }} {{ modules[1].list[this.curColumn].articles[0].author && ' | ' + modules[1].list[this.curColumn].articles[0].author }}</p>
</div> </div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <template v-for="(item, i) in modules[1].list[this.curColumn].articles">
<img class="pic" src="@/assets/images/about/9.png" alt=""> <li v-if="i" :key="i">
<div class="texts"> <img class="pic" :src="item.titleImg" alt="">
<p class="meta">2022-09-09 | Research</p> <div class="texts">
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt=""> <div class="des">{{ item.title }}</div>
</div> <img class="arrow" src="@/assets/images/arrow.png" alt="">
</li> </div>
<li> </li>
<img class="pic" src="@/assets/images/about/10.png" alt=""> </template>
<div class="texts">
<p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<div class="texts">
<p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul> </ul>
<div class="more">More news ></div> <div class="more">More news ></div>
</div> </div>
@ -50,49 +45,38 @@
<div class="block gray"> <div class="block gray">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title">Seminars & Workshops</h2> <h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">What makes a ligh chinese bay chaser</p> <p class="intro">{{ modules[2].form.des }}</p>
<div class="shop-shows"> <div class="shop-shows" v-if="articles">
<div class="left"> <div class="left">
<img width="100%" height="400" src="@/assets/images/about/5.png" alt=""> <img width="100%" height="400" :src="articles[0].titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Messag President Sun Dongbai….</h6> <h6>{{ articles[0].title }}</h6>
<div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div> <div class="des" v-html="articles[0].mainBody"></div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<ul class="show-card"> <ul class="show-card">
<li> <li v-if="articles[1]">
<img class="pic" src="@/assets/images/about/9.png" alt=""> <img class="pic" :src="articles[1].titleImg" alt="">
<div class="des">Comprises the installation and nanostructuri</div> <div class="des">{{ articles[1].title }}</div>
</li> </li>
<li> <li v-if="articles[2]">
<img class="pic" src="@/assets/images/about/10.png" alt=""> <img class="pic" :src="articles[2].titleImg" alt="">
<div class="des">Prof. Stephan V. Roth's research</div> <div class="des">{{ articles[2].title }}</div>
</li> </li>
</ul> </ul>
<ul class="card-list"> <ul class="card-list">
<li> <template v-for="(item, i) in articles">
<img class="pic" src="@/assets/images/about/9.png" alt=""> <li v-if="i > 2" :key="i">
<div class="texts"> <img class="pic" :src="item.titleImg" alt="">
<h6>Hold doctorates or the highest degree in their field</h6> <div class="texts">
<div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div> <h6>{{ item.title }}</h6>
</div> <div class="des" v-html="item.mainBody"></div>
</li> </div>
<li> <img class="arrow" src="@/assets/images/arrow.png" alt="">
<img class="pic" src="@/assets/images/about/10.png" alt=""> </li>
<div class="texts"> </template>
<h6>This 2019 image depicted a Centers for Disease</h6>
<div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the…</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<div class="texts">
<h6>Browse premium related images on iStock</h6>
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -101,41 +85,43 @@
<div class="block conference"> <div class="block conference">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title">Conference</h2> <h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">What makes a ligh chinese bay chaser</p> <p class="intro">{{ modules[4].form.des }}</p>
<div class="shows"> <div class="shows" v-if="articles1.length">
<div class="left"> <div class="left">
<img width="100%" height="558" src="@/assets/images/about/5.png" alt=""> <img width="100%" height="558" :src="articles1[0].titleImg" alt="">
<div class="texts"> <div class="texts">
<div class="meta"> <div class="meta">
<p class="date">09</p> <p class="date">09</p>
<p class="year">2022-03</p> <p class="year">2022-03</p>
</div> </div>
<div> <div>
<h6>Browse premium related images on iStock</h6> <h6>{{ articles1[0].title }}</h6>
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div> <div class="des" v-html="articles1[0].mainBody"></div>
</div> </div>
</div> </div>
</div> </div>
<ul class="card-list"> <ul class="card-list">
<li> <template v-for="(item, i) in articles1">
<img class="pic" src="@/assets/images/about/9.png" alt=""> <li v-if="i" :key="i">
<div class="texts"> <img class="pic" :src="item.titleImg" alt="">
<h6>Professional technical Free electron laser device</h6> <div class="texts">
<p class="text"> <h6>{{ item.title }}</h6>
<img class="icon" src="@/assets/images/address.png" alt=""> <p class="text">
Jiahang Shao <img class="icon" src="@/assets/images/address.png" alt="">
</p> Jiahang Shao
<p class="text"> </p>
<img class="icon" src="@/assets/images/address.png" alt=""> <p class="text">
Time: 2022.8.13 14:30 <img class="icon" src="@/assets/images/address.png" alt="">
</p> Time: 2022.8.13 14:30
<p class="text"> </p>
<img class="icon" src="@/assets/images/address.png" alt=""> <p class="text">
Address: Big conference room on the fourth floor of headquarters <img class="icon" src="@/assets/images/address.png" alt="">
</p> Address: Big conference room on the fourth floor of headquarters
</div> </p>
</li> </div>
</li>
</template>
</ul> </ul>
</div> </div>
</div> </div>
@ -144,42 +130,83 @@
</template> </template>
<script> <script>
import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
export default { export default {
mixins: [mixins],
data() { data() {
return { return {
id: this.$route.query.id, curColumn: 0,
active: 1, articles: [],
tabs: [ articles1: []
{
id: 1,
name: 'General news'
},
{
id: 2,
name: 'Research news'
},
{
id: 3,
name: 'Journal covers'
},
]
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
// 获取文章详情
getInfo() {
// 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
// state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
const json = JSON.parse(this.preview ?
data :
data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
// 获取文章列表
const { list } = json[1]
if (list.length) {
list.map(e => {
if (e.site) {
const id = e.column[e.column.length - 1]
e.id = id
if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
this.$post(this.api.queryArticle, {
siteId: e.site,
columnIds: [id],
pageNum: 1,
pageSize: e.articleNum || 4
}).then(({ data }) => {
this.$set(e, 'articles', data.records)
}).catch(err => {})
}
})
}
if (json[3].form.column.length) {
const { column, site, articleNum } = json[3].form
this.$post(this.api.queryArticle, {
siteId: site,
columnIds: [column[column.length - 1]],
pageNum: 1,
pageSize: articleNum || 6
}).then(({ data }) => {
this.articles = data.records
}).catch(err => {})
}
if (json[5].form.column.length) {
const { column, site, articleNum } = json[5].form
this.$post(this.api.queryArticle, {
siteId: site,
columnIds: [column[column.length - 1]],
pageNum: 1,
pageSize: articleNum || 5
}).then(({ data }) => {
this.articles1 = data.records
}).catch(err => {})
}
this.modules = json
}
}).catch(err => {})
},
// tab回调 // tab回调
tabChange(item) { tabChange(i) {
this.active = item.id this.curColumn = i
} }
} }
}; };
@ -212,6 +239,7 @@ export default {
height: 380px; height: 380px;
} }
.right { .right {
width: 50%;
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583FF; background: #1583FF;
color: #fff; color: #fff;
@ -230,13 +258,13 @@ export default {
} }
.card { .card {
display: flex; display: flex;
flex-wrap: wrap;
margin-top: 40px; margin-top: 40px;
li { li {
width: 448px; width: 438px;
margin-right: 28px; margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21); box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
border-radius: 6px; border-radius: 6px;
cursor: pointer;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -271,6 +299,7 @@ export default {
color: #1583FF; color: #1583FF;
border-radius: 35px; border-radius: 35px;
border: 2px solid #2B6CEF; border: 2px solid #2B6CEF;
cursor: pointer;
} }
.shop-shows { .shop-shows {
display: flex; display: flex;
@ -326,9 +355,9 @@ export default {
background-color: #fff; background-color: #fff;
li { li {
display: inline-flex; display: inline-flex;
align-items: center;
padding-right: 124px; padding-right: 124px;
margin-bottom: 38px; margin-bottom: 38px;
background: url(../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -338,6 +367,10 @@ export default {
height: 85px; height: 85px;
margin-right: 28px; margin-right: 28px;
} }
.texts {
width: 504px;
margin-right: 60px;
}
h6 { h6 {
font-size: 20px; font-size: 20px;
color: #272727; color: #272727;
@ -348,6 +381,9 @@ export default {
color: #666; color: #666;
line-height: 24px; line-height: 24px;
} }
.arrow {
width: 36px;
}
} }
} }
.conference { .conference {

7
src/styles/page/page.scss
Unescape View File

@ -1,3 +1,4 @@
@import "../var.scss";
.block { .block {
padding: 118px 0; padding: 118px 0;
.b-title { .b-title {
@ -7,6 +8,7 @@
line-height: 59px; line-height: 59px;
text-align: center; text-align: center;
color: #1F1F1F; color: #1F1F1F;
@include ellipsis;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -24,6 +26,7 @@
text-align: center; text-align: center;
color: #5B5B5E; color: #5B5B5E;
line-height: 40px; line-height: 40px;
@include mul-ellipsis(2);
} }
} }
.inner { .inner {
@ -37,6 +40,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -50,6 +54,9 @@
cursor: pointer; cursor: pointer;
} }
} }
.des {
@include mul-ellipsis(2);
}
.gray { .gray {
background-color: #F2F6F8; background-color: #F2F6F8;
} }

Write Preview
Loading…
Cancel
Save