yujialong 11 months ago
parent 71dd3009e2
commit 9aec09aea7
  1. BIN
      src/assets/images/style/72.png
  2. 4
      src/components/modules/content.vue
  3. 6
      src/components/modules/module.vue
  4. 22
      src/const/modules.js
  5. 169
      src/pages/column/list/index.vue
  6. 76
      src/pages/column/page/estate/location/index.vue
  7. 188
      src/pages/column/page/news.vue
  8. 4
      src/pages/column/page/userSharing.vue

Binary file not shown.

Before

Width:  |  Height:  |  Size: 354 KiB

After

Width:  |  Height:  |  Size: 28 KiB

@ -221,8 +221,8 @@ export default {
this.$message.error('请上传图片!') this.$message.error('请上传图片!')
return false return false
} }
if (size / 1024 / 1024 > 30) { if (size / 1024 / 1024 > 100) {
this.$message.error('请上传30M以内的图片!') this.$message.error('请上传100M以内的图片!')
return false return false
} }
this.file = file this.file = file

@ -111,7 +111,7 @@
</div> </div>
<div slot="tip" <div slot="tip"
class="el-upload__tip"> class="el-upload__tip">
<p>只支持.jpg,.png,.mp4格式</p> <p>只支持.jpg,.png格式</p>
</div> </div>
</el-upload> </el-upload>
<el-upload v-if="item.type === 'video'" <el-upload v-if="item.type === 'video'"
@ -506,8 +506,8 @@ export default {
this.$message.error('请上传图片!') this.$message.error('请上传图片!')
return false return false
} }
if (size / 1024 / 1024 > 30) { if (size / 1024 / 1024 > 100) {
this.$message.error('请上传30M以内的图片!') this.$message.error('请上传100M以内的图片!')
return false return false
} }
this.file = file this.file = file

