From 50be1546929136e57799ea080336b5ed6d667d63 Mon Sep 17 00:00:00 2001
From: pdsuwwz <pdsu.wwz@foxmail.com>
Date: Sun, 24 Jul 2022 16:28:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20fix:=20stylelint=20scss=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +-
 src/components/DialogModal/index.vue          | 18 ++++++++--
 src/components/Footer/index.vue               | 16 +++++----
 src/components/Footer/octocat.vue             |  3 +-
 src/components/IconFont/index.vue             |  8 +++--
 src/components/Layout/LayoutArea.vue          | 13 +++++--
 src/components/Layout/LayoutSection.vue       |  8 +++++
 src/components/Navigation/Avatar.vue          |  4 ++-
 src/components/Navigation/NavBar.vue          |  6 +++-
 src/components/Navigation/Side/SideAction.vue |  3 ++
 src/components/Navigation/Side/SideGoBack.vue |  4 +++
 src/components/Navigation/Side/SideLogo.vue   |  3 ++
 src/components/OptionsMenu/index.vue          | 12 +++++--
 src/components/SearchSelect/index.vue         |  9 +++++
 src/components/Tooltip.vue                    |  5 ++-
 src/locales/LogoIcon.vue                      |  1 +
 src/locales/Translations.vue                  |  6 +++-
 .../Project/components/ProjectForm.vue        |  1 +
 .../Project/components/ProjectItem.vue        | 22 +++++++++---
 src/modules/Project/components/TableBody.vue  |  5 +++
 .../Project/components/TableHeader.vue        |  1 +
 src/modules/Result/pages/overview.vue         |  2 ++
 .../components/ContainerLayout.vue            | 26 +++++++++++---
 src/modules/UserAccount/pages/login.vue       | 20 ++++++++---
 src/modules/UserAccount/pages/setting.vue     |  3 +-
 src/styles/common.scss                        | 11 +++---
 src/styles/element-variables.scss             | 27 +++++++--------
 src/styles/global-class.scss                  |  2 +-
 src/styles/index.scss                         | 34 ++++++++++++-------
 src/styles/mixin.scss                         |  2 +-
 src/styles/theme.scss                         |  5 +--
 src/widgets/ModalDialog/modal.vue             | 23 +++++++++----
 32 files changed, 225 insertions(+), 80 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6a194805..5cf24ba6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -75,5 +75,5 @@ export default {
 </script>
 
 <style lang="scss">
-@use '@/styles/index.scss';
+@use "@/styles/index.scss";
 </style>
diff --git a/src/components/DialogModal/index.vue b/src/components/DialogModal/index.vue
index 60f64f64..51eeb6df 100644
--- a/src/components/DialogModal/index.vue
+++ b/src/components/DialogModal/index.vue
@@ -117,24 +117,29 @@ export default defineComponent({
 
 <style lang="scss">
 .dialog-modal {
-  background: #FFFFFF;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
+  background: #fff;
+  box-shadow: 0 4px 12px 0 rgb(0 0 0 / 8%);
   border-radius: 8px;
   border: 1px solid #fff;
-  font-family: PingFangSC-Medium, PingFang SC;
+  font-family: PingFangSC-Medium, "PingFang SC";
   overflow: hidden;
+
   & > .el-dialog__header {
     display: none;
   }
+
   & > .el-dialog__body {
     padding: 0;
   }
+
   & > .el-dialog__footer {
     display: none;
   }
+
   .dialog-modal__box {
     display: flex;
     height: 627px;
+
     .dialog-modal__box-left {
       min-width: 118px;
       background-color: #1e3264;
@@ -142,11 +147,13 @@ export default defineComponent({
       background-size: cover;
       background-repeat: no-repeat;
     }
+
     .dialog-modal__box-right {
       flex: 1;
       display: flex;
       min-width: 0;
       flex-direction: column;
+
       .dialog-modal__box-right__header {
         display: flex;
         justify-content: space-between;
@@ -154,24 +161,29 @@ export default defineComponent({
         min-height: 50px;
         border-bottom: 1px solid #dcdfe6;
         padding: 0 16px 0 24px;
+
         .left-title {
           display: flex;
           align-items: center;
+
           .header-title {
             font-size: 18px;
             font-weight: 500;
             color: #303133;
           }
         }
+
         .right-close {
           cursor: pointer;
         }
       }
+
       .dialog-modal__box-right__body {
         flex: 1;
         min-height: 0;
         overflow-y: auto;
       }
+
       .dialog-modal__box-right__footer {
         display: flex;
         justify-content: flex-end;
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
index 4771ed9b..c1e5caeb 100644
--- a/src/components/Footer/index.vue
+++ b/src/components/Footer/index.vue
@@ -28,7 +28,7 @@ import { defineComponent, ref } from 'vue'
 import Octocat from './octocat.vue'
 
 export default defineComponent({
-  name: 'Footer',
+  name: 'MyFooter',
   components: {
     Octocat
   },
@@ -50,11 +50,14 @@ export default defineComponent({
 .footer {
   margin: 0 auto;
   width: 100%;
+
   &.border {
-    border-top: 1px solid rgba(#3c3c43, .12);
+    border-top: 1px solid rgba(#3c3c43, 0.12);
   }
+
   .container {
-    padding: 14px 0 14px;
+    padding: 14px 0;
+
     .text {
       display: flex;
       justify-content: center;
@@ -63,16 +66,17 @@ export default defineComponent({
       margin: 0;
       text-align: center;
       line-height: 1;
-      font-size: 1rem;
       color: #929292;
     }
   }
 }
+
 .github-link {
   color: #555;
-  border-bottom: 1px solid rgba(#7d7d7d, .3);
-  transition: border .3s ease-in-out;
+  border-bottom: 1px solid rgba(#7d7d7d, 0.3);
+  transition: border 0.3s ease-in-out;
   margin-left: 6px;
+
   &:hover {
     border-color: #7d7d7d;
   }
diff --git a/src/components/Footer/octocat.vue b/src/components/Footer/octocat.vue
index 894bef4e..48470a0a 100644
--- a/src/components/Footer/octocat.vue
+++ b/src/components/Footer/octocat.vue
@@ -37,7 +37,8 @@ export default defineComponent({
   width: 22px;
   margin: 0 6px;
   color: #71717a;
-  transition: .2s color;
+  transition: 0.2s color;
+
   &:hover {
     color: #3f3f46;
   }
diff --git a/src/components/IconFont/index.vue b/src/components/IconFont/index.vue
index d5739f1a..8d665eb6 100644
--- a/src/components/IconFont/index.vue
+++ b/src/components/IconFont/index.vue
@@ -103,16 +103,20 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .icon-font {
-  width: 1em; height: 1em;
+  width: 1em;
+  height: 1em;
   vertical-align: -0.15em;
-  fill: currentColor;
+  fill: currentcolor;
   overflow: hidden;
+
   &.middle {
     vertical-align: middle;
   }
+
   &.cursor {
     cursor: pointer;
   }
+
   &.disabled {
     color: #c0c4cc;
     cursor: not-allowed;
diff --git a/src/components/Layout/LayoutArea.vue b/src/components/Layout/LayoutArea.vue
index 5edbe269..354d9f36 100644
--- a/src/components/Layout/LayoutArea.vue
+++ b/src/components/Layout/LayoutArea.vue
@@ -24,7 +24,7 @@
         </section>
       </div>
     </div>
-    <Footer show-border />
+    <MyFooter show-border />
   </div>
 </template>
 
@@ -42,6 +42,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 $headerHeight: 48px;
+
 .layout-area-container {
   display: flex;
   flex-direction: column;
@@ -50,14 +51,17 @@ $headerHeight: 48px;
   min-height: 100vh;
   overflow: hidden;
   background: #f0f2f5;
+
   .layout-area-container__top {
 
   }
+
   .layout-area-container__bottom {
     display: flex;
     flex: 1;
     position: relative;
     color: #303133;
+
     .layout-area-container__bottom__inner {
       position: absolute;
       top: 1px;
@@ -65,12 +69,14 @@ $headerHeight: 48px;
       right: 0;
       bottom: 0;
       display: flex;
+
       .side-layout-area-menu-bar {
         position: relative;
         flex-direction: column;
         width: 256px;
-        transition: width .28s;
+        transition: width 0.28s;
         border-right: 1px solid #dcdfe6;
+
         .layout-area-menu-bar__inner {
           position: absolute;
           top: 0;
@@ -83,15 +89,18 @@ $headerHeight: 48px;
           scroll-behavior: smooth;
         }
       }
+
       .content-section-container {
         display: flex;
         flex: auto;
         flex-direction: column;
         min-width: 0;
         background-color: #f0f2f5;
+
         .main-content-box {
           flex: auto;
           position: relative;
+
           .inner-content {
             padding: 24px;
             position: absolute;
diff --git a/src/components/Layout/LayoutSection.vue b/src/components/Layout/LayoutSection.vue
index 5a2edc80..bee0ce3d 100644
--- a/src/components/Layout/LayoutSection.vue
+++ b/src/components/Layout/LayoutSection.vue
@@ -62,13 +62,16 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   height: 100%;
+
   .layout-section-container__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: 40px;
+
     .layout-section-container__header-head {
       color: #303133;
+
       .layout-section-container__header-title {
         height: 18px;
         font-size: 18px;
@@ -76,22 +79,27 @@ export default defineComponent({
         font-weight: 500;
       }
     }
+
     .layout-section-container__header-action {
 
     }
   }
+
   .layout-section-container__content {
     display: flex;
     flex-direction: column;
     position: relative;
     margin-top: 16px;
     flex: auto;
+
     .content-divider {
       height: 1px;
       background: #dcdfe6;
       margin-bottom: 6px;
     }
+
     .layout-section-container__content-inner {
+
       &.is-flex {
         flex: 1;
         display: flex;
diff --git a/src/components/Navigation/Avatar.vue b/src/components/Navigation/Avatar.vue
index a25c54bd..9aeb57d6 100644
--- a/src/components/Navigation/Avatar.vue
+++ b/src/components/Navigation/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown
     class="navigation-avatar"
-    trigger="click"
+    trigger="hover"
   >
     <div style="padding: 0 12px;">
       <img
@@ -74,12 +74,14 @@ export default defineComponent({
   align-items: center;
   cursor: pointer;
   user-select: none;
+
   img {
     width: 24px;
     border: 1px solid $color-primary;
     border-radius: 50%;
   }
 }
+
 .navigation-avatar__dropdown-command {
   display: flex;
   align-items: center;
diff --git a/src/components/Navigation/NavBar.vue b/src/components/Navigation/NavBar.vue
index a225d89e..bbc3252e 100644
--- a/src/components/Navigation/NavBar.vue
+++ b/src/components/Navigation/NavBar.vue
@@ -40,9 +40,11 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 $headerHeight: 48px;
+
 .navigation-navbar-header-container {
   height: $headerHeight;
   line-height: $headerHeight;
+
   &.fixed-header {
     position: fixed;
     width: 100%;
@@ -51,7 +53,9 @@ $headerHeight: 48px;
     right: 0;
     z-index: 3;
   }
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+
   .navbar-header-box {
     display: flex;
     height: 100%;
diff --git a/src/components/Navigation/Side/SideAction.vue b/src/components/Navigation/Side/SideAction.vue
index cd8e67c1..371b5bdf 100644
--- a/src/components/Navigation/Side/SideAction.vue
+++ b/src/components/Navigation/Side/SideAction.vue
@@ -43,15 +43,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 .side-action-container {
   position: relative;
+
   .action-list {
     display: flex;
     white-space: nowrap;
+
     .action-item {
       height: 100%;
       line-height: inherit;
       background-color: #eee;
       padding: 0 12px;
       margin-right: 5px;
+
       &:last-child {
         // margin-right: 0;
       }
diff --git a/src/components/Navigation/Side/SideGoBack.vue b/src/components/Navigation/Side/SideGoBack.vue
index e97b8c70..fab3670e 100644
--- a/src/components/Navigation/Side/SideGoBack.vue
+++ b/src/components/Navigation/Side/SideGoBack.vue
@@ -34,19 +34,23 @@ export default defineComponent({
   position: relative;
   height: 100%;
   white-space: nowrap;
+
   & > a {
     display: flex;
     align-items: center;
     height: 100%;
     color: #303133;
+
     .go-back-img {
       height: 32px;
     }
+
     .go-back-icon {
       color: #606266;
       font-size: 24px;
       padding-left: 8px;
     }
+
     .go-back-title {
       height: 22px;
       line-height: 22px;
diff --git a/src/components/Navigation/Side/SideLogo.vue b/src/components/Navigation/Side/SideLogo.vue
index 50325c76..402fe191 100644
--- a/src/components/Navigation/Side/SideLogo.vue
+++ b/src/components/Navigation/Side/SideLogo.vue
@@ -39,14 +39,17 @@ export default defineComponent({
   position: relative;
   height: 100%;
   white-space: nowrap;
+
   & > a {
     display: flex;
     align-items: center;
     height: 100%;
     color: #303133;
+
     .side-logo-img {
       width: 40px;
     }
+
     .side-logo-title {
       height: 32px;
       line-height: 32px;
diff --git a/src/components/OptionsMenu/index.vue b/src/components/OptionsMenu/index.vue
index a616256c..d3d57dbb 100644
--- a/src/components/OptionsMenu/index.vue
+++ b/src/components/OptionsMenu/index.vue
@@ -144,13 +144,15 @@ export default {
   color: rgba(#495164, 0.7);
   border-radius: 2px;
   border: 1px solid transparent;
-  transition: border .3s;
+  transition: border 0.3s;
   outline: none;
   cursor: pointer;
+
   &:hover {
     border: 1px solid rgba(#495164, 0.3);
   }
-  &:after {
+
+  &::after {
     content: "";
     position: absolute;
     top: -6px;
@@ -158,18 +160,23 @@ export default {
     right: -6px;
     bottom: -6px;
   }
+
   &.hide-border {
+
     &:hover {
       border: 1px solid transparent;
     }
   }
 }
+
 .options-menu-list {
+
   :deep() .el-dropdown-menu__item {
     line-height: 34px;
     font-size: 14px;
     white-space: nowrap;
   }
+
   .option-text {
     padding-left: 8px;
     padding-right: 15px;
@@ -184,6 +191,7 @@ export default {
   left: 0;
   right: 0;
   z-index: 1;
+
   &.hide {
     display: none;
   }
diff --git a/src/components/SearchSelect/index.vue b/src/components/SearchSelect/index.vue
index bf278d20..ef06045e 100644
--- a/src/components/SearchSelect/index.vue
+++ b/src/components/SearchSelect/index.vue
@@ -163,6 +163,7 @@ export default defineComponent({
 <style lang="scss">
 .search-input-container {
   width: 240px;
+
   .search-loading-icon {
     color: #606266;
     font-size: 16px;
@@ -170,10 +171,12 @@ export default defineComponent({
     display: flex;
     align-items: center;
     margin-right: 4px;
+
     svg {
       animation: rotate-360 3s linear infinite;
     }
   }
+
   .search-icon {
     color: #606266;
     height: 100%;
@@ -181,20 +184,26 @@ export default defineComponent({
     font-size: 16px;
     padding-right: 4px;
   }
+
   .el-input__inner {
     height: 40px;
     line-height: 40px;
   }
 }
+
 .search-select-container {
+
   .el-autocomplete-suggestion__list {
+
     li {
+
       &:active {
         background-color: #ecf3ff;
       }
     }
   }
 }
+
 .search-select-highlight {
   color: $color-primary;
 }
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 36830f96..0071321a 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -47,6 +47,7 @@ export default defineComponent({
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 14px;
+
   &::-webkit-scrollbar-thumb {
     background: rgba(#fff, 0.4);
     border-radius: 3px;
@@ -61,9 +62,11 @@ export default defineComponent({
   border-radius: 4px !important;
   padding-top: 6px !important;
   padding-bottom: 6px !important;
+
   .el-popper__arrow {
     height: 14px;
-    &:before {
+
+    &::before {
       background-color: #0b1a2f !important;
     }
   }
diff --git a/src/locales/LogoIcon.vue b/src/locales/LogoIcon.vue
index f3e693f2..28dd61b3 100644
--- a/src/locales/LogoIcon.vue
+++ b/src/locales/LogoIcon.vue
@@ -35,6 +35,7 @@ export default defineComponent({
   width: 20px;
   color: #fff;
   cursor: pointer;
+
   &.is-dark {
     color: #56575a;
   }
diff --git a/src/locales/Translations.vue b/src/locales/Translations.vue
index d8dc555a..25753ed0 100644
--- a/src/locales/Translations.vue
+++ b/src/locales/Translations.vue
@@ -5,7 +5,7 @@
     :class="{
       'is-dark': dark
     }"
-    trigger="click"
+    trigger="hover"
     @command="handleChange"
   >
     <span class="icon-outer">
@@ -89,16 +89,20 @@ export default defineComponent({
   color: #fff;
   cursor: initial;
   user-select: none;
+
   &.is-dark {
     color: #495164;
   }
+
   .icon-outer {
     display: flex;
     align-items: center;
+
     &:hover > * {
       color: $color-primary;
     }
   }
+
   .custom-dropdown-item {
     white-space: nowrap;
   }
diff --git a/src/modules/Project/components/ProjectForm.vue b/src/modules/Project/components/ProjectForm.vue
index 5ccf81fb..896493af 100644
--- a/src/modules/Project/components/ProjectForm.vue
+++ b/src/modules/Project/components/ProjectForm.vue
@@ -96,6 +96,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .project-form-container {
+
   .footer-button-list {
     display: flex;
     justify-content: flex-end;
diff --git a/src/modules/Project/components/ProjectItem.vue b/src/modules/Project/components/ProjectItem.vue
index 2938de19..d51bf0fa 100644
--- a/src/modules/Project/components/ProjectItem.vue
+++ b/src/modules/Project/components/ProjectItem.vue
@@ -145,22 +145,25 @@ export default defineComponent({
   align-items: center;
   height: 64px;
   padding: 0 24px;
-  box-shadow: 0px 1px 4px 0px rgba(#000, 0.08);
+  box-shadow: 0 1px 4px 0 rgba(#000, 0.08);
   border-radius: 8px;
   background: #fff;
   margin-bottom: 16px;
-  transition: background .3s, border .3s, box-shadow .3s;
+  transition: background 0.3s, border 0.3s, box-shadow 0.3s;
   color: #303133;
   user-select: none;
   border: 1px solid transparent;
+
   &:hover {
     box-shadow: 0 10px 30px -20px rgba(#000, 0.24);
     border: 1px solid #dcdfe6;
   }
+
   .project-item__name {
     display: flex;
     align-items: center;
     min-width: 0;
+
     .project-item__name-left {
       display: flex;
       align-items: center;
@@ -170,36 +173,43 @@ export default defineComponent({
       border-radius: 5px;
       background-color: #ecf3ff;
       margin-right: 16px;
+
       & > svg {
         width: 20px;
         font-size: 20px;
-        color: $color-primary
+        color: $color-primary;
       }
     }
+
     .project-item__name-desc {
       flex: 1;
       overflow: hidden;
+
       .project-item__name-desc__corpname {
         display: flex;
         align-items: center;
         font-size: 14px;
         color: #303133;
+
         .project-item__name-desc__corpname-maintext {
           max-width: 80%;
           margin-right: 10px;
         }
+
         .corpname-notes {
           font-size: 15px;
           color: $color-info;
           cursor: pointer;
         }
       }
+
       .project-item__name-desc__fullname {
         font-size: 12px;
         color: $color-info;
       }
     }
   }
+
   .project-item-action {
     flex: initial;
     display: flex;
@@ -207,16 +217,18 @@ export default defineComponent({
     width: 19%;
     height: 100%;
     font-size: 14px;
-    transition: .3s;
+    transition: 0.3s;
     cursor: pointer;
 
     .project-item-action__icon {
       width: 20px;
+
       & > svg {
         width: 100%;
         font-size: 20px;
       }
     }
+
     .project-item-action__status {
       padding-left: 6px;
     }
@@ -224,9 +236,11 @@ export default defineComponent({
     &.active {
       color: $color-primary;
     }
+
     &.loading {
       color: $color-primary;
     }
+
     &:hover {
       color: #6b9eff;
     }
diff --git a/src/modules/Project/components/TableBody.vue b/src/modules/Project/components/TableBody.vue
index 317b839c..507e8326 100644
--- a/src/modules/Project/components/TableBody.vue
+++ b/src/modules/Project/components/TableBody.vue
@@ -46,6 +46,7 @@ export default defineComponent({
 .project-table-body-container {
   position: relative;
   flex: auto;
+
   .project-table-body-container__inner {
     position: absolute;
     top: 0;
@@ -56,18 +57,22 @@ export default defineComponent({
     overflow-y: scroll;
     padding: 10px 6px 0;
     scroll-behavior: smooth;
+
     &::-webkit-scrollbar-track {
       background: transparent;
     }
+
     .project-empty-box {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       padding-top: 171px;
+
       & > img {
         width: 140px;
       }
+
       & > span {
         font-size: 14px;
         line-height: 14px;
diff --git a/src/modules/Project/components/TableHeader.vue b/src/modules/Project/components/TableHeader.vue
index 3b3d7745..a8dc9547 100644
--- a/src/modules/Project/components/TableHeader.vue
+++ b/src/modules/Project/components/TableHeader.vue
@@ -59,6 +59,7 @@ export default defineComponent({
   font-weight: 400;
   line-height: 20px;
   color: #909399;
+
   .project-table-header-container__head-item {
   }
 }
diff --git a/src/modules/Result/pages/overview.vue b/src/modules/Result/pages/overview.vue
index 906bf0ee..77bb01a1 100644
--- a/src/modules/Result/pages/overview.vue
+++ b/src/modules/Result/pages/overview.vue
@@ -51,9 +51,11 @@ export default defineComponent({
   grid-template-rows: repeat(2, 360px) 528px;
   grid-gap: 16px;
   padding-bottom: 16px;
+
   .grid-last {
     grid-column-start: span 2;
   }
+
   .fitting-operate {
     color: $color-primary;
     cursor: pointer;
diff --git a/src/modules/UserAccount/components/ContainerLayout.vue b/src/modules/UserAccount/components/ContainerLayout.vue
index d3f25d2a..1ff377d9 100644
--- a/src/modules/UserAccount/components/ContainerLayout.vue
+++ b/src/modules/UserAccount/components/ContainerLayout.vue
@@ -204,14 +204,16 @@ export default defineComponent({
 .user-account-container-layout {
   width: 438px;
   margin-right: 80px;
-  padding: 50px 34px 60px 34px;
+  padding: 50px 34px 60px;
   background: #fff;
-  box-shadow: 3px 6px 12px 0px rgba(0, 0, 0, 0.15), 1px 4px 8px 0px rgba(0, 0, 0, 0.15);
+  box-shadow: 3px 6px 12px 0 rgb(0 0 0 / 15%), 1px 4px 8px 0 rgb(0 0 0 / 15%);
   border-radius: 6px;
   user-select: none;
+
   :deep() .el-input .el-input__inner {
     letter-spacing: 1px;
   }
+
   .form-custom-label {
     flex: 1;
     display: flex;
@@ -219,52 +221,67 @@ export default defineComponent({
     font-size: 14px;
     font-weight: 600;
   }
-  &:deep(){
+
+  &:deep() {
+
     .el-input__prefix-inner {
       margin-left: -4px;
       align-items: center;
     }
+
     .el-input__suffix-inner {
       align-items: center;
     }
   }
+
   .input-icon-prefix {
     padding-left: 6px;
+
     // height: 100%;
   }
+
   .input-icon-lock {
     cursor: pointer;
+
     // height: 100%;
   }
+
   .form-title {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     padding-bottom: 30px;
+
     .form-title-icon {
       width: 32px;
       font-size: 0;
       margin-right: 10px;
+
       &:deep() {
+
         & > * {
           font-size: 32px;
         }
       }
     }
+
     .form-title-text {
       font-size: 26px;
       font-weight: 600;
     }
+
     .form-desc-text {
       font-size: 16px;
       font-weight: 400;
       line-height: 26px;
-      padding: 44px 0 0px;
+      padding: 44px 0 0;
     }
   }
+
   .submit-form-action-list {
     display: flex;
     margin-top: 40px;
+
     .submit-form-action-button {
       flex: 1;
     }
@@ -272,6 +289,7 @@ export default defineComponent({
 }
 
 @media screen and (max-width: 600px) {
+
   .user-account-container-layout {
     width: 95%;
     margin: auto;
diff --git a/src/modules/UserAccount/pages/login.vue b/src/modules/UserAccount/pages/login.vue
index 63fa59a8..9c8e688a 100755
--- a/src/modules/UserAccount/pages/login.vue
+++ b/src/modules/UserAccount/pages/login.vue
@@ -31,7 +31,7 @@
         </template>
       </UserAccountContainerLayout>
     </div>
-    <Footer />
+    <MyFooter />
   </div>
 </template>
 
@@ -211,32 +211,38 @@ export default defineComponent({
   flex-direction: column;
   min-height: 100vh;
   background-color: #f0f2f5;
-  background-image: url('@/assets/images/logo-background.jpg');
+  background-image: url("@/assets/images/logo-background.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+
   .user-account-nav {
     display: flex;
     justify-content: space-between;
     color: #484848;
-    padding: 0px 16px;
-    box-shadow: 0px -3px 8px 3px #c6c6c6;
+    padding: 0 16px;
+    box-shadow: 0 -3px 8px 3px #c6c6c6;
+
     // box-shadow: 0 1px 4px 3px rgb(0 21 41 / 8%);
+
     background-color: rgba(#fff, 10%);
+
     .nav-left,
     .nav-right {
       display: flex;
       height: 48px;
       align-items: center;
     }
+
     .nav-logo {
       width: 56px;
       height: 32px;
-      background-image: url('@/assets/images/vue.svg');
+      background-image: url("@/assets/images/vue.svg");
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center;
     }
+
     .nav-circle {
       width: 6px;
       height: 6px;
@@ -244,12 +250,14 @@ export default defineComponent({
       border-radius: 50%;
       background: #484848;
     }
+
     .nav-title {
       font-size: 18px;
       font-weight: 500;
       line-height: 25px;
     }
   }
+
   .user-account-body {
     flex: 1;
     display: flex;
@@ -259,8 +267,10 @@ export default defineComponent({
 }
 
 @media screen and (max-width: 600px) {
+
   .user-account-container-layout {
     justify-content: center;
+
     .user-account-nav {
       left: 0;
       right: 0;
diff --git a/src/modules/UserAccount/pages/setting.vue b/src/modules/UserAccount/pages/setting.vue
index 88c7aa6a..15488c32 100644
--- a/src/modules/UserAccount/pages/setting.vue
+++ b/src/modules/UserAccount/pages/setting.vue
@@ -12,7 +12,8 @@ export default defineComponent({
 })
 </script>
 <style lang='scss' scoped>
-//@use url(); 引入公共css类
+// @use url(); 引入公共css类
+
 .wrap-user-setting {
 
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 1d4ef858..db2bec52 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,8 +1,9 @@
 .common-table-header {
-    font-weight: bold;
-    color: #303133;
-    border-bottom-color: #C0C4CC!important;
+  font-weight: bold;
+  color: #303133;
+  border-bottom-color: #c0c4cc !important;
 }
+
 .common-table-cell {
-    color: #303133;
-}
\ No newline at end of file
+  color: #303133;
+}
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index 1f8a224f..42afbc18 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,4 +1,3 @@
-
 // Only variables can be placed here,
 // and other files such as themes cannot be introduced,
 // otherwise it will affect the packaging speed.
@@ -6,11 +5,10 @@
 /* theme color */
 // $color-primary: #4686FF;
 $color-primary: #3c40c6;
-$color-success: #52C41A;
-$color-warning: #FAAD14;
-$color-danger: #FA5555;
+$color-success: #52c41a;
+$color-warning: #faad14;
+$color-danger: #fa5555;
 $color-info: #909399;
-
 $--colors: (
   "primary": (
     "base": $color-primary,
@@ -29,25 +27,24 @@ $--colors: (
   ),
 );
 
-
 // 按需导入，重写覆盖自己所需样式
+
 @forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: $--colors,
   $text-color: (
-    'primary': initial,
-    'regular': #606266,
-    'secondary': #909399,
-    'placeholder': #c0c4cc,
+    "primary": initial,
+    "regular": #606266,
+    "secondary": #909399,
+    "placeholder": #c0c4cc,
   ),
   $border-radius: (
-    'base': 4px,
-    'small': 2px,
-    'round': 20px,
-    'circle': 100%,
+    "base": 4px,
+    "small": 2px,
+    "round": 20px,
+    "circle": 100%,
   ),
 );
 
-
 // :export {
 //   colorPrimary: $color-primary;
 // }
diff --git a/src/styles/global-class.scss b/src/styles/global-class.scss
index 7638af65..3329d4a1 100644
--- a/src/styles/global-class.scss
+++ b/src/styles/global-class.scss
@@ -4,4 +4,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
\ No newline at end of file
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 059a8ba1..0fbf079e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,15 +1,14 @@
-
-@use '@/styles/global-class.scss';
-@use '@/styles/theme.scss';
-@use '@/styles/element-status.scss';
-@use 'nprogress/nprogress.css';
+@use "@/styles/global-class.scss";
+@use "@/styles/theme.scss";
+@use "@/styles/element-status.scss";
+@use "nprogress/nprogress.css";
 
 body {
   width: 100vw;
   color: #495164;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
   background-color: #f5f7fa;
 }
@@ -28,13 +27,16 @@ html {
 
 :root body {
   position: absolute;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
-#app, body, html {
+#app,
+html {
   height: 100%;
 }
 
-body,
 dl,
 dt,
 dd,
@@ -80,7 +82,8 @@ a {
   outline: none;
 }
 
-ul, ol {
+ul,
+ol {
   list-style: none;
 }
 
@@ -88,25 +91,31 @@ svg {
   box-sizing: content-box;
 }
 
-*, *:before, *:after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
 // 滚动条样式
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgba(#000, 0.2);
   border-radius: 3px;
 }
+
 ::-webkit-scrollbar-track {
   background: rgba(#000, 0.06);
   border-radius: 3px;
 }
 
 // el-table 表格与表头错位 bug
+
 body .el-table th.gutter {
   display: table-cell !important;
 }
@@ -120,8 +129,9 @@ table {
 }
 
 // https://stackoverflow.com/questions/43778196/input-background-removed-by-chrome-autofill
+
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
-  -moz-box-shadow: 0 0 0 100px #fff inset;
+  box-shadow: 0 0 0 1000px #fff inset;
+  box-shadow: 0 0 0 100px #fff inset;
   box-shadow: 0 0 0 100px #fff inset;
 }
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 79dfa417..2fbd2889 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -1,5 +1,5 @@
 @mixin multiple_ellipsis($line_number: 3) {
-  display: -webkit-box;
+  display: box;
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 70a8cce0..a72c472d 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -1,9 +1,6 @@
-
-@use '@/styles/element-variables.scss' as *;
+@use "@/styles/element-variables.scss" as *;
 @use "element-plus/theme-chalk/src/index" as *;
 
-
-
 #nprogress .bar {
   background: $color-primary !important;
 }
diff --git a/src/widgets/ModalDialog/modal.vue b/src/widgets/ModalDialog/modal.vue
index 3e46c787..c761418f 100644
--- a/src/widgets/ModalDialog/modal.vue
+++ b/src/widgets/ModalDialog/modal.vue
@@ -196,19 +196,22 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 :deep() {
+
   .modal-container__component {
     padding: 24px;
+
     .el-textarea__inner,
-    .el-input__inner  {
+    .el-input__inner {
       padding: 8px;
     }
   }
+
   .modal-container__footer {
-      height: 54px;
-      line-height: 54px;
-      text-align: right;
-      padding-right: 24px;
-      border-top: 1px solid #DCDFE6FF;
+    height: 54px;
+    line-height: 54px;
+    text-align: right;
+    padding-right: 24px;
+    border-top: 1px solid #dcdfe6ff;
   }
 }
 </style>
@@ -216,29 +219,35 @@ export default defineComponent({
 .modal-wrapper-containers-dialog {
   width: 500px;
   border-radius: 8px;
+
   .el-dialog__header {
     display: flex;
     align-items: center;
     height: 54px;
-    border-bottom: 1px solid #DCDFE6FF;
+    border-bottom: 1px solid #dcdfe6ff;
+
     .modal-header__icon {
       width: 20px;
       height: 20px;
     }
+
     .modal-header__title {
       margin-left: 8px;
       font-size: 18px;
       font-weight: 500;
       color: #303133;
     }
+
     .header-desc {
       display: flex;
       align-items: center;
+
       svg {
         height: 17px;
       }
     }
   }
+
   .el-dialog__body {
     padding: 0;
   }