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/vindicate/index/App.vue | 942 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 480 insertions(+), 462 deletions(-) diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue index 5884d28..df6d8ed 100644 --- a/src/pages/vindicate/index/App.vue +++ b/src/pages/vindicate/index/App.vue @@ -1,508 +1,526 @@ <template> - <el-tabs - id="systemMaintenance" - v-model="activeName" - v-loading="loading" - :element-loading-text="loadingText" + <div class="container vindicate" v-if="!showWelcome"> + <div class="container-left"> + <div + class="left-card" + v-for="(item, i) in menuArr" + :key="i" + :class="activePage == i ? 'left-card-active' : ''" + @click="openMenu(item, i)" + > + <img :src="item.img_black" class="icon iconfont icon_black" /> + <img :src="item.img_white" class="icon iconfont icon_white" /> + <span class="card-text">{{ item.name }}</span> + </div> + </div> + <systemClean + v-if="activePage == 1" + style="width: 100%" + :free="free" + :full="full" + @refreshPercent="getLeftPer" + ref="view_1" + ></systemClean> + <updateSettings + v-if="activePage == 0" + style="width: 100%" + ref="view_0" + ></updateSettings> + <back-up v-if="activePage == 3" style="width: 100%"></back-up> + <restartSettings + v-if="activePage == 2" + style="width: 100%" + ref="view_2" + ></restartSettings> + <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo> + </div> + + <div + class="welcome-page" + v-else + ref="curPage" + @click="showRecomand = false" + @mouseup="mouseDownIndex = ''" > - <el-tab-pane label="璁惧缁存姢" name="first"> - <div class="s-system-maintenance"> - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">閲嶅惎</div> - </div> - <el-divider></el-divider> + <div + class="search-box" + :class="showRecomand ? 'border-change' : ''" + @click.stop + > + <!-- @blur="showRecomand = false" --> + <el-input + class="search-input" + placeholder="鏌ユ壘璁剧疆" + size="mini" + @focus="showRecomand = true" + clearable + @input="filterRecomand" + :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'" + v-model="searchText" + > + </el-input> - <div class="box-card-content"> - <el-button type="primary" size="small" style="width:80px" @click="reboot">閲嶅惎</el-button> - - <b class="card-text">閲嶅惎鑺傜偣</b> - - <el-row style="margin-top:20px"> - <el-col> - <vue-cron :expression="rebootCron" @update="setRebootCron" /> - </el-col> - </el-row> - </div> + <div class="search-res" v-if="showRecomand"> + <div + class="res-bar" + v-for="(item, index) in searchArrForShow" + :key="index" + @click="pickQuick(item.addr)" + > + {{ item.name }} </div> - <!-- - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鎭㈠榛樿鍊�</div> - </div> - <el-divider></el-divider> - - <div class="box-card-content"> - <el-row> - <el-col :span="1"> - <el-button type="primary" size="small">绠�鍗曟仮澶�</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">绠�鍗曟仮澶嶈澶囧弬鏁�</b> - </el-col> - </el-row> - <el-row style="margin-top:20px"> - <el-col :span="1"> - <el-button type="primary" size="small">瀹屽叏鎭㈠</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">瀹屽叏鎭㈠璁惧鍙傛暟鍒板嚭鍘傝缃�</b> - </el-col> - </el-row> - </div> - </div> - - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鍙傛暟瀵煎叆瀵煎嚭</div> - </div> - <el-divider></el-divider> - - <div class="box-card-content"> - <el-row :gutter="4"> - <el-col :span="1"> - <el-button type="info" size="small" style="width:80px">瀵煎叆</el-button> - </el-col> - <el-col :span="3" style="padding-left:30px"> - <el-input placeholder="涓婁紶鍙傛暟鏂囦欢" size="small" :readonly="true"> - <el-upload slot="suffix" action="https://jsonplaceholder.typicode.com/posts/"> - <el-button - type="text" - icon="el-icon-upload2" - size="small" - style="font-size:18px; color:#0088ff" - ></el-button> - </el-upload> - </el-input> - </el-col> - </el-row> - <el-row style="margin-top:20px"> - <el-col :span="1"> - <el-button type="primary" size="small">璁惧鍙傛暟</el-button> - </el-col> - <el-col :span="23"> - <b class="card-text">鍙傛暟瀵煎嚭</b> - </el-col> - </el-row> - </div> - </div> - --> - <div class="box-card"> - <div class="ui-top-view"> - <div class="ui-top-title">鍗囩骇</div> - </div> - </div> - <el-divider></el-divider> - <div class="box-card-content"> - <el-row :gutter="4"> - <el-col :span="6"> - <file-uploader - single - uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢" - url="/data/api-v/sysset/patchUpdate" - @complete="onFileUpload" - @file-added="onFileAdded" - /> - </el-col> - <el-col :span="2"> - <el-button - type="primary" - size="small" - style="width:80px" - @click="upgrade" - :disabled="!fileAdded" - :loading="upgrading" - >鍗囩骇</el-button> - </el-col> - <el-col :span="16" class="upload-msg"> - <span v-html="patchUpdateStatus"></span> - </el-col> - </el-row> + <div class="no-res-bar" v-if="searchArrForShow.length == 0"> + 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋� </div> </div> - </el-tab-pane> - <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="second"> - <div class="box"> - <p class="title"> - <label>鏁版嵁娓呯悊</label> - </p> - <div class="range"> - <div class="left"> - <p>閫夋嫨鏁版嵁鑼冨洿锛�</p> - </div> - <div class="middle"> - <el-date-picker - v-model="dataRange" - type="daterange" - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - style="height:38px" - :picker-options="pickerOptions" - ></el-date-picker> - </div> - <div class="right"> - <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button> - </div> - </div> - <div class="tip"> - <i class="iconfont icontishi-zhuyi"></i> - <p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p> + <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div> + </div> + <div class="nav-items"> + <div + class="nav-child" + @click="openWelcome(i)" + v-for="(item, i) in menuArr" + :key="i" + @mousedown="mouseDownIndex = i" + :class="mouseDownIndex === i ? 'nav-child-active' : ''" + > + <div class="child-info"> + <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> --> + <img :src="item.img_welcome" alt="" /> + <span class="welcome-title">{{ item.name }}</span> </div> </div> - </el-tab-pane> - </el-tabs> + </div> + </div> </template> <script> -import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system" -import VueCron from "@/components/subComponents/VueCron" -import FileUploader from "@/components/subComponents/FileUpload/index" - +import { freedisk } from "@/api/system"; +import { getUrlKey } from "@/api/utils"; +import systemClean from "../views/systemClean"; +import updateSettings from "../views/updateSettings"; +import BackUp from "../views/backUp"; +import restartSettings from "../views/restartSettings"; +import sysInfo from "../views/sysInfo"; export default { + name: "settings", components: { - VueCron, - FileUploader + systemClean, + updateSettings, + BackUp, + restartSettings, + sysInfo, }, data() { return { - timer: null, - buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], - rebootCron: "", - activeName: "first", - restartValue: "涓嶉噸鍚�", - restartTimeValue: new Date(2019, 9, 10, 18, 40), - loading: false, - loadingText: '', - probeSum: 0, - patchUpdateStatus: "", - dataRange: [ - this.$moment().format("YYYY-MM-DD HH:mm:ss"), - this.$moment().format("YYYY-MM-DD HH:mm:ss") - ], - fileUploadUrl: fileUpload, - patchFile: {}, - pickerOptions: { - disabledDate(time) { - var day = new Date() - day.setTime(day.getTime() - 24 * 60 * 60 * 1000) - return time.getTime() > day; + menuArr: [ + { + name: "鏇存柊璁剧疆", + img_black: "/images/vindicate/鏇存柊璁剧疆-榛�.png", + img_white: "/images/vindicate/鏇存柊璁剧疆-鐧�.png", + img_welcome: "/images/vindicate/鏇存柊璁剧疆.png", }, - }, - upgrading: false, - fileAdded: false + { + name: "绯荤粺娓呯悊", + img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png", + img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png", + img_welcome: "/images/vindicate/绯荤粺娓呯悊.png", + }, + + { + name: "閲嶅惎璁剧疆", + img_black: "/images/vindicate/閲嶅惎璁剧疆-榛�.png", + img_white: "/images/vindicate/閲嶅惎璁剧疆-鐧�.png", + img_welcome: "/images/vindicate/閲嶅惎璁剧疆.png", + }, + { + name: "澶囦唤杩樺師", + img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png", + img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png", + img_welcome: "/images/vindicate/绯荤粺娓呯悊.png", + }, + { + name: "绯荤粺淇℃伅", + img_black: "/images/vindicate/绯荤粺淇℃伅-榛�.png", + img_white: "/images/vindicate/绯荤粺淇℃伅-鐧�.png", + img_welcome: "/images/vindicate/绯荤粺淇℃伅.png", + }, + ], + searchArr: [ + { name: "绯荤粺璁剧疆", addr: [0] }, + { name: "绯荤粺鏇存柊", addr: [0, 0] }, + { name: "鏇存柊璁剧疆", addr: [0, 1] }, + { name: "绯荤粺娓呯悊", addr: [1] }, + { name: "閲嶅惎璁剧疆", addr: [2] }, + { name: "绯荤粺淇℃伅", addr: [3] }, + ], + activePage: 0, + free: 0, + full: 0, + showWelcome: true, + searchText: "", + showRecomand: false, + mouseDownIndex: "", }; }, - mounted() { - this.getRebootCron() - if (!this.isShow('videoSystem:sysManage:sysfix')) { - console.log("榛樿鏄剧ず鏁版嵁搴撶淮鎶�") - this.activeName = "second" + created() { + let color = localStorage.getItem("--colorCard"); + if (color) { + document.documentElement.style.setProperty("--colorCard", `${color}`); } }, - computed: { - isAdmin() { - if ( - sessionStorage.getItem('userInfo') && - sessionStorage.getItem('userInfo') !== '' - ) { - let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username - return ( - loginName === 'superadmin' || loginName === 'basic' - ) - } - return false; + mounted() { + const menu = getUrlKey("menu"); + if (menu) { + this.activePage = this.menuArr.findIndex((x) => x.name == menu); + // this.$nextTick(() => { + // this.$refs.netSettings.openRight(2); + // }); } + this.getLeftPer(); + window.addEventListener("message", (e) => { + if (e.data.msg === "changeColor") { + document.documentElement.style.setProperty( + "--colorCard", + `${e.data.color}` + ); + } + if (e.data.msg === "杩斿洖绯荤粺缁存姢") { + this.showWelcome = true; + } + }); }, methods: { - isShow(authority) { - if (this.isAdmin) { - return true - } else if ( - this.buttonAuthority.indexOf(',' + authority + ',') > -1 - ) { - return true + openMenu(item, i) { + this.activePage = i; + }, + getLeftPer() { + freedisk().then((res) => { + this.free = res.data.free; + this.full = res.data.all; + }); + }, + pickQuick(addr) { + if (addr.length == 1) { + this.openWelcome(addr[0]); } else { - return false + this.openWelcome(addr[0]); + this.$nextTick(() => { + if (addr[0] == 1) { + // addr[1] == 0 + // ? this.changeSwitch("isNtp") + // : this.changeSwitch("isManual"); + return; + } + this.$refs[`view_${addr[0]}`].openRight(addr[1]); + }); } }, - format(array) { - return [ - this.$moment(array[0]).format("YYYY-MM-DD"), - this.$moment(array[1]).format("YYYY-MM-DD") - ]; + openWelcome(i) { + this.showWelcome = false; + this.openMenu(1, i); }, - getRebootCron() { - getRebootTask().then(rsp => { - this.rebootCron = rsp.data - }) - }, - setRebootCron(value) { - this.rebootCron = value - setRebootTask({ task: value }).then(rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }) - } - }).catch(err => { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }) - }) - }, - reboot() { - this.$confirm('纭畾瑕侀噸鍚鑺傜偣鍚�?', { - center: true, - cancelButtonClass: 'comfirm-class-cancle', - confirmButtonClass: 'comfirm-class-sure' - }).then(() => { - this.loading = true; - this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..." - rebootServer().then(rsp => { - this.probeServer(this.reLogin) - }).catch(err => { - if (err.status == 400) { - this.loading = false; - this.$notify({ - type: "error", - message: "閲嶅惎璁$畻鑺傜偣澶辫触" - }) - } else { - this.probeServer(this.reLogin) - } - }) - }) - }, - deleteData() { - var timeRange = this.format(this.dataRange); - var showStartTime = timeRange[0] - var showEndTime = timeRange[1] - console.log("鏃堕棿锛�", showStartTime, showEndTime) - this.$confirm("鎻愮ず锛�" + showStartTime + " 鑷� " + showEndTime + " 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵", { - center: true, - cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure" - }).then(() => { - this.loading = true - this.loadingText = "姝e湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒" - var param = { - startTime: showStartTime, - endTime: showEndTime - } - deleteDate(param).then(resp => { - if (resp.success) { - this.$message({ - type: "success", - message: "鍒犻櫎鏁版嵁鎴愬姛" - }) - this.loading = false - } - }).catch(err => { - this.$message({ - type: "error", - message: "鍒犻櫎鏁版嵁澶辫触锛�" - }) - this.loading = false - }) - - }).catch(() => { - console.log("鍙栨秷浜嗭紒") - }) - }, - reLogin() { - this.$router.push("/") - }, - probeServer(callback) { - this.probeSum++; - let _this = this - if (this.probeSum > 60) { - this.$confirm('杩炴帴鏈嶅姟鍣ㄥけ璐�, 璇峰埛鏂伴〉闈㈡垨鑱旂郴绠$悊鍛�', '澶辫触', { - type: 'error', - cancelButtonClass: 'comfirm-class-cancle', - confirmButtonClass: 'comfirm-class-sure' - }).then(() => { - // _this.$router.push("/") - callback() - }) - return + }, + computed: { + searchArrForShow() { + if (this.searchText == "") { + return this.searchArr; + } else { + return this.searchArr.filter((item) => { + return item.name.indexOf(this.searchText.toUpperCase()) > -1; + }); } - - this.timer = setTimeout(() => { - getDevInfo().then(() => { - // _this.$router.push("/") - callback() - }).catch(err => { - _this.probeServer(callback) - }) - }, 10000) }, - onFileUpload(file) { - this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪崌绾�</span>` - this.patchFile = { ...file } - this.fileAdded = true + }, + watch: { + showWelcome(newVal) { + if (newVal) { + // 闅愯棌杩斿洖鎸夋寜閽� + window.parent.postMessage( + { + msg: "hiddenBack", + }, + "*" + ); + } else { + //鏄剧ず杩斿洖鎸夐挳 + window.parent.postMessage( + { + msg: "showBack", + }, + "*" + ); + } }, - onFileAdded() { - this.patchUpdateStatus = "" - }, - upgrade() { - this.upgrading = true - this.patchUpdateStatus = `<span style="color:red">姝e湪鍗囩骇...</span>` - doUpgrade(this.patchFile).then(rsp => { - this.upgrading = false - - if (rsp && rsp.success) { - clearTimeout(this.timer) - this.doneUpgrade() - } - }).catch(err => { - if (err.code) { - this.upgrading = false - this.patchUpdateStatus = `<span style="color:red">${err.data}</span>` - clearTimeout(this.timer) - } else { - this.probeServer(this.doneUpgrade) - } - }) - }, - doneUpgrade() { - this.upgrading = false - this.patchUpdateStatus = `<span style="color:green">鍗囩骇鎴愬姛</span>` - let _this = this - this.$confirm('鍗囩骇鎴愬姛, 璇烽噸鏂扮櫥褰曠郴缁�', '鎴愬姛', { - type: 'success', - cancelButtonClass: 'comfirm-class-cancle', - confirmButtonClass: 'comfirm-class-sure' - }).then(() => { - _this.reLogin() - }) - } - } + }, }; </script> <style lang="scss"> -.s-system-maintenance { +.welcome-page { width: 100%; height: 100%; - .box-card { - text-align: left; - height: auto; - margin: 10px 0px; - .box-card-content { - padding-bottom: 40px; + display: -ms-flexbox; + padding: 145px 32px 50px 32px; + box-sizing: border-box; + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(4px); + .border-change { + border-radius: 20px !important; + } + .search-box { + width: 332px; + z-index: 999; + // margin: 55px auto; + position: fixed; + left: calc(50% - 166px); + top: 50px; + opacity: 0.8; + + border: 2px solid #4e94ff; + box-sizing: border-box; + backdrop-filter: blur(4px); + border-radius: 40px; + .search-input { + font-size: 14px; + .el-input--mini .el-input__inner { + height: 36px; + line-height: 36px; + } + .el-input--suffix .el-input__inner { + padding-right: 40px; + } + .el-input__inner { + background-color: #fff; + background-image: none; + border-radius: 40px; + border: none; + box-sizing: border-box; + color: #606266; + display: inline-block; + font-size: 14px; + height: 36px; + line-height: 36px; + outline: 0; + padding: 0 20px; + -webkit-transition: border-color 0.2s + cubic-bezier(0.645, 0.045, 0.355, 1); + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + font-weight: bold; + + &::-webkit-input-placeholder { + /* WebKit browsers */ + color: #828282; + font-weight: normal; + font-size: 14px; + } + &:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: #828282; + font-weight: normal; + font-size: 14px; + } + &::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: #828282; + font-weight: normal; + font-size: 14px; + } + &:-ms-input-placeholder { + /* Internet Explorer 10+ */ + color: #828282; + font-weight: normal; + font-size: 14px; + } + } + .el-input__suffix { + display: flex; + align-items: center; + padding-right: 10px; + .el-input__suffix-inner { + border-color: none; + .el-icon-circle-close:before { + content: "\e79d" !important; + font-size: 17px; + } + .el-icon-search { + color: #2f2d3d; + font-weight: bold; + font-size: 17px; + } + } + } + } + .search-res { + max-height: 240px; + overflow: auto; + background-color: rgba(255, 255, 255, 0.5); + .res-bar { + height: 40px; + line-height: 40px; + text-align: left; + box-sizing: border-box; + padding: 0 20px; + color: #333333; + font-size: 14px; + cursor: pointer; + } + .no-res-bar { + height: 40px; + line-height: 40px; + text-align: left; + box-sizing: border-box; + padding: 0 20px; + color: #333333; + font-size: 14px; + } + .res-bar:hover { + background: #f5f5f6 10%; + font-weight: bold; + color: #4e94ff; + } + // .res-bar:last-child { + // border-radius: 0 0 20px 20px; + // } + } + } + .nav-items { + max-width: 960px; + margin: 0 auto; + .nav-child { + box-sizing: border-box; + background-color: rgba(251, 251, 255, 0.1); + backdrop-filter: blur(4px); + float: left; + width: 288px; + height: 190px; + margin: 0 10px; + margin-bottom: 20px; + border-radius: 15px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border: 2px solid #f2f2f7; + + &:hover { + background: #f2f2f7; + } + + &-active { + border: 2px solid #4e94ff; + } + + // box-shadow: 2px 2px 4px rgb(226, 226, 226); + .child-info { + display: flex; + flex-direction: column; + // justify-content: space-around; + height: 100%; + .welcome-icon { + font-size: 72px; + } + img { + width: 64px; + margin: 0 auto; + margin-top: 61px; + height: 50px; + } + .welcome-title { + font-size: 16px; + font-weight: bold; + margin-top: 24px; + color: #333333; + } + } + } + // .nav-child:hover { + // box-shadow: 4px 4px 12px rgb(218, 218, 218); + // transform: translate3d(0, -1px, 0); + // transition: all 0.3s; + // } + } +} + +.container { + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + flex: 1; + flex-basis: auto; + box-sizing: border-box; + position: relative; + + .back { + position: absolute; + top: 0; + left: 0; + } + + .container-left { + height: 100%; + width: 244px; + overflow: auto; + box-sizing: border-box; + flex-shrink: 0; + padding: 13px 10px 0 10px; + box-sizing: border-box; + background: #fff; + .left-card { + position: relative; + width: 224px; + height: 56px; + cursor: pointer; + border-radius: 8px; + margin-bottom: 4px; + display: flex; + background-color: #fff; + align-items: center; + .icon_white { + position: absolute; + top: 8px; + left: 0; + visibility: hidden; + } + .iconfont { + width: 40px; + height: 40px; + margin: 0 20px 0 20px; + background: #333333; + border-radius: 8px; + } .card-text { - padding: 0 30px; - line-height: 32px; + font-family: PingFang SC; + font-weight: 700; + font-size: 16px; + line-height: 22.4px; } } - } + .left-card-active { + color: #fff; + background-color: var(--colorCard) !important; + .icon_black { + visibility: hidden; + } + .icon_white { + visibility: visible; + } + .iconfont { + color: #333333; + background-color: #fff; + } + } - .upload-icon { - font-size: 18px; - color: #0088ff; - } - .upload-msg { - padding-left: 10px; - text-align: left; - span { - line-height: 32px; - font-size: 13px; + .left-card:hover { + background-color: #f2f2f7; } } } -.box { - width: 50%; - min-width: 700px; - height: 270px; - border: 1px solid #eee; - .title { - font-size: 20px; - font-weight: bold; - text-align: left; - padding: 20px; - border-bottom: 1px solid #eee; - } - .range { - width: 100%; - padding-top: 30px; - height: 38px; - .left { - width: 120px; - float: left; - text-align: right; - font-size: 14px; - p { - height: 38px; - line-height: 38px; - margin: 0; - } - } - .middle { - width: 50%; - min-width: 400px; - height: 38px; - float: left; - } - .right { - width: 20%; - height: 38px; - float: left; - } - } - .tip { - width: 100%; - padding: 30px 0px 0px 30px; - height: 34px; - .zhuyi { - font-size: 14px; - height: 34px; - line-height: 34px; - margin-left: 20px; - float: left; - } - i { - font-size: 32px; - color: #e99038; - float: left; - } - } -} -#systemMaintenance { - .el-tabs__header { - border: 0px solid #dcdfe6; - .el-tabs__item { - padding: 5px 50px; - height: 50px; - font-family: PingFangSC-Regular; - font-size: 14px; - color: #222222; - text-align: center; - border: 0px solid transparent; - } - .el-tabs__item:nth-child(2) { - padding-left: 50px; - } - .el-tabs__item:last-child { - padding-right: 50px; - } - .el-tabs__item.is-active { - color: #ff7733; - font-weight: bold; - // border-right-color: #fff; - // border-left-color: #fff; - } - .el-tabs__item:not(.is-disabled):hover { - color: #ff7733; - } - } - .el-tabs__active-bar { - background-color: #ff7733; - } - .el-tabs__content { - padding-left: 15px !important; - } +.vindicate { + border-top: 2px solid #e1e0e6; } </style> + + -- Gitblit v1.8.0