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

添加长页

Browse Source
master
yujialong 2 years ago
parent d57e9f25a9
commit 80851b6974
7 changed files with 424 additions and 28 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. 26
      src/const/column.js
  2. 84
      src/pages/devHistory/index.vue
  3. 1
      src/pages/governance/index.vue
  4. 1
      src/pages/mission/index.vue
  5. 312
      src/pages/overview/index.vue
  6. 14
      src/router/modules/devHistory.js
  7. 14
      src/router/modules/overview.js

26
src/const/column.js
Unescape View File

@ -22,32 +22,6 @@
name: '子级优先栏目'
}
],
long: [
{
name: 'SFEL',
path: 'sfel'
},
{
name: 'SFEL-科普之窗',
path: 'science'
},
{
name: 'SFEL-装置介绍-实验站',
path: 'exp'
},
{
name: 'SFEL-人才队伍',
path: 'talent'
},
{
name: 'SFEL-用户共享',
path: 'userSharing'
},
{
name: 'SFEL-概况',
path: 'survey'
},
],
// 出版物类型
publicationTypes: [
{

84
src/pages/devHistory/index.vue
Unescape View File

@ -0,0 +1,84 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<div class="block history">
<div class="inner">
<h6>光束线</h6>
<p class="en">The beam line</p>
<div class="text">光束线的作用是将光源发出的超快、全相干、高亮度的激光高效地传输到实验站样品处，并在传输过程中对FEL脉冲进行频谱诊断、脉冲能量诊断、光斑位置诊断、光斑横向分布诊断、脉冲到达时间诊断、波前诊断、偏振诊断等。同时根据后端实验站的不同科学需求，可进一步对FEL脉冲进行单色化、脉冲能量衰减、横向光斑微聚焦等。</div>
</div>
</div>
</div>
</template>
<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
export default {
mixins: [mixins],
data() {
return {
routes: [],
};
},
mounted() {
new WOW().init();
},
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[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => {});
},
},
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.history {
h6 {
position: relative;
font-size: 2.4rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.en {
margin-top: -25px;
font-size: 2.4rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #E3E3E3;
}
.text {
margin-top: 30px;
}
}
</style>

1
src/pages/governance/index.vue
Unescape View File

@ -4,7 +4,6 @@
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des des">{{ modules[0].form.des }}</p>
</div>
</div>

1
src/pages/mission/index.vue
Unescape View File

@ -4,7 +4,6 @@
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des des">{{ modules[0].form.des }}</p>
</div>
</div>

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

@ -0,0 +1,312 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
</div>
<div class="block about gray">
<div class="inner">
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>关于我们</h6>
<div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
<h6>关于我们</h6>
<div class="des">深圳综合粒子设施研究院坐落在大湾区综合性国家科学中心主阵地——深圳光明科学城，成立于2022年5月13日，是深圳推进粤港澳大湾区、中国特色社会主义先行示范区“双区”建设和打造高质量发展高地的重要战略布局。</div>
</div>
</div>
</div>
<div class="block fac">
<div class="inner">
<h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
<ul class="card">
<li>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>深圳自由电子激光</h6>
<div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
<img src="@/assets/images/arrow.png" alt="" class="arrow">
</div>
</li>
<li>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>深圳自由电子激光</h6>
<div class="text">建设一台基于超导高频技术的高重复频率X射线自由电子激光装置。</div>
<img src="@/assets/images/arrow.png" alt="" class="arrow">
</div>
</li>
</ul>
<ul class="l-card">
<li>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>机制创新</h6>
<div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
</div>
</li>
<li>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>机制创新</h6>
<div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
</div>
</li>
<li>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
<div class="texts">
<h6>机制创新</h6>
<div class="text">以需求为导向指导设施规划建设；以共享为原则提升设施管理水平。</div>
</div>
</li>
</ul>
</div>
</div>
<div class="block scan gray">
<h2 class="b-title wow fadeInUp">深圳综合粒子设施</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">支撑大湾区综合性国家科学中心建设的公益性科研事业单位</p>
<div class="scan-inner">
<div class="left">
<div class="line">
<img src="http://10.10.11.7/images/overview/7.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<div class="line">
<img src="http://10.10.11.7/images/overview/8.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<div class="line">
<img src="http://10.10.11.7/images/overview/9.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<div class="line">
<img src="http://10.10.11.7/images/overview/10.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<div class="line">
<img src="http://10.10.11.7/images/overview/11.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<div class="line">
<img src="http://10.10.11.7/images/overview/12.png" alt="" class="icon" />
<p class="text">公益性科研事业单位、新型研发机构、重大科技基础设施法人单位。</p>
</div>
<ul class="total">
<li>
<p class="num">300+</p>
<p class="text">在职员工</p>
</li>
<li>
<p class="num">85%</p>
<p class="text">工程技术人员</p>
</li>
<li>
<p class="num">200+</p>
<p class="text">培养专项博士</p>
</li>
</ul>
</div>
<img src="@/assets/images/science/1.png" alt="" class="pic" />
</div>
</div>
</div>
</template>
<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
export default {
mixins: [mixins],
data() {
return {
};
},
mounted() {
new WOW().init();
},
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[data.length - 1][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
this.modules = json;
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
}
})
.catch((err) => {});
},
},
};
</script>
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
.about {
padding-top: 0;
.inner {
position: relative;
display: flex;
padding: 20px;
margin-top: -50px;
background-color: #fff;
}
.pic {
width: 40%;
height: 330px;
margin-right: 30px;
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
&:before {
content: '';
display: block;
width: 28px;
height: 4px;
margin-bottom: 12px;
background: #0280F1;
}
}
.des {
margin: 20px 0;
font-size: 1rem;
color: #666;
line-height: 2;
}
}
.fac {
.card {
display: flex;
li {
width: calc((100% - 20px) / 2);
color: #333;
background-color: #FCFBFB;
&:first-child {
margin-right: 20px;
}
}
.pic {
width: 100%;
height: 350px;
}
.texts {
padding: 20px;
}
h6 {
margin-bottom: 10px;
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.text {
font-size: 1rem;
}
}
.l-card {
display: flex;
margin-top: 20px;
li {
position: relative;
width: calc((100% - 40px) / 3);
height: 380px;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
height: 100%;
}
.texts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 140px 30px 0;
color: #fff;
background-color: rgba(0, 0, 0, .5);
}
h6 {
margin-bottom: 15px;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
line-height: 2;
@include mul-ellipsis(4);
}
}
}
.scan {
.scan-inner {
display: flex;
padding-left: 20%;
}
.left {
width: 30%;
margin-right: 80px;
}
.line {
display: flex;
align-items: center;
margin-bottom: 30px;
.icon {
width: 50px;
height: 50px;
margin-right: 20px;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
line-height: 2;
@include mul-ellipsis(2);
}
}
.total {
display: flex;
justify-content: space-between;
margin-top: 50px;
.num {
margin-bottom: 10px;
font-size: 2rem;
font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
font-weight: 800;
color: #1583FF;
}
.text {
font-size: 1rem;
color: #333;
}
}
.pic {
width: 70%;
height: 700px;
}
}
</style>

14
src/router/modules/devHistory.js
Unescape View File

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'devHistory'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};

14
src/router/modules/overview.js
Unescape View File

@ -0,0 +1,14 @@
import BasicLayout from '@/layouts/home'
const name = 'overview'
export default {
path: `/${name}`,
component: BasicLayout,
children: [
{
name,
path: `/${name}`,
component: () => import(`@/pages/${name}`),
meta: { title: '' }
}
]
};
Write Preview
Loading…
Cancel
Save