@ -4026,6 +4026,14 @@ export default {
{ {
type: 'form', type: 'form',
forms: [ forms: [
{
type: 'upload',
prop: 'pic',
label: '图片',
required: true,
width: 720,
height: 420
},
{ {
type: 'editor', type: 'editor',
prop: 'title', prop: 'title',
@ -4038,6 +4046,12 @@ export default {
label: '小标题', label: '小标题',
required: false required: false
}, },
{
type: 'input',
prop: 'enTitle',
label: '英文标题',
required: false
},
{ {
type: 'textarea', type: 'textarea',
prop: 'des', prop: 'des',
@ -4045,8 +4059,10 @@ export default {
} }
], ],
form: { form: {
pic: 'http://10.10.11.7/images/userSharing/2.png',
title: '用户共享', title: '用户共享',
subTitle: '高效运行、分类开放', subTitle: '高效运行、分类开放',
enTitle: 'EFFICIENT OPERATION, CLASSIFICATION OPEN',
des: `S³FEL是由深圳市政府投资建设的新一代自由电子激光大科学装置,将成为世界上顶级的先进光源大科学装置,是支撑深圳社会主义先行示范区和大湾区综合性国家科学中心建设的大型公共科技创新平台,对提升我国的科技影响力、集聚顶尖科技人才、推动科技创新具有非常重要的意义。 S³FEL以“高效运行、分类开放”为共享理念,向全世界科技界实行开放共享,促进信息、材料、能源、生物化学等多个基础科学领域的极速发展。` des: `S³FEL是由深圳市政府投资建设的新一代自由电子激光大科学装置,将成为世界上顶级的先进光源大科学装置,是支撑深圳社会主义先行示范区和大湾区综合性国家科学中心建设的大型公共科技创新平台,对提升我国的科技影响力、集聚顶尖科技人才、推动科技创新具有非常重要的意义。 S³FEL以“高效运行、分类开放”为共享理念,向全世界科技界实行开放共享,促进信息、材料、能源、生物化学等多个基础科学领域的极速发展。`
} }
}, },
@ -6158,7 +6174,7 @@ export default {
label: '链接' label: '链接'
}, },
{ {
type: 'textarea', type: 'editor',
prop: 'des', prop: 'des',
label: '描述' label: '描述'
} }
@ -6205,7 +6221,7 @@ export default {
label: '链接' label: '链接'
}, },
{ {
type: 'textarea', type: 'editor',
prop: 'des', prop: 'des',
label: '描述' label: '描述'
} }
@ -9769,7 +9785,7 @@ export default {
required: true required: true
}, },
{ {
type: 'input', type: 'editor',
prop: 'des', prop: 'des',
label: '描述', label: '描述',
required: true required: true

@ -2,91 +2,157 @@
<div class="page"> <div class="page">
<div class="tool"> <div class="tool">
<div class="search-wrap"> <div class="search-wrap">
<el-input placeholder="请输入栏目名称" v-model.trim="keyword" clearable></el-input> <el-input placeholder="请输入栏目名称"
v-model.trim="keyword"
clearable></el-input>
</div> </div>
<div class="actions"> <div class="actions">
<el-dropdown class="setting" trigger="click" :hide-on-click="false"> <el-dropdown class="setting"
<img class="icon" src="@/assets/images/setting.png" alt=""> trigger="click"
:hide-on-click="false">
<img class="icon"
src="@/assets/images/setting.png"
alt="">
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item> <el-dropdown-item>
<el-button @click="resetColumns" type="text">列重置</el-button> <el-button @click="resetColumns"
type="text">列重置</el-button>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item v-for="(column, i) in settings" :key="i" :divided="i === 0"> <el-dropdown-item v-for="(column, i) in settings"
:key="i"
:divided="i === 0">
<el-checkbox v-model="column.show">{{ column.name }}</el-checkbox> <el-checkbox v-model="column.show">{{ column.name }}</el-checkbox>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'" type="primary" @click="add" >新增</el-button> <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:新增'"
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" @click="batchDel">删除</el-button> type="primary"
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'" class="lg" @click="sort">更改排序</el-button> @click="add">新增</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:导航样式设置'" class="lg" @click="styleSet">导航样式设置</el-button> <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'"
@click="batchDel">删除</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:更改排序'"
class="lg"
@click="sort">更改排序</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:导航样式设置'"
class="lg"
@click="styleSet">导航样式设置</el-button>
</div> </div>
</div> </div>
<el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center" @selection-change="handleSelectionChange" @select-all="selectAll" row-key="id"> <el-table v-loading="listLoading"
<el-table-column v-if="settings[0].show" type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> ref="table"
<el-table-column prop="columnName" show-overflow-tooltip label="名称" min-width="140"></el-table-column> :data="list"
<el-table-column v-if="settings[1].show" prop="typeId" label="栏目类型" min-width="100"> default-expand-all
class="table"
header-align="center"
@selection-change="handleSelectionChange"
@select-all="selectAll"
row-key="id">
<el-table-column v-if="settings[0].show"
type="selection"
width="50"
align="center"
:reserve-selection="true"></el-table-column>
<el-table-column prop="columnName"
show-overflow-tooltip
label="名称"
min-width="140"></el-table-column>
<el-table-column v-if="settings[1].show"
prop="typeId"
label="栏目类型"
min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }} {{ types.find(e => e.id == scope.row.typeId) && types.find(e => e.id == scope.row.typeId).name }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="settings[2].show" prop="templateName" label="栏目模板" min-width="100"> <el-table-column v-if="settings[2].show"
prop="templateName"
label="栏目模板"
min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.typeId === 2 ? '--' : scope.row.templateName }} {{ scope.row.typeId === 2 ? '--' : scope.row.templateName }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="settings[3].show" prop="listStyle" label="列表/长页样式" min-width="100"> <el-table-column v-if="settings[3].show"
prop="listStyle"
label="列表/长页样式"
min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.typeId === 2 ? '--' : scope.row.listStyle }} {{ scope.row.typeId === 2 ? '--' : scope.row.listStyle }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="settings[4].show" prop="detailStyle" label="详情样式" min-width="100"> <el-table-column v-if="settings[4].show"
prop="detailStyle"
label="详情样式"
min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
{{ (scope.row.typeId === 1 || scope.row.typeId === 4) ? scope.row.detailStyle : '--' }} {{ (scope.row.typeId === 1 || scope.row.typeId === 4) ? scope.row.detailStyle : '--' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="settings[5].show" prop="menuVisible" label="导航菜单" min-width="100"> <el-table-column v-if="settings[5].show"
prop="menuVisible"
label="导航菜单"
min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch v-model="scope.row.menuVisible"
v-model="scope.row.menuVisible"
:active-value="0" :active-value="0"
:inactive-value="1" :inactive-value="1"
@change="switchOff($event, scope.row, scope.$index)"> @change="switchOff($event, scope.row, scope.$index)">
</el-switch> </el-switch>
</template> </template>
</el-table-column> </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[6].show"
<el-table-column v-if="settings[7].show" label="操作" width="270"> prop="id"
label="ID"
min-width="80"></el-table-column>
<el-table-column v-if="settings[7].show"
label="操作"
width="270">
<template slot-scope="scope"> <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 + ':内容管理:栏目管理:新增下级'"
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'" type="text" @click="edit(scope.row, 'edit')">编辑</el-button> type="text"
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:删除'" type="text" @click="del(scope.row)">删除</el-button> @click="edit(scope.row, 'add')">新增下级</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:预览'" v-if="scope.row.typeId != 2" type="text" @click="preview(scope.row)">预览</el-button> <el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:编辑'"
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:页面管理'" v-if="scope.row.typeId == 3" class="page-set" type="primary" size="mini" @click="page(scope.row)">页面设置</el-button> 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 v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:预览'"
v-if="scope.row.typeId != 2"
type="text"
@click="preview(scope.row)">预览</el-button>
<el-button v-auth="'/site/list:' + siteName + ':内容管理:栏目管理:页面管理'"
v-if="scope.row.typeId == 3"
class="page-set"
type="primary"
size="mini"
@click="toPage(scope.row)">页面设置</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog title="编辑栏目排序" :visible.sync="sortVisible" width="750px" :close-on-click-modal="false"> <el-dialog title="编辑栏目排序"
:visible.sync="sortVisible"
width="750px"
:close-on-click-modal="false">
<div class="sort-wrap"> <div class="sort-wrap">
<ul class="thead"> <ul class="thead">
<li style="width: 395px;padding-left: 30px">栏目</li> <li style="width: 395px;padding-left: 30px">栏目</li>
<li style="width: 205px">栏目类型</li> <li style="width: 205px">栏目类型</li>
<li>前台可见</li> <li>前台可见</li>
</ul> </ul>
<el-tree <el-tree class="sort"
class="sort"
:data="sortColumns" :data="sortColumns"
node-key="id" node-key="id"
default-expand-all default-expand-all
draggable> draggable>
<ul class="sort-line" slot-scope="{ node, data }"> <ul class="sort-line"
slot-scope="{ node, data }">
<li>{{ data.columnName }}</li> <li>{{ data.columnName }}</li>
<li>{{ types.find(e => e.id == data.typeId) && types.find(e => e.id == data.typeId).name }}</li> <li>{{ types.find(e => e.id == data.typeId) && types.find(e => e.id == data.typeId).name }}</li>
<li> <li>
<el-switch <el-switch v-model="data.menuVisible"
v-model="data.menuVisible"
:active-value="0" :active-value="0"
:inactive-value="1" :inactive-value="1"
@change="switchOff($event, data)"> @change="switchOff($event, data)">
@ -95,18 +161,23 @@
</ul> </ul>
</el-tree> </el-tree>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer"
class="dialog-footer">
<el-button @click="sortVisible = false"> </el-button> <el-button @click="sortVisible = false"> </el-button>
<el-button type="primary" @click="sortSubmit"> </el-button> <el-button type="primary"
@click="sortSubmit"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog title="导航样式设置" :visible.sync="styleVisible" width="850px" :close-on-click-modal="false"> <el-dialog title="导航样式设置"
<el-form class="input-form" label-width="100px"> :visible.sync="styleVisible"
width="850px"
:close-on-click-modal="false">
<el-form class="input-form"
label-width="100px">
<el-form-item label="导航样式"> <el-form-item label="导航样式">
<el-select v-model="form.navigationStyle"> <el-select v-model="form.navigationStyle">
<el-option <el-option v-for="item in styleTypes"
v-for="item in styleTypes"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:value="item.id"> :value="item.id">
@ -117,9 +188,11 @@
<ul class="styles"> <ul class="styles">
<li> <li>
<div class="review"> <div class="review">
<img src="@/assets/images/style1.png" alt=""> <img src="@/assets/images/style1.png"
alt="">
</div> </div>
<el-radio v-model="form.styleTemplate" :label="1">竖行导航</el-radio> <el-radio v-model="form.styleTemplate"
:label="1">竖行导航</el-radio>
</li> </li>
<!-- <li> <!-- <li>
<div class="review"> <div class="review">
@ -130,9 +203,11 @@
</ul> </ul>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer"
class="dialog-footer">
<el-button @click="styleVisible = false"> </el-button> <el-button @click="styleVisible = false"> </el-button>
<el-button type="primary" @click="styleSubmit"> </el-button> <el-button type="primary"
@click="styleSubmit"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -292,7 +367,7 @@ export default {
window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/${row.typeId === 3 ? row.path : 'column'}?id=${row.id}&siteId=${row.siteId}`) window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/${row.typeId === 3 ? row.path : 'column'}?id=${row.id}&siteId=${row.siteId}`)
}, },
// //
page(row) { toPage (row) {
this.$router.push(`${row.path}?id=${row.id}&path=${row.path}&siteId=${row.siteId}`) this.$router.push(`${row.path}?id=${row.id}&path=${row.path}&siteId=${row.siteId}`)
}, },
// //
@ -411,7 +486,7 @@ export default {
.thead { .thead {
display: flex; display: flex;
line-height: 44px; line-height: 44px;
background-color: #F7F7F7; background-color: #f7f7f7;
li { li {
padding: 0 10px; padding: 0 10px;
font-size: 12px; font-size: 12px;
@ -423,7 +498,7 @@ export default {
/deep/.sort { /deep/.sort {
.el-tree-node__content { .el-tree-node__content {
height: auto; height: auto;
border-bottom: 1px solid #EBEDF0; border-bottom: 1px solid #ebedf0;
} }
// .el-tree-node__expand-icon { // .el-tree-node__expand-icon {
// display: none; // display: none;
@ -453,13 +528,13 @@ export default {
margin-right: 20px; margin-right: 20px;
text-align: center; text-align: center;
&:hover .review { &:hover .review {
border-color: #2962FF; border-color: #2962ff;
} }
} }
.review { .review {
padding: 18px; padding: 18px;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid #DCDEE0; border: 1px solid #dcdee0;
border-radius: 2px; border-radius: 2px;
} }
} }

@ -4,9 +4,11 @@
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/产业光源-概况-地理位置</p> <p class="page-name">页面设置/产业光源-概况-地理位置</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>
@ -14,55 +16,78 @@
<div class="modules"> <div class="modules">
<div class="relative"> <div class="relative">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" :src="modules[0].form.pic" alt=""> <img class="banner-img"
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> <div class="cover"
@click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> <li :class="{active: i == active}"
:key="i"
@click="tabChange(i)">{{ item }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="item wow bounceInLeft" data-wow-delay="0.5s"> <div class="item wow bounceInLeft"
data-wow-delay="0.5s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[1].form.pic" alt=""> <img class="pic"
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des"
v-html="modules[1].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(1)">点击更改图片标题概述与链接</div> <div class="cover"
@click="toSet(1)">点击更改图片标题概述与链接</div>
</div> </div>
<div class="item wow bounceInRight" data-wow-delay="0.6s"> <div class="item wow bounceInRight"
data-wow-delay="0.6s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[2].form.pic" alt=""> <img class="pic"
:src="modules[2].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des"
v-html="modules[2].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(2)">点击更改图片标题概述与链接</div> <div class="cover"
@click="toSet(2)">点击更改图片标题概述与链接</div>
</div> </div>
<div class="item wow bounceInLeft" data-wow-delay="0.5s"> <div class="item wow bounceInLeft"
data-wow-delay="0.5s">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" :src="modules[3].form.pic" alt=""> <img class="pic"
:src="modules[3].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div> <div class="des"
v-html="modules[3].form.des"></div>
</div> </div>
<div class="cover" @click="toSet(3)">点击更改图片标题概述与链接</div> <div class="cover"
@click="toSet(3)">点击更改图片标题概述与链接</div>
</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>
@ -107,7 +132,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../../../styles/page/page.scss"; @import '../../../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -121,8 +146,8 @@ export default {
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583FF; color: #1583ff;
border-bottom-color: #1583FF; border-bottom-color: #1583ff;
} }
} }
} }
@ -138,8 +163,8 @@ export default {
padding: 42px; padding: 42px;
margin-bottom: 36px; margin-bottom: 36px;
color: #333; color: #333;
background: #F5F5F5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat; background: #f5f5f5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
transition: .5s; transition: 0.5s;
&:nth-child(even) { &:nth-child(even) {
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -163,7 +188,7 @@ export default {
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s; transition: 0.5s;
} }
.texts { .texts {
width: 707px; width: 707px;
@ -183,7 +208,7 @@ export default {
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tabs { .tabs {
overflow: hidden;; overflow: hidden;
overflow-x: auto; overflow-x: auto;
white-space: normal; white-space: normal;
justify-content: normal; justify-content: normal;
@ -203,6 +228,5 @@ export default {
} }
} }
} }
} }
</style> </style>

@ -3,36 +3,50 @@
<div class="actions"> <div class="actions">
<p class="page-name">页面设置/NEWS&EVENTS</p> <p class="page-name">页面设置/NEWS&EVENTS</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="480px" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> <el-carousel height="480px"
: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>
<ul class="tabs"> <ul class="tabs">
<li :class="{active: item.id == active}" v-for="(item, i) in modules[1].list" :key="i"> <li :class="{active: item.id == active}"
v-for="(item, i) in modules[1].list"
:key="i">
{{ item.columnName }} {{ item.columnName }}
<div class="cover" @click="toSet(1, i)">关联栏目</div> <div class="cover"
@click="toSet(1, i)">关联栏目</div>
</li> </li>
</ul> </ul>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="banner"> <div class="news-banner">
<img width="100%" height="480" src="http://10.10.11.7/images/about/5.png" alt=""> <img width="100%"
height="480"
src="http://10.10.11.7/images/about/5.png"
alt="">
<div class="right"> <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> <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> <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>
@ -41,27 +55,39 @@
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <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=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <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=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/11.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<p class="meta">2022-09-09 | Research</p> <p class="meta">2022-09-09 | Research</p>
<div class="des">IASF is driven to serve the Science and industry, and solve grand </div> <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=""> <img class="arrow"
src="@/assets/images/arrow.png"
alt="">
</div> </div>
</li> </li>
</ul> </ul>
@ -74,11 +100,15 @@
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro">{{ modules[2].form.des }}</p>
<div class="cover" @click="toSet(2)">点击更换标题与描述</div> <div class="cover"
@click="toSet(2)">点击更换标题与描述</div>
</div> </div>
<div class="shop-shows"> <div class="shop-shows">
<div class="left"> <div class="left">
<img width="100%" height="400" src="http://10.10.11.7/images/about/5.png" alt=""> <img width="100%"
height="400"
src="http://10.10.11.7/images/about/5.png"
alt="">
<div class="texts"> <div class="texts">
<h6>2022 New Year Messag President Sun Dongbai.</h6> <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 class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)</div>
@ -87,31 +117,41 @@
<div class="right"> <div class="right">
<ul class="show-card"> <ul class="show-card">
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="des">Comprises the installation and nanostructuri</div> <div class="des">Comprises the installation and nanostructuri</div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/10.png"
alt="">
<div class="des">Prof. Stephan V. Roth's research</div> <div class="des">Prof. Stephan V. Roth's research</div>
</li> </li>
</ul> </ul>
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Hold doctorates or the highest degree in their field</h6> <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 class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/10.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/10.png"
alt="">
<div class="texts"> <div class="texts">
<h6>This 2019 image depicted a Centers for Disease</h6> <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 class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the</div>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/11.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/11.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Browse premium related images on iStock</h6> <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 class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.</div>
@ -119,7 +159,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="cover" @click="toSet(3)">关联栏目</div> <div class="cover"
@click="toSet(3)">关联栏目</div>
</div> </div>
</div> </div>
</div> </div>
@ -129,11 +170,15 @@
<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>
<div class="shows"> <div class="shows">
<div class="left"> <div class="left">
<img width="100%" height="558" src="http://10.10.11.7/images/about/5.png" alt=""> <img width="100%"
height="558"
src="http://10.10.11.7/images/about/5.png"
alt="">
<div class="texts"> <div class="texts">
<div class="meta"> <div class="meta">
<p class="date">09</p> <p class="date">09</p>
@ -147,85 +192,121 @@
</div> </div>
<ul class="card-list"> <ul class="card-list">
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
<li> <li>
<img class="pic" src="http://10.10.11.7/images/about/9.png" alt=""> <img class="pic"
src="http://10.10.11.7/images/about/9.png"
alt="">
<div class="texts"> <div class="texts">
<h6>Professional technical Free electron laser device</h6> <h6>Professional technical Free electron laser device</h6>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Jiahang Shao Jiahang Shao
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Time: 2022.8.13 14:30 Time: 2022.8.13 14:30
</p> </p>
<p class="text"> <p class="text">
<img class="icon" src="@/assets/images/address.png" alt=""> <img class="icon"
src="@/assets/images/address.png"
alt="">
Address: Big conference room on the fourth floor of headquarters Address: Big conference room on the fourth floor of headquarters
</p> </p>
</div> </div>
</li> </li>
</ul> </ul>
<div class="cover" @click="toSet(5)">关联栏目</div> <div class="cover"
@click="toSet(5)">关联栏目</div>
</div> </div>
</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>
@ -292,7 +373,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/page/page.scss"; @import '../../../styles/page/page.scss';
.tabs { .tabs {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -308,12 +389,12 @@ export default {
text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26); text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
cursor: pointer; cursor: pointer;
&.active { &.active {
color: #1583FF; color: #1583ff;
border-bottom-color: #1583FF; border-bottom-color: #1583ff;
} }
} }
} }
.banner { .news-banner {
display: flex; display: flex;
height: auto; height: auto;
.pic { .pic {
@ -322,7 +403,7 @@ export default {
} }
.right { .right {
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583FF; background: #1583ff;
color: #fff; color: #fff;
} }
h6 { h6 {
@ -377,9 +458,9 @@ export default {
line-height: 64px; line-height: 64px;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
color: #1583FF; color: #1583ff;
border-radius: 35px; border-radius: 35px;
border: 2px solid #2B6CEF; border: 2px solid #2b6cef;
cursor: pointer; cursor: pointer;
} }
.shop-shows { .shop-shows {
@ -463,7 +544,8 @@ export default {
} }
.conference { .conference {
background: #072947; background: #072947;
.b-title, .intro { .b-title,
.intro {
color: #fff; color: #fff;
} }
.shows { .shows {
@ -488,7 +570,7 @@ export default {
font-size: 45px; font-size: 45px;
font-family: DINAlternate-Bold, DINAlternate; font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold; font-weight: bold;
color: #1F1F1F; color: #1f1f1f;
line-height: 52px; line-height: 52px;
} }
.year { .year {

@ -38,11 +38,11 @@
<div class="cover" <div class="cover"
@click="toSet(1)">点击更换描述</div> @click="toSet(1)">点击更换描述</div>
<img class="pic" <img class="pic"
src="@/assets/images/userSharing/1.png" :src="modules[1].form.pic"
alt=""> alt="">
<div class="card"> <div class="card">
<p class="title">{{ modules[1].form.subTitle }}</p> <p class="title">{{ modules[1].form.subTitle }}</p>
<p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p> <p class="en-text">{{ modules[1].form.enTitle }}</p>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save