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

home

Browse Source
mobile
yujialong 2 years ago
parent e29f933345
commit 5fb22cba2c
5 changed files with 317 additions and 323 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. 2
      src/api/index.js
  2. 4
      src/pages/article/index.vue
  3. 320
      src/pages/channel/index.vue
  4. 312
      src/pages/home/index.vue
  5. 2
      src/router/modules/home.js

2
src/api/index.js
Unescape View File

@ -2,4 +2,6 @@ export default {
newlyPublishedArticles: `iasf/sysContent/newlyPublishedArticles`,
listWithTree: `iasf/sysColumn/listWithTree`,
findArticle: `iasf/sysContent/findById`,
findPage: `iasf/sysColumnLongPage/getLongPageInformation`,
queryArticle: `iasf/sysContent/pagingQuery`,
}

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

@ -8,7 +8,7 @@
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{ form.createTime }} | {{ form.source }} | {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div>
<div class="meta">{{ form.createTime }} | {{ form.source && form.source + '|' }} {{ form.author && form.author + ' | ' }} {{ form.totalBrowsing }} 浏览</div>
<p class="brief">{{ form.summary }}</p>
<div v-html="form.mainBody"></div>
<div class="annex">
@ -162,7 +162,7 @@ export default {
.brief {
padding-bottom: 30px;
margin-bottom: 30px;
font-size: 14px;
font-size: 24px;
line-height: 20px;
color: #606060;
border-bottom: 1px solid #D8D8D8;

320
src/pages/channel/index.vue
Unescape View File

@ -1,320 +0,0 @@
<template>
<div class="wrap">
<img width="100%" src="@/assets/images/channel-bg.png" alt="">
<div class="block">
<div class="inner">
<h2 class="b-title">OUR FACILITIES</h2>
<p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
<ul class="card">
<li>
<img width="100%" src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<img width="100%" src="@/assets/images/channel2.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="block news-block">
<div class="inner">
<h2 class="b-title">Latest information</h2>
<p class="intro">Keep up with what happen with IASF</p>
<ul class="news">
<li>
<img src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
<span class="meta">2022.08.12</span>
</div>
</li>
<li>
<img src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6>
<p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
<span class="meta">2022.08.12</span>
</div>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">Light Chasers' Home at IASF</h2>
<p class="intro">Keep up with what happen with IASF</p>
<ul class="people">
<li>
<img class="pic" src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
<img class="pic" src="@/assets/images/channel2.png" alt="">
</li>
</ul>
</div>
</div>
<div class="about">
<div class="inner">
<img src="@/assets/images/about.png" alt="">
<div class="line"></div>
<div class="text">ABOUT</div>
<div class="des">
<p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…</p>
</div>
</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="inner">
<h2 class="glance">IASF at a glance</h2>
<ul class="stat">
<li>
<p class="num">2020</p>
<p class="text">The year IASF was founded</p>
</li>
<li>
<p class="num">2</p>
<p class="text">Facility projects</p>
</li>
<li>
<p class="num">240</p>
<p class="text">Employees</p>
</li>
<li>
<p class="num">10</p>
<p class="text">Academicians</p>
</li>
<li>
<p class="num">45%</p>
<p class="text">Hold doctorates or the highest degree in their field</p>
</li>
<li>
<p class="num">$32B+</p>
<p class="text">Facility construction need-based grant aid provided </p>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
return {
id: this.$route.query.id,
columnId: '',
form: {},
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
},
methods: {
// 获取文章详情
getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.form = data
this.columnId = data.columnId
}).catch(err => {})
},
}
};
</script>
<style lang="scss" scoped>
@import "../../styles/page/page.scss";
.card {
display: flex;
justify-content: space-between;
li {
width: 660px;
}
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
}
h6 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
.des {
font-size: 18px;
color: #222;
line-height: 30px;
}
.arrow {
cursor: pointer;
}
}
.news-block {
background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
}
.news {
display: flex;
flex-wrap: wrap;
li {
display: inline-flex;
width: 686px;
padding: 34px;
margin-bottom: 28px;
background-color: #fff;
&:nth-child(odd) {
margin-right: 28px;
}
}
img {
width: 237px;
height: 167px;
}
.texts {
margin-left: 34px;
}
h6 {
font-size: 18px;
color: #0648A8;
}
.des {
margin: 14px 0;
font-size: 16px;
color: #333;
line-height: 22px;
}
.meta {
font-size: 16px;
color: #999;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.glance {
padding-bottom: 50px;
font-size: 45px;
border-bottom: 1px solid #DEDEDE;
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
}
.about {
padding: 77px 0 198px;
background: url(../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
.line {
display: flex;
align-items: center;
margin: 50px 0 30px;
width: 88px;
height: 6px;
background-color: #fff;
&:after {
content: '';
width: 6px;
height: 6px;
}
}
.text {
font-size: 30px;
color: #fff;
}
.des {
padding: 38px 60px;
margin-top: 84px;
font-size: 30px;
color: #fff;
line-height: 42px;
text-align: center;
background: rgba(111, 69, 36, .56);
border-radius: 17px;
}
}
</style>

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

@ -0,0 +1,312 @@
<template>
<div class="wrap">
<el-carousel height="959px" :interval="6000">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic" :key="i">
<img width="100%" height="959" :src="item.pic" alt="">
</el-carousel-item>
</template>
</el-carousel>
<div class="block">
<div class="inner">
<h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p>
<ul class="card">
<li>
<img width="100%" :src="modules[2].form.pic" alt="">
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<img width="100%" :src="modules[3].form.pic" alt="">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<p class="des">{{ modules[3].form.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="block news-block">
<div class="inner">
<h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p>
<ul class="news">
<li v-for="(item, i) in articles" :key="i">
<img src="@/assets/images/channel1.png" alt="">
<div class="texts">
<h6>{{ item.columnName }}</h6>
<div class="des" v-html="item.mainBody"></div>
<span class="meta">{{ item.createTime }}</span>
</div>
</li>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<h2 class="b-title">{{ modules[6].form.title }}</h2>
<p class="intro">{{ modules[6].form.des }}</p>
<ul class="people">
<li v-for="(item, i) in modules[7].list" :key="i">
<img class="pic" :src="item.pic" alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="about">
<div class="inner">
<img src="@/assets/images/about.png" alt="">
<div class="line"></div>
<div class="text">{{ modules[8].form.title }}</div>
<div class="des">{{ modules[8].form.des }}</div>
</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="inner">
<h2 class="glance">{{ modules[9].form.title }}</h2>
<ul class="stat">
<li>
<p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p>
</li>
<li>
<p class="num">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.des }}</p>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
return {
id: this.$route.query.id,
modules: [],
articles: []
}
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
this.getInfo()
},
methods: {
// 获取文章详情
getInfo() {
this.$post(`${this.api.findPage}?columnId=${this.id}`).then(({ data }) => {
if (data.length) {
const json = JSON.parse(data[0].jsonBeforeEditing)
this.modules = json
// 获取文章列表
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,
pageNum: 1,
pageSize: articleNum || 6
}).then(({ data }) => {
this.articles = data.records
}).catch(err => {})
}
}
}).catch(err => {})
},
}
};
</script>
<style lang="scss" scoped>
@import "../../styles/page/page.scss";
.card {
display: flex;
justify-content: space-between;
li {
width: 660px;
}
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
}
h6 {
margin-bottom: 25px;
font-size: 24px;
color: #333;
}
.des {
font-size: 18px;
color: #222;
line-height: 30px;
}
.arrow {
cursor: pointer;
}
}
.news-block {
background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
}
.news {
display: flex;
flex-wrap: wrap;
li {
display: inline-flex;
width: 686px;
padding: 34px;
margin-bottom: 28px;
background-color: #fff;
&:nth-child(odd) {
margin-right: 28px;
}
}
img {
width: 237px;
height: 167px;
}
.texts {
margin-left: 34px;
}
h6 {
font-size: 18px;
color: #0648A8;
}
.des {
margin: 14px 0;
font-size: 16px;
color: #333;
line-height: 22px;
}
.meta {
font-size: 16px;
color: #999;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
&:nth-child(even) {
flex-direction: row-reverse;
}
}
.pic {
width: 660px;
height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
margin: 20px 0 10px;
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.glance {
padding-bottom: 50px;
font-size: 45px;
border-bottom: 1px solid #DEDEDE;
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.text {
font-size: 24px;
}
}
.about {
padding: 77px 0 198px;
background: url(../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
.line {
display: flex;
align-items: center;
margin: 50px 0 30px;
width: 88px;
height: 6px;
background-color: #fff;
&:after {
content: '';
width: 6px;
height: 6px;
}
}
.text {
font-size: 30px;
color: #fff;
}
.des {
padding: 38px 60px;
margin-top: 84px;
font-size: 30px;
color: #fff;
line-height: 42px;
text-align: center;
background: rgba(111, 69, 36, .56);
border-radius: 17px;
}
}
</style>

2
src/router/modules/channel.js → src/router/modules/home.js
Unescape View File

@ -1,5 +1,5 @@
import BasicLayout from '@/layouts/home'
const name = 'channel'
const name = 'home'
export default {
path: `/${name}`,
component: BasicLayout,
Write Preview
Loading…
Cancel
Save