| | |
| | | <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"></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 { |
| | |
| | | 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; |
| | |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | |
| | | } |
| | | .datetime-left { |
| | | .time-card { |
| | |
| | | } |
| | | } |
| | | .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 { |
| | |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | |