From 88c13e7b9ac941c72f2c16305921adbb1f384d8f Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Tue, 22 Aug 2023 08:57:14 +0800
Subject: [PATCH] opt: optimize element ui dialog styles, make it to the center
 of screen

---
 web/src/App.vue                       | 16 +++++++++++++
 web/src/components/ConfigDialog.vue   | 34 +++++++++++++--------------
 web/src/components/PasswordDialog.vue | 25 ++++++++++----------
 web/src/components/RewardVerify.vue   |  2 +-
 web/src/views/ChatPlus.vue            | 32 -------------------------
 web/src/views/admin/Home.vue          | 13 ----------
 6 files changed, 47 insertions(+), 75 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 777eb418..5b243cf8 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -24,4 +24,20 @@ html, body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
+
+.el-overlay-dialog {
+  display flex
+  justify-content center
+  align-items center
+  overflow hidden
+
+  .el-dialog {
+    margin 0;
+
+    .el-dialog__body {
+      //max-height 1440px
+    }
+  }
+}
+
 </style>
diff --git a/web/src/components/ConfigDialog.vue b/web/src/components/ConfigDialog.vue
index f4ca2c1e..6558c969 100644
--- a/web/src/components/ConfigDialog.vue
+++ b/web/src/components/ConfigDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <el-dialog
+      class="config-dialog"
       v-model="showDialog"
-      :close-on-click-modal="false"
+      :close-on-click-modal="true"
       :before-close="close"
-      :top="50+'px'"
       title="用户设置"
   >
     <div class="user-info" id="user-info">
@@ -161,26 +161,26 @@ const close = function () {
 </script>
 
 <style lang="stylus">
-.el-dialog {
-  --el-dialog-width 90%;
-  max-width 800px;
+.config-dialog {
+  .el-dialog {
+    --el-dialog-width 90%;
+    max-width 800px;
 
-  .el-dialog__body {
-    padding-top 10px;
-    max-height 600px;
-    overflow-y auto;
+    .el-dialog__body {
+      overflow-y auto;
 
-    .user-info {
-      position relative;
+      .user-info {
+        position relative;
 
-      .el-message {
-        position: absolute;
+        .el-message {
+          position: absolute;
+        }
       }
-    }
 
-    .tip {
-      color #c1c1c1
-      font-size 12px;
+      .tip {
+        color #c1c1c1
+        font-size 12px;
+      }
     }
   }
 }
diff --git a/web/src/components/PasswordDialog.vue b/web/src/components/PasswordDialog.vue
index 7b92a15a..ecfe9639 100644
--- a/web/src/components/PasswordDialog.vue
+++ b/web/src/components/PasswordDialog.vue
@@ -1,7 +1,8 @@
 <template>
   <el-dialog
+      class="password-dialog"
       v-model="showDialog"
-      :close-on-click-modal="false"
+      :close-on-click-modal="true"
       :show-close="true"
       :before-close="close"
       title="修改密码"
@@ -71,20 +72,20 @@ const close = function () {
 </script>
 
 <style lang="stylus">
-.el-dialog {
-  --el-dialog-width 90%;
-  max-width 650px;
+.password-dialog {
+  .el-dialog {
+    --el-dialog-width 90%;
+    max-width 650px;
 
-  .el-dialog__body {
-    padding-top 10px;
-    max-height 600px;
-    overflow-y auto;
+    .el-dialog__body {
+      overflow-y auto;
 
-    .form {
-      position relative;
+      .form {
+        position relative;
 
-      .el-message {
-        position: absolute;
+        .el-message {
+          position: absolute;
+        }
       }
     }
   }
diff --git a/web/src/components/RewardVerify.vue b/web/src/components/RewardVerify.vue
index cfffaafd..df2e0b21 100644
--- a/web/src/components/RewardVerify.vue
+++ b/web/src/components/RewardVerify.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
       v-model="showDialog"
-      :close-on-click-modal="false"
+      :close-on-click-modal="true"
       :show-close="mobile !== ''"
       :before-close="close"
       :title="title"
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index ebefce2e..0497a6d4 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -1171,25 +1171,6 @@ $borderColor = #4676d0;
     min-width: 100px;
     max-width: 600px;
   }
-
-  .token-dialog {
-    .el-dialog {
-      --el-dialog-width: 90%;
-      max-width: 400px;
-
-      .el-dialog__body {
-        padding: 10px 10px 20px 10px;
-      }
-
-      .el-row {
-        flex-wrap: nowrap
-
-        button {
-          margin-left: 5px;
-        }
-      }
-    }
-  }
 }
 
 .el-select-dropdown__wrap {
@@ -1213,17 +1194,4 @@ $borderColor = #4676d0;
     }
   }
 }
-</style>
-
-<style lang="stylus">
-.el-overlay-dialog {
-  display flex
-  justify-content center
-  align-items center
-
-  .el-dialog {
-    margin 10px;
-  }
-}
-
 </style>
\ No newline at end of file
diff --git a/web/src/views/admin/Home.vue b/web/src/views/admin/Home.vue
index b8ede4c7..b4c582e2 100644
--- a/web/src/views/admin/Home.vue
+++ b/web/src/views/admin/Home.vue
@@ -44,16 +44,3 @@ checkAdminSession().then(() => {
 @import '@/assets/css/color-dark.css';
 @import '@/assets/iconfont/iconfont.css';
 </style>
-
-<style lang="stylus">
-.el-overlay-dialog {
-  display flex
-  justify-content center
-  align-items center
-
-  .el-dialog {
-    margin 10px;
-  }
-}
-
-</style>
\ No newline at end of file