master
yujialong 2 years ago
parent cd191e8654
commit d0bbcda86c
  1. BIN
      src/assets/images/address.png
  2. 6
      src/components/modules/module.vue
  3. 23
      src/mixins/page/index.js
  4. 9
      src/pages/column/list/index.vue
  5. 296
      src/pages/column/page/edu.vue
  6. 556
      src/pages/column/page/news.vue
  7. 14
      src/router/modules/column.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 B

@ -85,7 +85,7 @@
<Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="data.form[item.prop]" :init="editorConfig" />
</el-form-item>
</el-form>
<el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
<el-form v-else-if="data.type === 'column' || data.type === 'columns'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
<el-form-item prop="site" label="站点选择">
<el-select v-model="data.form.site" @change="siteChange">
<el-option
@ -204,8 +204,8 @@ export default {
methods: {
// form
handleForm() {
if (this.data.type === 'form') {
const { forms } = this.data
const { type, forms } = this.data
if (type === 'form') {
forms.map(e => {
if (e.required) {
this.rules[e.prop] = [

@ -12,6 +12,7 @@ export default {
id: '',
diaVisible: false,
curModule: 0,
curListIndex: 0,
curData: {},
}
},
@ -25,7 +26,7 @@ export default {
// 获取详情
getInfo() {
this.modules.map(e => {
const { type } = e
const { type, list } = e
// 克隆一个原始row,方便添加
if (type === 'banner' || type === 'introduce') {
const data = JSON.parse(JSON.stringify(e.form || e.list[0]))
@ -33,8 +34,14 @@ export default {
if (typeof data[i] === 'string') data[i] = ''
}
e.originForm = data
} else if (type === 'columns') {
if (!list.length) {
// 克隆6个栏目
for (let i = 0; i < 6; i++) {
e.list.push(JSON.parse(JSON.stringify(e.form)))
}
}
}
// 克隆一个空值的form
// if (e.form) {
// const form = JSON.parse(JSON.stringify(e.form))
@ -44,8 +51,6 @@ export default {
// e.originForm = form
// }
})
console.log("🚀 ~ file: index.js ~ line 36 ~ getInfo ~ originForm", this.modules)
// 查询页面详情
this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
if (data.length) {
@ -56,15 +61,23 @@ export default {
}).catch(err => {})
},
// 展开模块设置
toSet(i) {
toSet(i, listIndex) {
this.curModule = i
this.curData = JSON.parse(JSON.stringify(this.modules[i]))
if (this.curData.type === 'columns') {
this.curListIndex = listIndex
this.curData.form = JSON.parse(JSON.stringify(this.curData.list[listIndex]))
}
this.diaVisible = true
},
// 模块设置提交
moduleSubmit() {
this.diaVisible = false
if (this.curData.type === 'columns') {
this.modules[this.curModule].list[this.curListIndex] = JSON.parse(JSON.stringify(this.curData.form))
} else {
this.modules[this.curModule] = this.curData
}
},
// 处理预览和保存的json
handleJson() {

@ -53,13 +53,13 @@
</template>
</el-table-column>
<el-table-column v-if="settings[6].show" prop="id" label="ID" min-width="80"></el-table-column>
<el-table-column v-if="settings[7].show" label="操作" width="240">
<el-table-column v-if="settings[7].show" label="操作" width="270">
<template slot-scope="scope">
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="text" @click="edit(scope.row, 'add')">新增下级</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button>
<el-button type="text" @click="preview(scope.row)">预览</el-button>
<el-button v-if="scope.row.typeId == 3" type="text" @click="page(scope.row)">页面设置</el-button>
<el-button v-if="scope.row.typeId == 3" class="page-set" type="primary" size="mini" @click="page(scope.row)">页面设置</el-button>
</template>
</el-table-column>
</el-table>
@ -276,7 +276,7 @@ export default {
//
preview(row) {
const item = ColumnConst.pageStyle.find(e => e.id == row.listStyleId)
window.open(`http://192.168.31.${Setting.isDev ? 126 : 136}:8095/#/${item ? item.path : 'home'}?id=${row.id}`)
window.open((Setting.isDev ? `http://${location.hostname}:8095` : 'http://192.168.31.136') + `/#/${item ? item.path : 'home'}?id=${row.id}`)
},
//
page(row) {
@ -446,4 +446,7 @@ export default {
border-radius: 2px;
}
}
.page-set {
padding: 6px;
}
</style>

@ -0,0 +1,296 @@
<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 gray">
<div class="inner c-wrap">
<h2 class="b-title">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p>
<img width="100%" height="536" :src="modules[1].form.pic" alt="">
<div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div>
</div>
</div>
<div class="block">
<div class="inner c-wrap">
<h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p>
<img width="100%" height="536" :src="modules[1].form.pic" alt="">
<div class="cover" @click="toSet(2)">点击更改图片标题概述与链接</div>
</div>
</div>
<div class="block gray">
<div class="inner c-wrap">
<h2 class="b-title">Engagement</h2>
<p class="intro">Serving Community</p>
<ul class="list">
<li v-for="(item, i) in modules[3].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>
</div>
</li>
</ul>
<div class="cover" @click="toSet(3)">点击更改图片标题概述与链接</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/edu/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/edu/2.png'),
title: 'Partnership',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
siteSelection: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
des: `Together, Stronger`
}
},
{
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/edu/2.png'),
title: 'Programs',
link: {
linkName: '无',
connectionType: 1,
columnId: [],
articleId: '',
linkAddress : '',
siteSelection: '',
otherColumnId: [],
otherArticleId: '',
isOpen: 1
},
des: `Our campus is Shenzhen and Beyound`
}
},
{
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/edu/3.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;
}
}
}
.pic {
width: 650px;
height: 730px;
}
.texts {
position: absolute;
top: 120px;
left: 610px;
width: 850px;
height: 440px;
padding: 60px 30px 30px 100px;
background-color: #fff;
}
h6 {
font-size: 40px;
color: #3C3C3C;
}
.sub {
margin: 20px 0;
font-size: 24px;
color: #1C1C1C;
line-height: 33px;
}
.des {
font-size: 20px;
color: #3C3C3C;
line-height: 32px;
}
}
</style>

@ -0,0 +1,556 @@
<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>
<ul class="tabs">
<li :class="{active: item.id == active}" v-for="(item, i) in tabs" :key="i">
{{ item.name }}
<div class="cover" @click="toSet(1, i)">关联栏目</div>
</li>
</ul>
<div class="block">
<div class="inner">
<h2 class="b-title">Seminars & Workshops</h2>
<p class="intro">What makes a ligh chinese bay chaser</p>
<div class="banner">
<img width="100%" height="480" src="@/assets/images/about/5.png" alt="">
<div class="right">
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6>
<div class="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 in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div>
<p class="meta">2022-07-24 | Research</p>
</div>
</div>
<ul class="card">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="texts">
<p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<div class="texts">
<p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<div class="texts">
<p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="">
</div>
</li>
</ul>
<div class="more">More news ></div>
</div>
</div>
<div class="block gray">
<div class="inner lg">
<div class="c-wrap">
<h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p>
<div class="cover" @click="toSet(2)">点击更换标题与描述</div>
</div>
<div class="shop-shows">
<div class="left">
<img width="100%" height="400" src="@/assets/images/about/5.png" alt="">
<div class="texts">
<h6>2022 New Year Messag President Sun Dongbai.</h6>
<div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</div>
</div>
</div>
<div class="right">
<ul class="show-card">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="des">Comprises the installation and nanostructuri</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<div class="des">Prof. Stephan V. Roth's research</div>
</li>
</ul>
<ul class="card-list">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="texts">
<h6>Hold doctorates or the highest degree in their field</h6>
<div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/10.png" alt="">
<div class="texts">
<h6>This 2019 image depicted a Centers for Disease</h6>
<div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the</div>
</div>
</li>
<li>
<img class="pic" src="@/assets/images/about/11.png" alt="">
<div class="texts">
<h6>Browse premium related images on iStock</h6>
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.</div>
</div>
</li>
</ul>
</div>
<div class="cover" @click="toSet(3)">关联栏目</div>
</div>
</div>
</div>
<div class="block conference">
<div class="inner lg">
<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>
<div class="shows">
<div class="left">
<img width="100%" height="558" src="@/assets/images/about/5.png" alt="">
<div class="texts">
<div class="meta">
<p class="date">09</p>
<p class="year">2022-03</p>
</div>
<div>
<h6>Browse premium related images on iStock</h6>
<div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.</div>
</div>
</div>
</div>
<ul class="card-list">
<li>
<img class="pic" src="@/assets/images/about/9.png" alt="">
<div class="texts">
<h6>Professional technical Free electron laser device</h6>
<p class="text">
<img class="icon" src="@/assets/images/address.png" alt="">
Jiahang Shao
</p>
<p class="text">
<img class="icon" src="@/assets/images/address.png" alt="">
Time: 2022.8.13 14:30
</p>
<p class="text">
<img class="icon" src="@/assets/images/address.png" alt="">
Address: Big conference room on the fourth floor of headquarters
</p>
</div>
</li>
</ul>
<div class="cover" @click="toSet(5)">关联栏目</div>
</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: 'columns',
form: {
columnName: '',
site: '',
column: '',
articleNum: '',
columnTitle: 1,
columnTitleCustom: ''
},
list: []
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: 'Seminars & Workshops',
des: 'What makes a ligh chinese bay chaser'
}
},
{
type: 'column',
form: {
site: '',
column: '',
articleNum: '',
columnTitle: 1,
columnTitleCustom: ''
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: 'Conference',
des: 'What makes a ligh chinese bay chaser'
}
},
{
type: 'column',
form: {
site: '',
column: '',
articleNum: '',
columnTitle: 1,
columnTitleCustom: ''
}
},
],
tabs: [
{
id: 1,
name: 'General news'
},
{
id: 2,
name: 'Research news'
},
{
id: 3,
name: 'Journal covers'
},
{
id: 1,
name: 'General news'
},
{
id: 2,
name: 'Research news'
},
{
id: 3,
name: 'Journal covers'
}
],
active: ''
}
},
mounted() {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
@import "../../../styles/page/page.scss";
.tabs {
display: flex;
justify-content: center;
box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26);
li {
position: relative;
padding: 25px 19px;
margin: 0 10px;
font-size: 22px;
color: #333;
border-bottom: 4px solid transparent;
text-shadow: 0px 2px 14px rgba(167,167,167,0.26);
cursor: pointer;
&.active {
color: #1583FF;
border-bottom-color: #1583FF;
}
}
}
.banner {
display: flex;
.pic {
width: 700px;
height: 380px;
}
.right {
padding: 50px 50px 30px;
background: #1583FF;
color: #fff;
}
h6 {
font-size: 24px;
}
.des {
margin: 30px 0;
font-size: 16px;
line-height: 24px;
}
.meta {
font-size: 16px;
}
}
.card {
display: flex;
margin-top: 40px;
li {
width: 448px;
margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
border-radius: 6px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
height: 240px;
}
.texts {
padding: 40px 30px;
}
.meta {
font-size: 16px;
color: #666;
}
.des {
margin: 10px 0;
font-size: 20px;
color: #333;
line-height: 28px;
}
.arrow {
width: 36px;
}
}
.more {
width: 374px;
margin: 58px auto 0;
line-height: 64px;
font-size: 30px;
text-align: center;
color: #1583FF;
border-radius: 35px;
border: 2px solid #2B6CEF;
cursor: pointer;
}
.shop-shows {
position: relative;
display: flex;
.left {
width: 660px;
margin-right: 20px;
background-color: #fff;
.texts {
padding: 40px 30px;
}
h6 {
font-size: 24px;
color: #272727;
}
.des {
margin-top: 10px;
font-size: 16px;
color: #666;
line-height: 30px;
}
}
.right {
width: 824px;
}
.show-card {
display: flex;
margin-bottom: 20px;
li {
position: relative;
&:first-child {
margin-right: 22px;
}
}
.pic {
width: 401px;
height: 197px;
}
.des {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-size: 16px;
color: #fff;
line-height: 48px;
text-align: center;
background: rgba(0,0,0,0.49);
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
}
}
.card-list {
padding: 34px 26px;
background-color: #fff;
li {
display: inline-flex;
padding-right: 124px;
margin-bottom: 38px;
background: url(../../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
&:last-child {
margin-bottom: 0;
}
}
.pic {
width: 116px;
height: 85px;
margin-right: 28px;
}
h6 {
font-size: 20px;
color: #272727;
}
.des {
margin-top: 15px;
font-size: 14px;
color: #666;
line-height: 24px;
}
}
}
.conference {
background: #072947;
.b-title, .intro {
color: #fff;
}
.shows {
position: relative;
display: flex;
}
.left {
width: 688px;
margin-right: 20px;
background-color: #fff;
.texts {
display: flex;
padding: 40px 30px;
}
.meta {
padding: 10px 23px 10px 0;
margin-right: 32px;
text-align: center;
border-right: 1px solid #ddd;
}
.date {
font-size: 45px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #1F1F1F;
line-height: 52px;
}
.year {
font-size: 16px;
white-space: nowrap;
color: #666;
}
h6 {
font-size: 20px;
color: #272727;
}
.des {
margin-top: 10px;
font-size: 14px;
color: #666;
line-height: 24px;
}
}
.card-list {
width: 784px;
li {
display: flex;
padding: 24px;
margin-bottom: 13px;
background-color: #fff;
}
.pic {
width: 188px;
height: 130px;
margin-right: 28px;
}
h6 {
margin-bottom: 10px;
font-size: 20px;
color: #333;
}
.text {
display: flex;
align-items: center;
margin: 10px 0;
}
.icon {
width: 15px;
margin-right: 12px;
}
}
}
</style>

@ -42,12 +42,24 @@ export default {
path: `careers`,
component: () => import('@/pages/column/page/careers'),
meta: { title: 'CAREERS' }
},,
{
name: `${pre}edu`,
path: `edu`,
component: () => import('@/pages/column/page/edu'),
meta: { title: 'EDUCATION & COLLABORATION' }
},
{
name: `${pre}news`,
path: `news`,
component: () => import('@/pages/column/page/news'),
meta: { title: 'NEWS&Events' }
},
{
name: `${pre}newsPress`,
path: `newsPress`,
component: () => import('@/pages/column/page/newsPress'),
meta: { title: 'NEWS' }
meta: { title: 'NEWS&Events-press room' }
}
]
}

Loading…
Cancel
Save