yujialong 11 months ago
parent 71dd3009e2
commit 9aec09aea7
  1. BIN
      src/assets/images/style/72.png
  2. 4
      src/components/modules/content.vue
  3. 14
      src/components/modules/module.vue
  4. 22
      src/const/modules.js
  5. 767
      src/pages/column/list/index.vue
  6. 240
      src/pages/column/page/estate/location/index.vue
  7. 612
      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'"
@ -124,10 +124,10 @@
:action="api.upload"> :action="api.upload">
<el-button>上传视频</el-button> <el-button>上传视频</el-button>
<div slot="tip" <div slot="tip"
class="el-upload__tip"> class="el-upload__tip">
<p>请上传大小1G以内的视频</p> <p>请上传大小1G以内的视频</p>
</div> </div>
</el-upload> </el-upload>
<!-- 图片视频都可上传 --> <!-- 图片视频都可上传 -->
<el-upload v-if="item.type === 'media'" <el-upload v-if="item.type === 'media'"
@ -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,114 +2,185 @@
<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"
<ul class="sort-line" slot-scope="{ node, data }"> 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)">
</el-switch> </el-switch>
</li> </li>
</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">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -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>
@ -143,327 +218,327 @@ import Setting from '@/setting'
import ColumnConst from '@/const/column' import ColumnConst from '@/const/column'
import util from '@/libs/util' import util from '@/libs/util'
export default { export default {
data() { data () {
return { return {
siteId: this.$store.state.content.site.id, siteId: this.$store.state.content.site.id,
siteName: this.$store.state.content.site.siteName, siteName: this.$store.state.content.site.siteName,
types: ColumnConst.types, types: ColumnConst.types,
templates: [], templates: [],
listStyle: [], listStyle: [],
pageStyle: [], pageStyle: [],
detailStyle: [], detailStyle: [],
keyword: '', keyword: '',
searchTimer: null, searchTimer: null,
list: [], list: [],
multipleSelection: [], multipleSelection: [],
listLoading: false, listLoading: false,
styleVisible: false, styleVisible: false,
styleTypes: [ styleTypes: [
{ {
id: 1, id: 1,
name: '目录树结构' name: '目录树结构'
} }
], ],
form: { form: {
id: '', id: '',
navigationStyle: 1, navigationStyle: 1,
styleTemplate: 1, styleTemplate: 1,
siteId: this.$store.state.content.site.id siteId: this.$store.state.content.site.id
}, },
originSettings: [], originSettings: [],
settings: [ settings: [
{ {
name: '选择框', name: '选择框',
show: true show: true
}, },
{ {
name: '栏目类型', name: '栏目类型',
show: true show: true
}, },
{ {
name: '栏目模板', name: '栏目模板',
show: true show: true
}, },
{
name: '列表/长页样式',
show: true
},
{
name: '详情样式',
show: true
},
{
name: '导航菜单',
show: true
},
{
name: 'ID',
show: true
},
{
name: '操作',
show: true
}
],
sortVisible: false,
sortColumns: [],
sortLevel: 1,
};
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
this.searchTimer = setTimeout(() => {
this.initData()
}, 500)
}
},
mounted() {
this.$store.commit('user/setCrumbs', [
{ {
name: '站点管理', name: '列表/长页样式',
route: '/site' show: true
}, },
{ {
name: '内容管理' name: '详情样式',
show: true
}, },
{ {
name: '栏目管理' name: '导航菜单',
show: true
},
{
name: 'ID',
show: true
},
{
name: '操作',
show: true
} }
]) ],
this.originSettings = JSON.parse(JSON.stringify(this.settings)) sortVisible: false,
this.getData() sortColumns: [],
}, sortLevel: 1,
methods: { };
getData() { },
this.$post(this.api.listWithTree, { watch: {
siteId: this.siteId, keyword: function (val) {
columnName: this.keyword, clearTimeout(this.searchTimer)
templateId: '', this.searchTimer = setTimeout(() => {
typeId : '', this.initData()
isSort: 1 }, 500)
}).then(({ data }) => { }
this.list = data },
this.listLoading = false mounted () {
}).catch(err => { this.$store.commit('user/setCrumbs', [
this.listLoading = false {
}) name: '站点管理',
}, route: '/site'
// id
getStyle() {
this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {
this.listStyle = data.listingTemplateTypes
this.detailStyle = data.detailsTypeOfTheTemplate
}).catch(err => {})
},
//
initData() {
this.$refs.table.clearSelection()
this.page = 1
this.getData()
},
//
resetColumns() {
this.settings = JSON.parse(JSON.stringify(this.originSettings))
},
add() {
this.$router.push('add')
}, },
edit(row, type) { {
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`) name: '内容管理'
}, },
del(row) { {
this.$confirm("删除栏目将会同时把栏目下的文章一并删除,是否确认删除栏目?", "提示", { name: '栏目管理'
type: "warning" }
])
this.originSettings = JSON.parse(JSON.stringify(this.settings))
this.getData()
},
methods: {
getData () {
this.$post(this.api.listWithTree, {
siteId: this.siteId,
columnName: this.keyword,
templateId: '',
typeId: '',
isSort: 1
}).then(({ data }) => {
this.list = data
this.listLoading = false
}).catch(err => {
this.listLoading = false
})
},
// id
getStyle () {
this.$post(`${this.api.theTemplateIdGetsTheStyle}?templateId=${this.form.templateId}`).then(({ data }) => {
this.listStyle = data.listingTemplateTypes
this.detailStyle = data.detailsTypeOfTheTemplate
}).catch(err => { })
},
//
initData () {
this.$refs.table.clearSelection()
this.page = 1
this.getData()
},
//
resetColumns () {
this.settings = JSON.parse(JSON.stringify(this.originSettings))
},
add () {
this.$router.push('add')
},
edit (row, type) {
this.$router.push(`add?id=${row.id}&level=${row.level + 1}&type=${type}`)
},
del (row) {
this.$confirm("删除栏目将会同时把栏目下的文章一并删除,是否确认删除栏目?", "提示", {
type: "warning"
}).then(() => {
this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => {
util.successMsg("删除成功")
this.getData()
}).catch(res => { })
}).catch(() => { })
},
//
switchOff (val, row) {
this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { })
},
//
preview (row) {
// /column
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}`)
},
//
toPage (row) {
this.$router.push(`${row.path}?id=${row.id}&path=${row.path}&siteId=${row.siteId}`)
},
//
batchDel () {
const list = this.multipleSelection
if (list.length) {
this.$confirm('删除栏目将会同时把栏目下的文章一并删除,是否确认删除栏目?', '提示', {
type: 'warning'
}).then(() => { }).then(() => {
this.$post(`${this.api.deleteColumn}?ids=${row.id}`).then(res => { const data = []
list.map(e => {
data.push('ids=' + e.id)
})
this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => {
this.$refs.table.clearSelection()
util.successMsg("删除成功") util.successMsg("删除成功")
this.getData() this.getData()
}).catch(res => {}) }).catch(res => { })
}).catch(() => {}) }).catch(() => { })
}, } else {
// util.errorMsg('请先选择数据 !')
switchOff(val, row) { }
this.$post(this.api.updateColumn, row).then(res => {}).catch((res) => {}) },
}, handleSelectionChange (val) {
// this.multipleSelection = val
preview(row) { },
// /column //
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}`) selectAll () {
}, this.checkedKeys = !this.checkedKeys
// this.select(this.list, this.checkedKeys)
page(row) { },
this.$router.push(`${row.path}?id=${row.id}&path=${row.path}&siteId=${row.siteId}`) select (data, flag) {
}, data.map(row => {
// this.$refs.table.toggleRowSelection(row, flag)
batchDel() { if (row.children != undefined) this.select(row.children, this.checkedKeys)
const list = this.multipleSelection })
if (list.length) { },
this.$confirm('删除栏目将会同时把栏目下的文章一并删除,是否确认删除栏目?', '提示', { handleCurrentChange (val) {
type: 'warning' this.page = val
}).then(() => { this.$router.push(`list?page=${val}`)
const data = [] this.getData()
list.map(e => { },
data.push('ids=' + e.id) //
}) sort () {
this.$post(`${this.api.deleteColumn}?${data.join('&')}`).then(res => { this.$post(this.api.deleteUselessData).then(res => { }).catch(err => { })
this.$refs.table.clearSelection()
util.successMsg("删除成功")
this.getData()
}).catch(res => {})
}).catch(() => {})
} else {
util.errorMsg('请先选择数据 !')
}
},
handleSelectionChange(val) {
this.multipleSelection = val
},
//
selectAll() {
this.checkedKeys = !this.checkedKeys
this.select(this.list, this.checkedKeys)
},
select(data, flag) {
data.map(row => {
this.$refs.table.toggleRowSelection(row, flag)
if (row.children != undefined) this.select(row.children, this.checkedKeys)
})
},
handleCurrentChange(val) {
this.page = val
this.$router.push(`list?page=${val}`)
this.getData()
},
//
sort() {
this.$post(this.api.deleteUselessData).then(res => {}).catch(err => {})
this.$post(this.api.listWithTree, { this.$post(this.api.listWithTree, {
siteId: this.siteId, siteId: this.siteId,
columnName: '', columnName: '',
templateId: '', templateId: '',
typeId : '', typeId: '',
isSort: 1 isSort: 1
}).then(({ data }) => { }).then(({ data }) => {
this.sortColumns = data this.sortColumns = data
}).catch(err => {}) }).catch(err => { })
this.sortVisible = true this.sortVisible = true
}, },
// //
sortList(list, result, parent = {}) { sortList (list, result, parent = {}) {
list.map((e, i) => { list.map((e, i) => {
if (!parent.id) this.sortLevel = 1 if (!parent.id) this.sortLevel = 1
result.push({ result.push({
id: e.id, id: e.id,
fatherId: parent.id || 0, fatherId: parent.id || 0,
level: this.sortLevel, level: this.sortLevel,
sort: i + 1, sort: i + 1,
})
if (e.children.length) {
++this.sortLevel
this.sortList(e.children, result, e)
}
}) })
}, if (e.children.length) {
// ++this.sortLevel
sortSubmit() { this.sortList(e.children, result, e)
const result = [] }
this.sortList(this.sortColumns, result) })
this.$post(this.api.sortByColumn, result).then(({ data }) => { },
util.successMsg('修改成功') //
this.sortVisible = false sortSubmit () {
this.getData() const result = []
}).catch(err => {}) this.sortList(this.sortColumns, result)
}, this.$post(this.api.sortByColumn, result).then(({ data }) => {
// util.successMsg('修改成功')
styleSet() { this.sortVisible = false
this.styleVisible = true this.getData()
this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => { }).catch(err => { })
// id },
if (data.length) { //
this.form = data[0] styleSet () {
} else { this.styleVisible = true
this.$post(this.api.saveStyle, this.form).then(res => { this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => {
this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => { // id
this.form = data[0] if (data.length) {
}).catch(res => {}) this.form = data[0]
}).catch(res => {}) } else {
} this.$post(this.api.saveStyle, this.form).then(res => {
}).catch(res => {}) this.$post(`${this.api.searchAllBySite}?siteId=${this.siteId}`).then(({ data }) => {
}, this.form = data[0]
// }).catch(res => { })
styleSubmit() { }).catch(res => { })
this.$post(this.api.updateStyle, this.form).then(res => { }
util.successMsg('修改成功') }).catch(res => { })
this.styleVisible = false },
}).catch(res => {}) //
} styleSubmit () {
this.$post(this.api.updateStyle, this.form).then(res => {
util.successMsg('修改成功')
this.styleVisible = false
}).catch(res => { })
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sort-wrap { .sort-wrap {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
.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;
font-weight: 500; font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #323232; color: #323232;
} }
} }
/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;
// } // }
} }
.sort-line { .sort-line {
display: flex; display: flex;
width: 100%; width: 100%;
li { li {
padding: 12px 0; padding: 12px 0;
&:first-child { &:first-child {
width: 230px; width: 230px;
} }
&:nth-child(2) { &:nth-child(2) {
position: absolute; position: absolute;
left: 400px; left: 400px;
} }
&:last-child { &:last-child {
position: absolute; position: absolute;
right: 50px; right: 50px;
}
} }
}
} }
.styles { .styles {
display: inline-flex; display: inline-flex;
li { li {
margin-right: 20px; margin-right: 20px;
text-align: center; text-align: center;
&:hover .review { &:hover .review {
border-color: #2962FF; border-color: #2962ff;
}
}
.review {
padding: 18px;
margin-bottom: 10px;
border: 1px solid #dcdee0;
border-radius: 2px;
} }
}
.review {
padding: 18px;
margin-bottom: 10px;
border: 1px solid #DCDEE0;
border-radius: 2px;
}
} }
.page-set { .page-set {
padding: 6px; padding: 6px;
} }
</style> </style>

@ -4,65 +4,90 @@
<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>
<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>
@ -71,14 +96,14 @@ 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['estate/location'], modules: Modules['estate/location'],
active: 0, active: 0,
tabs: ['地理位置'] tabs: ['地理位置']
} }
}, },
mounted() { mounted () {
this.$store.commit('user/setCrumbs', [ this.$store.commit('user/setCrumbs', [
{ {
name: '站点管理', name: '站点管理',
@ -99,7 +124,7 @@ export default {
}, },
methods: { methods: {
// tab // tab
tabChange(i) { tabChange (i) {
this.active = i this.active = i
}, },
} }
@ -107,102 +132,101 @@ 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;
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
li { li {
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
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;
}
} }
}
} }
.tab-content { .tab-content {
width: 80%; width: 80%;
max-width: 1504px; max-width: 1504px;
padding-bottom: 100px; padding-bottom: 100px;
margin: 30px auto 0; margin: 30px auto 0;
.item { .item {
position: relative; position: relative;
display: flex; display: flex;
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;
background-position: 30% 100%; background-position: 30% 100%;
.texts { .texts {
padding-left: 0; padding-left: 0;
} }
}
&:hover {
// color: #fff;
// background: #005388;
.pic {
transform: scale(1.1);
}
}
} }
&:hover { .img-wrap {
// color: #fff; height: 465px;
// background: #005388; overflow: hidden;
.pic { }
transform: scale(1.1); .pic {
} width: 100%;
height: 100%;
transition: 0.5s;
}
.texts {
width: 707px;
padding: 98px 72px 30px 80px;
}
h6 {
margin-bottom: 24px;
font-size: 2.4rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
}
.des {
font-size: 1rem;
line-height: 33px;
-webkit-line-clamp: 8;
} }
}
.img-wrap {
height: 465px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
}
.texts {
width: 707px;
padding: 98px 72px 30px 80px;
}
h6 {
margin-bottom: 24px;
font-size: 2.4rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
}
.des {
font-size: 1rem;
line-height: 33px;
-webkit-line-clamp: 8;
}
} }
@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;
display: -webkit-box; display: -webkit-box;
li { li {
white-space: normal; white-space: normal;
}
} }
} .tab-content {
.tab-content{ padding: 20px 0;
padding: 20px 0; .org {
.org{ width: 100%;
width: 100%; padding: 15px;
padding:15px; flex-direction: column;
flex-direction: column; .left {
.left{ width: 100%;
width: 100%; }
}
} }
}
}
} }
</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"
Time: 2022.8.13 14:30 src="@/assets/images/address.png"
alt="">
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"
Time: 2022.8.13 14:30 src="@/assets/images/address.png"
alt="">
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"
Time: 2022.8.13 14:30 src="@/assets/images/address.png"
alt="">
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"
Time: 2022.8.13 14:30 src="@/assets/images/address.png"
alt="">
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>
@ -234,7 +315,7 @@ 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.news, modules: Modules.news,
tabs: [ tabs: [
@ -266,7 +347,7 @@ export default {
active: '' active: ''
} }
}, },
mounted() { mounted () {
this.$store.commit('user/setCrumbs', [ this.$store.commit('user/setCrumbs', [
{ {
name: '站点管理', name: '站点管理',
@ -292,248 +373,249 @@ 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;
box-shadow: 0px 2px 14px 0px rgba(167,167,167,0.26); box-shadow: 0px 2px 14px 0px rgba(167, 167, 167, 0.26);
li { li {
position: relative; position: relative;
min-width: 100px; min-width: 100px;
padding: 25px 19px; padding: 25px 19px;
margin: 0 10px; margin: 0 10px;
font-size: 22px; font-size: 22px;
color: #333; color: #333;
border-bottom: 4px solid transparent; border-bottom: 4px solid transparent;
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 {
width: 700px; width: 700px;
height: 380px; 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;
} }
} .right {
.pic { padding: 50px 50px 30px;
width: 100%; background: #1583ff;
height: 240px; color: #fff;
}
.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 { h6 {
font-size: 24px; font-size: 24px;
color: #272727;
} }
.des { .des {
margin-top: 10px; margin: 30px 0;
font-size: 16px; font-size: 16px;
color: #666; line-height: 24px;
line-height: 30px;
} }
} .meta {
.right { font-size: 16px;
width: 824px; }
} }
.show-card { .card {
display: flex; display: flex;
margin-bottom: 20px; margin-top: 40px;
li { li {
position: relative; width: 448px;
&:first-child { margin-right: 28px;
margin-right: 22px; box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
} border-radius: 6px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
} }
.pic { .pic {
width: 401px; width: 100%;
height: 197px; height: 240px;
}
.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);
} }
} .texts {
.card-list { padding: 40px 30px;
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 { .meta {
font-size: 20px; font-size: 16px;
color: #272727; color: #666;
} }
.des { .des {
margin-top: 15px; margin: 10px 0;
font-size: 14px; font-size: 20px;
color: #666; color: #333;
line-height: 24px; line-height: 28px;
}
.arrow {
width: 36px;
} }
}
} }
.conference { .more {
background: #072947; width: 374px;
.b-title, .intro { margin: 58px auto 0;
color: #fff; line-height: 64px;
} font-size: 30px;
.shows { text-align: center;
color: #1583ff;
border-radius: 35px;
border: 2px solid #2b6cef;
cursor: pointer;
}
.shop-shows {
position: relative; position: relative;
display: flex; display: flex;
} .left {
.left { width: 660px;
width: 688px; margin-right: 20px;
margin-right: 20px; background-color: #fff;
background-color: #fff; .texts {
.texts { padding: 40px 30px;
display: flex; }
padding: 40px 30px; h6 {
} font-size: 24px;
.meta { color: #272727;
padding: 10px 23px 10px 0; }
margin-right: 32px; .des {
text-align: center; margin-top: 10px;
border-right: 1px solid #ddd; font-size: 16px;
} color: #666;
.date { line-height: 30px;
font-size: 45px; }
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #1F1F1F;
line-height: 52px;
} }
.year { .right {
font-size: 16px; width: 824px;
white-space: nowrap;
color: #666;
} }
h6 { .show-card {
font-size: 20px; display: flex;
color: #272727; margin-bottom: 20px;
} li {
.des { position: relative;
margin-top: 10px; &:first-child {
font-size: 14px; margin-right: 22px;
color: #666; }
line-height: 24px; }
.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 {
.card-list { padding: 34px 26px;
width: 784px; background-color: #fff;
li { li {
display: flex; display: inline-flex;
padding: 24px; padding-right: 124px;
margin-bottom: 13px; margin-bottom: 38px;
background-color: #fff; 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;
}
} }
.pic { }
width: 188px; .conference {
height: 130px; background: #072947;
margin-right: 28px; .b-title,
.intro {
color: #fff;
} }
h6 { .shows {
margin-bottom: 10px; position: relative;
font-size: 20px; display: flex;
color: #333;
} }
.text { .left {
display: flex; width: 688px;
align-items: center; margin-right: 20px;
margin: 10px 0; 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;
}
} }
.icon { .card-list {
width: 15px; width: 784px;
margin-right: 12px; 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> </style>

@ -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