From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/settings/views/generalSettings.vue | 711 +++++++++++++++++++++++++++++----------------------------- 1 files changed, 358 insertions(+), 353 deletions(-) diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue index 1dbf000..2cd47a2 100644 --- a/src/pages/settings/views/generalSettings.vue +++ b/src/pages/settings/views/generalSettings.vue @@ -16,58 +16,16 @@ </div> </div> <div class="general-right"> - <!-- <div class="lang" v-if="activePage == 0"> - <div class="bar"> - <span class="name">璁惧ID</span> - <span class="desc">{{ deviceInfo.server_id }}</span> - </div> - <div class="bar"> - <span class="name">璁惧鍨嬪彿</span> - <span class="desc">{{ deviceInfo.deviceModel }}</span> - </div> - <div class="bar"> - <span class="name">璁惧绫诲瀷</span> - <span class="desc">{{ deviceInfo.deviceDesc }}</span> - </div> - <div class="bar"> - <span class="name">閫氶亾涓暟</span> - <span class="desc">{{ deviceInfo.channelCount }}</span> - </div> - <div class="bar"> - <span class="name">涓绘帶鐗堟湰</span> - <span class="desc">{{ deviceInfo.masterVersion }}</span> - </div> - <div class="bar"> - <span class="name">web鐗堟湰</span> - <span class="desc">{{ deviceInfo.webVersion }}</span> - </div> - <div class="bar"> - <span class="name">纭洏淇℃伅</span> - <span class="desc">{{ deviceInfo.disks }}</span> - </div> - <div class="bar"> - <span class="name">CPU</span> - <span class="desc">{{ deviceInfo.cpu }}</span> - </div> - <div class="bar"> - <span class="name">鍐呭瓨</span> - <span class="desc">{{ deviceInfo.memory }}</span> - </div> - <div class="bar"> - <span class="name">杩愯鏃堕棿</span> - <span class="desc">{{ deviceInfo.runningTime }}</span> - </div> - </div> --> <div class="lang videoTime" v-if="activePage == 0"> <div class="min-dur"> <div class="title">鎶撴媿鍓嶅綍鍍忔椂闀�</div> <div class="entity"> - <div class="sec">{{ min_video_len }}s</div> + <div class="sec">0s</div> <div class="block"> <el-slider v-model="fakeObj.min" id="cut_min_duration" - :min="5 / 1.2" + :min="0" :max="100" :step="5 / 1.2" @input="min_len = min_video_len" @@ -77,38 +35,28 @@ :format-tooltip="formatTooltip" ></el-slider> </div> - <!-- <el-input-number + <div class="sec" style="margin: 0 20px">120s</div> + <el-input-number v-model="min_len" @change="fakeObj.min = +(min_len / 1.2)" - controls-position="right" - :min="5" + :min="0" :step="5" :max="120" step-strictly size="small" ></el-input-number - > s --> - - <el-input-number - v-model="min_len" - @change="fakeObj.min = +(min_len / 1.2)" - :min="5" - :step="5" - :max="120" - step-strictly - size="small" - ></el-input-number> s + >s </div> </div> <div class="min-dur"> <div class="title">鎶撴媿鍚庡綍鍍忔椂闀�</div> <div class="entity"> - <div class="sec">{{ max_video_len }} s</div> + <div class="sec">0s</div> <div class="block"> <el-slider v-model="fakeObj.max" id="cut_max_duration" - :min="5 / 1.2" + :min="0" @input="max_len = max_video_len" :max="100" :step="5 / 1.2" @@ -117,27 +65,29 @@ :show-tooltip="true" ></el-slider> </div> + <div class="sec" style="margin: 0 20px">120s</div> <el-input-number v-model="max_len" @change="fakeObj.max = +(max_len / 1.2)" - :min="5" + :min="0" :step="5" step-strictly :max="120" size="small" ></el-input-number > s - </div> </div> <div class="save-btn" @click="submitAlarm">淇濆瓨</div> </div> <div class="lang" v-if="activePage == 1"> - <div class="bar title voice-title" style="border: 2px solid #fff;">浜嬩欢澹伴煶</div> + <div class="bar title voice-title" style="border: 2px solid #fff"> + 浜嬩欢澹伴煶 + </div> <div class="bar-group"> <div - class="bar" + class="general-bar" v-for="(item, i) in soundList" :key="i" @click="clickSound(item, i)" @@ -146,12 +96,30 @@ <div class="left-part"> <span class="name">{{ item.name }}</span> </div> - <div class="btns"> + <div class="sound-btns"> <span @click="togglePlay(item, i)"> + <span + class="iconfont" + v-if="!item.isPlay" + style="cursor: pointer" + >{{ playSpan }}</span + > + <!-- <span class="iconfont" v-else style="cursor: pointer">{{ + playSpan2 + }}</span> --> - <span class="iconfont" v-if="!item.isPlay" style="cursor: pointer;">{{playSpan}}</span> - <span class="iconfont" v-else style="cursor: pointer;">{{playSpan2}}</span> -<!-- + <img + v-else + src="/images/settings/鏆傚仠.png" + alt="" + style=" + width: 16px; + hight: 16px; + cursor: pointer; + margin-top: 15px; + " + /> + <!-- <i v-if="!item.isPlay" class="el-icon-video-play" @@ -161,26 +129,32 @@ </span> <span class="icon iconfont del" - style="cursor: pointer;" + style="cursor: pointer" @click="removeSound(item)" - >{{delspan}}</span + >{{ delspan }}</span > </div> </div> </div> - <div v-if="showUpload" @click.stop > + <div v-if="showUpload" @click.stop> <el-upload class="upload-demo" drag action="" :http-request="uploadSound" :show-file-list="false" + style="bottom: -94px; left: calc(50% - 217px)" > - <div class="info">璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click" >鐐瑰嚮涓婁紶</span></div> - <div class="des" v-if="showUpload" @click.stop>浠呮敮鎸乵p3銆亀av绛夋牸寮�</div> - </el-upload> + <div class="info"> + 璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click" + >鐐瑰嚮涓婁紶</span + > + </div> + <div class="des" v-if="showUpload" @click.stop> + 浠呮敮鎸乵p3銆亀av绛夋牸寮� + </div> + </el-upload> </div> - <div class="add-group"> <div class="add-btn"> @@ -193,36 +167,39 @@ <div class="self-setting" v-if="activePage == 2"> <div class="top-title">棰滆壊涓婚</div> - <div class="color-bar"> + <div class="color-bar"> <div - v-for="(item,index) in colorList" - :key="index" + v-for="(item, index) in colorList" + :key="index" + style="border: none" > - <div class="color-option" - v-if="universalColor != index" - :style="{cursor: pointer,backgroundColor:item.color}" - @click="colorCard(item.color,index)" - /> + <div + class="color-option" + v-if="universalColor != index" + :style="{ cursor: 'pointer', backgroundColor: item.color }" + @click="colorCard(item.color, index)" + /> - <div class="color-option color-option-active" - v-else - :style="{cursor: pointer,border:`2px solid ${item.color}`}" - @click="colorCard(item.color,index)"> - <div - :style="{backgroundColor:item.color}" - class="color-option-content"> - </div> - + <div + class="color-option color-option-active" + v-else + :style="{ + cursor: 'pointer', + border: `2px solid ${item.color}`, + }" + @click="colorCard(item.color, index)" + > + <div + :style="{ backgroundColor: item.color }" + class="color-option-content" + ></div> + </div> </div> </div> - </div> - - - <div class="top-title">鍥炬爣涓婚</div> <div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)"> <div class="bar-title"> - <span class="title">鎵佸钩鍐欏疄鍥炬爣</span> + <span class="title">闈㈡�ч鏍�</span> <span class="icon iconfont" :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'" @@ -241,7 +218,7 @@ </div> <div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)"> <div class="bar-title"> - <span class="title">鎵佸钩鍖栧浘鏍�</span> + <span class="title">绠�绾﹂鏍�</span> <span class="icon iconfont" :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'" @@ -258,14 +235,14 @@ </div> </div> </div> - + <div class="top-title">妗岄潰鑳屾櫙涓婚</div> <div class="bg-bar"> <div class="bg-list"> <div v-for="(item, i) in tableBGList" class="bg-img" - :class="activeBg == i ? 'bg-list-active' : ''" + :class="activeBg == i ? 'bg-list-active' : ''" :key="i" @click="pickBg(item, i)" > @@ -282,14 +259,14 @@ <script> import { saveAlarmConfig, getDevInfo } from "@/api/system"; import { uploadSound, getSoundList, deleteSound } from "@/api/event"; - +import { updateUser } from "@/api/user"; export default { data() { return { - playSpan:"\ue6e8", - playSpan2:"\ue6e8", - delspan:"\ue6e8", - warnSpn:"\ue6e8", + playSpan: "\ue75e", + playSpan2: "\ue75f", + delspan: "\ue715", + warnSpn: "\ue71c", curPlayingIndex: null, showUpload: false, activeIcons: 0, @@ -300,10 +277,9 @@ max: 0, }, menuArr: [ - // { name: "璁惧淇℃伅", icon: "\ue933" ,size:18}, - { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3", size: 20 }, - { name: "浜嬩欢澹伴煶", icon: "\ue6e1", size: 16 }, - { name: "涓�у寲璁剧疆", icon: "\ue756", size: 18 }, + { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 }, + { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 }, + { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 }, ], soundList: [], activePage: 0, @@ -323,62 +299,64 @@ }, isPlay: false, realIconList: [ - { url: "/images/settings/鏃ュ織绠$悊.png",color:"green" }, - { url: "/images/settings/瀹炴椂鐩戞帶.png",color:"yellow" }, - { url: "/images/settings/鏁版嵁鍙鍖�.png",color:"pink" }, + { url: "/images/settings/闈㈡�у浘鏍�/1浠板崸妫�娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/2涓綋闈欐.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/3瀹夊叏璀︽垝.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/4瀹夊叏甯芥娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/5濂旇窇.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/6杞﹁締妫�娴�.png" }, + { url: "/images/settings/闈㈡�у浘鏍�/7鎶界儫.png" }, ], flatIconList: [ - { url: "/images/settings/鏁版嵁鎺ㄩ��.png" }, - { url: "/images/settings/鏁版嵁鏍堥厤缃�.png" }, - { url: "/images/settings/绯荤粺璁剧疆.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/1浠板崸妫�娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/2涓綋闈欐.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/3瀹夊叏璀︽垝.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/4瀹夊叏甯芥娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/5濂旇窇.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/6杞﹁締妫�娴�.png" }, + { url: "/images/settings/绠�绾﹀浘鏍�/7鎶界儫.png" }, ], tableBGList: [ - { name: "background", url: "/images/settings/background.png" }, - { name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" }, - { name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" }, + { name: "background", url: "/images/desktop/background.png" }, + { name: "message", url: "/images/desktop/message.png" }, + { name: "weather", url: "/images/desktop/weather.png" }, ], - universalColor:'', + universalColor: "", colorList: [ - {name:1 ,color:"#FC6B9E"}, - {name:2 ,color:"#F38F56"}, - {name:3 ,color:"#FDD33A"}, - {name:4 ,color:"#53D999"}, - {name:5 ,color:"#21CDB2"}, - {name:6 ,color:"#61E2EB"}, - {name:7 ,color:"#4E94FF"}, - {name:8 ,color:"#8E8CD8"}, - {name:9 ,color:"#4C4A48"}, - ] + { name: 1, color: "#FC6B9E" }, + { name: 2, color: "#F38F56" }, + { name: 3, color: "#FDD33A" }, + { name: 4, color: "#53D999" }, + { name: 5, color: "#21CDB2" }, + { name: 6, color: "#61E2EB" }, + { name: 7, color: "#4E94FF" }, + { name: 8, color: "#8E8CD8" }, + { name: 9, color: "#4C4A48" }, + ], }; }, mounted() { this.getDeviceInfo(); this.getSounds(); - let _this = this; - this.eventAudio.addEventListener("ended", () => { - if (_this.curPlayingIndex !== null && _this.soundList.length) { - _this.soundList[_this.curPlayingIndex].isPlay = false; - _this.curPlayingIndex = null; - } + const url = this.curUser.backgroundpic; + this.activeIcons = this.curUser.useIconType - 1; + this.universalColor = this.colorList.findIndex((x) => { + return x.color == localStorage.getItem("--colorCard"); }); - const url = localStorage.getItem("backgroundPic"); if (url) { - const arr = url.split("/"); this.activeBg = this.tableBGList.findIndex((x) => { - return x.url.includes(arr[arr.length - 1]); + return x.url == url; }); } else { this.activeBg = 0; } - const e = this.$refs.curPage; - e.addEventListener("click", (e) => { - if (this.showUpload) { - this.showUpload = false; - } - }); + + this.eventAudio.addEventListener("ended", this.endedHandle, false); + this.$refs.curPage.addEventListener("click", this.clickHandle, false); }, beforeDestroy() { - this.$refs.curPage.removeEventListener("click"); + this.eventAudio.removeEventListener("ended", this.endedHandle, false); + this.$refs.curPage.removeEventListener("click", this.clickHandle, false); }, computed: { min_video_len() { @@ -387,21 +365,42 @@ max_video_len() { return Math.round(this.fakeObj.max * 1.2); }, + curUser() { + return JSON.parse(sessionStorage.getItem("userInfo")); + }, }, methods: { + endedHandle() { + let _this = this; + if (_this.curPlayingIndex !== null && _this.soundList.length) { + _this.soundList[_this.curPlayingIndex].isPlay = false; + _this.curPlayingIndex = null; + } + }, + clickHandle() { + let _this = this; + if (this.showUpload) { + this.showUpload = false; + } + }, formatTooltip(v) { return Math.round(v * 1.2); }, pickBg(item, i) { this.activeBg = i; let message = "changeBackground?" + item.name; - window.parent.postMessage( - { - msg: message, - }, - "*" - ); - this.$forceUpdate() + window.parent.postMessage({ msg: message }, "*"); + updateUser({ + id: this.curUser.id, + backgroundpic: item.url, + }).then((res) => { + if (res.success) { + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; + this.$message.success(res.msg); + } + }); + this.$forceUpdate(); }, togglePlay(item, i) { if (this.curPlayingIndex !== null) { @@ -467,7 +466,7 @@ this.getSounds(); }, (err) => { - this.$message.error("澹伴煶涓婁紶澶辫触"); + this.$message.error(err.msg); } ); }, @@ -476,20 +475,38 @@ }, selectIcons(i) { this.activeIcons = i; + updateUser({ + id: this.curUser.id, + iconType: i + 1, + }).then((res) => { + if (res.success) { + window.parent.postMessage({ msg: "AppUpdate" }, "*"); + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; + this.$message.success(res.msg); + } + }); }, removeSound(item) { const h = this.$createElement; - const icon = - this.$msgbox({ - message: h('div', {style: 'display: flex; flex-direction: column; justify-content: center; align-items: center;'}, [ - h('span',{class:'iconfont warn-icon'},`${this.warnSpn}`), - h('span', {class:'warn-title'}, '鍒犻櫎浜嬩欢澹伴煶 '), - h('span', {class:'warn-dec'}, '鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?') - ]), - showCancelButton: true, - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - }).then(() => { + const icon = this.$msgbox({ + title: "", + message: h( + "div", + { + style: + "display: flex; flex-direction: column; justify-content: center; align-items: center;", + }, + [ + h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`), + h("span", { class: "warn-title" }, "鍒犻櫎浜嬩欢澹伴煶 "), + h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺0闊�?"), + ] + ), + showCancelButton: true, + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + }).then(() => { deleteSound({ id: item.id, }).then( @@ -513,8 +530,7 @@ this.$refs["soundBar"].forEach((x) => { x.style = "border: 2px solid #FFF;"; }); - this.$refs["soundBar"][i].style = - "border: 2px solid #4E94FF;"; + this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;"; }, submitAlarm() { saveAlarmConfig({ @@ -530,17 +546,17 @@ } }); }, - colorCard(color,index) { - this.universalColor = index - document.documentElement.style.setProperty('--colorCard',`${color}`) - localStorage.setItem('--colorCard',`${color}`) - } + colorCard(color, index) { + this.universalColor = index; + document.documentElement.style.setProperty("--colorCard", `${color}`); + localStorage.setItem("--colorCard", `${color}`); + window.parent.postMessage({ msg: "changeColor", color }, "*"); + }, }, }; </script> <style scoped lang="scss"> - .all { width: 100%; } @@ -552,20 +568,22 @@ flex: 1; flex-basis: auto; box-sizing: border-box; + .el-input__inner { + height: 24px !important; + } .general-center { height: 100%; width: 300px; overflow: auto; box-sizing: border-box; flex-shrink: 0; - padding: 24px 10px; - border-right: 4px solid #F2F2F7; - background-color: #FBFAFF; - - - + padding: 10px 10px; + padding-top: 6px; + border-right: 4px solid #f2f2f7; + border-top: 4px solid #f2f2f7; + border-left: 4px solid #f2f2f7; + background-color: #fbfaff; .menu-item { - height: 56px; margin-bottom: 4px; border-radius: 8px; @@ -589,7 +607,7 @@ color: white !important; } .menu-item:hover { - background-color: #F2F2F7; + background-color: #f2f2f7; } } .general-right { @@ -598,8 +616,9 @@ overflow: auto; box-sizing: border-box; background-color: rgb(251, 250, 255); + border-top: 4px solid #f2f2f7; - padding: 10px 18px 10px 10px; + padding: 6px 18px 10px 10px; .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) @@ -613,7 +632,7 @@ .el-form-item { margin-bottom: 10px; height: 50px; - background: #f8f8f8; + background: #f2f2f7; padding: 4px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -641,58 +660,56 @@ text-align: left; margin-bottom: 5px; } - .voice-title { + .bar.title.voice-title { justify-content: center !important; - font-weight: 700 ; + text-align: center; + font-weight: 700; + border: none; + background: #f2f2f7; + border-radius: 8px; + height: 48px; + margin-bottom: 4px; + border: 2px solid #f2f2f7 !important; } .bar-group { overflow: auto; - height: 400px; - } - .bar { - height: 48px; - background-color: #f8f8f8; - border-radius: 10px; - line-height: 48px; - box-sizing: border-box; - padding: 0 20px 0 20px; - font-weight: 700; - display: flex; - justify-content: space-between; - margin-bottom: 2px; - border: 2px solid #fff; - .name { - font-size: 14px; - } - .btns { - width: 52px; + height: calc(100% - 100px); + .general-bar { + height: 48px; + background: #f2f2f7; + border-radius: 10px; + line-height: 48px; + box-sizing: border-box; + padding: 0 20px 0 20px; + font-weight: 700; display: flex; justify-content: space-between; - color: rgba(191, 191, 191, 1); - /* .el-icon-video-pause { - cursor: pointer; - font-size: 23px; - vertical-align: middle; - color: #409eff; + margin-bottom: 2px; + border: 2px solid #f2f2f7; + margin-bottom: 4px; + .name { + font-size: 14px; } - .el-icon-video-play { - cursor: pointer; - font-size: 23px; - vertical-align: middle; - color: #409eff; - } */ - span { - color: #333 + .sound-btns { + width: 52px; + display: flex; + justify-content: space-between; + color: rgba(191, 191, 191, 1); + + span { + color: #333; + } + .del:hover { + color: #fc4958; + } } - .del:hover { - color:#FC4958; + .desc { + font-size: 14px; + color: rgba(134, 134, 134, 1); } - } - .desc { - font-size: 14px; - color: rgba(134, 134, 134, 1); } } + /* .bar:hover { border: 2px solid #4E94FF !important; } */ @@ -724,7 +741,7 @@ .min-dur { box-sizing: border-box; padding: 0 20px; - background-color: #F2F2F7; + background-color: #f2f2f7; height: 105px; margin-bottom: 4px; border-radius: 15px; @@ -752,13 +769,13 @@ .sec { min-width: 30px; line-height: 80px; - margin-right: 10px; - color:#333 ; + + color: #333; font-size: 8px; } .block { flex: 1; - margin: 0 20px 0 6px; + margin: 0 0px 0 6px; } .el-input-number--small { width: 100px; @@ -812,7 +829,7 @@ font-weight: 700; margin-top: 20px; } - /* .icon-bar:hover { + /* .icon-bar:hover { background-color: rgba(233, 233, 233, 1); } */ .color-bar { @@ -823,26 +840,26 @@ height: 96px; background-color: #fff; border-radius: 8px; - padding-left:7px ; + padding-left: 7px; .color-option { - margin-right:12px ; + margin-right: 12px; width: 30px; height: 30px; - border-radius:50% ; + border-radius: 50%; } .color-option-active { box-sizing: border-box; - margin-right:12px ; + margin-right: 12px; width: 30px; height: 30px; - border-radius:50% ; + border-radius: 50%; background-color: #fff; - padding: 3px; + padding: 4px; .color-option-content { width: 100%; height: 100%; - border-radius:50% ; + border-radius: 50%; } } } @@ -850,7 +867,7 @@ cursor: pointer; box-sizing: border-box; padding: 15px 13px 14px 20px; - background: #F2F2F7; + background: #f2f2f7; border-radius: 8px; margin-bottom: 10px; .bar-title { @@ -869,12 +886,12 @@ } .icon-normal { font-size: 16px; - color: #E0E0E0; + color: #e0e0e0; } } .entity { display: flex; - margin-left:5px ; + margin-left: 5px; .entity-img { background-color: rgba(248, 248, 248, 1); width: 50px; @@ -888,7 +905,7 @@ } } .bg-bar { - background-color: #F2F2F7; + background-color: #f2f2f7; box-sizing: border-box; padding: 15px 25px; border-radius: 12px; @@ -906,7 +923,7 @@ height: 100%; } } - /* .bg-img:hover { + /* .bg-img:hover { border: 2px solid yellow; } */ .bg-list-active { @@ -919,88 +936,102 @@ } } .v-modal { - opacity:0.35 !important; + opacity: 0.35 !important; border-radius: 8px !important; } .el-message-box { -position: absolute; -width: 420px; -height: 210px; -left: 302px; -top: 279px; + position: absolute; + width: 420px; + height: 210px; + left: 302px; + top: 279px; -background: #FFFFFF; -border-radius: 8px; + background: #ffffff; + border-radius: 8px; } .upload-demo { -top: 452px; -left: 2px !important; -width: 452px; -height: 150px; -background: #FFFFFF; -box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); -border-radius: 8px; + width: 452px; + height: 150px; + background: #ffffff; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; -::v-deep .el-upload-dragger { -display: flex; -justify-content: center; -align-items: center; -overflow: visible; -width: 340px; -height: 72px; -margin-top:30px ; -} + ::v-deep .el-upload-dragger { + display: flex; + justify-content: center; + align-items: center; + overflow: visible; + width: 340px; + height: 72px; + margin-top: 30px; + } + .info-click { + color: var(--colorCard); + text-decoration: underline; + } -.info { - -font-weight: bold; -font-size: 14px; -color: #828282; -} - -.info-click { - color: var(--colorCard); - text-decoration: underline; -} - + .info-click { + color: #4e94ff; + text-decoration: underline; + } } .des { position: absolute; - top: 78px; - left: 109px; + top: 78px; + left: 109px; z-index: 999; - color: #4F4F4F; + color: #4f4f4f; font-weight: bold; font-size: 12px; } - </style> <style lang="scss"> .el-message-box { + padding-bottom: 20px !important; + border-radius: 8px !important; + .el-message-box__content { + color: #333333; + padding: 0; + font-size: 14px; + } .warn-icon { - color:rgba(254, 109, 104, 1) ; - font-size: 50px; - margin-top:26px ; + color: var(--colorCard); + font-size: 40px; + margin-top: 11px; } .warn-title { font-weight: bold; font-size: 16px; - margin: 5px; + margin: 6px; + line-height: 22px; } .warn-dec { font-weight: bold; font-size: 14px; - color: #828282; + color: #828282; + line-height: 20px; } - .el-message-box__btns { + .el-message-box__headerbtn { + top: 12px; + } + .el-message-box__headerbtn .el-message-box__close { + color: #333333; + font-weight: bold; + } + .el-message-box__btns { display: flex; justify-content: center; - margin-top: 10px; + margin: 20px; + .el-button:focus, + .el-button:hover { + background-color: none; + border: none; + } button { width: 175px; height: 40px; @@ -1009,17 +1040,21 @@ font-size: 16px; font-weight: 700; } + &:hover { + border: 1px solid var(--colorCard) !important; + } } button:first-child { - background-color: #E0E0E0; + background-color: #e0e0e0; span { - color: #333333; + color: #333333; } } button:last-child { background-color: var(--colorCard) !important; - span { - color: #fff; + border: 1px solid var(--colorCard) !important; + span { + color: #fff; } } } @@ -1027,15 +1062,25 @@ </style> <style> - .videoTime .el-slider__button { margin-top: -25px !important; border: none !important; - background-image: url(/images/gengeralSettings/鍒诲害鏍�.png); +} + +.videoTime .el-slider__button::after { + display: block; + position: relative; + content: "\e75d"; + color: var(--colorCard); + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .videoTime .el-tooltip { -background-color: #F2F2F7 !important; + background-color: #f2f2f7 !important; border: none !important; } @@ -1045,10 +1090,10 @@ } .videoTime .el-slider__stop { - background-color: #C4C4C4 !important; + background-color: #c4c4c4 !important; height: 3px !important; width: 8px !important; - border-radius:0 !important; + border-radius: 0 !important; } .videoTime .el-slider__bar { @@ -1058,75 +1103,35 @@ .videoTime .el-input-number.el-input-number--small { width: 90px; - height: 24px; + height: 24px !important; border-radius: 4px; line-height: 24px !important; font-weight: 700 !important; } - .videoTime .el-input-number.el-input-number--small .el-input__inner { -font-size: 12px !important; + font-size: 12px !important; + height: 24px !important; } .el-input-number__decrease { -color: #333 !important; -/* top: 4px !important; */ - height: 22px !important; - width: 20px !important; - line-height: 22px !important; + color: #333 !important; + /* top: 4px !important; */ + height: 22px !important; + width: 20px !important; + line-height: 22px !important; } - -/* .el-input-number__decrease:hover i{ - color: var(--colorCard); -} */ .el-input-number__increase { -color: #333 !important; - /* top: 4px !important; */ - height: 22px !important; - width: 24px !important; - line-height: 22px !important; + color: #333 !important; + /* top: 4px !important; */ + height: 22px !important; + width: 24px !important; + line-height: 22px !important; } -.el-input-number__increase:hover i{ - /* color: var(--colorCard); */ - color: #4E94FF; +.el-input-number__increase:hover i { + /* color: var(--colorCard); */ + color: #4e94ff; } - -.el-input__inner { - height: 24px !important; -} - - -/* .el-tooltip__popper { - font-size: 12px !important; - background-color: transparent !important; - color:var(--colorCard) !important; -} - -.popper__arrow::after { - border-color: transparent !important; - border: none !important; -} - -.popper__arrow:after { - border-bottom-color: green !important; -} - -.popper__arrow:after { - border-top-color: pink !important; -} - -.toolClass { - border: none !important; -} - -.toolClass { - border: none !important; -} - -.el-slider__button::after { - border: none !important; -} */ -</style> +</style> \ No newline at end of file -- Gitblit v1.8.0