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

长页联调

Browse Source
mobile
yujialong 2 years ago
parent b03ad44313
commit acaf5ed64f
8 changed files with 84 additions and 205 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. BIN
      src/assets/videos/sky.mp4
  2. 52
      src/pages/exp/index.vue
  3. 7
      src/pages/news/index.vue
  4. 14
      src/pages/science/index.vue
  5. 63
      src/pages/survey/index.vue
  6. 96
      src/pages/talent/index.vue
  7. 47
      src/pages/userSharing/index.vue
  8. 2
      src/setting.js

BIN
src/assets/videos/sky.mp4
View File

Binary file not shown.

52
src/pages/exp/index.vue
Unescape View File

@ -15,38 +15,35 @@
<div class="inner"> <div class="inner">
<h6>实验线站</h6> <h6>实验线站</h6>
<p class="en">EXPERIMENT STATIONS</p> <p class="en">EXPERIMENT STATIONS</p>
<img class="pic" src="@/assets/images/exp/1.png" alt=""> <img class="pic" :src="modules[1].form.pic" alt="">
<div class="des"> 科学实验站是S³FEL面向国家重大需求、聚焦科学前沿和引领地区产业发展的关键，旨在重点探究量子材料、能源催化、生物医药、大气与星际科学、原子分子科学等领域的关键技术和科学难题。S³FEL的供光具有超高时间分辨（40飞秒）、超高重复频率（最高百万赫兹）和超高亮度（电子束能量达2.5 Gev）的特点。 <div class="des">{{ modules[1].form.des }}</div>
S³FEL可在原子尺度上研究复杂生物分子和材料的结构及组成，进而绘制病毒或细胞的原子量级三维精细结构，有助于科学家更深入地了解生物分子的结构和功能，为新药研发提供依据。在能源催化领域，S³FEL可研究飞秒内的化学变化，如化学键的形成和断裂、反应体系中电荷和能量的转移、反应过程中催化剂表面结构的动态演变等， 有助于科学家更好地研究复杂催化过程的反应机理和动力学过程，进而提高传统能源的利用效率，加快新能源开发。S³FEL还可用于探索极端电场或磁场强度下的物质变化，如研究星云和恒星的演变，探索生命的起源等。
</div>
</div> </div>
</div> </div>
<ul class="list"> <ul class="list">
<li class="item1"> <li class="item1">
<img src="@/assets/images/exp/2.png" alt=""> <img src="@/assets/images/exp/2.png" alt="">
<h6>量子材料</h6> <h6>{{ modules[2].form.title }}</h6>
</li> </li>
<li class="item2"> <li class="item2">
<img src="@/assets/images/exp/3.png" alt=""> <img src="@/assets/images/exp/3.png" alt="">
<h6>能源催化</h6> <h6>{{ modules[3].form.title }}</h6>
</li> </li>
<li class="item3"> <li class="item3">
<img src="@/assets/images/exp/4.png" alt=""> <img src="@/assets/images/exp/4.png" alt="">
<h6>生物医药</h6> <h6>{{ modules[4].form.title }}</h6>
</li> </li>
<li class="item4"> <li class="item4">
<img src="@/assets/images/exp/5.png" alt=""> <img src="@/assets/images/exp/5.png" alt="">
<h6>大气雾霾与团簇研究</h6> <h6>{{ modules[5].form.title }}</h6>
</li> </li>
<li class="item5"> <li class="item5">
<img src="@/assets/images/exp/6.png" alt=""> <img src="@/assets/images/exp/6.png" alt="">
<h6>星际化学</h6> <h6>{{ modules[6].form.title }}</h6>
</li> </li>
<li class="item6"> <li class="item6">
<img src="@/assets/images/exp/7.png" alt=""> <img src="@/assets/images/exp/7.png" alt="">
<h6>原子分子物理</h6> <h6>{{ modules[7].form.title }}</h6>
</li> </li>
</ul> </ul>
</div> </div>
@ -56,7 +53,6 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
@ -65,12 +61,8 @@ export default {
routes: [] routes: []
} }
}, },
components: {
Breadcrumb
},
mounted() { mounted() {
new WOW().init() new WOW().init()
this.getColumn()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -87,34 +79,6 @@ export default {
} }
}).catch(err => {}) }).catch(err => {})
}, },
// 获取父级所有栏目名称和id
getParent(data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
// 获取上级面包屑
getColumn() {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => {})
},
} }
}; };
</script> </script>

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

