Update 按钮样式调整

UI/VAP.APP/src/core/config/index.ts

@@ -1,8 +1,8 @@
 // 应用全局配置
 export default {
   //baseUrl: "/api",
-  //baseUrl: "http://xyhapi.yue.shvber.com:4031",
-  baseUrl: "http://localhost:6060",
+  //baseUrl: "http://localhost:6066",
+  baseUrl: "http://te.yue.shvber.com:4031/prod-api",
   // 应用信息
   appInfo: {
     // 应用名称

UI/VAP.APP/src/pages/account/forgetPwd.vue

@@ -45,8 +45,8 @@
     </vb-cell-group>
 
     <vb-cell-group>
-      <vb-button round block custom-class="mb-15" @click="onSubmit">重置密码</vb-button>
-      <vb-button round block plain class="mt" @click="onBack">返回登录</vb-button>
+      <vb-button round block custom-class="mb-15" @click="onSubmit" size="large">重置密码</vb-button>
+      <vb-button round block plain class="mt" @click="onBack" size="large">返回登录</vb-button>
     </vb-cell-group>
   </view>
 </template>

UI/VAP.APP/src/pages/account/login.vue

@@ -18,6 +18,7 @@ const loginForm = reactive({
   uuid: "",
 })
 const store = appStore.authStore
+
 function getCode() {
   if (!captchaEnabled.value) {
     return
@@ -28,6 +29,7 @@ function getCode() {
     loginForm.uuid = res.uuid
   })
 }
+
 function handleLogin() {
   if (authType.value == 1 && !loginForm.openid) {
     message.confirm("微信授权失败，重新授权").then((res: any) => {
@@ -112,20 +114,20 @@ onLoad(() => {
   <view class="">
     <view class="d-fc flex-column mt-100 mb-30">
       <image class="w-100px h-100px" :src="config.appInfo.logo" mode="widthFix"></image>
-      <text class="text-vb mt-10 fw">Vber移动端</text>
+      <text class="text-vb mt-10 fw fs-24">Vber移动端</text>
     </view>
     <view class="m-15 p-15">
       <view v-if="authType != 0" class="flex-column">
-        <view class="mb-20 h-45px border border-vb d-fcv br-25">
+        <view class="mb-20 h-45px border border-vb d-fcv br-25 bg-white">
           <view class="iconfont icon-user text-vb fs-30 ms-15"></view>
           <input class="ps-10" v-model="loginForm.username" type="text" placeholder="请输入账号" maxlength="30" />
         </view>
-        <view class="mb-20 h-45px border border-vb d-fcv br-25">
+        <view class="mb-20 h-45px border border-vb d-fcv br-25 bg-white">
           <view class="iconfont icon-password text-vb fs-28 ms-15"></view>
           <input class="ps-10" v-model="loginForm.password" type="password" placeholder="请输入密码" maxlength="30" />
         </view>
         <view class="d-flex h-45px mb-20" v-if="captchaEnabled">
-          <view class="me-10 h-100 border border-vb d-fcv br-25 flex-row-auto">
+          <view class="me-10 h-100 border border-vb d-fcv br-25 bg-white flex-row-auto">
             <view class="iconfont icon-code text-vb fs-28 ms-15"></view>
             <input class="ps-10" v-model="loginForm.code" type="number" placeholder="请输入验证码" maxlength="4" />
           </view>

UI/VAP.APP/src/pages/account/register.vue

@@ -116,8 +116,8 @@ getCode()
           </uni-easyinput>
         </uni-forms-item>
       </vb-cell-group>
-      <vb-button round block custom-class="mb-15" @click="onSubmit">立即注册</vb-button>
-      <vb-button round block plain class="mt" @click="onBack">返回登录</vb-button>
+      <vb-button round block custom-class="mb-15" @click="onSubmit" size="large">立即注册</vb-button>
+      <vb-button round block plain class="mt" @click="onBack" size="large">返回登录</vb-button>
     </uni-forms>
   </view>
 </template>

UI/VAP.APP/src/static/scss/_common.scss

@@ -3874,26 +3874,31 @@
     border: var(--vb-button-border-width) solid var(--vb-button-warning-border-color);
   }
 
-  &-plain {
-    background: var(--vb-button-plain-background);
-
+  &-plain,
+  &-light {
     &.btn-vb {
       color: var(--vb-button-vb-background);
+      background: var(--vb-button-vb-light-background);
+    }
+    &.btn-default {
+      color: var(--vb-button-default-background);
+      background: var(--vb-button-default-light-background);
     }
     &.btn-primary {
       color: var(--vb-button-primary-background);
+      background: var(--vb-button-primary-light-background);
     }
     &.btn-success {
       color: var(--vb-button-success-background);
-    }
-    &.btn-default {
-      color: var(--vb-button-default-background);
+      background: var(--vb-button-success-light-background);
     }
     &.btn-danger {
       color: var(--vb-button-danger-background);
+      background: var(--vb-button-danger-light-background);
     }
     &.btn-warning {
       color: var(--vb-button-warning-background);
+      background: var(--vb-button-warning-light-background);
     }
   }
 
@@ -3907,6 +3912,7 @@
     width: 100%;
     height: var(--vb-button-large-height);
     line-height: var(--vb-button-large-height);
+    font-size: var(--vb-button-large-font-size);
   }
   &-small {
     height: var(--vb-button-small-height);

UI/VAP.APP/src/static/scss/vb-component/_base.scss

@@ -9,7 +9,7 @@ scroll-view,
   box-sizing: border-box;
   --vb-icon-font-family: "iconfont";
   --vb-color: #1989fa;
-  --vb-black: #000;
+  --vb-black: #1e2129;
   --vb-white: #fff;
   --vb-gray-1: #f7f8fa;
   --vb-gray-2: #f2f3f5;
@@ -19,19 +19,29 @@ scroll-view,
   --vb-gray-6: #969799;
   --vb-gray-7: #646566;
   --vb-gray-8: #323233;
-  --vb-red: #ee0a24;
-  --vb-blue: #1989fa;
+  --vb-red: #f1416c;
+  --vb-blue: #009ef7;
+  --vb-yellow: #ffc700;
   --vb-orange: #ff976a;
   --vb-orange-dark: #ed6a0c;
   --vb-orange-light: #fffbe8;
-  --vb-green: #07c160;
+  --vb-green: #50cd89;
   --vb-pink: #e03997;
+  --vb-info: #7239ea;
   --vb-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
   --vb-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
   --vb-primary-color: var(--vb-blue);
   --vb-success-color: var(--vb-green);
   --vb-danger-color: var(--vb-red);
-  --vb-warning-color: var(--vb-orange);
+  --vb-warning-color: var(--vb-yellow);
+  --vb-light: #f1faff;
+  --vb-primary-light: #f1faff;
+  --vb-success-light: #e8fff3;
+  --vb-info-light: #f8f5ff;
+  --vb-danger-light: #fff5f8;
+  --vb-warning-light: #fff8dd;
+  --vb-dark-light: #f9f9f9;
+  --vb-light-light: #ffffff;
   --vb-text-color: var(--vb-gray-8);
   --vb-text-color-2: var(--vb-gray-6);
   --vb-text-color-3: var(--vb-gray-5);

UI/VAP.APP/src/static/scss/vb-component/_button.scss

@@ -10,26 +10,33 @@ view {
   --vb-button-normal-padding: 0 15px;
   --vb-button-normal-font-size: var(--vb-font-size-md);
   --vb-button-large-height: 50px;
+  --vb-button-large-font-size: var(--vb-font-size-lg);
   --vb-button-default-height: 44px;
   --vb-button-default-line-height: 1.2;
   --vb-button-default-font-size: var(--vb-font-size-lg);
   --vb-button-vb-color: var(--vb-white);
   --vb-button-vb-background: var(--vb-color);
+  --vb-button-vb-light-background: var(--vb-light);
   --vb-button-vb-border-color: var(--vb-color);
   --vb-button-default-color: var(--vb-text-color);
   --vb-button-default-background: var(--vb-background-2);
+  --vb-button-default-light-background: var(--vb-gray-4);
   --vb-button-default-border-color: var(--vb-gray-4);
   --vb-button-primary-color: var(--vb-white);
   --vb-button-primary-background: var(--vb-primary-color);
+  --vb-button-primary-light-background: var(--vb-primary-light);
   --vb-button-primary-border-color: var(--vb-primary-color);
   --vb-button-success-color: var(--vb-white);
   --vb-button-success-background: var(--vb-success-color);
+  --vb-button-success-light-background: var(--vb-success-light);
   --vb-button-success-border-color: var(--vb-success-color);
   --vb-button-danger-color: var(--vb-white);
   --vb-button-danger-background: var(--vb-danger-color);
+  --vb-button-danger-light-background: var(--vb-danger-light);
   --vb-button-danger-border-color: var(--vb-danger-color);
   --vb-button-warning-color: var(--vb-white);
   --vb-button-warning-background: var(--vb-warning-color);
+  --vb-button-warning-light-background: var(--vb-warning-light);
   --vb-button-warning-border-color: var(--vb-warning-color);
   --vb-button-border-width: var(--vb-border-width);
   --vb-button-radius: var(--vb-radius-md);
@@ -51,6 +58,13 @@ view {
     }
   }
 
+  height: var(--vb-button-normal-height);
+  line-height: var(--vb-button-normal-height);
+  padding: var(--vb-button-normal-padding);
+  font-size: var(--vb-button-normal-font-size);
+  border-radius: 5px;
+  text-align: center;
+
   &--vb {
     color: var(--vb-button-vb-color);
     background: var(--vb-button-vb-background);
@@ -88,25 +102,31 @@ view {
   }
 
   &--plain {
-    background: var(--vb-button-plain-background);
+    // background: var(--vb-button-plain-background);
 
     &.vb-btn--vb {
       color: var(--vb-button-vb-background);
+      background: var(--vb-button-vb-light-background);
+    }
+    &.vb-btn--default {
+      color: var(--vb-button-default-background);
+      background: var(--vb-button-default-light-background);
     }
     &.vb-btn--primary {
       color: var(--vb-button-primary-background);
+      background: var(--vb-button-primary-light-background);
     }
     &.vb-btn--success {
       color: var(--vb-button-success-background);
-    }
-    &.vb-btn--default {
-      color: var(--vb-button-default-background);
+      background: var(--vb-button-success-light-background);
     }
     &.vb-btn--danger {
       color: var(--vb-button-danger-background);
+      background: var(--vb-button-danger-light-background);
     }
     &.vb-btn--warning {
       color: var(--vb-button-warning-background);
+      background: var(--vb-button-warning-light-background);
     }
   }
 
@@ -117,14 +137,18 @@ view {
   &--large {
     width: 100%;
     height: var(--vb-button-large-height);
+    line-height: var(--vb-button-large-height);
+    font-size: var(--vb-button-large-font-size);
   }
   &--small {
     height: var(--vb-button-small-height);
+    line-height: var(--vb-button-small-height);
     padding: var(--vb-button-small-padding);
     font-size: var(--vb-button-small-font-size);
   }
   &--mini {
     height: var(--vb-button-mini-height);
+    line-height: var(--vb-button-mini-height);
     padding: var(--vb-button-mini-padding);
     font-size: var(--vb-button-mini-font-size);
   }