From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/vindicate/views/restartSettings.vue | 222 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 191 insertions(+), 31 deletions(-) diff --git a/src/pages/vindicate/views/restartSettings.vue b/src/pages/vindicate/views/restartSettings.vue index d64300b..5feea6a 100644 --- a/src/pages/vindicate/views/restartSettings.vue +++ b/src/pages/vindicate/views/restartSettings.vue @@ -1,7 +1,10 @@ <template> - <div class="restart" - v-loading="loading" - :element-loading-text="loadingText" + <div + class="restart" + v-loading="loading" + :element-loading-text="loadingText" + element-loading-spinner="restart-loading" + element-loading-background="rgba(0, 0, 0, 0.35)" > <div class="restart-set"> <div class="t">閲嶅惎璁剧疆</div> @@ -76,6 +79,7 @@ <div class="bar" v-if="every != 'close'"> <div class="name">閲嶅惎鏃堕棿</div> <el-time-picker + popper-class="restartTimePicker" v-model="time" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }" value-format="HH:mm" @@ -83,6 +87,7 @@ placeholder="浠绘剰鏃堕棿鐐�" size="small" @change="updateExpression" + :popper-append-to-body="false" ></el-time-picker> </div> </div> @@ -101,13 +106,14 @@ export default { data() { return { + warnSpn: "\ue71c", time: "", saveBtn: false, timer: null, probeSum: 0, cronText: "", - loading:false, - loadingText:"", + loading: false, + loadingText: "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟......", cronValueObj: { min: "*", hour: "*", @@ -195,13 +201,27 @@ this.$router.push("/"); }, restart() { - this.$confirm("纭畾瑕侀噸鍚鑺傜偣鍚�?","鎻愮ず", { - 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" }, `${this.warnSpn}`), + h("span", { class: "warn-title" }, "鑺傜偣閲嶅惎 "), + h("span", { class: "warn-dec" }, "纭畾瑕侀噸鍚鑺傜偣鍚�??"), + ] + ), + showCancelButton: true, + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", }).then(() => { this.loading = true; - this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..." + this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..."; rebootServer() .then((rsp) => { this.probeServer(this.reLogin); @@ -319,47 +339,57 @@ <style lang="scss"> .all { width: 100%; + background-color: #fbfaff; } .restart { margin: 0 auto; - padding: 20px; + padding: 10px; + font-size: 16px; + color: #333; + font-weight: 700; + vertical-align: middle; + border-top: 4px solid #f2f2f7; + border-left: 4px solid #f2f2f7; .t { + height: 48px; + background: #f2f2f7; box-sizing: border-box; text-align: left; - width: 70%; - margin: 0 auto; - padding: 10px; - font-size: 16px; + width: 100%; + padding: 10px 20px; + line-height: 32px; + border-radius: 8px; } .bar { height: 50px; - - width: 70%; - background: rgba(248, 248, 248, 1); - margin: 0 auto; + width: 100%; + background: #f2f2f7; min-width: 300px; display: flex; justify-content: space-between; box-sizing: border-box; - padding: 0 20px; + padding: 0 50px; align-items: center; - border-radius: 10px; - margin-bottom: 10px; + border-radius: 8px; + margin-top: 4px; + margin-bottom: 4px; .reset-btn { - width: 70px; + width: 150px; height: 32px; - border-radius: 5px; + border-radius: 20px; + background: rgba(78, 148, 255, 0.1) !important; + border: 1px solid var(--colorCard); + color: #333333; + font-weight: bold; + font-size: 14px; } - .el-select { - width: 100%; - } + .name { min-width: 150px; text-align: left; - font-size: 14px; } .el-input__inner::placeholder { - color: rgba(107, 107, 107, 1); + color: rgba(107, 107, 107, 1) !important; } .el-input--small .el-input__inner { height: 32px; @@ -376,9 +406,139 @@ width: 100%; } } + + .el-select { + width: 509px; + height: 32px; + + input { + background: #fbfaff !important; + border-radius: 20px !important; + text-align: center; + } + } + .el-date-editor { + width: 509px; + height: 32px; + input { + background: #fbfaff !important; + border-radius: 20px !important; + text-align: center; + } + + .el-input__prefix { + left: 215px !important; + } + } .save-btn { - width: 260px; - margin-top: 50px; + width: 251px; + height: 40px; + margin-top: 80px; + background: var(--colorCard) !important; + border: 1px solid var(--colorCard) !important; + border-radius: 25px; + } +} + +.restartTimePicker { + width: 509px !important; + background-color: #fbfaff !important; + margin-top: 8px !important; + /* .popper__arrow::after { + display: none !important; + } */ +} +</style> + +<style lang="scss"> +.warn-icon { + color: var(--colorCard); + 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: 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; + } + } +} + +.restart .el-loading-mask .el-loading-spinner { + top: 40%; +} + +.restart .el-loading-mask .el-loading-spinner .el-loading-text { + font-size: 16px; + font-weight: bold; + color: #ffffff; + margin-top: 20px; +} + +.restart .el-loading-mask .restart-loading { + background-image: url("/images/desktop/safari.png"); + display: block; + width: 50px; + height: 50px; + margin-bottom: 20px; + background-size: 50px; + margin: 0 auto; + animation: rotate 6s linear infinite; +} + +@keyframes rotate { + 0% { + transform: rotateZ(0deg); /*浠�0搴﹀紑濮�*/ + } + 100% { + transform: rotateZ(360deg); /*360搴︾粨鏉�*/ } } </style> -- Gitblit v1.8.0