From c69082e60f9b27dfd8c6cfa64af0b36ede1fade4 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期五, 05 十一月 2021 14:13:39 +0800 Subject: [PATCH] merge --- src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 854 ++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 643 insertions(+), 211 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue index 5dd7411..817f290 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue @@ -1,67 +1,10 @@ <template> <div class="video-analyze-content"> <div class="content-top"> - <div class="grid-check"> - <el-dropdown - trigger="click" - :popper-append-to-body="false" - @command="handleCommand" - v-show="showLocChoise" - > - <span class="el-dropdown-link"> - {{ curCamera }} - <i class="el-icon-arrow-down el-icon--right"></i> - </span> - <el-dropdown-menu slot="dropdown"> - <el-dropdown-item - v-for="(item, index) in videoArrs" - :key="index" - :command="item" - >{{ item.CameraPosition }}</el-dropdown-item> - </el-dropdown-menu> - </el-dropdown> + <!-- 椤堕儴鏍� --> - <span - :class=" - guid === 1 - ? 'iconfont icongongge1 activegongge' - : 'iconfont icongongge1' - " - @click="setGuid(1)" - ></span> - <span - :class=" - guid === 2 - ? 'iconfont icongongge activegongge' - : 'iconfont icongongge' - " - @click="setGuid(2)" - ></span> - <span - :class=" - guid === 3 - ? 'iconfont icongongge2 activegongge' - : 'iconfont icongongge2' - " - @click="setGuid(3)" - ></span> - </div> <div class="video-area"> - <div class="info-list block"> - <p class="title-partment">鐩稿叧瑙嗛</p> - <div class="v-name-block"> - <div - class="video-name" - :class="{ current: curVideo.GroupID == video.GroupID }" - @click="checkVideo(video)" - v-for="(video, index) in curRoomVideos" - :key="index" - > - <i class="el-icon-film"></i> - <span>{{ video.StartTime }}</span> - </div> - </div> - </div> + <!-- 鎾斁鍣ㄥ尯鍩� --> <div class="players" ref="playerWrap"> <template v-if="guid == 1"> <div @@ -116,6 +59,8 @@ </template> </div> </template> + + <!-- 鎬讳綋鎾斁鎺у埗 --> <div class="player-control"> <div class="progress-bar"> <el-tooltip @@ -130,14 +75,24 @@ </div> <div class="self-dot" - :class="getColor(item.text)" + :class=" + curVideo.IsOperate == '1' && + item.state == 0 && + !item.text.includes('鎵嬫瘮') + ? 'red' + : getColor(item.text) + " :style="{ left: (item.offset / maxSecond) * 100 + '%', }" @click="dotJump(item.offset)" ></div> </el-tooltip> - <el-tooltip placement="top" v-for="(item, index) in labelMarks" :key="index"> + <el-tooltip + placement="top" + v-for="(item, index) in labelMarks" + :key="index" + > <div slot="content"> {{ getTimeStr(item.offset) }} <br /> @@ -163,96 +118,240 @@ @change="progressChange" ></el-slider> </div> + <div class="time">{{ curPlayTime }} / {{ maxVideoTime }}</div> <div class="control-zone"> - <span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span> + <el-dropdown + trigger="click" + :popper-append-to-body="false" + @command="handleCommand" + v-show="showLocChoise" + placement="top-end" + > + <span class="el-dropdown-link"> + {{ curCamera }} + <i class="icon iconfont"></i> + </span> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item + v-for="(item, index) in videoArrs" + :key="index" + :command="item" + >{{ item.CameraPosition }}</el-dropdown-item + > + </el-dropdown-menu> + </el-dropdown> + <div v-if="!showLocChoise"></div> <div class="play-btn"> <div class="group"> - <i class="el-icon-d-arrow-left" @click="moveBar(-10)"></i> + <span + class="back" + @click="moveBar(-10)" + style="cursor: pointer" + >蹇��10绉�</span + > + <i class="icon iconfont" @click="moveBar(-10)"></i> <i - class="el-icon-video-play" - style="font-size: 29px; cursor: pointer" + class="icon iconfont" + style="font-size: 18px; cursor: pointer; margin: 0 40px" @click="playAll" v-if="showPlayBtn" - ></i> + ></i + > <i - class="el-icon-video-pause" - style="font-size: 29px; cursor: pointer" + class="icon iconfont" + style="font-size: 18px; cursor: pointer; margin: 0 40px" @click="pauseAll" v-else - ></i> - <i class="el-icon-d-arrow-right" @click="moveBar(10)"></i> + ></i + > + <i class="icon iconfont" @click="moveBar(10)"></i> + <span + class="forward" + @click="moveBar(10)" + style="cursor: pointer" + >蹇繘10绉�</span + > </div> <!-- <span class="icon iconfont"></span> --> + </div> + <div class="spanList"> + <span + :class=" + guid === 1 + ? 'icon-rt iconfont icongongge1 activegongge' + : 'icon-rt iconfont icongongge1' + " + @click="setGuid(1)" + ></span> + <span + :class=" + guid === 2 + ? 'icon-rt iconfont icongongge activegongge' + : 'icon-rt iconfont icongongge' + " + @click="setGuid(2)" + ></span> + <span + :class=" + guid === 3 + ? 'icon-rt iconfont icongongge2 activegongge' + : 'icon-rt iconfont icongongge2' + " + @click="setGuid(3)" + ></span> + <img + src="/images/shuohuang/缁� 801.png" + alt="" + v-if="showHand == true" + @click="closeHand" + /> + <img + src="/images/shuohuang/缁� 800.png" + alt="" + v-else + @click="openHand" + /> + </div> + </div> + </div> + </div> + + <!-- 鍙充晶淇℃伅鏍� --> + <div class="info-list"> + <div class="info"> + <div class="base-info"> + <div class="info-item"> + <span class="CarNumber">{{ videoDetails.CarNumber }}</span> + <label>杞︽:</label> + <span>{{ videoDetails.TrainNumber }}</span> + </div> + <div class="info-item"> + <label>鏃堕棿:</label> + <span>{{ videoDetails.StartTime }}</span> + </div> + <div class="info-item"> + <label>鍙告満 | 鍓徃鏈�:</label> + <span + >{{ videoDetails.Driver1 }} | {{ videoDetails.Driver2 }}</span + > + </div> + </div> + </div> + <div class="info-video"> + <p class="title-partment">鐩稿叧瑙嗛</p> + <div class="v-name-block"> + <div + class="video-name" + :class="{ current: curVideo.GroupID == video.GroupID }" + @click="checkVideo(video)" + v-for="(video, index) in curRoomVideos" + :key="index" + > + <i class="icon iconfont"></i> + <span>{{ video.StartTime }}</span> </div> </div> </div> </div> </div> </div> + + <!-- 涓嬩晶淇℃伅 --> <div class="content-bottom"> <div class="bot-left"> <!-- <p class="title-partment">蹇�熸爣娉�</p> --> <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="蹇�熸爣娉�" name="first"> - <div class="flex-box" style="height: 28px"> - <label style="padding-right: 10px">闅愭偅闂:</label> - <el-radio-group v-model="isUnusual"> - <el-radio :label="0">鏃犲紓甯�</el-radio> - <el-radio :label="1">鏈夊紓甯�</el-radio> - </el-radio-group> - <el-button - icon="el-icon-plus" - size="mini" - v-show="isUnusual == 1" - type="primary" - @click="addLabel(curVideo)" - >娣诲姞鏍囨敞</el-button> + <el-tab-pane label="闅愭偅浜嬩欢" name="first"> + <div class="yinhuan-wrap"> + <div class="wrap-title"> + {{ + yinhuanArr.length + ? "璇嗗埆鍑虹殑寮傚父鎯呭喌锛�" + : "鏆傛棤璇嗗埆鍑哄紓甯告儏鍐�" + }} + </div> + <div class="list"> + <div + class="list-item" + v-for="(item, index) in yinhuanArr" + :key="index" + @click="dotJump(item.offset)" + > + <span style="margin-right: 20px">{{ + getTimeStr(item.offset) + }}</span> + <span + style=" + display: block; + min-width: 135px; + margin-right: 20px; + min-widht: 140px; + " + >{{ item.text }} + </span> + + <span class="list-warn">鏈墜姣� </span> + </div> + </div> </div> - <div class="flex-box fixed-height-box"> - <label v-if="!showTable">鏍囨敞淇℃伅:</label> - <div class="mark-list" v-if="!showTable"> - <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID"> - <div class="time"> - <span>{{ pad0(Math.floor(mark.Time / 60)) }}:{{ pad0(mark.Time % 60) }}</span> - <i class="el-icon-edit" @click="editCurLabel(mark)"></i> - <i class="el-icon-delete" @click="removeCurLabel(mark)"></i> - </div> - <div class="label-content"> - <span>{{ mark.Desc }}</span> + </el-tab-pane> + + <el-tab-pane label="蹇�熸爣娉�" name="mid"> + <div class="mark"> + <div class="flex-box" style="height: 28px"> + <label>闅愭偅闂:</label> + <el-radio-group v-model="isUnusual"> + <el-radio :label="0">鏃犲紓甯�</el-radio> + <el-radio :label="1">鏈夊紓甯�</el-radio> + </el-radio-group> + + <i + class="icon iconfont" + v-show="isUnusual == 1" + @click="addLabel(curVideo)" + ></i + > + </div> + <div class="fixed-height-box"> + <label v-if="!showTable">鏍囨敞淇℃伅:</label> + <div class="mark-list" v-if="!showTable"> + <div + class="mark-item" + v-for="mark in curVideo.LableLst" + :key="mark.ID" + > + <i class="icon iconfont edit" @click="editCurLabel(mark)" + ></i + > + <i + class="icon iconfont remove" + @click="removeCurLabel(mark)" + ></i + > + <span class="mark-time" + >{{ pad0(Math.floor(mark.Time / 60)) }}:{{ + pad0(mark.Time % 60) + }}</span + > + <span + class="mark-desc" + v-for="(item, index) in mark.Desc.split(',')" + :key="index" + >{{ item }}</span + > </div> </div> </div> </div> </el-tab-pane> - <!-- <div class="flex-box fixed-height-box2"></div> --> <dataset-chart style="width: 100%" v-if="showTable"></dataset-chart> <el-tab-pane label="鍏噷鏍�" name="second"></el-tab-pane> </el-tabs> </div> - <div class="bot-right block"> - <p class="title-partment">瑙嗛璇︽儏</p> - <div class="base-info"> - <div> - <label>杞﹀彿:</label> - <span>{{ videoDetails.CarNumber }}</span> - </div> - <div> - <label>杞︽:</label> - <span>{{ videoDetails.TrainNumber }}</span> - </div> - <div> - <label>鏃堕棿:</label> - <span>{{ videoDetails.StartTime }}</span> - </div> - <div> - <label>鍙告満 | 鍓徃鏈�:</label> - <span>{{ videoDetails.Driver1 }} | {{ videoDetails.Driver2 }}</span> - </div> - </div> - </div> </div> + <!-- 寮圭獥 --> <el-dialog class="label-dialog" :visible="labelDialogVisible" @@ -270,12 +369,19 @@ <div class="label-check"> <p class="label">闅愭偅闂:</p> <el-checkbox-group v-model="labelCheckedList"> - <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{ item.Name }}</el-checkbox> + <el-checkbox + v-for="item in labelOptions" + :key="item.ID" + :label="item.ID" + >{{ item.Name }}</el-checkbox + > </el-checkbox-group> </div> <div class="btns"> - <el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button> - <el-button @click="submitLabelChecked" size="small" type="primary">纭畾</el-button> + <el-button @click="cancelLabelChecked" size="mini ">鍙栨秷</el-button> + <el-button @click="submitLabelChecked" size="mini " type="primary" + >纭畾</el-button + > </div> </el-dialog> </div> @@ -338,6 +444,7 @@ }, data() { return { + showHand: true, guid: 1, labelDialogVisible: false, curVideo: {}, @@ -390,7 +497,9 @@ }, }, mounted() { - + setTimeout(() => { + console.log(this.yinhuanArr); + }, 1000); this.renderLabelOpts(); this.setGuid(1); @@ -433,9 +542,8 @@ this.showPlayBtn = false; if (this.guid == 1) { this.$refs[`player_${this.curVideo.id}`][0].play(); - this.maxDuration = this.$refs[ - `player_${this.curVideo.id}` - ][0].getDuration(); + this.maxDuration = + this.$refs[`player_${this.curVideo.id}`][0].getDuration(); } else { this.videoArrs.forEach((v) => { this.$refs[`player_${v.id}`][0].play(); @@ -464,9 +572,8 @@ this.$refs[`player_${this.curVideo.id}`][0].seek(val); // this.$refs[`player_${this.curVideo.ID}`][0].play(); setTimeout(() => { - let curT = that.$refs[ - `player_${that.curVideo.ID}` - ][0].getCurrentTime(); + let curT = + that.$refs[`player_${that.curVideo.ID}`][0].getCurrentTime(); }, 600); } else { this.videoArrs.forEach((v, i) => { @@ -525,14 +632,14 @@ } }, handleCommand(cmd) { - console.log(cmd) - console.log(this.$refs) + console.log(cmd); + console.log(this.$refs); let _this = this; _this.curVideo = cmd; _this.curCamera = _this.curVideo.CameraPosition; _this.$nextTick(() => { - console.log(_this.$refs) + console.log(_this.$refs); _this.$refs[`player_${_this.curVideo.id}`][0].init(); }); }, @@ -560,7 +667,7 @@ _this.curVideo = res.data.find((item) => item.id == v.id); - _this.refreshCurVideoLabel(_this.curVideo) + _this.refreshCurVideoLabel(_this.curVideo); // 璁剧疆涓嬫媺鑿滃崟閫変腑椤� _this.curCamera = _this.curVideo.CameraPosition; @@ -595,41 +702,43 @@ _this.labelOptions = res.data; }); }, - getColor(text){ - if (text.indexOf('杩涘嚭绔�')>-1) { - return 'yellow' + getColor(text) { + if (text.indexOf("杩涘嚭绔�") > -1) { + return "yellow"; } - if (text.indexOf('淇″彿鏈�')>-1) { - return 'purple' + if (text.indexOf("淇″彿鏈�") > -1) { + return "purple"; } - if (text.indexOf('杩囧垎鐩�')>-1) { - return 'blue' + if (text.indexOf("杩囧垎鐩�") > -1) { + return "blue"; } - return '' + return ""; }, refreshCurVideoLabel(video) { - let arr = [video] - this.videoArrs = arr.concat(this.allCurVideos.filter(v => { - return v.GroupID == video.GroupID && v.id != video.id - })) + let arr = [video]; + this.videoArrs = arr.concat( + this.allCurVideos.filter((v) => { + return v.GroupID == video.GroupID && v.id != video.id; + }) + ); }, checkVideo(video) { - console.log(video) + console.log(video); this.refreshCurVideoLabel(video); this.curVideo = video; - this.eventMarks = [] - this.labelMarks = [] + this.eventMarks = []; + this.labelMarks = []; video.marks.forEach((item) => { if (item.type == 0) { this.eventMarks.push(item); } else { this.labelMarks.push(item); } - }) + }); this.$nextTick(() => { this.$refs[`player_${this.curVideo.id}`][0].init(); - console.log(this.$refs) + console.log(this.$refs); }); }, setGuid(guid) { @@ -662,12 +771,12 @@ submitLabelChecked() { let _this = this; let tempArr = []; - let isAdd = false + let isAdd = false; tempArr = this.videoArrs.map((video) => video.id); let desc = this.labelCheckedList.map((lableId) => { for (let label of this.labelOptions) { - if (label.Name=='鏈墜姣�') { - isAdd=true + if (label.Name == "鏈墜姣�") { + isAdd = true; } if (label.ID == lableId) { return label.Name; @@ -684,14 +793,17 @@ }; editLabel(query).then((rsp) => { + console.log(query); if (rsp && rsp.success) { _this.labelDialogVisible = false; _this.$set(_this.curVideo, "LableLst", []); rsp.data.forEach((label) => { if (label.ParentID == _this.curVideo.ID) { + console.log(label); _this.curVideo.LableLst.push(label); } }); + console.log(query.Desc.split(",")); _this.labelMarks.push({ type: 1, offset: +query.Time, @@ -703,8 +815,8 @@ _this.$parent.$parent.filterSearchData(); if (isAdd) { - let num = sessionStorage.getItem("shoubiNum") - sessionStorage.setItem("shoubiNum", num?+num+1:1 ) + let num = sessionStorage.getItem("shoubiNum"); + sessionStorage.setItem("shoubiNum", num ? +num + 1 : 1); } } else { _this.$message.warning(rsp.msg); @@ -751,15 +863,14 @@ }, mergeMarks(videoInfo) { if (!videoInfo.EventLst || !videoInfo.LableLst) { - console.log("mergeMarks data null"); return; } - const eMarks = videoInfo.EventLst.map((item) => { return { offset: item.SecondsInVideo, text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc), type: 0, + state: item.state, }; }); const labMarks = videoInfo.LableLst.map((lable) => { @@ -775,6 +886,29 @@ let marks = this.mergeMarks(video); this.$refs[`player_${video.id}`][0].setProgressMarkers(marks); }, + openHand() { + this.showHand = true; + }, + closeHand() { + this.showHand = false; + }, + }, + computed: { + yinhuanArr() { + console.log(this.curVideo.IsOperate); + if (this.curVideo.IsOperate == 0) { + return []; + } + console.log(this.eventMarks); + return this.eventMarks.filter((x) => { + return ( + (x.text.indexOf("杩涘嚭绔�") > -1 || + x.text.indexOf("杩囧垎鐩�") > -1 || + x.text.indexOf("淇″彿鏈�") > -1) && + x.state == 0 + ); + }); + }, }, }; </script> @@ -782,12 +916,11 @@ <style lang="scss" > .video-analyze-content { margin: 0; - padding: 6px 15px 15px 15px; height: 100%; text-align: left; .content-top { - margin-bottom: 15px; + height: 581px; // height: calc(60% + -16px); .grid-check { text-align: right; @@ -809,24 +942,81 @@ font-size: 17px; color: #cacaca; padding-left: 12px; - cursor: pointer; - &.activegongge { - color: #3d68e1; - } } } .video-area { display: flex; height: 100%; + + .info { + margin-right: 18px; + height: 73px; + border-bottom: 1px solid #2d52d7; + } + .info-list { - width: 180px; - min-width: 180px; - margin-right: 10px; - .v-name-block { - height: 484px; - overflow: auto; + width: 265px; + height: 582px; + min-width: 265px; + padding: 20px 0px 0 18px; + background-color: #000000; + + .info-item { + margin-bottom: 3px; } + + span { + color: #a4a4a6; + font-size: 12px; + } + + label { + color: #a1b1d5; + font-size: 12px; + } + + .info-video { + margin-top: 10px; + + .v-name-block { + height: 400px; + overflow-y: scroll; + &::-webkit-scrollbar-track { + background-color: #000000 !important; + } + + &::-webkit-scrollbar { + background-color: #000000 !important; + } + } + + p { + height: 30px; + line-height: 30px; + color: #fff; + font-size: 12px; + } + + i { + font-size: 14px; + color: #a4a4a6; + } + + span { + font-size: 12px; + color: #a4a4a6; + } + } + + .CarNumber { + color: #ffffff; + font-size: 14px; + font-weight: bold; + margin-right: 40px; + } + .video-name { + height: 28px; cursor: pointer; color: #777; margin-bottom: 10px; @@ -842,10 +1032,9 @@ width: 100%; display: flex; flex-wrap: wrap; - height: 455px; + height: 512px; .video-item { background: black; - border: 1px solid #fff; box-sizing: border-box; & > div { height: 100%; @@ -870,7 +1059,7 @@ } } .currentPlayer { - border: 2px solid aqua; + border: 1px dashed rgb(136, 136, 136); height: 100%; box-sizing: border-box; & > div { @@ -879,11 +1068,17 @@ } } .player-control { - background-color: #fff; - height: 75px; + background-color: #222328; + height: 70px; width: 100%; + padding-bottom: 10px; + .time { + text-align: right; + color: #a4a4a6; + font-size: 12px; + } .progress-bar { - margin: 0px 30px; + margin: 0 5px 0 5px; position: relative; .self-dot { position: absolute; @@ -895,17 +1090,17 @@ -webkit-transform: translateX(-50%); transform: translateX(-50%); } - .yellow{ + .yellow { background-color: yellow; - } - .purple{ - background-color: purple; - + .purple { + background-color: skyblue; } - .blue{ + .red { + background-color: red; + } + .blue { background-color: blue; - } .label-dot { position: absolute; @@ -918,11 +1113,12 @@ transform: translateX(-50%); } .el-slider { - margin: 15px 0; + margin-bottom: 5px; .el-slider__runway { margin: 0; height: 8px; + background-color: rgb(90, 90, 94); .el-slider__bar { height: 8px; } @@ -954,29 +1150,79 @@ } } .control-zone { - .time { - float: left; - margin-left: 23px; - } + display: flex; + justify-content: space-between; + align-items: center; + height: 30px; .play-btn { - width: 200px; + width: 300px; height: 27px; border-radius: 4px; - margin: 0 auto; .group { text-align: center; - .el-icon-d-arrow-left { + line-height: 27px; + i { cursor: pointer; - margin-right: 20px; - font-size: 27px; + color: white; } - .el-icon-d-arrow-right { - cursor: pointer; - font-size: 27px; - margin-left: 20px; + + .back { + font-size: 12px; + color: #a4a4a6; + margin-right: 10px; + } + + .forward { + font-size: 12px; + color: #a4a4a6; + margin-left: 10px; } } } + + .el-dropdown { + width: 104px; + height: 30px; + background: rgb(76, 77, 81); + border: 1px solid #1a377a; + border-radius: 5px; + margin-left: 20px; + + .el-dropdown-link { + padding: 0 10px; + display: block; + height: 100%; + color: #a1bdff; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 12px; + cursor: pointer; + i { + color: #a1bdff; + font-size: 12px; + } + } + } + + .spanList { + display: flex; + justify-content: space-between; + align-items: center; + } + } + .icon-rt { + margin-right: 20px; + color: #9299b0; + font-size: 20px; + cursor: pointer; + &.activegongge { + color: #3d68e1; + } + } + img { + width: 20px; + vertical-align: middle; } } } @@ -984,25 +1230,42 @@ } .content-bottom { display: flex; + height: 422px; .bot-left { flex: 1; - padding: 0px 15px 8px 15px; + padding: 0px 15px 8px 0px; background: #fff; border-radius: 3px; min-width: 400px; - height: 343px; .el-tabs__header { padding: 0; position: relative; margin: 0 0 10px; } .flex-box { - align-items: baseline; + align-items: center; label { - padding-right: 10px; + font-weight: bold; + color: #4f618a; + padding-right: 15px; } + .el-radio-group { + margin-top: 5px; + } + } + .fixed-height-box { + display: flex; + margin-top: 30px; + + label { + font-weight: bold; + color: #4f618a; + padding-right: 15px; + } + .mark-list { + flex: 1; .time { cursor: pointer; font-size: 15px; @@ -1020,15 +1283,73 @@ padding: 4px 0; color: #888; } + + .mark-item { + margin-bottom: 15px; + .icon { + color: #c7d0e5; + } + + .edit { + margin-right: 7px; + + &:hover { + color: #2d52d7; + } + } + + .remove { + margin-right: 14px; + &:hover { + color: #bf3a3a; + } + } + + .mark-time { + color: #192a51; + margin-right: 27px; + } + + .mark-desc { + display: inline-block; + box-sizing: content-box; + padding: 3px 6px; + text-align: center; + background: #bf3a3a; + color: #fff; + border-radius: 2px; + margin-right: 24px; + } + } } } - .fixed-height-box { - height: 200px; - overflow-y: auto; - } - .fixed-height-box2 { - height: 228px; - overflow-y: auto; + + .mark { + padding: 25px 40px; + * { + font-size: 12px; + } + + .icon { + color: #bf3a3a; + cursor: pointer; + } + + .el-radio__input.is-checked { + .el-radio__inner { + border-color: #bf3a3a; + background: #bf3a3a; + } + } + .el-radio__inner:hover { + border-color: #bf3a3a; + } + + label.is-checked { + .el-radio__label { + color: #bf3a3a; + } + } } } .bot-right { @@ -1041,30 +1362,116 @@ padding-right: 8px; } } + + .el-tabs__header { + height: 55px; + background: #f4f6f9; + .el-tabs__nav-wrap { + height: 100%; + .el-tabs__nav-scroll { + height: 100%; + + .el-tabs__nav { + height: 100%; + margin-left: 50px; + + .el-tabs__item { + line-height: 62px; + } + } + } + + &::after { + display: none; + } + } + } + + .yinhuan-wrap { + display: flex; + padding: 25px 40px; + .wrap-title { + margin-right: 10px; + min-width: 160px; + line-height: 24px; + font-size: 16px; + color: #4f618a; + font-weight: 700; + } + .list { + width: 100%; + height: 300px; + overflow: auto; + } + .list-item { + display: flex; + align-items: center; + height: 23px; + width: 280px; + cursor: pointer; + color: #192a51; + font-size: 12px; + margin-bottom: 18px; + + span { + color: #192a51; + } + + .list-warn { + display: block; + width: 57px; + height: 20px; + background: #bf3a3a; + border-radius: 2px; + color: #fff; + text-align: center; + line-height: 20px; + } + } + } } .label-dialog { .el-dialog { - width: 700px !important; - height: 558px !important; + width: 736px !important; + height: 502px !important; + overflow: hidden; .el-dialog__header { height: 20px; + .el-dialog__headerbtn .el-dialog__close::before { + color: #8d96a4; + } + } + .el-dialog__body { + background-color: #fff !important; } p.label { line-height: 36px; + font-weight: bold; + color: #2d52d7; + font-size: 14px; + margin-bottom: 30px; } .label-check { - padding: 20px; - min-height: 400px; + padding: 10px 40px; + height: 350px; margin-bottom: 20px; .el-checkbox-group { display: flex; flex-wrap: wrap; > label { - width: 50%; + width: 25%; text-align: left; margin: 0; - margin-bottom: 4px; + margin-bottom: 14px; + + .el-checkbox__label { + font-size: 12px; + } + + .el-checkbox__inner { + border-radius: 9px; + } } } } @@ -1072,6 +1479,31 @@ display: flex; justify-content: center; padding: 20px; + .el-button:first-child { + margin-right: 30px; + } + .el-button:last-child span { + color: #fff; + } + .el-button { + padding: 9px 32px; + } + } + .el-checkbox.is-checked { + .el-checkbox__label { + color: #bf3a3a; + } + + .el-checkbox__inner { + background-color: #bf3a3a; + border-color: #bf3a3a; + } + } + .el-checkbox .el-checkbox__inner:hover { + border-color: #bf3a3a; + } + .el-checkbox__input.is-focus .el-checkbox__inner { + border-color: #bf3a3a; } } } -- Gitblit v1.8.0