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