拓扑图

ZZJ

2021-10-13 878ce80ef3ca88a2c108fbc713cd6ea461c44de1

 src/pages/vindicate/index/App.vue

@@ -1,5 +1,5 @@
<template>
  <div class="container">
  <div class="container vindicate" v-if="!showWelcome">
    <div class="container-left">
      <div
        class="left-card"
@@ -8,15 +8,66 @@
        :class="activePage == i ? 'left-card-active' : ''"
        @click="openMenu(item, i)"
      >
        <span class="icon iconfont">{{item.icon}}</span>
        <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"></systemClean>
    <updateSettings v-if="activePage == 0" style="width: 100%"></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%"></restartSettings>
    <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
    <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">
    <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="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="no-res-bar" v-if="searchArrForShow.length == 0">
          没有找到与 {{ searchText }} 相关的结果
        </div>
      </div>
      <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"
      >
        <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>
    </div>
  </div>
</template>

@@ -27,7 +78,7 @@
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
import BackUp from "../views/backUp";
// import BackUp from "../views/backUp";
import restartSettings from "../views/restartSettings";
import sysInfo from "../views/sysInfo";
export default {
@@ -35,22 +86,38 @@
  components: {
    systemClean,
    updateSettings,
    BackUp,
 //   BackUp,
    restartSettings,sysInfo
  },
  data() {
    return {
      menuArr: [
        { name: "更新设置" ,icon:"\ue6fa" },
        // { name: "备份还原",icon:""  },
        { name: "系统清理" ,icon:"\uea3b" },
        { name: "重启设置" ,icon:"\ue709" },
        { name: "系统信息" ,icon:"\ue709" },
        { 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
    };
  },
  created() {
    let color = localStorage.getItem('--colorCard')
    if(color) {
      document.documentElement.style.setProperty('--colorCard',`${color}`)
    } 
  },
  mounted() {
    const menu = getUrlKey("menu");
@@ -61,6 +128,13 @@
      // });
    }
     this.getLeftPer()
     console.log(99999);
     window.addEventListener("message",(e)=>{
     console.log(999);
     if(e.data.msg === 'changeColor') {
     document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
       }       
     })
  },
  methods: {
    openMenu(item, i) {
@@ -72,12 +146,223 @@
        this.full = res.data.all
      })
    },
    pickQuick(addr) {
      if (addr.length == 1) {
        this.openWelcome(addr[0]);
      } else {
        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]);
        });
      }
    },
    openWelcome(i) {
      this.showWelcome = false;
      this.openMenu(1,i);
    },
  },
  computed:{
     searchArrForShow() {
      if (this.searchText == "") {
        return this.searchArr;
      } else {
        return this.searchArr.filter((item) => {
          return item.name.indexOf(this.searchText.toUpperCase()) > -1;
        });
      }
    },
  }
};
</script>
<style lang="scss">
.welcome-page {
  width: 100%;
  height: 100%;
  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 {
    .nav-child {
      box-sizing: border-box;
      background-color: rgba(251, 251, 255, 0.1);
      backdrop-filter: blur(4px);
      float: left;
      width: 442px;
      height: 190px;
      margin: 0 15px;
      margin-bottom: 30px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 2px solid #F2F2F7;

      &:hover {
        border: 2px solid #4E94FF;
        background: #F2F2F7;
      }

      // 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;
@@ -85,43 +370,69 @@
  box-sizing: border-box;
  .container-left {
    height: 100%;
      width: 240px;

    width: 244px;
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 10px;
    border-right: 5px solid rgba(248, 248, 248, 1);
    padding: 13px 10px 0 10px;
    box-sizing: border-box;
    background: #fff;
    .left-card {
      height: 50px;
      position: relative;
      width: 224px;
      height: 56px;
      cursor: pointer;
      border-radius: 10px;
      margin-bottom: 10px;
      display: flex;    background-color: #f8f8f8;

      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 {
        margin-left: 15px;
        margin-right: 10px;
        font-size: 18px;
        width: 40px;
        height: 40px;
        margin: 0 20px 0 20px;
        background: #333333;
        border-radius: 8px;
      }
      .card-text {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 700;
        font-size: 16px;
        line-height: 22.4px;
      }
    }
    .left-card-active {
      color: #fff;
      background-color: rgba(61, 104, 225, 1);
      background-color: var(--colorCard) !important;
      .icon_black {
      visibility: hidden;
      }
      .icon_white{
        visibility: visible;
      }
      .iconfont {
        color: #333333;
        background-color: #fff;
      }
    }
   
    .left-card:hover {
      background-color: rgba(61, 104, 225, 1);
      color: #fff;
      background-color: #F2F2F7;
      
    }
  }

}

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