@ -563,7 +563,7 @@ export default {
width: 754px; width: 754px;
li { li {
display: flex; display: flex;
padding: 24px; padding: 15px;
margin-bottom: 13px; margin-bottom: 13px;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
@ -577,7 +577,7 @@ export default {
} }
.pic { .pic {
width: 188px; width: 188px;
height: 145px; height: 147px;
margin-right: 28px; margin-right: 28px;
} }
h6 { h6 {
@ -589,6 +589,9 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 10px 0;
&:last-child {
margin-bottom: 0;
}
} }
.icon { .icon {
margin-right: 5px; margin-right: 5px;

14
src/pages/science/index.vue
Unescape View File

@ -13,25 +13,25 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)">
<img src="@/assets/images/science/1.png" alt=""> <img src="@/assets/images/science/1.png" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
<img src="@/assets/images/science/2.png" alt=""> <img src="@/assets/images/science/2.png" alt="">
<div class="texts"> <div class="texts">
<h6>X射线是什么</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</div> </div>
</div> </div>
<div class="item"> <div class="item" :class="{'cursor-pointer': modules[3].form.link.linkName !== '无'}" @click="openLink(modules[3].form)">
<img src="@/assets/images/science/3.png" alt=""> <img src="@/assets/images/science/3.png" alt="">
<div class="texts"> <div class="texts">
<h6>X射线自由电子激光</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[3].form.des }}</div>
</div> </div>
</div> </div>
</div> </div>

63
src/pages/survey/index.vue
Unescape View File

@ -16,6 +16,17 @@
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> <li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content">
<template v-if="active === 2">
<video v-if="modules[3].form.video" class="video" ref="video" autoplay controls loop>
<source :src="modules[3].form.video" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<div class="text">{{ modules[3].form.des }}</div>
</template>
<div v-if="active === 3" v-html="modules[4].form.des"></div>
</div>
</div> </div>
</template> </template>
@ -23,23 +34,17 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
return { return {
routes: [], active: 2,
active: 0,
tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置'] tabs: ['S³FEL介绍', '发展历程', 'S³FEL宣传片', '地理位置', '机构设置']
} }
}, },
components: {
Breadcrumb
},
mounted() { mounted() {
new WOW().init() new WOW().init()
this.getColumn()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -56,34 +61,6 @@ export default {
} }
}).catch(err => {}) }).catch(err => {})
}, },
// 获取父级所有栏目名称和id
getParent(data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
// 获取上级面包屑
getColumn() {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => {})
},
// tab回调 // tab回调
tabChange(i) { tabChange(i) {
this.active = i this.active = i
@ -102,7 +79,7 @@ export default {
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26); box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
@ -117,4 +94,18 @@ export default {
} }
} }
} }
.tab-content {
width: 1000px;
padding: 77px 0;
margin: 0 auto;
}
.video {
width: 100%;
margin-bottom: 55px;
}
.text {
font-size: 18px;
color: #020202;
line-height: 32px;
}
</style> </style>

96
src/pages/talent/index.vue
Unescape View File

@ -13,72 +13,55 @@
<div class="block talent"> <div class="block talent">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)">
<img src="@/assets/images/about/12.png" alt=""> <img class="pic" :src="modules[1].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>人才队伍</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 <div class="des">{{ modules[1].form.des }}</div>
S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。 </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
<img src="@/assets/images/about/12.png" alt=""> <img class="pic" :src="modules[2].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>人才需求</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">S³FEL是集“世界一流、深圳特色”的标志性、稀缺性、先进性于一体的自由电子激光重大科研平台。S3FEL的建设将紧密围绕高水平建设综合性国家科学中心的战略目标，面向国民经济主战场和世界科技前沿，汇聚全球高端创新资源，依托先行示范区政策、产业、资本、市场和技术等优势。 <div class="des">{{ modules[2].form.des }}</div>
S³FEL将服务于集成电路、生物医药、先进材料和先进制造等大湾区高新技术产业，以及产业核心关键技术发展相关的物理、化学、生物、材料、医学等多学科前沿基础研究。
S³FEL欢迎物理学、光学工程、机械工程、动力工程及工程热物理、仪器科学与技术、电气工程、电子科学与技术、控制科学与工程、信息与通信工程、计算机科学与技术、材料科学与工程、化学、生物学、力学、测绘科学与技术等各专业人才的加入，共享发展新机遇，共创湾区大未来。</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="style"> <div class="style">
<h6>人物风采</h6> <h6>{{ modules[3].form.title }}</h6>
<ul class="members">
<li>
<el-carousel :interval="4000" type="card" height="510px"> <el-carousel :interval="4000" type="card" height="510px">
<el-carousel-item> <template v-for="(item, i) in modules[4].list">
<div class="item"> <el-carousel-item v-if="item.isEnable" :key="i">
<img src="@/assets/images/about/12.png" alt=""> <div class="item" @click="openLink(item)">
<p class="text">这是描述</p> <img :src="item.pic" alt="">
</div> <p class="text">{{ item.des }}</p>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<img src="@/assets/images/about/12.png" alt="">
<p class="text">这是描述</p>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<img src="@/assets/images/about/12.png" alt="">
<p class="text">这是描述</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</template>
</el-carousel> </el-carousel>
</li>
</ul>
</div> </div>
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item">
<img src="@/assets/images/about/12.png" alt=""> <img class="pic" :src="modules[5].form.pic" alt="">
<div class="texts"> <div class="texts">
<p class="type">校园招聘</p> <p class="type">{{ modules[5].form.subTitle }}</p>
<h6>在校生/毕业生</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。</div> <div class="des">{{ modules[5].form.des }}</div>
<el-button type="primary">查看更多</el-button> <el-button type="primary" @click="openLink(modules[5].form)">查看更多</el-button>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<img src="@/assets/images/about/12.png" alt=""> <img class="pic" :src="modules[6].form.pic" alt="">
<div class="texts"> <div class="texts">
<p class="type">校园招聘</p> <p class="type">{{ modules[6].form.subTitle }}</p>
<h6>在校生/毕业生</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="des">S³FEL已拥有一支高学历、高素质、高技术水平、高执行力，并勇于创新的工程技术团队。团队结构合理，包含研究人员、工程技术人员和管理人员等多种核心技术人才。 S³FEL正大力引进国内、外高端创新人才和团队，成长为竞争力和影响力卓越的世界一流科学大装置。</div> <div class="des">{{ modules[6].form.des }}</div>
<el-button type="primary">查看更多</el-button> <el-button type="primary" @click="openLink(modules[6].form)">查看更多</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -104,7 +87,6 @@ export default {
}, },
mounted() { mounted() {
new WOW().init() new WOW().init()
this.getColumn()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -121,34 +103,6 @@ export default {
} }
}).catch(err => {}) }).catch(err => {})
}, },
// 获取父级所有栏目名称和id
getParent(data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
// 获取上级面包屑
getColumn() {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => {})
},
} }
}; };
</script> </script>

