微服务首页UI改造

README.md

@@ -94,3 +94,15 @@ window.subscribe('callback', (options) => {
   }
 });
 ```
+
+## KUI组件库改造
+涉及到字号、边距等数值较大的单位时，需要先将 rpx 单位改为 px；然后再将原单位*1.625，得出在750px下的单位。
+示例：
+组件代码
+```css
+font-size: 8px
+```
+改造之后
+```css
+font-size: 13px
+```

postcss.config.js

@@ -10,7 +10,11 @@ module.exports = {
             selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
             minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
             mediaQuery: false,       // (Boolean) Allow px to be converted in media queries.
-            exclude: [/node_modules/, /src\/kui\/components\/k-tab/, /src\/kui\/components\/k-illustration/,], // 设置忽略文件，用正则做目录名匹配
+            exclude: [
+                /node_modules/,
+                // /src\/kui\/components\/k-tab/, 
+                /src\/kui\/components\/k-illustration/,
+            ], // 设置忽略文件，用正则做目录名匹配
             // exclude: [/node_modules/, /src\/kui/], // 设置忽略文件，用正则做目录名匹配
             landscape: false, // 是否处理横屏情况
             propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换

src/components/plate-number/plateNumber.vue

@@ -583,9 +583,9 @@ export default {
       background-color: #d1d5db;
       box-sizing: border-box;
       padding-top: 18px;
-      margin-bottom: 19px;
-      padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
-      padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
+      margin-bottom: calc(13px + 59px);
+      // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
+      // padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
 
       button {
         width: 9%;
@@ -595,7 +595,7 @@ export default {
         padding: 0;
         color: #000;
         font-weight: 400;
-        font-size: 38px;
+        font-size: 36px;
         margin: 6px;
         background: #ffffff;
         .class-van-button-small;
@@ -627,10 +627,11 @@ export default {
     flex-direction: column;
     // background: #eaf1f9;
     background: #D1D5DB;
-    padding: 0 0 10px;
+    // padding: 0 0 10px;
     box-sizing: border-box;
-    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
-    padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
+    
+    // padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
+    // padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
   }
 
   .close-box {
@@ -639,7 +640,8 @@ export default {
     font-size: 24px;
     text-align: right;
     background: #d1d5db;
-    padding-bottom: 24px;
+    padding-bottom: calc(13px + 59px);
+    // padding-bottom: 24px;
   }
 
   .plate_number_box {
@@ -650,11 +652,11 @@ export default {
 
     button {
       width: 9%;
-      height: 2.5rem;
-      line-height: 2.5rem;
+      height: 85px;
+      line-height: 85px;
       text-align: center;
       padding: 0;
-      font-size: 38px;
+      font-size: 36px;
       background: #ffffff;
       .class-van-button-small;
 

src/pages/parkingFee/components/purple/parkingFee.vue

@@ -79,7 +79,7 @@
                   <span v-if="numArr[7]">{{ numArr[7] }}</span>
                 </div>
               </div>
-              <k-button title="查询缴费" :disabled="disabledBtn" disabledColor="#D1D2D9" @click="preHandleSearch" />
+              <k-button title="查询缴费" style="margin-top: 46px;margin-bottom: 43px;" :disabled="disabledBtn" disabledColor="#D1D2D9" @click="preHandleSearch" />
               <!-- <div type="primary" class="search-btn" :class="disabledBtn ? 'disabled-btn' : ''" :disabled="disabledBtn" @click="preHandleSearch">查询缴费</div> -->
             </div>
             <div class="vehicleMgt-list">
@@ -187,14 +187,22 @@ export default {
         img {
           width: 100px;
           height: 100px;
-          margin-bottom: 2px;
+          margin-bottom: 3px;
         }
 
         span {
-          font-size: 30px;
+          // font-size: 30px;
           margin-top: 10px;
-          color: #333333;
+          // color: #333333;
+          // font-size: 28px;
+
+
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 400;
           font-size: 28px;
+          line-height: 34px;
+          color: #333333;
         }
       }
     }
@@ -215,8 +223,20 @@ export default {
 
         .bar {
           color: #666666;
-          font-size: 32px;
+          // font-size: 32px;
+          // font-weight: 500;
+
+
+          font-family: 'PingFang SC';
+          font-style: normal;
           font-weight: 500;
+          font-size: 32px;
+          line-height: 30px;
+          /* identical to box height, or 94% */
+
+
+          color: #666666;
+
 
           &:nth-child(1) {
             margin-right: 24px;
@@ -225,6 +245,13 @@ export default {
           &.active {
             font-size: 38px;
             color: #333333;
+
+            font-family: 'PingFang SC';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 38px;
+            line-height: 38px;
+            color: #333333;
           }
         }
       }
@@ -286,8 +313,14 @@ export default {
           display: flex;
           align-items: center;
           .title {
-            font-size: 30px;
+            // font-size: 30px;
             margin-right: 33px;
+            font-family: 'PingFang SC';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 30px;
+            line-height: 36px;
+            color: #333333;
           }
           .k-tab-group-fill {
             flex: 1;
@@ -298,7 +331,7 @@ export default {
           width: 100%;
           flex: 1;
           display: flex;
-          margin-bottom: 40px;
+          padding-bottom: 46px;
           padding: 0 17px;
           justify-content: center;
           box-sizing: border-box;
@@ -345,7 +378,9 @@ export default {
           font-size: 36px;
           text-align: center;
           //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-          background-color: #644a79;
+          // background-color: #644a79;
+          background-color: var(--k-color-primary);
+          
           margin-bottom: 43px;
         }
 
@@ -358,7 +393,7 @@ export default {
       /* 历史车牌 */
       .vehicleMgt-list {
         // margin-top: 43px;
-        padding-top: 43px;
+        // padding-top: 43px;
         display: flex;
         flex-direction: column;
         // margin-bottom: 34px;
@@ -416,8 +451,8 @@ export default {
           }
 
           .vehicleMgt-content_cls {
-            color: #703a98;
-            border: 2px solid #703a98;
+            color: var(--k-color-primary-active);
+            border: 2px solid var(--k-color-primary-active);
           }
         }
       }
@@ -445,7 +480,7 @@ export default {
           height: 90px;
           color: #ffffff;
           line-height: 90px;
-          background: #644a79;
+          background: var(--k-color-primary);
           text-align: center;
           margin: 0 30px;
           border-radius: 45px;
@@ -490,7 +525,7 @@ export default {
           }
         }
         .search-btn {
-          background: #644a79;
+          background: var(--k-color-primary);
           border-radius: 45px;
           color: #ffffff;
           line-height: 90px;

src/pages/parkingFee/parkingFee.vue

@@ -16,6 +16,7 @@ export default {
   },
   mounted() {
     this.componentName = 'purpleCom';
+    console.log(19, this.theme);
   }
 };
 </script>