From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 16 十二月 2021 17:21:49 +0800
Subject: [PATCH] 自适应2
---
src/pages/vindicate/index/App.vue | 1026 +++++++++++++++++++++++++-------------------------------
1 files changed, 453 insertions(+), 573 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 33c3b3b..ee839c1 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,618 +1,498 @@
<template>
- <div class="s-system-manage">
- <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 == 3" style="width: 100%" ref="view_3"></sysInfo>
+ </div>
+
+ <div
+ class="welcome-page"
+ v-else
+ ref="curPage"
+ @click="showRecomand = false"
+ @mouseup="mouseDownIndex = ''"
+ >
+ <div
+ class="search-box"
+ :class="showRecomand ? 'border-change' : ''"
+ @click.stop
>
- <el-tab-pane label="璁惧缁存姢" name="device" v-if="isShow('vindicate:device')">
- <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>
+ <!-- @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>
- <!--
- <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="12">
- <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>
+ <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>
- </el-tab-pane>
- <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="dbvdc" v-if="isShow('vindicate:db')">
- <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>
+ <div class="no-res-bar" v-if="searchArrForShow.length == 0">
+ 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�
</div>
- </el-tab-pane>
- </el-tabs>
+ </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"
+ @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>
+ </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: "device",
- 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",
+ },
+ ],
+ 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('vindicate:device')) {
- this.activeName = "dbvdc"
+ 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 = "鏅鸿兘璁＄畻鑺傜偣姝ｅ湪閲嶅惎锛岃鑰愬績绛夊緟..."
- 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 = "姝ｅ湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒"
- var param = {
- startTime: showStartTime,
- endTime: showEndTime
- }
- debugger
- 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
- },
- onFileAdded() {
- this.patchUpdateStatus = ""
- },
- upgrade() {
- this.upgrading = true
- this.patchUpdateStatus = `<span style="color:red">姝ｅ湪鍗囩骇...</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-manage {
- width: 100% !important;
- min-width: 759px;
- box-sizing: border-box;
- padding: 10px;
- // background-color: #e9ebf2;
- background-color: #fff;
- .s-system-manage-breadcrumb {
- height: 5%;
- box-sizing: border-box;
- border: 1px solid #e4e7ed;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- box-shadow: #e4e7ed 0px 0px 9px inset;
- border-radius: 5px;
- }
-
- .el-tabs--border-card {
- border: 0px solid #dcdfe6;
- -webkit-box-shadow: none;
- box-shadow: none;
- .el-tabs__header {
- border: 0px solid #dcdfe6;
- .el-tabs__item {
- padding: 5px 50px;
- height: 50px;
- font-family: PingFangSC-Regular;
- font-size: 15px;
- color: #222222;
- text-align: center;
- border: 0px solid transparent;
- }
- .el-tabs__item:nth-child(2) {
- padding-left: 50px !important;
- }
- .el-tabs__item:last-child {
- padding-right: 50px !important;
- }
- .el-tabs__item.is-active {
- color: #3d68e1;
- font-weight: bold;
- // border-right-color: #fff;
- // border-left-color: #fff;
- }
- .el-tabs__item:not(.is-disabled):hover {
- color: #3d68e1;
- }
- }
- }
- .el-tabs__content {
- height: calc(100% - 64px);
- width: calc(100% - 20px);
- box-sizing: border-box;
- overflow-y: auto;
- padding: 10px 40px !important;
- .el-tab-pane {
- width: 100%;
- .s-title {
- text-align: left;
- padding: 15px 0px;
- font-size: 16px;
- }
- }
- }
-
- .s-table {
- border: 1px solid #e8e8e9;
- margin-top: 40px;
- }
-
- .ui-top-title {
- padding-bottom: 10px;
- /* border-bottom: 1px solid #ebebeb; */
- position: relative;
- text-align: left;
- padding-left: 15px;
- font-size: 16px;
- font-weight: bold;
- }
-
- .ui-top-title:before {
- content: " ";
- border-left: 4px solid #f53d3d;
- display: inline-block;
- height: 16px;
- position: absolute;
- top: 50%;
- left: 0;
- margin-top: -13px;
- }
-
- .el-button--text {
- color: #3d68e1;
- text-decoration: underline;
- }
-}
-.s-system-maintenance {
+.welcome-page {
width: 100%;
height: 100%;
- .el-button--primary {
- color: #ffffff;
- background-color: #3d68e1;
- border-color: #3d68e1;
+ 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;
}
- .el-button--primary.is-disabled,
- .el-button--primary.is-disabled:hover,
- .el-button--primary.is-disabled:focus,
- .el-button--primary.is-disabled:active {
- color: #ffffff;
- background-color: #9eb4f0;
- border-color: #9eb4f0;
+ .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;
+ // }
+ }
}
- .box-card {
- text-align: left;
- height: auto;
- margin: 10px 0px;
- .box-card-content {
- padding-bottom: 40px;
+ .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: 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 {
+ 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