fix(miniprogram): 小程序相关vue3迁移异常优化

Author: x3zvawq

src/assets/css/miniprogram/app.less

@@ -14,6 +14,14 @@
             top: 48px;
         }
     }
+
+    .v-miniprogram {
+        .el-drawer__body {
+            // 小程序里的 Drawer 内容通常自带内部滚动区，外层 body 再滚会出现双滚动条。
+            padding: 0;
+            overflow: hidden;
+        }
+    }
 }
 
 @import "./miniprogram-light.less";

src/assets/css/miniprogram/var-dark.less

@@ -21,33 +21,14 @@
         --primary-white: #ffffff;
         --primary-brand-4: #282828;
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        --secondary-indigo: #5856D6;
-        --secondary-purple: #AF52DE;
-        --secondary-cyan: #32ADE6;
-        --secondary-blue: #1886FE;
-        --secondary-green: #34C759;
-        --secondary-mint: #00C7BE;
-        --secondary-yellow: #FFCC00;
-        --secondary-orange: #FF9500;
-        --secondary-red: #FF3B30;
+        --secondary-indigo: #5856d6;
+        --secondary-purple: #af52de;
+        --secondary-cyan: #32ade6;
+        --secondary-blue: #1886fe;
+        --secondary-green: #34c759;
+        --secondary-mint: #00c7be;
+        --secondary-yellow: #ffcc00;
+        --secondary-orange: #ff9500;
+        --secondary-red: #ff3b30;
     }
 }

src/assets/css/miniprogram/var.less

@@ -42,6 +42,4 @@
     --uploader-upload-background-color: var(--black-10);
 }
 
-
-
 @import "var-dark.less";

src/components/cj/mobile/category-filter-drawer.vue

@@ -2,11 +2,11 @@
     <div>
         <el-drawer
             v-model="show"
+            class="other-filter-drawer"
             direction="btt"
             :show-close="false"
             :with-header="false"
             append-to-body
-            custom-class="other-filter-drawer"
             size="400"
             @close="onClose"
             style="width:100%;"
@@ -258,7 +258,9 @@ export default {
     flex-direction: column;
     background-color: #24292E;
     padding: 20px;
-    min-height: 300px;
+    height: 100%;
+    box-sizing: border-box;
+    min-height: 0;
     position: relative;
 
 
@@ -275,11 +277,11 @@ export default {
 
     .m-other-filter-list {
         flex: 1;
+        min-height: 0;
         display: flex;
         flex-direction: column;
         gap: 20px;
-        margin-bottom: 60px;
-        max-height: 345px;
+        margin-bottom: 86px;
         overflow-y: auto;
         padding-bottom: 20px;
 

src/components/cj/mobile/children-list-drawer.vue

@@ -2,11 +2,11 @@
     <div>
         <el-drawer
             v-model="show"
+            class="children-list-drawer"
             direction="btt"
             :show-close="false"
             :with-header="false"
             append-to-body
-            custom-class="children-list-drawer"
             size="400"
             @close="onClose"
             style="width: 100%"

src/components/cj/mobile/confirm-ok-drawer.vue

@@ -2,11 +2,11 @@
     <div>
         <el-drawer
             v-model="show"
+            class="other-filter-drawer"
             direction="btt"
             :show-close="false"
             :with-header="false"
             append-to-body
-            custom-class="other-filter-drawer"
             size="400"
             @close="onClose"
             style="width:100%;"

src/components/cj/mobile/map-filter-drawer.vue

@@ -2,11 +2,11 @@
     <div>
         <el-drawer
             v-model="show"
+            class="other-filter-drawer"
             direction="btt"
             :show-close="false"
             :with-header="false"
             append-to-body
-            custom-class="other-filter-drawer"
             size="400"
             @close="onClose"
             style="width: 100%"
@@ -223,7 +223,9 @@ export default {
     flex-direction: column;
     background-color: #24292e;
     padding: 20px;
-    min-height: 300px;
+    height: 100%;
+    box-sizing: border-box;
+    min-height: 0;
     position: relative;
 
     .m-other-filter__title {
@@ -239,11 +241,11 @@ export default {
 
     .m-other-filter-list {
         flex: 1;
+        min-height: 0;
         display: flex;
         flex-direction: column;
         gap: 20px;
-        margin-bottom: 60px;
-        max-height: 345px;
+        margin-bottom: 86px;
         overflow-y: auto;
         padding-bottom: 20px;