zhangzengfei
2022-02-22 9466f8f5d714c8f72dbaff6ac3898b4d43c7c715
src/pages/maintain/index/App.vue
@@ -1,97 +1,64 @@
<template>
  <div class="container">
    <div class="container-left">
      <div
        class="left-card"
        v-for="(item, index) in menuArr"
        :key="index"
        @click="openMenu(item, index)"
      >
      <div class="left-card" v-for="(item, index) in menuArr" :key="index" @click="openMenu(item, index)">
        <span class="icon iconfont">&#xe646;</span>
        <span class="card-text">{{ item.name }}</span>
      </div>
    </div>
    <systemClean
      v-if="activePage == '系统清理'"
      style="width: 100%"
    ></systemClean>
    <updateSettings
      v-if="activePage == '更新设置'"
      style="width: 100%"
    ></updateSettings>
    <back-up
      v-if="activePage == '备份还原'"
      style="width: 100%"
    ></back-up>
    <restartSettings
      v-if="activePage == '重启设置'"
      style="width: 100%"
    ></restartSettings>
    <systemClean v-if="activePage == '系统清理'" style="width: 100%"></systemClean>
    <updateSettings v-if="activePage == '更新设置'" style="width: 100%"></updateSettings>
    <back-up v-if="activePage == '备份还原'" style="width: 100%"></back-up>
    <restartSettings v-if="activePage == '重启设置'" style="width: 100%"></restartSettings>
  </div>
</template>
<script>
import {
  getClockInfo,
  saveClockInfo,
  testNTPserver,
} from "@/api/system";
import switchBar from "../components/switchBar";
import ipInput from "@/components/subComponents/IPInput";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
import BackUp from "../views/backUp";
import restartSettings from "../views/restartSettings";
import systemClean from "../views/systemClean"
import updateSettings from "../views/updateSettings"
import BackUp from "../views/backUp"
import restartSettings from "../views/restartSettings"
export default {
  name: "settings",
  components: {
    switchBar,
    ipInput,
    systemClean,
    updateSettings,
    BackUp,
    restartSettings,
    restartSettings
  },
  data() {
    return {
      browserTimer: null,
      menuArr: [
        { name: "更新设置" },
        { name: "备份还原" },
        { name: "系统清理" },
        { name: "重启设置" },
      ],
      menuArr: [{ name: "更新设置" }, { name: "备份还原" }, { name: "系统清理" }, { name: "重启设置" }],
      jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      activePage: "更新设置",
      activeIndex: 0,
      clockTimer: null,
    };
      clockTimer: null
    }
  },
  beforeDestroy() {
    clearTimeout(this.clockTimer);
    clearInterval(this.browserTimer);
    clearTimeout(this.clockTimer)
    clearInterval(this.browserTimer)
  },
  mounted() {
    const s = document.getElementsByClassName("left-card")[0];
    s.style.backgroundColor = "rgba(61, 104, 225, 1)";
    s.style.color = "#fff";
    const s = document.getElementsByClassName("left-card")[0]
    s.style.backgroundColor = "rgba(61, 104, 225, 1)"
    s.style.color = "#fff"
  },
  methods: {
    openMenu(item, i) {
      const old = document.getElementsByClassName("left-card")[
        this.activeIndex
      ];
      old.style.backgroundColor = "initial";
      old.style.color = "rgba(81, 81, 81, 1)";
      const old = document.getElementsByClassName("left-card")[this.activeIndex]
      old.style.backgroundColor = "initial"
      old.style.color = "rgba(81, 81, 81, 1)"
      this.activePage = item.name;
      this.activeIndex = i;
      const s = document.getElementsByClassName("left-card")[i];
      s.style.backgroundColor = "rgba(61, 104, 225, 1)";
      s.style.color = "#fff";
    },
  },
};
      this.activePage = item.name
      this.activeIndex = i
      const s = document.getElementsByClassName("left-card")[i]
      s.style.backgroundColor = "rgba(61, 104, 225, 1)"
      s.style.color = "#fff"
    }
  }
}
</script>
<style lang="scss">
.container {
@@ -140,7 +107,6 @@
    border-right: 5px solid rgba(248, 248, 248, 1);
    box-sizing: border-box;
    .account-left {
      .add-account {
        color: rgba(61, 104, 225, 1);
        margin-top: 50px;
@@ -171,7 +137,6 @@
          font-size: 14px;
        }
      }
    }
    .datetime-left {
      .time-card {
@@ -376,11 +341,8 @@
      }
    }
    .datetime-right {
      .el-form-item.is-required:not(.is-no-asterisk)
        > .el-form-item__label:before,
      .el-form-item.is-required:not(.is-no-asterisk)
        .el-form-item__label-wrap
        > .el-form-item__label:before {
      .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
      .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
        display: none;
      }
      .el-form-item {
@@ -624,5 +586,3 @@
  }
}
</style>