<template>
<app-container>
<el-row :gutter="4">
<!--左半部分-->
<el-col :span="12">
<div class="dept-div">
<el-card class="box-card" shadow="hover">
<div class="heardStyle">
<span><i class="el-icon-s-platform" /></span>
<span>PC端</span>
</div>
<el-scrollbar ref="deptScroll" class="user-dept-scroll">
<el-col :span="8">
<el-card>
<div>标题文字：</div>
<div class="inputUpDown">
<el-input v-model="titleValue" clearable :disabled="titleDisabled" />
</div>
<div>
<el-button size="small" @click="titleUpData">
修改
</el-button>
<el-button size="small" @click="titleSure">
保存
</el-button>
<el-button size="small" @click="titleDisabled = true">
取消
</el-button>
</div>
</el-card>
<el-card>
<div>登录页文字：</div>
<div class="inputUpDown">
<el-input v-model="loginTitleValue" clearable :disabled="loginDisabled" />
</div>
<div>
<el-button size="small" @click="loginUpdata">
修改
</el-button>
<el-button size="small" @click="loginSure">
保存
</el-button>
<el-button size="small" @click="loginDisabled = true">
取消
</el-button>
</div>
</el-card>
<el-card>
<div>地图：</div>
<div class="inputUpDown">
<el-select v-model="mapValue" clearable :disabled="mapDisabled">
<el-option label="高德地图" value="1" />
<el-option label="百度地图" value="2" />
<el-option label="天地图" value="3" />
<el-option label="其他地图" value="4" />
</el-select>
<el-input v-if="otherMapShow" v-model="otherMapValue" placeholder="请输入地址" />
</div>
<div>
<el-button size="small" @click="mapUpdata">
修改
</el-button>
<el-button size="small" @click="mapSure">
保存
</el-button>
<el-button size="small" @click="mapCencel">
取消
</el-button>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-col>
<el-card header="浏览器页签: 页签Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
<el-col>
<el-card header="标题: 系统Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
<el-col>
<el-card header="登录页: 登录页Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
</el-col>
</el-scrollbar>
</el-card>
</div>
</el-col>
<!--右半部分-->
<el-col :span="12">
<div class="dept-div">
<el-card class="box-card" shadow="hover">
<div class="heardStyle">
<span><i class="el-icon-mobile-phone" /></span>
<span>APP端</span>
</div>
<el-scrollbar ref="deptScroll" class="user-dept-scroll">
<el-col :span="8">
<el-card>
<div>标题文字：</div>
<div class="inputUpDown">
<el-input v-model="titleValue" clearable :disabled="titleDisabled" />
</div>
<div>
<el-button size="small" @click="titleUpData">
修改
</el-button>
<el-button size="small" @click="titleSure">
保存
</el-button>
<el-button size="small" @click="titleDisabled = true">
取消
</el-button>
</div>
</el-card>
<el-card>
<div>登录页文字：</div>
<div class="inputUpDown">
<el-input v-model="loginTitleValue" clearable :disabled="loginDisabled" />
</div>
<div>
<el-button size="small" @click="loginUpdata">
修改
</el-button>
<el-button size="small" @click="loginSure">
保存
</el-button>
<el-button size="small" @click="loginDisabled = true">
取消
</el-button>
</div>
</el-card>
<el-card>
<div>地图：</div>
<div class="inputUpDown">
<el-select v-model="mapValue" clearable :disabled="mapDisabled">
<el-option label="高德地图" value="1" />
<el-option label="百度地图" value="2" />
<el-option label="天地图" value="3" />
<el-option label="其他地图" value="4" />
</el-select>
<el-input v-if="otherMapShow" v-model="otherMapValue" placeholder="请输入地址" />
</div>
<div>
<el-button size="small" @click="mapUpdata">
修改
</el-button>
<el-button size="small" @click="mapSure">
保存
</el-button>
<el-button size="small" @click="mapCencel">
取消
</el-button>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-col>
<el-card header="浏览器页签: 页签Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
<el-col>
<el-card header="标题: 系统Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
<el-col>
<el-card header="登录页: 登录页Logo(图片不能超过200KB)">
<el-upload
ref="upload"
:before-upload="handleBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-change="handleChange"
:http-request="uploadFile"
:file-list="imageList"
:limit="4"
:class="{hide:hideUpload}"
multiple
action="string"
accept=".jpg,.jpeg,.png "
list-type="picture-card"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible" title="图片预览" append-to-body>
<div class="imgBox">
<img :src="dialogImageUrl" max-height="400px;" alt="" style="margin: 0 auto;">
</div>
</el-dialog>
</el-card>
</el-col>
</el-col>
</el-scrollbar>
</el-card>
</div>
</el-col>
</el-row>
</app-container>
</template>
<script>
export default {
name: 'ViewsConfig',
data() {
return {
titleValue: '',
loginTitleValue: '',
titleDisabled: true,
loginDisabled: true,
mapDisabled: true,
otherMapShow: false,
mapValue: '',
otherMapValue: ''
}
},
watch: {
mapValue(val) {
if (val === '4') {
this.otherMapShow = true
}
}
},
mounted() {
},
methods: {
titleUpData() {
this.titleDisabled = false
},
titleSure() {
this.titleDisabled = true
},
loginUpdata() {
this.loginDisabled = false
},
loginSure() {
this.loginDisabled = true
},
mapUpdata() {
this.mapDisabled = false
},
mapSure() {
this.mapDisabled = true
this.otherMapShow = false
},
mapCencel() {
this.mapDisabled = true
this.otherMapShow = false
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dept-div{
.box-card{
width:100%;
.user-dept-scroll{
width:100%;
height: calc(100vh - 240px);
}
}
}
.inputUpDown{
margin: 20px 0;
}
.heardStyle{
margin-bottom: 10px;
}
.heardStyle span{
margin-right: 10px;
}
</style>