47
src/pages/userSharing/index.vue
Unescape View File

@ -16,7 +16,7 @@
<div class="left"> <div class="left">
<h6>用户共享</h6> <h6>用户共享</h6>
<p class="en">USERS SHARE</p> <p class="en">USERS SHARE</p>
<div class="des"> S³FEL是由深圳市政府投资建设的新一代自由电子激光大科学装置，将成为世界上顶级的先进光源大科学装置，是支撑深圳社会主义先行示范区和大湾区综合性国家科学中心建设的大型公共科技创新平台，对提升我国的科技影响力、集聚顶尖科技人才、推动科技创新具有非常重要的意义。 S³FEL以“高效运行、分类开放”为共享理念，向全世界科技界实行开放共享，促进信息、材料、能源、生物化学等多个基础科学领域的极速发展。</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
<img class="pic" src="@/assets/images/userSharing/1.png" alt=""> <img class="pic" src="@/assets/images/userSharing/1.png" alt="">
<div class="card"> <div class="card">
@ -30,18 +30,18 @@
<ul class="group"> <ul class="group">
<li> <li>
<img src="@/assets/images/userSharing/2.png" alt=""> <img src="@/assets/images/userSharing/2.png" alt="">
<h6>机时申请</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">向全世界科技界实行开放共享，多个基础科学领域的极速发展。</div> <div class="des">{{ modules[2].form.des }}</div>
</li> </li>
<li> <li>
<img src="@/assets/images/userSharing/3.png" alt=""> <img src="@/assets/images/userSharing/3.png" alt="">
<h6>实时运行动态</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">促进信息、材料、能源、生物、环境、化学等多个基础科学领域的极速发展。</div> <div class="des">{{ modules[3].form.des }}</div>
</li> </li>
<li> <li>
<img src="@/assets/images/userSharing/4.png" alt=""> <img src="@/assets/images/userSharing/4.png" alt="">
<h6>用户常见问题</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des">常见问题答案，也能提问由深圳市政府投资建设的新一代自由</div> <div class="des">{{ modules[4].form.des }}</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -52,7 +52,6 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
@ -61,12 +60,8 @@ export default {
routes: [] routes: []
} }
}, },
components: {
Breadcrumb
},
mounted() { mounted() {
new WOW().init() new WOW().init()
this.getColumn()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -83,34 +78,6 @@ export default {
} }
}).catch(err => {}) }).catch(err => {})
}, },
// 获取父级所有栏目名称和id
getParent(data, id) {
for (const e of data) {
if (e.id == id) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
break
} else if (e.children.length) {
this.routes.push({
name: e.columnName,
query: {
id: e.id
}
})
this.getParent(e.children, id)
}
}
},
// 获取上级面包屑
getColumn() {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
this.getParent(data, this.id)
}).catch(err => {})
},
} }
}; };
</script> </script>

2
src/setting.js
Unescape View File

@ -6,7 +6,7 @@ let host = `${location.origin}/`
if (isDev) { if (isDev) {
host = 'http://192.168.31.136:10000/' // 测试服 host = 'http://192.168.31.136:10000/' // 测试服
// host = 'https://31k70639y6.zicp.fun/' // 测试服 // host = 'https://31k70639y6.zicp.fun/' // 测试服
host = 'http://192.168.31.51:10000/' // 榕 // host = 'http://192.168.31.51:10000/' // 榕
// host = 'http://192.168.31.116:10000/' // 赓 // host = 'http://192.168.31.116:10000/' // 赓
} }

Write Preview
Loading…
Cancel
Save