From 211cd7469ebc7df813ffd320c90f64fd1c2f1aee Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期三, 09 二月 2022 10:55:20 +0800 Subject: [PATCH] 备份还原ui新 --- src/pages/settings/views/generalSettings.vue | 358 ++++++++++++++++++++--------------------------------------- 1 files changed, 120 insertions(+), 238 deletions(-) diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue index c84b4c1..be4ad27 100644 --- a/src/pages/settings/views/generalSettings.vue +++ b/src/pages/settings/views/generalSettings.vue @@ -16,48 +16,6 @@ </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> @@ -77,27 +35,16 @@ :format-tooltip="formatTooltip" ></el-slider> </div> - <!-- <el-input-number + <el-input-number v-model="min_len" @change="fakeObj.min = +(min_len / 1.2)" - controls-position="right" :min="5" :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"> @@ -127,7 +74,6 @@ size="small" ></el-input-number > s - </div> </div> @@ -156,18 +102,17 @@ 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" - style="" - ></i> - <i v-else class="el-icon-video-pause"></i> --> + <img + v-else + src="/images/settings/鏆傚仠.png" + alt="" + style=" + width: 16px; + hight: 16px; + cursor: pointer; + margin-top: 15px; + " + /> </span> <span class="icon iconfont del" @@ -208,33 +153,35 @@ <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" - style="border:none;" + 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"> @@ -274,14 +221,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)" > @@ -298,9 +245,7 @@ <script> import { saveAlarmConfig, getDevInfo } from "@/api/system"; import { uploadSound, getSoundList, deleteSound } from "@/api/event"; -import { - updateUser, -} from "@/api/user"; +import { updateUser } from "@/api/user"; export default { data() { return { @@ -318,7 +263,6 @@ max: 0, }, menuArr: [ - // { name: "璁惧淇℃伅", icon: "\ue933" ,size:18}, { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 }, { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 }, { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 }, @@ -355,18 +299,18 @@ { 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() { @@ -380,17 +324,11 @@ } }); const url = this.curUser.backgroundpic; - this.activeIcons = this.curUser.useIconType-1 - this.universalColor = this.colorList.findIndex((x) => { - return x.color == localStorage.getItem("--colorCard") - }) - if (url) { - this.activeBg = this.tableBGList.findIndex((x) => { - return x.url == url; - }); - } else { - this.activeBg = 0; - } + this.activeIcons = this.curUser.useIconType - 1; + this.universalColor = this.colorList.findIndex( + (x) => x.color == localStorage.getItem("--colorCard") + ); + this.activeBg = url ? this.tableBGList.findIndex((x) => x.url == url) : 0; const e = this.$refs.curPage; e.addEventListener("click", (e) => { if (this.showUpload) { @@ -409,8 +347,7 @@ return Math.round(this.fakeObj.max * 1.2); }, curUser() { - const info = JSON.parse(sessionStorage.getItem("userInfo")); - return info; + return JSON.parse(sessionStorage.getItem("userInfo")); }, }, methods: { @@ -420,18 +357,17 @@ pickBg(item, i) { this.activeBg = i; let message = "changeBackground?" + item.name; - window.parent.postMessage( {msg: message, }, "*" ); + 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 + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); this.$message.success(res.msg); } }); - this.$forceUpdate() + this.$forceUpdate(); }, togglePlay(item, i) { if (this.curPlayingIndex !== null) { @@ -508,12 +444,12 @@ this.activeIcons = i; updateUser({ id: this.curUser.id, - iconType: i+1, + iconType: i + 1, }).then((res) => { if (res.success) { window.parent.postMessage({ msg: "AppUpdate" }, "*"); - sessionStorage.setItem("userInfo", JSON.stringify(res.data)) - debugger + sessionStorage.setItem("userInfo", JSON.stringify(res.data)); + debugger; this.$message.success(res.msg); } }); @@ -577,12 +513,12 @@ } }); }, - colorCard(color,index) { - this.universalColor = index - document.documentElement.style.setProperty('--colorCard',`${color}`) - localStorage.setItem('--colorCard',`${color}`) - window.parent.postMessage({msg:'changeColor',color},'*') - } + colorCard(color, index) { + this.universalColor = index; + document.documentElement.style.setProperty("--colorCard", `${color}`); + localStorage.setItem("--colorCard", `${color}`); + window.parent.postMessage({ msg: "changeColor", color }, "*"); + }, }, }; </script> @@ -600,8 +536,8 @@ flex-basis: auto; box-sizing: border-box; .el-input__inner { - height: 24px !important; -} + height: 24px !important; + } .general-center { height: 100%; width: 300px; @@ -638,7 +574,7 @@ color: white !important; } .menu-item:hover { - background-color: #F2F2F7; + background-color: #f2f2f7; } } .general-right { @@ -663,7 +599,7 @@ .el-form-item { margin-bottom: 10px; height: 50px; - background: #F2F2F7; + background: #f2f2f7; padding: 4px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -696,18 +632,18 @@ text-align: center; font-weight: 700; border: none; - background: #F2F2F7; + background: #f2f2f7; border-radius: 8px; height: 48px; margin-bottom: 4px; - border:2px solid #F2F2F7 !important; - } + border: 2px solid #f2f2f7 !important; + } .bar-group { overflow: auto; height: calc(100% - 100px); .general-bar { height: 48px; - background: #F2F2F7; + background: #f2f2f7; border-radius: 10px; line-height: 48px; box-sizing: border-box; @@ -716,7 +652,7 @@ display: flex; justify-content: space-between; margin-bottom: 2px; - border:2px solid #F2F2F7; + border: 2px solid #f2f2f7; margin-bottom: 4px; .name { font-size: 14px; @@ -726,18 +662,7 @@ 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; - } - .el-icon-video-play { - cursor: pointer; - font-size: 23px; - vertical-align: middle; - color: #409eff; - } */ + span { color: #333; } @@ -783,7 +708,7 @@ .min-dur { box-sizing: border-box; padding: 0 20px; - background-color: #F2F2F7; + background-color: #f2f2f7; height: 105px; margin-bottom: 4px; border-radius: 15px; @@ -812,7 +737,7 @@ min-width: 30px; line-height: 80px; margin-right: 10px; - color:#333 ; + color: #333; font-size: 8px; } .block { @@ -871,9 +796,7 @@ font-weight: 700; margin-top: 20px; } - /* .icon-bar:hover { - background-color: rgba(233, 233, 233, 1); - } */ + .color-bar { display: flex; justify-content: center; @@ -882,26 +805,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: 4px; .color-option-content { width: 100%; height: 100%; - border-radius:50% ; + border-radius: 50%; } } } @@ -909,7 +832,7 @@ cursor: pointer; box-sizing: border-box; padding: 15px 13px 14px 20px; - background: #F2F2F7; + background: #f2f2f7; border-radius: 8px; margin-bottom: 10px; .bar-title { @@ -928,12 +851,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; @@ -947,7 +870,7 @@ } } .bg-bar { - background-color: #F2F2F7; + background-color: #f2f2f7; box-sizing: border-box; padding: 15px 25px; border-radius: 12px; @@ -965,7 +888,7 @@ height: 100%; } } - /* .bg-img:hover { + /* .bg-img:hover { border: 2px solid yellow; } */ .bg-list-active { @@ -1012,10 +935,10 @@ margin-top: 30px; } -.info-click { - color: var(--colorCard); - text-decoration: underline; -} + .info-click { + color: var(--colorCard); + text-decoration: underline; + } .info-click { color: #4e94ff; @@ -1044,7 +967,7 @@ font-size: 14px; } .warn-icon { - color: #fe6d68; + color: var(--colorCard); font-size: 40px; margin-top: 11px; } @@ -1070,7 +993,7 @@ .el-message-box__btns { display: flex; justify-content: center; - margin-top: 20px; + margin: 20px; .el-button:focus, .el-button:hover { background-color: none; @@ -1097,8 +1020,8 @@ button:last-child { background-color: var(--colorCard) !important; border: 1px solid var(--colorCard) !important; - span { - color: #fff; + span { + color: #fff; } } } @@ -1106,17 +1029,15 @@ </style> <style> - .videoTime .el-slider__button { margin-top: -25px !important; border: none !important; - } .videoTime .el-slider__button::after { display: block; position: relative; -content: "\e75d"; + content: "\e75d"; color: var(--colorCard); font-family: "iconfont" !important; font-size: 16px; @@ -1126,7 +1047,7 @@ } .videoTime .el-tooltip { -background-color: #F2F2F7 !important; + background-color: #f2f2f7 !important; border: none !important; } @@ -1136,10 +1057,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 { @@ -1155,68 +1076,29 @@ font-weight: 700 !important; } - .videoTime .el-input-number.el-input-number--small .el-input__inner { -font-size: 12px !important; -height: 24px !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-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> -- Gitblit v1.8.0