upd: drag,shortpassword 样式修改 (#410)

* upd: drag,shortpassword

* upd: tabbar,shortpassword,actionsheet
Co-authored-by: richard1015 <51844712@qq.com>

src/packages/actionsheet/index.scss

@@ -3,7 +3,7 @@
     padding: 10px;
     margin: 0;
     text-align: center;
-    background-color: #fff;
+    background-color: $white;
     border-bottom: 1px solid $light-color;
     font-size: $font-size-base;
     color: $title-color;
@@ -40,18 +40,17 @@
   }
 
   .desc {
-    font-size: 14px;
+    font-size: $font-size-2;
     color: #999;
   }
 
   .subdesc {
     display: block;
-    font-size: 12px;
+    font-size: $font-size-small;
     color: #999;
   }
 
   .nut-actionsheet-item {
-    // border-bottom: 1px solid $light-color;
     cursor: pointer;
   }
 

src/packages/shortpassword/index.scss

@@ -46,7 +46,6 @@
   border-radius: 4px;
   border: 1px solid $shortpsd-border-color;
   display: flex;
-  // justify-content: space-between;
   position: absolute;
   left: 0;
   top: 29%;
@@ -54,7 +53,6 @@
 }
 
 .nut-shortpsd-li {
-  // width: 16.5%;
   flex: 1;
   display: flex;
   justify-content: center;
@@ -76,13 +74,13 @@
   width: 247px;
 
   .nut-shortpsd-error {
-    line-height: 10px;
-    font-size: 10px;
+    line-height: 1;
+    font-size: $font-size-0;
     color: $shortpsd-error;
   }
 
   .nut-shortpsd-forget {
-    line-height: 12px;
+    line-height: 1;
     font-size: $font-size-1;
     color: $shortpsd-forget;
   }
@@ -98,9 +96,8 @@
     border: 1px solid rgba(250, 44, 25, 1);
     border-radius: 15px;
     padding: 8px 38px;
-    line-height: 14px;
-    font-family: PingFangSC-Regular;
-    font-size: 14px;
+    line-height: 1;
+    font-size: $font-size-2;
     color: rgba(250, 44, 25, 1);
   }
 
@@ -114,9 +111,8 @@
     );
     border-radius: 15px;
     padding: 8px 38px;
-    line-height: 14px;
-    font-family: PingFangSC-Regular;
-    font-size: 14px;
+    line-height: 1;
+    font-size: $font-size-2;
     color: rgba(255, 255, 255, 1);
   }
 }

src/packages/tabbar/index.scss

 .nut-tabbar {
   border: 0px;
-  border-bottom: 1px solid #eee;
-  border-top: 1px solid #eee;
+  border-bottom: 1px solid $tabbar-border-color;
+  border-top: 1px solid $tabbar-border-color;
   width: 100%;
   display: flex;
   height: 50px;
   box-sizing: border-box;
-  background: #fff;
+  background: $white;
 
   &:last-child {
     border-right: 0;
@@ -32,13 +32,9 @@
 }
 
 .card {
-  border-right: 1px solid #eee;
+  border-right: 1px solid $tabbar-border-color;
 }
 
-// .curr {
-//   color: $primary-color;
-// }
-
 .icon-box {
   padding: 0px;
   display: inline-block;
@@ -47,29 +43,28 @@
   .tips {
     position: absolute;
     background: $tabbar-active-color;
-    border: 1px solid rgba(255, 255, 255, 1);
+    border: 1px solid $white;
     border-radius: 7px;
     text-align: center;
 
     top: -2px;
     right: -7px;
-    box-shadow: 0 0 0 1px #fff;
+    box-shadow: 0 0 0 1px $white;
     font-size: $font-size-1;
-    color: #fff;
+    color: $white;
   }
 
   .num {
-    line-height: 11px;
-    font-family: PingFangSC-Regular;
-    font-size: 11px;
-    color: rgba(255, 255, 255, 1);
+    line-height: 1;
+    font-size: $font-size-0;
+    color: $white;
     padding: 1px 2px 2px 3px;
   }
+
   .nums {
-    line-height: 10px;
-    font-family: PingFangSC-Regular;
-    font-size: 10px;
-    color: rgba(255, 255, 255, 1);
+    line-height: 1;
+    font-size: $font-size-0;
+    color: $white;
     padding: 2px 1px 2px 2px;
   }
 }
@@ -81,11 +76,11 @@
 }
 
 .icon-box .tabbar-nav-word {
-  font-size: 10px;
+  font-size: $font-size-0;
   display: block;
 }
 
 .icon-box .big-word {
-  font-size: 16px;
+  font-size: $font-size-3;
   line-height: 1;
 }

