车辆库左端列表

heyujie

2021-12-13 32065e3edfba329fd68d082bcca6f734152d86db

 src/pages/vindicate/index/App.vue

@@ -1,6 +1,5 @@
<template>
  <div class="container vindicate" v-if="!showWelcome">

    <div class="container-left">
      <div
        class="left-card"
@@ -14,14 +13,35 @@
        <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>
    <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>
    <restartSettings
      v-if="activePage == 2"
      style="width: 100%"
      ref="view_2"
    ></restartSettings>
    <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
  </div>

    <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
  <div
    class="welcome-page"
    v-else
    ref="curPage"
    @click="showRecomand = false"
    @mouseup="mouseDownIndex = ''"
  >
    <div
      class="search-box"
      :class="showRecomand ? 'border-change' : ''"
@@ -75,9 +95,7 @@
</template>

<script>
import {
  freedisk
} from "@/api/system";
import { freedisk } from "@/api/system";
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
@@ -90,15 +108,36 @@
    systemClean,
    updateSettings,
 //   BackUp,
    restartSettings,sysInfo
    restartSettings,
    sysInfo,
  },
  data() {
    return {
      menuArr: [
        { 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"},
        {
          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] },
@@ -112,15 +151,15 @@
      free: 0,
      full: 0,
      showWelcome:true,
      searchText:'',
      searchText: "",
      showRecomand:false,
      mouseDownIndex:''
      mouseDownIndex: "",
    };
  },
  created() {
    let color = localStorage.getItem('--colorCard')
    let color = localStorage.getItem("--colorCard");
    if(color) {
      document.documentElement.style.setProperty('--colorCard',`${color}`)
      document.documentElement.style.setProperty("--colorCard", `${color}`);
    } 
  },
  mounted() {
@@ -131,15 +170,18 @@
      //   this.$refs.netSettings.openRight(2);
      // });
    }
     this.getLeftPer()
    this.getLeftPer();
     window.addEventListener("message",(e)=>{
     if(e.data.msg === 'changeColor') {
     document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
      if (e.data.msg === "changeColor") {
        document.documentElement.style.setProperty(
          "--colorCard",
          `${e.data.color}`
        );
       } 
      if (e.data.msg === '返回系统维护') {
    this.showWelcome = true
      if (e.data.msg === "返回系统维护") {
        this.showWelcome = true;
      }     
     })
    });
  },
  methods: {
    openMenu(item, i) {
@@ -147,9 +189,9 @@
    },
    getLeftPer(){
      freedisk().then((res) => {
        this.free = res.data.free
        this.full = res.data.all
      })
        this.free = res.data.free;
        this.full = res.data.all;
      });
    },
    pickQuick(addr) {
      if (addr.length == 1) {
@@ -182,7 +224,7 @@
        });
      }
    },
  }
  },
};
</script>
<style lang="scss">
@@ -238,28 +280,30 @@
        width: 100%;
        font-weight: bold;

        &::-webkit-input-placeholder { /* WebKit browsers */
        &::-webkit-input-placeholder {
          /* WebKit browsers */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        &:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
        &::-moz-placeholder {
          /* Mozilla Firefox 19+ */
        color: #828282;
        font-weight: normal;
        font-size: 14px;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10+ */
        &:-ms-input-placeholder {
          /* Internet Explorer 10+ */
        color: #828282;
        font-weight: normal;
        font-size: 14px;

      }

      }
      .el-input__suffix {
        display: flex;
@@ -329,14 +373,14 @@
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 2px solid #F2F2F7;
      border: 2px solid #f2f2f7;

      &:hover {
        background: #F2F2F7;
        background: #f2f2f7;
      }

      &-active {
        border: 2px solid #4E94FF;
        border: 2px solid #4e94ff;
      }

      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
@@ -441,15 +485,13 @@
    }
   
    .left-card:hover {
      background-color: #F2F2F7;
      
      background-color: #f2f2f7;
    }
  }

}

.vindicate {
  border-top:2px solid #E1E0E6 ;
  border-top: 2px solid #e1e0e6;
}
</style>