1

src/pages/PersonalCenter.vue

@@ -2,26 +2,51 @@
   <div class="personal">
     <Breadcrumb />
     <div class="personal-head">
-      <div class="personal-head-left">
-        <el-avatar :size="100"
-          :src="appStore?.userInfo?.userAvatar ? appStore.userInfo.userAvatar : appStore.avatarDefault" />
-        <div class="personal-user-info">
-          <div class="personal-username">
-            <div class="">{{ appStore?.userInfo?.nickName }}</div>
-            <template v-if="['0', '1', '2'].includes(appStore?.userInfo?.memberType)"></template>
-            <img :src="`/src/assets/imgs/my/vip${appStore?.userInfo?.memberType}@2x.png`" alt="">
-            <!-- memberType  会员类型memberType 会员类型分为企业会员（2）和个人会员（1）、免费会员（0） -->
-          </div>
-          <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{ appStore?.userInfo?.userPhone
-          }}
+      <el-avatar :size="100"
+        :src="appStore?.userInfo?.userAvatar ? appStore.userInfo.userAvatar : appStore.avatarDefault" />
+      <div class="personal-head-box">
+        <div class="personal-head-top">
+          <div class="personal-head-left">
+
+            <div class="personal-user-info">
+              <div class="personal-username">
+                <div class="">{{ appStore?.userInfo?.nickName }}</div>
+                <template v-if="['0', '1', '2'].includes(appStore?.userInfo?.memberType)"></template>
+                <img :src="`/src/assets/imgs/my/vip${appStore?.userInfo?.memberType}@2x.png`" alt="">
+                <!-- memberType  会员类型memberType 会员类型分为企业会员（2）和个人会员（1）、免费会员（0） -->
+              </div>
+              <div class="personal-user-phone mt4">{{ $t('personalCenter.phoneNumber') }}：{{
+                appStore?.userInfo?.userPhone
+              }}
+              </div>
+              <div class="" v-if="['1', '2'].includes(appStore?.userInfo?.memberType)">{{
+                $t('personalCenter.vipEndTime')
+              }}: {{
+                  appStore?.userInfo?.memberExpire }}</div>
+              <div class="mt4" v-if="appStore?.userInfo?.skillTags">
+                <el-button v-for="(item, index) in appStore.userInfo.skillTags.split(',')" type="primary" plain>{{ item
+                }}</el-button>
+              </div>
+
+            </div>
+
           </div>
-          <div class="" v-if="['1', '2'].includes(appStore?.userInfo?.memberType)">{{ $t('personalCenter.vipEndTime')
-          }}: {{
-              appStore?.userInfo?.memberExpire }}</div>
-          <div class="mt4" v-if="appStore?.userInfo?.skillTags">
-            <el-button v-for="(item, index) in appStore.userInfo.skillTags.split(',')" type="primary" plain>{{ item
-            }}</el-button>
+          <div class="personal-head-right">
+            <div @click="dialogVisible = true" class="personal-head-right-li">
+              <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
+              <div class="">{{ $t('personalCenter.editProfile') }}</div>
+            </div>
+            <div @click="router.push({ path: '/member' })" class="personal-head-right-li">
+              <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
+              <div class="">{{ $t('personalCenter.openMembership') }}</div>
+            </div>
+            <div @click="signIn" class="personal-head-right-li gradient">
+              <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
+              <div class="">{{ $t('personalCenter.checkIn') }}</div>
+            </div>
           </div>
+        </div>
+        <div class="personal-head-bot">
           <div class="personal-user-list">
             <div class="personal-user-li">
               <span>{{ appStore?.userInfo?.pointsBalance || 0 }}</span>
@@ -32,36 +57,23 @@
               <span>{{ appStore?.userInfo?.baoMiBalance || 0 }}</span>
               <span>{{ $t('common.baomibi') }}</span>
             </div>
-
-
-            <div class="">
-
-              <el-button type="primary">充值</el-button>
+            <div class="btn">
+              <el-button type="primary" @click="router.push({
+                path: `/order-confirm`,
+              })">充值</el-button>
             </div>
 
 
-            <div class="personal-user-line"></div>
+            <!-- <div class="personal-user-line"></div> -->
+            
+          </div>
+          <div class="personal-user-list">
             <div class="personal-user-li">
               <span>{{ collectCount }}</span>
               <span>{{ $t('common.collect') }}</span>
             </div>
           </div>
         </div>
-
-      </div>
-      <div class="personal-head-right">
-        <div @click="dialogVisible = true" class="personal-head-right-li">
-          <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
-          <div class="">{{ $t('personalCenter.editProfile') }}</div>
-        </div>
-        <div @click="router.push({ path: '/member' })" class="personal-head-right-li">
-          <img src="/src/assets/imgs/my/huiyuan@2x.png" alt="">
-          <div class="">{{ $t('personalCenter.openMembership') }}</div>
-        </div>
-        <div @click="signIn" class="personal-head-right-li gradient">
-          <img src="/src/assets/imgs/my/qiandao@2x.png" alt="">
-          <div class="">{{ $t('personalCenter.checkIn') }}</div>
-        </div>
       </div>
     </div>
     <div class="personal-main">
@@ -225,9 +237,9 @@
                 :input-style="{
                   backgroundColor: 'transparent',
                 }">
-              <template #append>
+                <template #append>
                   <el-button :icon="Refresh" />
-                </template>  
+                </template>
               </el-input>
             </el-form-item>
 
@@ -248,9 +260,9 @@
                 :input-style="{
                   backgroundColor: 'transparent',
                 }">
-              <template #append>
+                <template #append>
                   <el-button :icon="Refresh" />
-                </template>  
+                </template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -271,9 +283,9 @@
                 :input-style="{
                   backgroundColor: 'transparent',
                 }">
-               <template #append>
+                <template #append>
                   <el-button :icon="Refresh" />
-                </template> 
+                </template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -321,7 +333,7 @@
 </template>
 <script setup lang="ts">
 
-import { Plus,Refresh } from '@element-plus/icons-vue'
+import { Plus, Refresh } from '@element-plus/icons-vue'
 
 import { useAppStore } from '@/pinia/appStore'
 
@@ -714,8 +726,51 @@ div {
   padding: 24px 16px;
   background: #FFFFFF;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+
+  .personal-head-box {
+    flex: 1;
+  }
+
+  .personal-head-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .personal-head-bot {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .personal-user-list {
+      display: flex;
+
+      align-items: center;
+      .btn {
+        margin-left: 16px;
+      }
+      .personal-user-li {
+        span {
+          color: #333333;
+          font-size: 14px;
+
+          &:first-child {
+            font-size: 28px;
+            font-weight: bold;
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .personal-user-line {
+        margin: 0 16px;
+        height: 20px;
+        width: 2px;
+        background: #EBEEF5;
+      }
+    }
+  }
 
   .personal-head-left {
     display: flex;
@@ -737,31 +792,7 @@ div {
         }
       }
 
-      .personal-user-list {
-        display: flex;
-        margin-top: 16px;
-        align-items: center;
 
-        .personal-user-li {
-          span {
-            color: #333333;
-            font-size: 14px;
-
-            &:first-child {
-              font-size: 28px;
-              font-weight: bold;
-              margin-right: 10px;
-            }
-          }
-        }
-
-        .personal-user-line {
-          margin: 0 16px;
-          height: 20px;
-          width: 2px;
-          background: #EBEEF5;
-        }
-      }
     }
   }