parent
a34c73f98c
commit
67a59a24e5
19 changed files with 661 additions and 44 deletions
@ -0,0 +1,269 @@ |
|||||||
|
<template> |
||||||
|
<!-- 内容 --> |
||||||
|
<div> |
||||||
|
<el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close"> |
||||||
|
<el-table class="module-table" :data="data.list" header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column label="图片" min-width="140" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img v-if="scope.row.pic" :src="scope.row.pic" class="upload-pic"> |
||||||
|
<div class="upload-none" v-else> |
||||||
|
<i class="el-icon-picture-outline"></i> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="title" label="标题" min-width="140" align="center"></el-table-column> |
||||||
|
<el-table-column label="链接" min-width="140" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="link-wrap"> |
||||||
|
<span>{{ scope.row.link.linkName }}</span> |
||||||
|
<el-button v-if="data.type === 'banner'" class="set-link" type="primary" size="mini" @click="toLink(scope.row, scope.$index)">设置链接</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="des" label="描述" min-width="240" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" width="100" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="flex a-center"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isEnable" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0"> |
||||||
|
</el-switch> |
||||||
|
<i v-if="data.type === 'introduce'" class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i> |
||||||
|
<i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="$emit('update:visible', false)">取消</el-button> |
||||||
|
<el-button type="primary" @click="contentSubmit">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" /> |
||||||
|
|
||||||
|
<!-- 剪裁组件弹窗 --> |
||||||
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
||||||
|
<Cropper |
||||||
|
ref="cropper" |
||||||
|
:img-file.sync="file" |
||||||
|
:is-upload="isUpload" |
||||||
|
:fixed="fixed" |
||||||
|
:fixedNumber.sync="fixedNumber" |
||||||
|
@upload="customUpload" /> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Link from '@/components/modules/link' |
||||||
|
import Setting from '@/setting' |
||||||
|
import Util from '@/libs/util' |
||||||
|
import Cropper from '@/components/img-upload/Cropper' |
||||||
|
import Axios from 'axios' |
||||||
|
export default { |
||||||
|
props: ['data', 'visible'], |
||||||
|
components: { |
||||||
|
Link, |
||||||
|
Cropper |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: Util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
rules: {}, |
||||||
|
linkVisible: false, |
||||||
|
linkForm: {}, |
||||||
|
curIndex: 0, |
||||||
|
cropperModel: false, |
||||||
|
isUpload: false, |
||||||
|
file: {}, // 当前被选择的图片文件 |
||||||
|
fileId: '', |
||||||
|
curForm: {}, |
||||||
|
fixed: false, |
||||||
|
fixedNumber: [0.88, 1] |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
visible(open) { |
||||||
|
// 每次打开的时候处理参数 |
||||||
|
open && this.handleForm() |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.handleForm() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 处理form表单参数 |
||||||
|
handleForm() { |
||||||
|
const { forms, type } = this.data |
||||||
|
// 这两张类型的模块才需要处理参数 |
||||||
|
if (type === 'form' || type === 'introduce') { |
||||||
|
forms.map(e => { |
||||||
|
if (e.type === 'upload') { |
||||||
|
if (e.fixedNumber) { |
||||||
|
this.fixed = true |
||||||
|
this.fixedNumber = e.fixedNumber |
||||||
|
} else { |
||||||
|
this.fixed = false |
||||||
|
} |
||||||
|
} |
||||||
|
if (e.required) { |
||||||
|
this.rules[e.prop] = [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`, |
||||||
|
trigger: e.type === 'input' ? 'blur' : 'change' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
close() { |
||||||
|
this.$emit('update:visible', false) |
||||||
|
}, |
||||||
|
// 图片裁剪上传事件 |
||||||
|
customUpload(data) { |
||||||
|
const formData = new FormData() |
||||||
|
formData.append('file', data, this.file.name) |
||||||
|
this.imgUpload(formData) |
||||||
|
}, |
||||||
|
// 压缩图片 |
||||||
|
compress(img) { |
||||||
|
const canvas = document.createElement('canvas') |
||||||
|
const ctx = canvas.getContext('2d') |
||||||
|
// let initSize = img.src.length; |
||||||
|
const width = img.width |
||||||
|
const height = img.height |
||||||
|
canvas.width = width |
||||||
|
canvas.height = height |
||||||
|
// 铺底色 |
||||||
|
ctx.fillStyle = '#fff' |
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
||||||
|
ctx.drawImage(img, 0, 0, width, height) |
||||||
|
// 进行压缩 |
||||||
|
const ndata = canvas.toDataURL('image/jpeg', 0.8) |
||||||
|
return ndata |
||||||
|
}, |
||||||
|
// base64转成bolb对象 |
||||||
|
dataURItoBlob(base64Data) { |
||||||
|
let byteString |
||||||
|
if (base64Data.split(',')[0].indexOf('base64') >= 0) { |
||||||
|
byteString = atob(base64Data.split(',')[1]) |
||||||
|
} else { |
||||||
|
byteString = unescape(base64Data.split(',')[1]) |
||||||
|
} |
||||||
|
const mimeString = base64Data |
||||||
|
.split(',')[0] |
||||||
|
.split(':')[1] |
||||||
|
.split(';')[0] |
||||||
|
const ia = new Uint8Array(byteString.length) |
||||||
|
for (let i = 0; i < byteString.length; i++) { |
||||||
|
ia[i] = byteString.charCodeAt(i) |
||||||
|
} |
||||||
|
return new Blob([ia], { |
||||||
|
type: mimeString |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 图片上传到服务器 |
||||||
|
imgUpload(formData) { |
||||||
|
this.isUpload = true |
||||||
|
Axios({ |
||||||
|
method: 'post', |
||||||
|
url: this.api.upload, |
||||||
|
data: formData, |
||||||
|
headers: { |
||||||
|
'Content-Type': 'multipart/form-data', |
||||||
|
token: Util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
}).then(({ data }) => { |
||||||
|
this.$set(this.curForm, 'pic', data.url) |
||||||
|
}).catch(res => {}) |
||||||
|
this.$refs.cropper.isDisabled = false |
||||||
|
this.isUpload = false |
||||||
|
this.cropperModel = false |
||||||
|
}, |
||||||
|
// 图片改变钩子 |
||||||
|
changeFile(file, form) { |
||||||
|
const { size, name } = file |
||||||
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
||||||
|
if (!Util.isImg(ext)) { |
||||||
|
this.$message.error('请上传图片！') |
||||||
|
return false |
||||||
|
} |
||||||
|
if (size / 1024 / 1024 > 5) { |
||||||
|
this.$message.error('请上传5M以内的图片！') |
||||||
|
return false |
||||||
|
} |
||||||
|
this.file = file |
||||||
|
this.curForm = form |
||||||
|
this.cropperModel = true |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.cropper.updateImg({ |
||||||
|
url: window.URL.createObjectURL(file.raw), |
||||||
|
size: file.size |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 上传成功 |
||||||
|
uploadSuccess(res, row) { |
||||||
|
this.$set(row, 'pic', res.url) |
||||||
|
}, |
||||||
|
// 展示链接设置 |
||||||
|
toLink(row, i = 0) { |
||||||
|
this.linkVisible = true |
||||||
|
this.curIndex = i |
||||||
|
this.linkForm = row.link |
||||||
|
}, |
||||||
|
// 链接设置提交 |
||||||
|
linkSubmit() { |
||||||
|
const el = this.$refs.link |
||||||
|
const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link |
||||||
|
let name |
||||||
|
// 站内链接 |
||||||
|
if (data.connectionType === 1) { |
||||||
|
if (!data.columnId.length) return Util.errorMsg('请选择站内链接') |
||||||
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
||||||
|
if (data.articleId) { |
||||||
|
const item = el.articles.find(e => e.id == data.articleId) |
||||||
|
name = item ? item.title : '' |
||||||
|
} else { |
||||||
|
name = el.$refs.column.getCheckedNodes()[0].pathLabels.join('/') |
||||||
|
} |
||||||
|
} else if (data.connectionType === 3) { // 其他站点链接 |
||||||
|
if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目') |
||||||
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
||||||
|
if (data.otherArticleId) { |
||||||
|
const item = el.articles.find(e => e.id == data.otherArticleId) |
||||||
|
name = item ? item.title : '' |
||||||
|
} else { |
||||||
|
name = el.$refs.otherColumn.getCheckedNodes()[0].pathLabels.join('/') |
||||||
|
} |
||||||
|
} else { // 站外链接 |
||||||
|
if (!data.linkAddress) return Util.errorMsg('请输入站外链接') |
||||||
|
name = data.linkAddress |
||||||
|
} |
||||||
|
data.linkName = name |
||||||
|
this.linkVisible = false |
||||||
|
}, |
||||||
|
// 模块设置提交 |
||||||
|
contentSubmit() { |
||||||
|
this.$emit('contentSubmit') |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.radio-wrap { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.el-input { |
||||||
|
width: 200px; |
||||||
|
margin-left: -40px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,228 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="actions"> |
||||||
|
<p class="page-name">页面设置/发展历程</p> |
||||||
|
<div> |
||||||
|
<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="back">放弃编辑</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="modules"> |
||||||
|
<div class="single-banner single-banner-overview"> |
||||||
|
<img class="banner-img" :src="modules[0].form.pic" alt=""> |
||||||
|
<div class="texts"> |
||||||
|
<h6 class="banner-title">{{ modules[0].form.title }}</h6> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul class="tabs wow fadeInLeft"> |
||||||
|
<template v-for="(item, i) in tabs"> |
||||||
|
<li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li> |
||||||
|
</template> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div class="block history"> |
||||||
|
<div class="inner c-wrap"> |
||||||
|
<h2 class="wow fadeInLeft">发展历程</h2> |
||||||
|
<p class="en">DEVELOPMENT HISTORY</p> |
||||||
|
|
||||||
|
<div class="event"> |
||||||
|
<ul class="time"> |
||||||
|
<li class="active">2022</li> |
||||||
|
<li>2021</li> |
||||||
|
<li>2020</li> |
||||||
|
</ul> |
||||||
|
<div class="right"> |
||||||
|
<h6 class="year">2022</h6> |
||||||
|
<ul class="list"> |
||||||
|
<li> |
||||||
|
<div class="texts"> |
||||||
|
<p class="date">10月11日</p> |
||||||
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
||||||
|
</div> |
||||||
|
<img src="@/assets/images/about-bg.png" alt="" class="pic"> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<div class="texts"> |
||||||
|
<p class="date">10月11日</p> |
||||||
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="cover" style="min-height: 300px;" @click="toSet(1)">点击配置历程</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import mixins from '@/mixins/page' |
||||||
|
import Modules from '@/const/modules' |
||||||
|
export default { |
||||||
|
mixins: [mixins], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
modules: Modules.overviewDevHistory, |
||||||
|
active: 0, |
||||||
|
tabs: ['发展历程'] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$store.commit('user/setCrumbs', [ |
||||||
|
{ |
||||||
|
name: '站点管理', |
||||||
|
route: '/site' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '内容管理', |
||||||
|
route: '/column' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '栏目管理', |
||||||
|
route: '/column' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '概况-发展历程' |
||||||
|
} |
||||||
|
]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// tab回调 |
||||||
|
tabChange(i) { |
||||||
|
this.active = i |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "../../../styles/page/page.scss"; |
||||||
|
.wrap { |
||||||
|
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat, |
||||||
|
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.tabs { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
box-shadow: 0px 2px 10px 0px rgba(223,223,223,0.28); |
||||||
|
li { |
||||||
|
padding: 25px 19px; |
||||||
|
margin: 0 10px; |
||||||
|
font-size: 1.1rem; |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.history { |
||||||
|
h2 { |
||||||
|
position: relative; |
||||||
|
font-size: 2.2rem; |
||||||
|
font-family: PingFangSC-Semibold, PingFang SC; |
||||||
|
font-weight: 600; |
||||||
|
color: #1C1C1C; |
||||||
|
} |
||||||
|
.en { |
||||||
|
margin: -15px 0 40px; |
||||||
|
font-size: 2.2rem; |
||||||
|
font-family: PingFangSC-Light, PingFang SC; |
||||||
|
font-weight: 300; |
||||||
|
color: #E3E3E3; |
||||||
|
} |
||||||
|
} |
||||||
|
.event { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
.time { |
||||||
|
padding-right: 10px; |
||||||
|
margin-right: 20px; |
||||||
|
border-right: 1px solid #ddd; |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
align-items: center; |
||||||
|
width: 190px; |
||||||
|
padding-right: 45px; |
||||||
|
line-height: 60px; |
||||||
|
font-size: 1.4rem; |
||||||
|
font-weight: 600; |
||||||
|
font-family: SFProDisplay-Semibold, SFProDisplay; |
||||||
|
color: #666; |
||||||
|
box-shadow: inset 0px -1px 0px 0px #DDDDDD; |
||||||
|
cursor: pointer; |
||||||
|
&.active { |
||||||
|
font-weight: 800; |
||||||
|
color: #1A81F4; |
||||||
|
background: linear-gradient(90deg, #FFFFFF 0%, #F3F8FF 100%); |
||||||
|
&:before { |
||||||
|
content: ''; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat; |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.year { |
||||||
|
margin: 0 0 20px 20px; |
||||||
|
font-size: 3.8rem; |
||||||
|
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
||||||
|
font-weight: 800; |
||||||
|
color: #1A81F4; |
||||||
|
} |
||||||
|
.list { |
||||||
|
border-top: 1px solid #ddd; |
||||||
|
li { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 30px; |
||||||
|
border-bottom: 1px solid #ddd; |
||||||
|
} |
||||||
|
.texts { |
||||||
|
width: 500px; |
||||||
|
margin-right: 100px; |
||||||
|
} |
||||||
|
.date { |
||||||
|
margin-bottom: 15px; |
||||||
|
font-size: 1.2rem; |
||||||
|
font-family: PingFangSC-Semibold, PingFang SC; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.text { |
||||||
|
font-size: 1.1rem; |
||||||
|
color: #333; |
||||||
|
@include mul-ellipsis(3); |
||||||
|
&:before { |
||||||
|
content: ''; |
||||||
|
display: inline-block; |
||||||
|
width: 7px; |
||||||
|
height: 7px; |
||||||
|
margin: 0 10px; |
||||||
|
background-color: #666; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.pic { |
||||||
|
width: 350px; |
||||||
|
height: 195px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue