调整为按需加载，element样式调整为皮肤模式，不再使用全局变量覆盖。 (#1349)

* 调整element为自动按需引入，减少打包体积。

* 调整element样式变更为变量模式不再使用全局css覆盖

* 修改element自动化模板适配element皮肤变量模式

---------

Co-authored-by: piexlmax<303176530@qq.com>

web/src/style/element/index.scss

@@ -0,0 +1,7 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #4d70ff,
+    ),
+  )
+);

web/src/style/element_visiable.scss

@@ -1,4 +1,6 @@
-/* 改变主题色变量 */
+@import '@/style/main.scss';
+@import '@/style/base.scss';
+@import '@/style/mobile.scss';
 
 #app {
     .el-button {
@@ -7,10 +9,6 @@
     }
 }
 
-.el-dialog {
-    border-radius: 2px;
-}
-
 ::-webkit-scrollbar-track-piece {
     background-color: #f8f8f8;
 }
@@ -31,25 +29,6 @@
     background-color: #bbb;
 }
 
-.el-button--primary {
-    --el-button-font-color: #ffffff;
-    --el-button-background-color: #4D70FF;
-    --el-button-border-color: #4D70FF;
-    --el-button-hover-color: #0d84ff;
-    --el-button-active-font-color: #e6e6e6;
-    --el-button-active-background-color: #0d84ff;
-    --el-button-active-border-color: #0d84ff;
-}
-
-.el-button--primary {
-    --el-button-font-color: #ffffff;
-    --el-button-background-color: #4D70FF;
-    --el-button-border-color: #4D70FF;
-    --el-button-hover-color: #0d84ff;
-    --el-button-active-font-color: #e6e6e6;
-    --el-button-active-background-color: #0d84ff;
-    --el-button-active-border-color: #0d84ff;
-}
 
 :root {
     --el-color-primary: #4D70FF;
@@ -57,13 +36,6 @@
 }
 
 .gva-search-box {
-    .el-collapse {
-        border: none;
-        .el-collapse-item__header,
-        .el-collapse-item__wrap {
-            border-bottom: none;
-        }
-    }
     padding: 24px;
     padding-bottom: 2px;
     background-color: #fff;
@@ -71,17 +43,6 @@
     margin-bottom: 12px;
 }
 
-.el-form--inline{
-    .el-form-item{
-        margin-right: 24px;
-    }
-}
-
-.el-input__inner{
-    height: 40px;
-    line-height: 40px;
-}
-
 .gva-form-box {
     padding: 24px;
     background-color: #fff;
@@ -143,85 +104,16 @@
     }
     // 兼容久版用户升级
     .active {
-        background: #4D70FF;
+        background: var(--el-color-primary);
         border-radius: 2px;
         color: #ffffff !important;
     }
-    .el-pager li.active+li {
-        border-left: 1px solid #ddd !important;
-    }
     // end
 
-
     .is-active {
-        background: #4D70FF;
+        background: var(--el-color-primary);
         border-radius: 2px;
         color: #ffffff !important;
     }
-    .el-pager li.is-active+li {
-        border-left: 1px solid #ddd !important;
-    }
-    .el-pagination__sizes {
-        .el-input {
-            .el-input__suffix {
-                margin-top: 2px;
-            }
-        }
-    }
 }
 
-.el-button--small {
-    min-height: 32px;
-    font-size: 12px !important;
-}
-
-.el-checkbox{
-    height: auto;
-}
-
-.el-button {
-    padding: 8px 16px;
-    border-radius: 2px;
-    &.el-button--text {
-        padding: 8px 0;
-    }
-}
-
-.el-dialog {
-    padding: 12px;
-    .el-dialog__body {
-        padding: 12px 6px;
-    }
-    .el-dialog__header {
-        .el-dialog__title {
-            font-size: 14px;
-            font-weight: 500;
-        }
-        padding: 2px 20px 12px 20px;
-        border-bottom: 1px solid #E4E4E4;
-    }
-    .el-dialog__footer {
-        padding: 0 16px 16px 0;
-        .dialog-footer {
-            .el-button {
-                padding-left: 24px;
-                padding-right: 24px;
-            }
-            .el-button+.el-button {
-                margin-left: 30px;
-            }
-        }
-    }
-}
-
-.el-drawer__body {
-    padding: 0;
-}
-
-.el-date-editor .el-range-separator {
-    line-height: 24px;
-}
-
-.el-select .el-input .el-select__caret.el-icon {
-    height: 38px;
-}