From 0cfab2b97c0913d2f5ccd55760f8768316f91138 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 11:34:02 +0800
Subject: [PATCH] 系统维护v0
---
src/pages/vindicate/views/systemClean.vue | 181 +++++++++++++++++++-------------------------
1 files changed, 79 insertions(+), 102 deletions(-)
diff --git a/src/pages/vindicate/views/systemClean.vue b/src/pages/vindicate/views/systemClean.vue
index 923b54c..703213a 100644
--- a/src/pages/vindicate/views/systemClean.vue
+++ b/src/pages/vindicate/views/systemClean.vue
@@ -1,11 +1,28 @@
<template>
<div class="clear" v-loading="loading" :element-loading-text="loadingText">
- <div class="head">
+ <div class="clear-list">
+ <div class="cap">
+ <div class="cap-bar">
+ <!-- <div class="inner-bar" :style="`width: ${100-percent}%;`"></div> -->
+ <el-progress v-if="percent>25" type="circle" :percentage="100-percent" stroke-width="10"></el-progress>
+ <el-progress v-if="percent<=25&&percent>0" type="circle" :percentage="100-percent" status="warning" stroke-width="10"></el-progress>
+ <el-progress v-if="percent == 0" type="circle" :percentage="100-percent" status="exception" stroke-width="10"></el-progress>
+ </div>
+ <div class="cap-text">
+ <span>纾佺洏鍙敤: {{ percent }}%</span>
+ </div>
+ </div>
+
+ <el-button type="primary" @click="deleteData">鏁版嵁娓呯悊</el-button>
+ </div>
+
+
+ <div class="clear-list">
<span class="t">璇烽�夋嫨瑕佹竻鐞嗙殑鏁版嵁鑼冨洿</span>
<el-date-picker
style="width: 100%"
v-model="dataRange"
- value-format="yyyy-MM-dd"
+ value-format="yyyy-MM-dd"
type="daterange"
align="right"
size="small"
@@ -14,28 +31,11 @@
end-placeholder="缁撴潫鏃ユ湡"
:picker-options="pickerOptions"
></el-date-picker>
- </div>
+ </div>
- <div class="desc">
- <div class="disk-img">
- <span class="icon iconfont">{{"\ue8b1"}}</span>
-
- </div>
- <div class="cap">
- <div class="cap-text">
- <span>纾佺洏鍙敤: {{ percent }}%</span>
- </div>
- <div class="cap-bar">
- <div class="inner-bar" :style="`width: ${100-percent}%;`"></div>
- </div>
- </div>
-
- <el-button type="primary" @click="deleteData">鏁版嵁娓呯悊</el-button>
-
- <div class="warm">
+ <div class="warm">
<i class="iconfont icontishi-zhuyi"></i>
<span class="text">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�!</span>
- </div>
</div>
</div>
</template>
@@ -103,95 +103,72 @@
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
+.container {
+ background-color: #FBFAFF;
+}
+
.clear {
- margin: 0 auto;
- padding: 20px;
- .head {
- height: 50px;
- background-color: rgba(248, 248, 248, 1);
- border-radius: 10px;
+ padding: 10px;
+ border-top:2px solid #E1E0E6 ;
+ border-left:2px solid #E1E0E6 ;
+
+ .clear-list {
+ background: #F2F2F7;
+ border-radius: 8px;
+ height: 114px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 45px;
+
+ &:first-child {
+ border-bottom: 1px solid #E1E0E6;
+ }
+
+ .cap {
display: flex;
align-items: center;
- justify-content: space-around;
- box-sizing: border-box;
- padding: 0 20px;
- width: 560px;
- margin: 0 auto;
- .t {
- font-size: 14px;
- min-width: 175px;
- text-align: left;
- }
- .el-range-editor--small.el-input__inner {
- border: none;
+ .cap-bar {
+ width: 70px;
+ height: 70px;
+ div {
+ width: 100%;
+ height: 100%;
+ .el-progress-circle {
+ width: 100% !important;
+ height: 100% !important;
+ }
+ &::after {
+ position: relative;
+ top: -68%;
+ content: '\e6e8';
+ width: 25px;
+ height: 25px;
+ display: inline-block;
+ margin: auto;
+ font-family: "iconfont" !important;
+ font-size: 25px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ }
}
- .el-range-editor--small .el-range-separator {
- line-height: 26px;
+ svg {
+ width: 70px;
+ height: 70px;
+ }
+ .el-progress__text {
+ display: none !important;
}
}
- .desc {
- margin-top: 50px;
- .disk-img {
- height: 100px;
- width: 100px;
- margin: 0 auto;
- margin-bottom: 10px;
- // background-color: aquamarine;
- .iconfont{
- font-size: 82px;
- color: #3a8120;
- }
- }
- .cap {
- height: 50px;
- margin: 0 auto;
- width: 160px;
- margin-bottom: 20px;
- .cap-bar {
- height: 10px;
- background: rgb(239, 240, 236);
- //
- margin: 0 auto;
- border-radius: 2px;
-
- .inner-bar {
- background: #3a8120;
- height: 100%;
- border-radius: 2px;
- }
- }
- .cap-text {
- text-align: right;
- height: 25px;
- text-align: right;
- line-height: 25px;
- font-size: 12px;
- }
- }
- .el-button--primary {
- width: 200px;
- font-size: 15px;
- }
- .warm {
- line-height: 30px;
- height: 30px;
- margin-top: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- .iconfont {
- font-size: 16px;
-
- color: #e99038;
- margin-right: 5px;
- }
- .text {
- color: rgb(175, 175, 175);
- font-size: 14px;
- }
- }
}
+
}
+}
+
+
</style>
--
Gitblit v1.8.0