After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 828 KiB |
After Width: | Height: | Size: 119 KiB |
After Width: | Height: | Size: 94 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 127 KiB |
After Width: | Height: | Size: 221 KiB |
After Width: | Height: | Size: 315 KiB |
After Width: | Height: | Size: 288 KiB |
After Width: | Height: | Size: 560 KiB |
After Width: | Height: | Size: 616 B |
After Width: | Height: | Size: 982 KiB |
After Width: | Height: | Size: 248 KiB |
After Width: | Height: | Size: 603 KiB |
After Width: | Height: | Size: 776 KiB |
After Width: | Height: | Size: 300 KiB |
After Width: | Height: | Size: 825 KiB |
After Width: | Height: | Size: 187 KiB |
After Width: | Height: | Size: 203 KiB |
After Width: | Height: | Size: 188 KiB |
After Width: | Height: | Size: 320 KiB |
After Width: | Height: | Size: 389 KiB |
After Width: | Height: | Size: 365 KiB |
@ -0,0 +1,614 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<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 @click="$router.back()">放弃编辑</el-button> |
||||
</div> |
||||
|
||||
<div class="relative"> |
||||
<el-carousel height="480px"> |
||||
<template v-for="(item, i) in modules[0].list"> |
||||
<el-carousel-item v-if="item.pic" :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> |
||||
|
||||
<div class="block"> |
||||
<div class="inner"> |
||||
<ul class="card"> |
||||
<li> |
||||
<img class="pic" :src="modules[1].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[1].form.title }}</h6> |
||||
<p class="text">{{ modules[1].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[2].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[2].form.title }}</h6> |
||||
<p class="text">{{ modules[2].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[3].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[3].form.title }}</h6> |
||||
<p class="text">{{ modules[3].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(3)">点击更换标题与描述</div> |
||||
</li> |
||||
<li> |
||||
<img class="pic" :src="modules[4].form.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ modules[4].form.title }}</h6> |
||||
<p class="text">{{ modules[4].form.des }}</p> |
||||
</div> |
||||
<div class="arrow"> |
||||
<img src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="block gray"> |
||||
<div class="inner"> |
||||
<div class="c-wrap"> |
||||
<h2 class="b-title">{{ modules[5].form.title }}</h2> |
||||
<p class="intro">{{ modules[5].form.des }}</p> |
||||
<div class="cover" @click="toSet(5)">点击更换标题与描述</div> |
||||
</div> |
||||
<ul class="people"> |
||||
<li v-for="(item, i) in modules[6].list" :key="i"> |
||||
<img class="comma" src="@/assets/images/comma.png" alt=""> |
||||
<div class="left"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="des">{{ item.des }}</div> |
||||
</div> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
</li> |
||||
<div class="cover" @click="toSet(6)">点击更换标题与描述</div> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<ul class="shows"> |
||||
<li v-for="(item, i) in modules[7].list" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="left"> |
||||
<h6>{{ item.title }}</h6> |
||||
<div class="sub">{{ item.subTitle }}</div> |
||||
<div class="des">{{ item.des }}</div> |
||||
<img class="arrow" src="@/assets/images/arrow-white.png" alt=""> |
||||
</div> |
||||
</li> |
||||
<div class="cover" @click="toSet(7)">点击更换标题与描述</div> |
||||
</ul> |
||||
|
||||
<Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: [ |
||||
{ |
||||
type: 'banner', |
||||
list: [ |
||||
{ |
||||
pic: require('@/assets/images/careers/1.png'), |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
isEnable: 1 |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
type: 'form', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: require('@/assets/images/careers/2.png'), |
||||
title: 'Research', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Positions' |
||||
} |
||||
}, |
||||
{ |
||||
type: 'form', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: require('@/assets/images/careers/3.png'), |
||||
title: 'Engineering', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Positions' |
||||
} |
||||
}, |
||||
{ |
||||
type: 'form', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: require('@/assets/images/careers/4.png'), |
||||
title: 'Management Staff', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Positions' |
||||
} |
||||
}, |
||||
{ |
||||
type: 'form', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: require('@/assets/images/careers/5.png'), |
||||
title: 'Post-doc Programs', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Positions' |
||||
} |
||||
}, |
||||
{ |
||||
type: 'form', |
||||
forms: [ |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '概述' |
||||
} |
||||
], |
||||
form: { |
||||
title: 'Profiles', |
||||
des: 'What makes a light chaser' |
||||
} |
||||
}, |
||||
{ |
||||
type: 'introduce', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: '', |
||||
title: '', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: '' |
||||
}, |
||||
list: [ |
||||
{ |
||||
pic: require('@/assets/images/careers/6.png'), |
||||
title: 'IASF started its journey to chase light, push the boundaries forward, and discover the unknown.', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Throughout the world, most of the top science and technology innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan.', |
||||
isEnable: 1 |
||||
} |
||||
] |
||||
},{ |
||||
type: 'introduce', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'subTitle', |
||||
label: '小标题' |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: '', |
||||
title: '', |
||||
subTitle: '', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: '' |
||||
}, |
||||
list: [ |
||||
{ |
||||
pic: require('@/assets/images/careers/9.png'), |
||||
title: 'Benefits', |
||||
subTitle: 'YOU ARE IN GOOD HANDS', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'We offer the most competitive package to assure the welfare of our people at IAST.', |
||||
isEnable: 1 |
||||
} |
||||
] |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.card { |
||||
display: flex; |
||||
justify-content: center; |
||||
li { |
||||
position: relative; |
||||
display: inline-flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-direction: column; |
||||
width: 368px; |
||||
height: 526px; |
||||
margin-right: 14px; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
&:hover { |
||||
.arrow { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.texts { |
||||
position: relative; |
||||
} |
||||
h6 { |
||||
margin-bottom: 10px; |
||||
font-size: 35px; |
||||
} |
||||
.text { |
||||
font-size: 24px; |
||||
} |
||||
.arrow { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 177px; |
||||
padding-top: 62px; |
||||
text-align: center; |
||||
background: #36404A; |
||||
opacity: 0; |
||||
transition: .3s; |
||||
} |
||||
} |
||||
} |
||||
.people { |
||||
position: relative; |
||||
li { |
||||
position: relative; |
||||
min-height: 450px; |
||||
padding: 100px 70px 30px 57px; |
||||
margin-bottom: 100px; |
||||
background-color: #fff; |
||||
&:nth-child(even) { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
.comma { |
||||
left: 660px; |
||||
} |
||||
.pic { |
||||
left: 0; |
||||
right: auto; |
||||
} |
||||
} |
||||
} |
||||
.comma { |
||||
position: absolute; |
||||
top: -22px; |
||||
left: 57px; |
||||
} |
||||
.left { |
||||
width: 670px; |
||||
} |
||||
h6 { |
||||
font-size: 24px; |
||||
color: #333; |
||||
} |
||||
.des { |
||||
margin-top: 20px; |
||||
font-size: 20px; |
||||
color: #666; |
||||
line-height: 32px; |
||||
} |
||||
.pic { |
||||
position: absolute; |
||||
top: -60px; |
||||
right: 43px; |
||||
width: 600px; |
||||
height: 450px; |
||||
} |
||||
} |
||||
.shows { |
||||
position: relative; |
||||
li { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 654px; |
||||
margin-bottom: 40px; |
||||
color: #fff; |
||||
&:nth-child(even) { |
||||
flex-direction: row-reverse; |
||||
} |
||||
&:nth-child(2) { |
||||
.left { |
||||
background-color: rgba(47, 79, 23, .65); |
||||
} |
||||
} |
||||
&:nth-child(3) { |
||||
.left { |
||||
background-color: rgba(91, 58, 35, .65); |
||||
} |
||||
} |
||||
} |
||||
.left { |
||||
width: 43.3%; |
||||
height: 100%; |
||||
padding: 138px 30px 30px 103px; |
||||
background-color: rgba(54, 54, 54, .65); |
||||
} |
||||
.pic { |
||||
width: 56.9%; |
||||
height: 100%; |
||||
} |
||||
h6 { |
||||
font-size: 46px; |
||||
} |
||||
.sub { |
||||
margin: 20px; |
||||
font-size: 36px; |
||||
} |
||||
.des { |
||||
margin-bottom: 40px; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,193 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="actions"> |
||||
<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 @click="$router.back()">放弃编辑</el-button> |
||||
</div> |
||||
|
||||
<div class="relative"> |
||||
<el-carousel height="480px"> |
||||
<template v-for="(item, i) in modules[0].list"> |
||||
<el-carousel-item v-if="item.pic" :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> |
||||
|
||||
<div class="block"> |
||||
<div class="inner c-wrap"> |
||||
<ul class="list"> |
||||
<li v-for="(item, i) in modules[1].list" :key="i"> |
||||
<img class="pic" :src="item.pic" alt=""> |
||||
<div class="texts"> |
||||
<h6>{{ item.title }}</h6> |
||||
<p class="sub">{{ item.subTitle }}</p> |
||||
<div class="des">{{ item.des }}</div> |
||||
<img src="@/assets/images/arrow.png" alt=""> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
<div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import mixins from '@/mixins/page' |
||||
export default { |
||||
mixins: [mixins], |
||||
data() { |
||||
return { |
||||
modules: [ |
||||
{ |
||||
type: 'banner', |
||||
list: [ |
||||
{ |
||||
pic: require('@/assets/images/news/1.png'), |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
isEnable: 1 |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
type: 'introduce', |
||||
forms: [ |
||||
{ |
||||
type: 'upload', |
||||
prop: 'pic', |
||||
label: '图片', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'title', |
||||
label: '标题', |
||||
required: true |
||||
}, |
||||
{ |
||||
type: 'input', |
||||
prop: 'subTitle', |
||||
label: '小标题' |
||||
}, |
||||
{ |
||||
type: 'link', |
||||
prop: 'link', |
||||
label: '链接' |
||||
}, |
||||
{ |
||||
type: 'textarea', |
||||
prop: 'des', |
||||
label: '描述' |
||||
} |
||||
], |
||||
form: { |
||||
pic: '', |
||||
title: '', |
||||
subTitle: '', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: '' |
||||
}, |
||||
list: [ |
||||
{ |
||||
pic: require('@/assets/images/newsPress/1.png'), |
||||
title: 'community service', |
||||
subTitle: 'IASF is driven to serve the Science and industry, and solve grand challenges.', |
||||
link: { |
||||
linkName: '无', |
||||
connectionType: 1, |
||||
columnId: [], |
||||
articleId: '', |
||||
linkAddress : '', |
||||
siteSelection: '', |
||||
otherColumnId: [], |
||||
otherArticleId: '', |
||||
isOpen: 1 |
||||
}, |
||||
des: 'Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …', |
||||
isEnable: 1 |
||||
} |
||||
] |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import "../../../styles/page/page.scss"; |
||||
.list { |
||||
li { |
||||
position: relative; |
||||
&:nth-child(even) { |
||||
text-align: right; |
||||
.texts { |
||||
left: 0; |
||||
text-align: left; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
width: 650px; |
||||
height: 730px; |
||||
} |
||||
.texts { |
||||
position: absolute; |
||||
top: 120px; |
||||
left: 610px; |
||||
width: 850px; |
||||
height: 440px; |
||||
padding: 60px 30px 30px 100px; |
||||
background: rgba(247, 247, 247, .72); |
||||
} |
||||
h6 { |
||||
font-size: 40px; |
||||
color: #3C3C3C; |
||||
} |
||||
.sub { |
||||
margin: 20px 0; |
||||
font-size: 24px; |
||||
color: #1C1C1C; |
||||
line-height: 33px; |
||||
} |
||||
.des { |
||||
margin-bottom: 20px; |
||||
font-size: 20px; |
||||
color: #3C3C3C; |
||||
line-height: 32px; |
||||
} |
||||
} |
||||
</style> |