jiangyy 5 years ago
parent
commit
664e1fb8b0
  1. 428
      src/assets/styles/form/home.scss
  2. 118
      src/views/form/editor/IconsDialog.vue
  3. 58
      src/views/form/index.vue
  4. 143
      src/views/form/preview/index.vue
  5. 1
      src/views/form/publish/index.vue
  6. 10
      src/views/form/setting/index.vue
  7. 2
      src/views/form/statistics/public.vue
  8. 21
      src/views/form/theme/index.vue
  9. 23
      src/views/form/write/index.vue

428
src/assets/styles/form/home.scss

@ -1,271 +1,271 @@
@import '../resources/variables'; @import "../resources/variables";
$selectedColor: rgba(24, 144, 255, 0.05); $selectedColor: rgba(24, 144, 255, 0.05);
$lighterBlue: #1890ff; $lighterBlue: #1890ff;
.form-edit-container { .form-edit-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100vh - 60px); height: 100vh;
overflow-y: hidden; overflow-y: hidden;
} }
.components-list { .components-list {
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
.components-item { .components-item {
display: inline-block; display: inline-block;
width: 48%; width: 48%;
margin: 1%; margin: 1%;
transition: transform 0ms !important; transition: transform 0ms !important;
} }
} }
.components-draggable { .components-draggable {
padding-bottom: 20px; padding-bottom: 20px;
} }
.components-title { .components-title {
font-size: 14px; font-size: 14px;
color: #222; color: #222;
margin: 6px 2px; margin: 6px 2px;
.svg-icon { .svg-icon {
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
} }
.components-body { .components-body {
padding: 8px 10px; padding: 8px 10px;
background: $selectedColor; background: $selectedColor;
font-size: 12px; font-size: 12px;
cursor: move; cursor: move;
border: 1px dashed $selectedColor; border: 1px dashed $selectedColor;
border-radius: 3px; border-radius: 3px;
.svg-icon {
color: #777;
font-size: 15px;
}
&:hover {
border: 1px dashed $--color-primary;
color: $--color-primary;
.svg-icon { .svg-icon {
color: #777; color: $--color-primary;
font-size: 15px;
}
&:hover {
border: 1px dashed $--color-primary;
color: $--color-primary;
.svg-icon {
color: $--color-primary;
}
} }
}
} }
.left-board { .left-board {
width: 260px; width: 260px;
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 0; top: 0;
margin-top: 5px; margin-top: 5px;
height: calc(100vh - 80px); height: calc(100vh - 20px);
background-color: rgba(255, 255, 255, 100); background-color: rgba(255, 255, 255, 100);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 100); border: 1px solid rgba(255, 255, 255, 100);
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
border-bottom: none; border-bottom: none;
} }
.left-scrollbar { .left-scrollbar {
height: calc(100vh - 80px); height: calc(100vh - 20px);
overflow: hidden; overflow: hidden;
margin: 5px; margin: 5px;
border-radius: 7px; border-radius: 7px;
} }
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 60px); height: 100vh;
overflow: hidden; overflow: hidden;
width: 90%; width: 90%;
margin: 20px auto 0; margin: 20px auto 0;
box-sizing: border-box; box-sizing: border-box;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border: 2px solid rgba(255, 255, 255, 100); border: 2px solid rgba(255, 255, 255, 100);
overflow-y: hidden; overflow-y: hidden;
} }
.center-board { .center-board {
height: calc(100vh - 220px); height: calc(100vh - 220px);
width: auto; width: auto;
margin: 0 350px 80px 260px; margin: 0 350px 80px 260px;
box-sizing: border-box; box-sizing: border-box;
} }
.empty-info { .empty-info {
position: absolute; position: absolute;
top: 36%; top: 36%;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
color: $--color-primary; color: $--color-primary;
letter-spacing: 4px; letter-spacing: 4px;
} }
.action-bar { .action-bar {
position: relative; position: relative;
height: 42px; height: 42px;
text-align: right; text-align: right;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #f1e8e8; border: 1px solid #f1e8e8;
border-top: none; border-top: none;
border-left: none; border-left: none;
.delete-btn { .delete-btn {
color: #f56c6c; color: #f56c6c;
} }
} }
.center-board-row { .center-board-row {
padding: 12px 12px 15px 12px; padding: 12px 12px 15px 12px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: hidden; overflow-y: hidden;
& > .el-form { & > .el-form {
// 69 = 12+15+42 // 69 = 12+15+42
height: calc(100vh - 69px); height: calc(100vh - 69px);
} }
} }
.drawing-board { .drawing-board {
height: 100%; height: 100%;
position: relative;
.components-body {
padding: 0;
margin: 0;
font-size: 0;
}
.sortable-ghost {
position: relative; position: relative;
.components-body { display: block;
padding: 0; overflow: hidden;
margin: 0; &::before {
font-size: 0; content: " ";
} position: absolute;
.sortable-ghost { left: 0;
position: relative; right: 0;
display: block; top: 0;
overflow: hidden; height: 3px;
&::before { background: $--color-primary;
content: " "; z-index: 2;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: $--color-primary;
z-index: 2;
}
} }
.components-item.sortable-ghost { }
width: 100%; .components-item.sortable-ghost {
height: 60px; width: 100%;
background-color: $selectedColor; height: 60px;
background-color: $selectedColor;
}
.active-from-item {
& > .el-form-item {
background: $selectedColor;
border-radius: 6px;
} }
.active-from-item { & > .drawing-item-copy,
& > .el-form-item { & > .drawing-item-delete {
background: $selectedColor; display: initial;
border-radius: 6px;
}
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
& > .component-name {
color: $lighterBlue;
}
} }
.el-form-item { & > .component-name {
margin-bottom: 15px; color: $lighterBlue;
} }
}
.el-form-item {
margin-bottom: 15px;
}
} }
.drawing-item { .drawing-item {
position: relative; position: relative;
cursor: move; cursor: move;
&.unfocus-bordered:not(.active-from-item) > div:first-child { &.unfocus-bordered:not(.active-from-item) > div:first-child {
border: 1px dashed #ccc; border: 1px dashed #ccc;
} }
.el-form-item { .el-form-item {
padding: 12px 10px; padding: 12px 10px;
} }
} }
.drawing-row-item { .drawing-row-item {
position: relative; position: relative;
cursor: move; cursor: move;
box-sizing: border-box; box-sizing: border-box;
border: 1px dashed #ccc; border: 1px dashed #ccc;
border-radius: 3px; border-radius: 3px;
padding: 0 2px; padding: 0 2px;
margin-bottom: 15px; margin-bottom: 15px;
.drawing-row-item { .drawing-row-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
.el-col { .el-col {
margin-top: 22px; margin-top: 22px;
} }
.el-form-item { .el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
.drag-wrapper { .drag-wrapper {
min-height: 80px; min-height: 80px;
} }
&.active-from-item { &.active-from-item {
border: 1px dashed $lighterBlue; border: 1px dashed $lighterBlue;
} }
.component-name { .component-name {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
font-size: 12px; font-size: 12px;
color: #bbb; color: #bbb;
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-item,
.drawing-row-item { .drawing-row-item {
&:hover { &:hover {
& > .el-form-item { & > .el-form-item {
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
}
& > .drawing-item-copy,
& > .drawing-item-delete {
display: initial;
}
} }
& > .drawing-item-copy, & > .drawing-item-copy,
& > .drawing-item-delete { & > .drawing-item-delete {
display: none; display: initial;
position: absolute;
top: -10px;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 50%;
font-size: 12px;
border: 1px solid;
cursor: pointer;
z-index: 1;
} }
& > .drawing-item-copy { }
right: 56px; & > .drawing-item-copy,
border-color: $lighterBlue; & > .drawing-item-delete {
color: $lighterBlue; display: none;
background: #fff; position: absolute;
&:hover { top: -10px;
background: $lighterBlue; width: 22px;
color: #fff; height: 22px;
} line-height: 22px;
text-align: center;
border-radius: 50%;
font-size: 12px;
border: 1px solid;
cursor: pointer;
z-index: 1;
}
& > .drawing-item-copy {
right: 56px;
border-color: $lighterBlue;
color: $lighterBlue;
background: #fff;
&:hover {
background: $lighterBlue;
color: #fff;
} }
& > .drawing-item-delete { }
right: 24px; & > .drawing-item-delete {
border-color: #f56c6c; right: 24px;
color: #f56c6c; border-color: #f56c6c;
background: #fff; color: #f56c6c;
&:hover { background: #fff;
background: #f56c6c; &:hover {
color: #fff; background: #f56c6c;
} color: #fff;
} }
}
} }
.form-name-text { .form-name-text {
padding: 6px 10px; padding: 6px 10px;
border: 1px dashed transparent; border: 1px dashed transparent;
line-height: 30px; line-height: 30px;
margin: 0; margin: 0;
} }
.form-name-text input { .form-name-text input {
border: none; border: none;
background-color: transparent; background-color: transparent;
} }
[contenteditable]:focus { [contenteditable]:focus {
outline: none; outline: none;
background-color: #f4f4f4; background-color: #f4f4f4;
border: 1px solid #f4f4f4; border: 1px solid #f4f4f4;
} }

118
src/views/form/editor/IconsDialog.vue

@ -1,38 +1,32 @@
<template> <template>
<div class="icon-dialog"> <div class="icon-dialog">
<el-dialog <el-dialog v-bind="$attrs"
v-bind="$attrs" width="980px"
width="980px" :modal-append-to-body="false"
:modal-append-to-body="false" v-on="$listeners"
v-on="$listeners" @open="onOpen"
@open="onOpen" @close="onClose">
@close="onClose" <div slot="title">
> 选择图标
<div slot="title"> <el-input v-model="key"
选择图标 size="mini"
<el-input :style="{width: '260px'}"
v-model="key" placeholder="请输入图标名称"
size="mini" prefix-icon="el-icon-search"
:style="{width: '260px'}" clearable />
placeholder="请输入图标名称" </div>
prefix-icon="el-icon-search" <ul class="icon-ul">
clearable <li v-for="icon in iconList"
/> :key="icon"
</div> :class="active===icon?'active-item':''"
<ul class="icon-ul"> @click="onSelect(icon)">
<li <i :class="icon" />
v-for="icon in iconList" <div>{{ icon }}</div>
:key="icon" </li>
:class="active===icon?'active-item':''" </ul>
@click="onSelect(icon)" </el-dialog>
> </div>
<i :class="icon" />
<div>{{ icon }}</div>
</li>
</ul>
</el-dialog>
</div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
@ -41,37 +35,37 @@ import iconList from '@/utils/icon.json'
const originList = iconList.map(name => `el-icon-${name}`) const originList = iconList.map(name => `el-icon-${name}`)
export default { export default {
inheritAttrs: false, inheritAttrs: false,
props: ['current'], props: ['current'],
data() { data () {
return { return {
iconList: originList, iconList: originList,
active: null, active: null,
key: '' key: ''
} }
},
watch: {
key (val) {
if (val) {
this.iconList = originList.filter(name => name.indexOf(val) > -1)
} else {
this.iconList = originList
}
}
},
methods: {
onOpen () {
this.active = this.current
this.key = ''
}, },
watch: { onClose () {
key(val) {
if (val) {
this.iconList = originList.filter(name => name.indexOf(val) > -1)
} else {
this.iconList = originList
}
}
}, },
methods: { onSelect (icon) {
onOpen() { this.active = icon
this.active = this.current this.$emit('select', icon)
this.key = '' this.$emit('update:visible', false)
},
onClose() {
},
onSelect(icon) {
this.active = icon
this.$emit('select', icon)
this.$emit('update:visible', false)
}
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -120,7 +114,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
.el-dialog__header { .el-dialog__header {
padding-top: 14px; // padding-top: 14px;
} }
.el-dialog__body { .el-dialog__body {

58
src/views/form/index.vue

@ -13,13 +13,14 @@
</el-button> </el-button>
</el-row> </el-row>
</el-card> --> </el-card> -->
<div class="main-container"> <div v-if="!previewDialogVisible"
class="main-container">
<div class="left-menu-container"> <div class="left-menu-container">
<el-menu :collapse="isCollapse" <el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu" :default-active="defaultActiveMenu"
class="el-menu-vertical"> class="el-menu-vertical">
<el-menu-item class="el-menu-item-per" <el-menu-item class="el-menu-item-per"
v-for="menuItem in (publishStatus?menuItemList2:menuItemList)" v-for="menuItem in (publishStatus===1?menuItemList1:publishStatus===2?menuItemList2:menuItemList3)"
:key="menuItem.key" :key="menuItem.key"
:index="menuItem.route" :index="menuItem.route"
@click="menuSelectHandle(menuItem.route,menuItem.key)"> @click="menuSelectHandle(menuItem.route,menuItem.key)">
@ -43,12 +44,19 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
<el-dialog :visible.sync="previewDialogVisible" <div v-if="previewDialogVisible">
<pre-view :key="previewKey"
:showCloseBtn="true"
:preview-qrcode="true"
@diaCancal="diaCancal" />
</div>
<!-- <el-dialog :visible.sync="previewDialogVisible"
class="dialog"
destroy-on-close destroy-on-close
fullscreen> fullscreen>
<pre-view :key="previewKey" <pre-view :key="previewKey"
:preview-qrcode="true" /> :preview-qrcode="true" />
</el-dialog> </el-dialog> -->
</div> </div>
</template> </template>
@ -61,13 +69,13 @@ export default {
components: { PreView }, components: { PreView },
data () { data () {
return { return {
publishStatus: true, publishStatus: 1,
previewKey: +new Date(), previewKey: +new Date(),
previewDialogVisible: false, previewDialogVisible: false,
defaultActiveMenu: '', defaultActiveMenu: '',
projectKey: null, projectKey: null,
isCollapse: false, isCollapse: false,
menuItemList: [ menuItemList1: [
{ {
key: 'edit', key: 'edit',
title: '编辑', title: '编辑',
@ -141,6 +149,23 @@ export default {
title: '返回', title: '返回',
icon: 'el-icon-back' icon: 'el-icon-back'
} }
], menuItemList3: [
{
key: 'static',
title: '统计',
icon: 'el-icon-data-line',
route: '/project/form/statistics'
},
{
key: 'preview',
title: '预览',
icon: 'el-icon-view'
},
{
key: 'back',
title: '返回',
icon: 'el-icon-back'
}
] ]
} }
}, },
@ -154,16 +179,20 @@ export default {
}, },
methods: { methods: {
diaCancal () {
this.previewDialogVisible = false
},
getProjectStatus () { getProjectStatus () {
this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => { this.$api.get(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/${this.projectKey}`).then(res => {
if (res.data.status == 1) { console.log('状态', res.data.status)
this.publishStatus = false this.publishStatus = res.data.status
} else {
this.publishStatus = true
if (this.publishStatus === 3) {
this.menuSelectHandle('/project/form/statistics', 'static')
} }
}) })
}, },
@ -239,13 +268,13 @@ export default {
.main-container { .main-container {
width: 100vw; width: 100vw;
height: calc(100vh - 60px); height: 100vh;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.right-content-container { .right-content-container {
width: calc(100vw - 100px); width: 100vw;
height: calc(100vh - 60px); height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
} }
@ -284,6 +313,9 @@ export default {
} }
} }
} }
::v-deep.el-dialog__header {
padding-top: 0px;
}
::v-deep.preview-container { ::v-deep.preview-container {
background-color: #ffffff; background-color: #ffffff;

143
src/views/form/preview/index.vue

@ -1,41 +1,45 @@
<template> <template>
<div class="preview-container"> <div class="preview-container">
<el-tabs v-if="projectConfig.projectKey" type="card"> <el-button v-if="showCloseBtn"
<el-tab-pane> @click="diaCancal"
<span slot="label"><i class="el-icon-mobile" /> class="btn_close"
手机 icon="el-icon-close"
</span> circle></el-button>
<div class="preview-layer"> <el-tabs v-if="projectConfig.projectKey"
<div class="preview-bg" /> type="card">
<div class="preview-phone"> <el-tab-pane>
<iframe id="preview-html" <span slot="label"><i class="el-icon-mobile" />
:src="mobilePreviewUrl" 手机
class="preview-html" frameborder="0" </span>
name="preview-html" <div class="preview-layer">
scrolling="auto" <div class="preview-bg" />
/> <div class="preview-phone">
</div> <iframe id="preview-html"
</div> :src="mobilePreviewUrl"
<!-- <div v-if="mobilePreviewUrl&&previewQrcode" class="qrcode-view"> class="preview-html"
frameborder="0"
name="preview-html"
scrolling="auto" />
</div>
</div>
<!-- <div v-if="mobilePreviewUrl&&previewQrcode" class="qrcode-view">
<p>手机扫码查看效果</p> <p>手机扫码查看效果</p>
<vue-qr <vue-qr
v-if="mobilePreviewUrl&&previewQrcode" :size="194" :text="mobilePreviewUrl" v-if="mobilePreviewUrl&&previewQrcode" :size="194" :text="mobilePreviewUrl"
/> />
</div> --> </div> -->
</el-tab-pane> </el-tab-pane>
<el-tab-pane> <el-tab-pane>
<span slot="label"><i class="el-icon-monitor" /> <span slot="label"><i class="el-icon-monitor" />
电脑 电脑
</span> </span>
<el-scrollbar style="height: 77vh;overflow-x: hidden!important;"> <el-scrollbar style="height: 77vh;overflow-x: hidden!important;">
<project-form <project-form v-if="projectConfig.projectKey"
v-if="projectConfig.projectKey" :project-config="projectConfig" />
:project-config="projectConfig" </el-scrollbar>
/> </el-tab-pane>
</el-scrollbar> </el-tabs>
</el-tab-pane> </div>
</el-tabs>
</div>
</template> </template>
<script> <script>
@ -43,42 +47,56 @@ import ProjectForm from './ProjectForm'
// import VueQr from 'vue-qr' // import VueQr from 'vue-qr'
export default { export default {
name: 'PreView', name: 'PreView',
components: { components: {
ProjectForm ProjectForm
// VueQr // VueQr
}, },
props: { props: {
previewQrcode: null previewQrcode: null,
}, showCloseBtn: {
data() { type: Boolean,
return { default: false
projectKey: null, }
mobilePreviewUrl: '', },
projectConfig: { data () {
projectKey: '', return {
showBtns: true projectKey: null,
} mobilePreviewUrl: '',
} projectConfig: {
}, projectKey: '',
mounted() { showBtns: true
this.projectKey = this.$route.query.key }
let url = window.location.protocol + '//' + window.location.host
this.mobilePreviewUrl = `${url}/${process.env.VUE_APP_PUBLIC_PATH}/project/view?key=${this.projectKey}`
this.$set(this.projectConfig, 'projectKey', this.projectKey)
} }
},
mounted () {
this.projectKey = this.$route.query.key
let url = window.location.protocol + '//' + window.location.host
this.mobilePreviewUrl = `${url}/${process.env.VUE_APP_PUBLIC_PATH}/project/view?key=${this.projectKey}`
this.$set(this.projectConfig, 'projectKey', this.projectKey)
},
methods: {
diaCancal () {
this.$emit("diaCancal")
},
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.preview-container { .preview-container {
margin: 0; margin: 0;
padding-top: 30px; padding-top: 15px;
background-color: #f7f7f7; background-color: #f7f7f7;
position: relative;
} }
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{ .btn_close {
border: 1px solid #E4E7ED!important; position: absolute;
right: 200px;
top: 20px;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px solid #e4e7ed !important;
} }
::v-deep .el-tabs__header { ::v-deep .el-tabs__header {
width: 300px; width: 300px;
@ -110,16 +128,16 @@ div.preview-layer .preview-bg {
div.preview-layer .preview-phone { div.preview-layer .preview-phone {
width: 372px; width: 372px;
height: 744px; height: 744px;
background: url('~@/assets/images/appearset_bgc_big.png'); background: url("~@/assets/images/appearset_bgc_big.png");
background-size: 372px 744px; background-size: 372px 744px;
z-index: 1000; z-index: 1000;
} }
.qrcode-view{ .qrcode-view {
position: absolute; position: absolute;
top: 0; top: 0;
right: 20px; right: 20px;
p{ p {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: #303133; color: #303133;
@ -142,5 +160,4 @@ div.preview-layer .preview-phone {
border-bottom-width: 0; border-bottom-width: 0;
border-left-width: 0; border-left-width: 0;
} }
</style> </style>

1
src/views/form/publish/index.vue

@ -236,6 +236,7 @@ export default {
this.msgSuccess('停止成功') this.msgSuccess('停止成功')
this.$parent.getProjectStatus() this.$parent.getProjectStatus()
this.getProjectStatus() this.getProjectStatus()
// this.$router.push({ path: '/home' })
} }
}) })
}, },

10
src/views/form/setting/index.vue

@ -6,8 +6,7 @@
class="project-setting-container" class="project-setting-container"
justify="center" justify="center"
type="flex"> type="flex">
<el-col :offset="3" <el-col :span="6"
:span="5"
class="project-setting-view"> class="project-setting-view">
<p class="project-setting-title"> <p class="project-setting-title">
提交设置 提交设置
@ -104,7 +103,8 @@
</el-col> </el-col>
</el-row> --> </el-row> -->
</el-col> </el-col>
<el-col :span="6" <el-col :offset="3"
:span="6"
class="project-setting-view text-center"> class="project-setting-view text-center">
<p class="project-setting-title"> <p class="project-setting-title">
回收设置 回收设置
@ -776,7 +776,7 @@ export default {
<style scoped> <style scoped>
.project-setting-container { .project-setting-container {
width: 100%; width: 100%;
height: 100%; height: 100vh;
min-height: 85vh; min-height: 85vh;
padding-top: 30px; padding-top: 30px;
margin: 0; margin: 0;
@ -784,7 +784,7 @@ export default {
} }
.project-setting-view { .project-setting-view {
height: 100%; height: 98%;
line-height: 20px; line-height: 20px;
border-radius: 7px; border-radius: 7px;
color: rgba(16, 16, 16, 100); color: rgba(16, 16, 16, 100);

2
src/views/form/statistics/public.vue

@ -150,7 +150,7 @@ export default {
} }
.el-main { .el-main {
background-color: rgba(247, 247, 247, 90); background-color: rgba(247, 247, 247, 90);
height: calc(100vh - 60px); height: 100vh;
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.public-result-table { .public-result-table {

21
src/views/form/theme/index.vue

@ -1,25 +1,26 @@
<template> <template>
<div class="theme-container"> <div class="theme-container">
<div class="left-container"> <div v-if="false"
class="left-container">
<el-scrollbar class="left-scrollbar-container"> <el-scrollbar class="left-scrollbar-container">
<p class="theme-title">外观主题</p> <p class="theme-title">外观主题</p>
<el-row> <el-row>
<el-col :span="3"> <el-col :span="6">
<span class="theme-prompt-text">风格</span> <span class="theme-prompt-text">风格</span>
</el-col> </el-col>
<el-col v-for="item in styleList" <el-col v-for="item in styleList"
:key="item.key" :key="item.key"
:span="3"> :span="6">
<span :class="{'style-btn-active':activeStyle==item.key}" <span :class="{'style-btn-active':activeStyle==item.key}"
class="style-btn" class="style-btn"
@click="activeStyleHandle(item)">{{ item.label }}</span> @click="activeStyleHandle(item)">{{ item.label }}</span>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row style="margin-top:20px">
<el-col :span="3"> <el-col :span="6">
<span class="theme-prompt-text">颜色</span> <span class="theme-prompt-text">颜色</span>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="6">
<span :class="{'style-btn-active':activeColor==''}" <span :class="{'style-btn-active':activeColor==''}"
class="style-btn" class="style-btn"
@click="activeColorHandle('')">全部</span> @click="activeColorHandle('')">全部</span>
@ -27,7 +28,7 @@
<el-col v-for="c in colorList" <el-col v-for="c in colorList"
:key="c" :key="c"
:class="{'style-btn-active':activeColor==c}" :class="{'style-btn-active':activeColor==c}"
:span="3" :span="6"
:style="{backgroundColor: c}" :style="{backgroundColor: c}"
class="color-btn" class="color-btn"
@click.native="activeColorHandle(c)" /> @click.native="activeColorHandle(c)" />
@ -391,7 +392,7 @@ export default {
<style scoped> <style scoped>
.theme-container { .theme-container {
width: 100%; width: 100vw;
height: 100%; height: 100%;
background-color: #f7f7f7; background-color: #f7f7f7;
overflow: hidden; overflow: hidden;
@ -407,7 +408,7 @@ export default {
border: 1px solid rgba(255, 255, 255, 100); border: 1px solid rgba(255, 255, 255, 100);
background-color: white; background-color: white;
width: 20%; width: 20%;
height: calc(100vh - 60px); height: 100vh;
} }
.left-scrollbar-container { .left-scrollbar-container {
height: 100%; height: 100%;
@ -481,7 +482,7 @@ export default {
} }
.right-container { .right-container {
width: 310px; width: 310px;
height: calc(100vh - 60px); height: 100vh;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
padding: 22px; padding: 22px;

23
src/views/form/write/index.vue

@ -307,14 +307,25 @@ export default {
'orgType': this.orgType,//(:agency;:dept;:grid) 'orgType': this.orgType,//(:agency;:dept;:grid)
'realName': this.realName,// 'realName': this.realName,//
//'accessKey':this.accessKey //'accessKey':this.accessKey
}).then(() => { }).then((res) => {
this.writeStatus = 2
if (this.userProjectSetting.submitJumpUrl) { if (res.code !== 0) {
setTimeout(() => { this.$message(
window.location.replace(this.userProjectSetting.submitJumpUrl) {
}, 1000) message: res.msg,
type: 'warning'
}
)
} else {
this.writeStatus = 2
if (this.userProjectSetting.submitJumpUrl) {
setTimeout(() => {
window.location.replace(this.userProjectSetting.submitJumpUrl)
}, 1000)
}
} }
}) })
} }
} }

Loading…
Cancel
Save