src/packages/tabbar/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { provide, reactive } from 'vue';
+import { provide, reactive, watch } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('tabbar');
 import tabbaritem from '@/packages/tabbaritem/index.vue';
@@ -40,7 +40,8 @@ export default create({
   emits: ['tab-switch', 'update:show'],
   setup(props, { emit, slots }) {
     const mdValue = reactive({
-      val: props.show
+      val: props.show,
+      children: []
     });
     function changeIndex(active: number) {
       emit('update:show', active);
@@ -48,7 +49,7 @@ export default create({
       emit('tab-switch', parentData.children[active], active);
     }
     let parentData = reactive({
-      children: [],
+      children: mdValue.children,
       size: props.size,
       modelValue: mdValue.val,
       unactiveColor: props.unactiveColor,
@@ -56,6 +57,12 @@ export default create({
       changeIndex
     });
     provide('parent', parentData);
+    watch(
+      () => props.show,
+      value => {
+        parentData.modelValue = value;
+      }
+    );
     return {
       changeIndex
     };

src/packages/tabbaritem/index.scss

@@ -16,29 +16,27 @@
   .tips {
     position: absolute;
     background: $tabbar-active-color;
-    border: 1px solid rgba(255, 255, 255, 1);
+    border: 1px solid $white;
     border-radius: 7px;
     text-align: center;
 
     top: -2px;
     right: -7px;
-    box-shadow: 0 0 0 1px #fff;
+    box-shadow: 0 0 0 1px $white;
     font-size: $font-size-1;
-    color: #fff;
+    color: $white;
   }
 
   .num {
-    line-height: 11px;
-    font-family: PingFangSC-Regular;
-    font-size: 11px;
-    color: rgba(255, 255, 255, 1);
+    line-height: 1;
+    font-size: $font-size-0;
+    color: $white;
     padding: 1px 2px 2px 3px;
   }
   .nums {
-    line-height: 10px;
-    font-family: PingFangSC-Regular;
-    font-size: 10px;
-    color: rgba(255, 255, 255, 1);
+    line-height: 1;
+    font-size: $font-size-0;
+    color: $white;
     padding: 2px 1px 2px 2px;
   }
 }
@@ -50,11 +48,11 @@
 }
 
 .icon-box .tabbar-nav-word {
-  font-size: 10px;
+  font-size: $font-size-0;
   display: block;
 }
 
 .icon-box .big-word {
-  font-size: 16px;
+  font-size: $font-size-large;
   line-height: 1;
 }

src/packages/tabbaritem/index.vue

@@ -85,10 +85,12 @@ export default create({
 
     watch(choosed, (value, oldValue) => {
       state.active = value;
+      setTimeout(() => {
         if (parent.children[value].href) {
           window.location.href = parent.children[value].href;
         }
       });
+    });
     return {
       state,
       change

src/styles/variables.scss

@@ -21,17 +21,19 @@ $padding-xs: 8px 12px;
 
 $font-family: PingHei, 'Lucida Grande', 'Lucida Sans Unicode', STHeiti,
   Helvetica, Arial, Verdana, 'sans-serif', 'PingHei-light', SimHei, 'Droid Sans' !default;
-$font-size-base: 14px !default;
-$font-size-small: 12px !default;
-$font-size-large: 16px !default;
-$line-height-base: 1.5 !default;
+
 // Font
+$font-size-0: 10px;
 $font-size-1: 12px;
 $font-size-2: 14px;
 $font-size-3: 16px;
 $font-size-4: 18px;
 $font-weight-bold: 400;
 
+$font-size-small: $font-size-1;
+$font-size-base: $font-size-2;
+$font-size-large: $font-size-3;
+$line-height-base: 1.5 !default;
 // button
 $button-border-radius: 25px;
 $button-border-width: 1px;
@@ -124,8 +126,8 @@ $inputnumber-input-height: 20px;
 $zindex-actionsheet: 10001 !default;
 $body-background: #f6f6f6 !default;
 $light-color: #f6f6f6 !default;
-$font-size-base: 14px !default;
-$font-size-small: 12px !default;
+$font-size-base: $font-size-2;
+$font-size-small: $font-size-1;
 
 //shortpassword
 $shortpsd-background-color: rgba(245, 245, 245, 1);
@@ -184,7 +186,7 @@ $zindex-dialog: 10000 !default;
 $zindex-picker: 10050 !default;
 
 // Notify
-$notify-text-color: #fff;
+$notify-text-color: $white;
 $notify-padding: 12px 0;
 $notify-font-size: 14px;
 $notify-height: 44px;
@@ -218,6 +220,7 @@ $notify-warning-background-color: linear-gradient(
 // tabbar
 
 $tabbar-active-color: $primary-color;
+$tabbar-border-color: #eee;
 
 //infiniteloading