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
Split 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. 224
      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>
<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="inner">
<h2 class="b-title">Partnership</h2>
<p class="intro">Together, Stronger</p>
<img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
<h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p>
<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 class="block">
<div class="inner">
<h2 class="b-title">Programs</h2>
<p class="intro">Our campus is Shenzhen and Beyound</p>
<img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
<h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p>
<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>
@ -23,28 +32,12 @@
<h2 class="b-title">Engagement</h2>
<p class="intro">Serving Community</p>
<ul class="list">
<li>
<img class="pic" src="@/assets/images/edu/3.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/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="">
<li v-for="(item, i) in modules[3].list" :key="i">
<img class="pic" :src="item.pic" alt="" @click="openLink(item)">
<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>
<h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p>
<div class="des">{{ item.des }}</div>
</div>
</li>
</ul>
@ -54,20 +47,14 @@
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data() {
return {
id: this.$route.query.id,
columnId: '',
form: {},
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
@ -76,9 +63,16 @@ export default {
methods: {
// 获取文章详情
getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.form = data
this.columnId = data.columnId
// 预览/详情
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'])
this.modules = json
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
}
}).catch(err => {})
},
}
@ -100,6 +94,7 @@ export default {
.pic {
width: 650px;
height: 730px;
cursor: pointer;
}
.texts {
position: absolute;

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

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

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

@ -1,48 +1,43 @@
<template>
<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">
<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>
<div class="block">
<div class="inner">
<h2 class="b-title">Seminars & Workshops</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<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">
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</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>
<p class="meta">2022-07-24 | Research</p>
<h6>{{ modules[1].list[this.curColumn].articles[0].title }}</h6>
<div class="des" v-html="modules[1].list[this.curColumn].articles[0].mainBody"></div>
<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>
<ul class="card">
<li>
<img class="pic" src="@/assets/images/about/9.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>
<li>
<img class="pic" src="@/assets/images/about/10.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>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<template v-for="(item, i) in modules[1].list[this.curColumn].articles">
<li v-if="i" :key="i">
<img class="pic" :src="item.titleImg" 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>
<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="">
</div>
</li>
</template>
</ul>
<div class="more">More news ></div>
</div>
@ -50,49 +45,38 @@
<div class="block gray">
<div class="inner lg">
<h2 class="b-title">Seminars & Workshops</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<div class="shop-shows">
<h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p>
<div class="shop-shows" v-if="articles">
<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">
<h6>2022 New Year Messag President Sun Dongbai….</h6>
<div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
<h6>{{ articles[0].title }}</h6>
<div class="des" v-html="articles[0].mainBody"></div>
</div>
</div>
<div class="right">
<ul class="show-card">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="des">Comprises the installation and nanostructuri</div>
<li v-if="articles[1]">
<img class="pic" :src="articles[1].titleImg" alt="">
<div class="des">{{ articles[1].title }}</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<div class="des">Prof. Stephan V. Roth's research</div>
<li v-if="articles[2]">
<img class="pic" :src="articles[2].titleImg" alt="">
<div class="des">{{ articles[2].title }}</div>
</li>
</ul>
<ul class="card-list">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="texts">
<h6>Hold doctorates or the highest degree in their field</h6>
<div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<div class="texts">
<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="">
<template v-for="(item, i) in articles">
<li v-if="i > 2" :key="i">
<img class="pic" :src="item.titleImg" 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>
<h6>{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div>
</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</li>
</template>
</ul>
</div>
</div>
@ -101,27 +85,28 @@
<div class="block conference">
<div class="inner lg">
<h2 class="b-title">Conference</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<div class="shows">
<h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p>
<div class="shows" v-if="articles1.length">
<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="meta">
<p class="date">09</p>
<p class="year">2022-03</p>
</div>
<div>
<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>
<h6>{{ articles1[0].title }}</h6>
<div class="des" v-html="articles1[0].mainBody"></div>
</div>
</div>
</div>
<ul class="card-list">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<template v-for="(item, i) in articles1">
<li v-if="i" :key="i">
<img class="pic" :src="item.titleImg" alt="">
<div class="texts">
<h6>Professional technical Free electron laser device</h6>
<h6>{{ item.title }}</h6>
<p class="text">
<img class="icon" src="@/assets/images/address.png" alt="">
Jiahang Shao
@ -136,6 +121,7 @@
</p>
</div>
</li>
</template>
</ul>
</div>
</div>
@ -144,42 +130,83 @@
</template>
<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
mixins: [mixins],
data() {
return {
id: this.$route.query.id,
active: 1,
tabs: [
{
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()
curColumn: 0,
articles: [],
articles1: []
}
},
mounted() {
},
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回调
tabChange(item) {
this.active = item.id
tabChange(i) {
this.curColumn = i
}
}
};
@ -212,6 +239,7 @@ export default {
height: 380px;
}
.right {
width: 50%;
padding: 50px 50px 30px;
background: #1583FF;
color: #fff;
@ -230,13 +258,13 @@ export default {
}
.card {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
li {
width: 448px;
width: 438px;
margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
border-radius: 6px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
@ -271,6 +299,7 @@ export default {
color: #1583FF;
border-radius: 35px;
border: 2px solid #2B6CEF;
cursor: pointer;
}
.shop-shows {
display: flex;
@ -326,9 +355,9 @@ export default {
background-color: #fff;
li {
display: inline-flex;
align-items: center;
padding-right: 124px;
margin-bottom: 38px;
background: url(../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
&:last-child {
margin-bottom: 0;
}
@ -338,6 +367,10 @@ export default {
height: 85px;
margin-right: 28px;
}
.texts {
width: 504px;
margin-right: 60px;
}
h6 {
font-size: 20px;
color: #272727;
@ -348,6 +381,9 @@ export default {
color: #666;
line-height: 24px;
}
.arrow {
width: 36px;
}
}
}
.conference {

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

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

Write Preview
Loading…
Cancel
Save