fix: UI问题修复

src/views/vipLife/components/AccountInput.vue

 <template>
   <div class="Vl__account">
-    <cr-field v-model="accountMask" :placeholder="`请输入${info.name || ''}账号`" clearable>
+    <cr-field
+      v-model="accountMask"
+      :placeholder="`请输入${info.name || ''}账号`"
+      :max-length="maxLength"
+      clearable
+    >
       <template #button>
         <cr-image
           v-if="info.icon"
@@ -50,6 +55,9 @@ export default {
     };
   },
   computed: {
+    maxLength() {
+      return this.info.type !== 101 ? 13 : 30;
+    },
     accountMask: {
       get() {
         return this.info.type !== 101 ? this.phoneFormat(this.value) : this.value;
@@ -75,6 +83,7 @@ export default {
 <style lang="less" scoped>
 .Vl {
   &__account {
+    padding: 0 @padding-lg;
     position: relative;
     @{deep} .cr-field {
       padding: @padding-xs + 2 0;

src/views/vipLife/index.less

+@import '../../style/mixins.less';
 @bottom-height: 60px;
+.vip-life {
+  overflow: hidden;
+}
 @{deep} .Vl {
   &__tabs {
     .cr-tabs__item--active {
@@ -8,11 +12,10 @@
     }
   }
   &__panel {
+    height: 100%;
     background-color: @white;
     border-radius: @border-radius-lx @border-radius-lx 0 0;
-    padding: @padding-lg @padding-lg @bottom-height;
-    min-height: 340px;
-    position: relative;
+    padding-top: @padding-lg;
     &-placeholder {
       margin-bottom: -@padding-lg;
     }
@@ -23,7 +26,8 @@
       padding: @padding-lg + @padding-unit 0 @padding-sm;
     }
     &-content {
-      height: 58vh;
+      height: calc(100vh - @bottom-height - 121px - 44px - 48px);
+      padding: 0 @padding-lg;
       overflow-y: scroll;
       &::-webkit-scrollbar {
         display:none;
@@ -61,8 +65,12 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    .iphonex-fix-padding();
     .cr-button {
-      .text-16();
+     font-size: 16px;
+     span {
+       font-weight: @font-weight-bold;
+     }
     }
   }
 

src/views/vipLife/index.vue

 <template>
-  <div class="page page__nopad">
+  <div class="page page__nopad vip-life">
     <cr-tabs v-model="currentTab" class="Vl__tabs" @click="handleTabChange">
       <cr-tab v-for="(item, index) in spuData" :key="index" :title="item.name" :name="+item.type" />
     </cr-tabs>
@@ -42,6 +42,7 @@ import SpuList from './components/SpuList.vue';
 import SkuList from './components/SkuList.vue';
 import AccountInput from './components/AccountInput.vue';
 import { throttle } from '@/service/utils.service';
+import { isPhone } from '@/service/validation.service';
 import { ITEM_WIDTH } from './components/constant';
 export default {
   name: 'VipLife',
@@ -163,6 +164,9 @@ export default {
     goOrder: throttle(async function() {
       if (!this.account && this.spuInfo.rechargeAccountType !== 2)
         return this.$toast.fail('请填写账号！');
+      if (this.spuInfo.type !== 101 && !isPhone(this.account)) {
+        return this.$toast.fail('请填写正确的手机号！');
+      }
       if (!this.skuInfo.skuNo) return this.$toast.fail('请选择类型！');
       this.$track.registeredEvents('h5_OtherRechargePageRechargeNowClick', {
         classify_name: this.spuData[this.currentTab - 1].name,