From 878ce80ef3ca88a2c108fbc713cd6ea461c44de1 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 13 十月 2021 13:51:03 +0800
Subject: [PATCH] 拓扑图
---
src/pages/vindicate/views/systemClean.vue | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 157 insertions(+), 21 deletions(-)
diff --git a/src/pages/vindicate/views/systemClean.vue b/src/pages/vindicate/views/systemClean.vue
index 703213a..5366b39 100644
--- a/src/pages/vindicate/views/systemClean.vue
+++ b/src/pages/vindicate/views/systemClean.vue
@@ -9,7 +9,7 @@
<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>
+ <span class="useable">纾佺洏鍙敤: {{ percent }}%</span>
</div>
</div>
@@ -19,7 +19,7 @@
<div class="clear-list">
<span class="t">璇烽�夋嫨瑕佹竻鐞嗙殑鏁版嵁鑼冨洿</span>
- <el-date-picker
+ <el-date-picker popper-class="clean-time-picker"
style="width: 100%"
v-model="dataRange"
value-format="yyyy-MM-dd"
@@ -70,12 +70,26 @@
return
}
const [showStartTime, showEndTime] = this.dataRange
- this.$confirm(`${showStartTime} 鑷� ${showEndTime} 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵`, "鎻愮ず",{
- type:"warning",
- cancelButtonClass: "comfirm-class-cancle",
- confirmButtonClass: "comfirm-class-sure",
- }
- )
+ const h = this.$createElement;
+ const icon = this.$msgbox( {
+ title: "",
+ message: h(
+ "div",
+ {
+ style:
+ "display: flex; flex-direction: column; justify-content: center; align-items: center;",
+ },
+ [
+ h("span", { class: "icon iconfont warn-icon" }, '\ue71c'),
+ h("span", { class: "warn-title" }, "鎻愮ず "),
+ h("span", { class: "warn-dec" }, `${showStartTime} 鑷� ${showEndTime} 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵`),
+ ]
+ ),
+ showCancelButton: true,
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ })
+
.then(() => {
this.loading = true
this.loadingText = "姝ｅ湪鍒犻櫎鏁版嵁锛岃绋嶅�欙紒"
@@ -83,6 +97,7 @@
startTime: showStartTime,
endTime: showEndTime,
})
+
.then((resp) => {
if (resp.success) {
this.loading = false
@@ -110,9 +125,10 @@
}
.clear {
+ position: relative;
padding: 10px;
- border-top:2px solid #E1E0E6 ;
- border-left:2px solid #E1E0E6 ;
+ border-top: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
.clear-list {
background: #F2F2F7;
@@ -122,6 +138,9 @@
align-items: center;
justify-content: space-between;
padding: 0 45px;
+ color: #333333;
+ font-weight: bold;
+ font-size: 16px;
&:first-child {
border-bottom: 1px solid #E1E0E6;
@@ -143,18 +162,14 @@
}
&::after {
position: relative;
- top: -68%;
- content: '\e6e8';
- width: 25px;
- height: 25px;
+ top: -77%;
+ background-image: url(/images/vindicate/鍐呭瓨.png);
+ width: 38px;
+ height: 35px;
+ background-size:cover;
display: inline-block;
margin: auto;
- font-family: "iconfont" !important;
- font-size: 25px;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
+ content: '';
}
}
svg {
@@ -164,11 +179,132 @@
.el-progress__text {
display: none !important;
}
+ }
+
+ .cap-text {
+ color: #333333;
+ font-weight: bold;
+ font-size: 16px;
+ .useable {
+ margin-left:20px ;
+ }
+ }
+ }
+ .el-button.el-button--primary {
+ width: 150px !important;
+ height: 30px !important;
+ line-height: 7px !important;
+ font-size: 14px !important;
+ color: #fff !important;
+ background: var(--colorCard) !important;
+ border-radius: 25px !important;
+ border: none !important;
+ }
+
+ .el-date-editor.el-range-editor {
+ height: 48px;
+ width: 361px !important;
+ border-radius: 8px;
+ .el-input__icon.el-range__icon.el-icon-date {
+ margin:0 15px ;
+ &::before {
+ line-height: 40px;
+ font-size: 20px;
+ color: #333;
+ }
+ }
+ .el-range-separator{
+ line-height: 41px;
+ }
+ input {
+ width: 127px;
+ height: 32px;
+ font-size: 12px;
+ background: #F2F2F7;
+ border-radius: 20px;
+ }
+ }
+
+ .t {
+ height: 22px;
+ width: 242px;
}
+}
+
+.warm {
+ position: absolute;
+ bottom: 60px;
+ left: 50%;
+ width: 420px;
+ transform:translateX(-50%) ;
+ .icontishi-zhuyi {
+ margin-right:10px ;
+ color: red;
}
-
}
}
</style>
+
+<style scoped lang="scss">
+.warn-icon {
+ color: #fe6d68;
+ font-size: 40px;
+ margin-top: 11px;
+ }
+ .warn-title {
+ font-weight: bold;
+ font-size: 16px;
+ margin: 6px;
+ line-height: 22px;
+ }
+ .warn-dec {
+ font-weight: bold;
+ font-size: 14px;
+ color: #828282;
+ line-height: 20px;
+ }
+ .el-message-box__headerbtn {
+ top: 12px;
+ }
+ .el-message-box__headerbtn .el-message-box__close {
+ color: #333333;
+ font-weight: bold;
+ }
+ .el-message-box__btns {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ .el-button:focus,
+ .el-button:hover {
+ background-color: none;
+ border: none;
+ }
+ button {
+ width: 175px;
+ height: 40px;
+ border-radius: 25px;
+ span {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
+ }
+ button:first-child {
+ background-color: #e0e0e0;
+ span {
+ color: #333333;
+ }
+ }
+ button:last-child {
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ span {
+ color: #fff;
+ }
+ }
+ }
+</style>
--
Gitblit v1.8.0