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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/const/modules.js
  2. 426
      src/pages/column/page/home.vue

6
src/const/modules.js
Unescape View File

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

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

@ -3,65 +3,86 @@
<div class="actions">
<p class="page-name">页面设置/HOME</p>
<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 type="primary" @click="save(1)">发布</el-button>
<el-button type="primary"
@click="save(1)">发布</el-button>
<el-button @click="back">放弃编辑</el-button>
</div>
</div>
<div class="modules">
<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">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<img width="100%" height="100%" :src="item.pic" alt="">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<img width="100%"
height="100%"
:src="item.pic"
alt="">
</el-carousel-item>
</template>
</el-carousel>
<div class="cover" @click="toSet(0)">点击更换banner与链接</div>
<div class="cover"
@click="toSet(0)">点击更换banner与链接</div>
</div>
<div class="block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p>
<div class="cover" @click="toSet(1)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(1)">点击更换标题与描述</div>
</div>
<ul class="card">
<li>
<img width="100%" :src="modules[2].form.pic" alt="">
<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="">
<img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div>
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
<div class="cover"
@click="toSet(2)">点击更改图片、标题概述与链接</div>
</li>
<li>
<img width="100%" :src="modules[3].form.pic" alt="">
<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="">
<img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div>
<div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
<div class="cover"
@click="toSet(3)">点击更改图片、标题概述与链接</div>
</li>
</ul>
</div>
</div>
<div class="block news-block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p>
<div class="cover" @click="toSet(4)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(4)">点击更换标题与描述</div>
</div>
<ul class="news">
<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">
<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>
@ -69,7 +90,8 @@
</div>
</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">
<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>
@ -77,7 +99,8 @@
</div>
</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">
<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>
@ -85,7 +108,8 @@
</div>
</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">
<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>
@ -93,7 +117,8 @@
</div>
</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">
<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>
@ -101,94 +126,117 @@
</div>
</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">
<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>
<div class="cover" @click="toSet(5)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(5)">点击更换标题与描述</div>
</ul>
</div>
</div>
<div class="block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">{{ modules[6].form.title }}</h2>
<p class="intro">{{ modules[6].form.des }}</p>
<div class="cover" @click="toSet(6)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(6)">点击更换标题与描述</div>
</div>
<ul class="people">
<template v-for="(item, i) in modules[7].list">
<li v-if="item.isEnable" :key="i">
<img class="pic" :src="item.pic" alt="">
<li v-if="item.isEnable"
: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="">
<img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div>
</li>
</template>
<div class="cover" @click="toSet(7)">点击更改图片、标题概述与链接</div>
<div class="cover"
@click="toSet(7)">点击更改图片、标题概述与链接</div>
</ul>
</div>
</div>
<div class="about">
<div class="inner">
<img src="@/assets/images/about.png" alt="">
<img src="@/assets/images/about.png"
alt="">
<div class="line"></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 class="cover" @click="toSet(8)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(8)">点击更换标题与描述</div>
</div>
<div class="block" style="padding-bottom: 0">
<div class="block"
style="padding-bottom: 0">
<div class="inner">
<div class="c-wrap">
<h2 class="glance">{{ modules[9].form.title }}</h2>
<div class="cover" @click="toSet(9)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(9)">点击更换标题与描述</div>
</div>
<ul class="stat">
<li>
<p class="num">{{ modules[10].form.title }}</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>
<p class="num">{{ modules[11].form.title }}</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>
<p class="num">{{ modules[12].form.title }}</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>
<p class="num">{{ modules[13].form.title }}</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>
<p class="num">{{ modules[14].form.title }}</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>
<p class="num">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.des }}</p>
<div class="cover" @click="toSet(15)">点击更换标题与描述</div>
<div class="cover"
@click="toSet(15)">点击更换标题与描述</div>
</li>
</ul>
</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>
</template>
@ -197,12 +245,12 @@ import mixins from '@/mixins/page'
import Modules from '@/const/modules'
export default {
mixins: [mixins],
data() {
data () {
return {
modules: Modules.home
}
},
mounted() {
mounted () {
this.$store.commit('user/setCrumbs', [
{
name: '站点管理',
@ -222,169 +270,169 @@ export default {
])
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import "../../../styles/page/page.scss";
@import '../../../styles/page/page.scss';
.block {
.card {
display: flex;
justify-content: space-between;
li {
position: relative;
width: 660px;
}
.texts {
padding-left: 22px;
margin-top: 60px;
border-left: 2px solid #DFE4E9;
.card {
display: flex;
justify-content: space-between;
li {
position: relative;
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;
}
}
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 {
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 {
width: 237px;
height: 167px;
}
.texts {
margin-left: 34px;
&.news-block {
background: url(../../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
}
h6 {
font-size: 18px;
color: #0648A8;
.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 {
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;
}
}
.des {
margin: 14px 0;
font-size: 16px;
color: #333;
line-height: 22px;
}
.meta {
font-size: 16px;
color: #999;
}
}
.people {
position: relative;
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;
.people {
position: relative;
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 {
font-size: 18px;
color: #020202;
line-height: 30px;
}
}
.des {
font-size: 18px;
color: #020202;
line-height: 30px;
.glance {
padding-bottom: 50px;
font-size: 45px;
font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center;
border-bottom: 1px solid #dedede;
}
}
.glance {
padding-bottom: 50px;
font-size: 45px;
font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center;
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;
.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 {
font-size: 24px;
}
}
.num {
margin-bottom: 10px;
font-size: 60px;
font-weight: 800;
color: #035CE1;
line-height: 49px;
}
.about {
position: relative;
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: 24px;
font-size: 30px;
color: #fff;
}
}
}
.about {
position: relative;
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;
.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>
Write Preview
Loading…
Cancel
Save