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

fix

Browse Source
master
yujialong 9 months ago
parent 780d32f779
commit 8ba50079cc
2 changed files with 237 additions and 195 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. 6
      src/const/modules.js
  2. 418
      src/pages/column/page/home.vue

6
src/const/modules.js
Unescape View File

@ -2698,15 +2698,9 @@ export default {
label: '标题', label: '标题',
required: true required: true
}, },
{
type: 'textarea',
prop: 'des',
label: '概述'
}
], ],
form: { form: {
title: 'IASF at a glance', title: 'IASF at a glance',
des: ''
} }
}, },
{ {

418
src/pages/column/page/home.vue
Unescape View File

@ -3,23 +3,31 @@
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/HOME</p> <p class="page-name">页面设置/HOME</p>
<div> <div>
<el-button type="primary" @click="preview">预览</el-button> <el-button type="primary"
@click="preview">预览</el-button>
<el-button @click="save(0)">保存为草稿</el-button> <el-button @click="save(0)">保存为草稿</el-button>
<el-button type="primary" @click="save(1)">发布</el-button> <el-button type="primary"
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button> <el-button @click="back">放弃编辑</el-button>
</div> </div>
</div> </div>
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<el-carousel height="500px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <el-carousel height="500px"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable"
<img width="100%" height="100%" :src="item.pic" alt=""> :key="i">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> <div class="cover"
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
@ -27,26 +35,37 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[1].form.title }}</h2> <h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p> <p class="intro">{{ modules[1].form.des }}</p>
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> <div class="cover"
@click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img width="100%" :src="modules[2].form.pic" alt=""> <img width="100%"
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p> <p class="des">{{ modules[2].form.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div> <div class="cover"
@click="toSet(2)">点击更改图片、标题概述与链接</div>
</li> </li>
<li> <li>
<img width="100%" :src="modules[3].form.pic" alt=""> <img width="100%"
:src="modules[3].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<p class="des">{{ modules[3].form.des }}</p> <p class="des">{{ modules[3].form.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
<div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div> <div class="cover"
@click="toSet(3)">点击更改图片、标题概述与链接</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -57,11 +76,13 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p> <p class="intro">{{ modules[4].form.des }}</p>
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> <div class="cover"
@click="toSet(4)">点击更换标题与描述</div>
</div> </div>
<ul class="news"> <ul class="news">
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
@ -69,7 +90,8 @@
</div> </div>
</li> </li>
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
@ -77,7 +99,8 @@
</div> </div>
</li> </li>
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
@ -85,7 +108,8 @@
</div> </div>
</li> </li>
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
@ -93,7 +117,8 @@
</div> </div>
</li> </li>
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <p class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</p>
@ -101,14 +126,16 @@
</div> </div>
</li> </li>
<li> <li>
<img src="http://10.10.11.7/images/home/3.png" alt=""> <img src="http://10.10.11.7/images/home/3.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Message from President Sun Dongbai</h6> <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> <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> <span class="meta">2022.08.12</span>
</div> </div>
</li> </li>
<div class="cover" @click="toSet(5)">点击更换标题与描述</div> <div class="cover"
@click="toSet(5)">点击更换标题与描述</div>
</ul> </ul>
</div> </div>
</div> </div>
@ -118,77 +145,98 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[6].form.title }}</h2> <h2 class="b-title">{{ modules[6].form.title }}</h2>
<p class="intro">{{ modules[6].form.des }}</p> <p class="intro">{{ modules[6].form.des }}</p>
<div class="cover" @click="toSet(6)">点击更换标题与描述</div> <div class="cover"
@click="toSet(6)">点击更换标题与描述</div>
</div> </div>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[7].list"> <template v-for="(item, i) in modules[7].list">
<li v-if="item.isEnable" :key="i"> <li v-if="item.isEnable"
<img class="pic" :src="item.pic" alt=""> :key="i">
<img class="pic"
:src="item.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
<img class="arrow" src="@/assets/images/arrow.png" alt=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</template> </template>
<div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div> <div class="cover"
@click="toSet(7)">点击更改图片、标题概述与链接</div>
</ul> </ul>
</div> </div>
</div> </div>
<div class="about"> <div class="about">
<div class="inner"> <div class="inner">
<img src="@/assets/images/about.png" alt=""> <img src="@/assets/images/about.png"
alt="">
<div class="line"></div> <div class="line"></div>
<div class="text">{{ modules[8].form.title }}</div> <div class="text">{{ modules[8].form.title }}</div>
<div class="des" v-html="modules[8].form.des"></div> <div class="des"
v-html="modules[8].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(8)">点击更换标题与描述</div> <div class="cover"
@click="toSet(8)">点击更换标题与描述</div>
</div> </div>
<div class="block" style="padding-bottom: 0"> <div class="block"
style="padding-bottom: 0">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="glance">{{ modules[9].form.title }}</h2> <h2 class="glance">{{ modules[9].form.title }}</h2>
<div class="cover" @click="toSet(9)">点击更换标题与描述</div> <div class="cover"
@click="toSet(9)">点击更换标题与描述</div>
</div> </div>
<ul class="stat"> <ul class="stat">
<li> <li>
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover"
@click="toSet(10)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" @click="toSet(11)">点击更换标题与描述</div> <div class="cover"
@click="toSet(11)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" @click="toSet(12)">点击更换标题与描述</div> <div class="cover"
@click="toSet(12)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
<div class="cover" @click="toSet(13)">点击更换标题与描述</div> <div class="cover"
@click="toSet(13)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[14].form.title }}</p> <p class="num">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p> <p class="text">{{ modules[14].form.des }}</p>
<div class="cover" @click="toSet(14)">点击更换标题与描述</div> <div class="cover"
@click="toSet(14)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">{{ modules[15].form.title }}</p> <p class="num">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.des }}</p> <p class="text">{{ modules[15].form.des }}</p>
<div class="cover" @click="toSet(15)">点击更换标题与描述</div> <div class="cover"
@click="toSet(15)">点击更换标题与描述</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> <Module ref="module"
:data.sync="curData"
:visible.sync="diaVisible"
@moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -197,12 +245,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules' import Modules from '@/const/modules'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
modules: Modules.home modules: Modules.home
} }
}, },
mounted() { mounted () {
this.$store.commit('user/setCrumbs', [ this.$store.commit('user/setCrumbs', [
{ {
name: '站点管理', name: '站点管理',
@ -228,163 +276,163 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import '../../../styles/page/page.scss';
.block { .block {
.card { .card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li { li {
position: relative; position: relative;
width: 660px; 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;
}
} }
.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 { &.news-block {
background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
}
.news {
position: relative;
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 { .news {
width: 237px; position: relative;
height: 167px; 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;
}
} }
.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 { .people {
position: relative; position: relative;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
} }
.pic { .pic {
width: 660px; width: 660px;
height: 465px; height: 465px;
}
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
} }
.texts {
width: 680px;
padding-top: 150px;
}
h6 {
font-size: 40px;
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.glance { .glance {
padding-bottom: 50px; padding-bottom: 50px;
font-size: 45px; font-size: 45px;
font-weight: bold; font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center; text-align: center;
border-bottom: 1px solid #DEDEDE; border-bottom: 1px solid #dedede;
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
position: relative;
width: 30%;
margin-bottom: 50px;
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
} }
.text { .stat {
font-size: 24px; display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 60px;
li {
position: relative;
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 { .about {
position: relative; position: relative;
padding: 77px 0 198px; padding: 77px 0 198px;
background: url(../../../assets/images/about-bg.png) 0 0/100% 100% no-repeat; background: url(../../../assets/images/about-bg.png) 0 0/100% 100% no-repeat;
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 50px 0 30px; margin: 50px 0 30px;
width: 88px; width: 88px;
height: 6px; height: 6px;
background-color: #fff; background-color: #fff;
&:after { &:after {
content: ''; content: '';
width: 6px; width: 6px;
height: 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, 0.56);
border-radius: 17px;
} }
}
.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> </style>
Write Preview
Loading…
Cancel
Save