Browse Source

fix:我的界面样式调整

jianghaili 14 hours ago
parent
commit
c31eec4100
1 changed files with 87 additions and 145 deletions
  1. 87 145
      pages/my/index.vue

+ 87 - 145
pages/my/index.vue

@@ -32,7 +32,7 @@
             <image
               src="@/static/images/jobApplicant/qiehuan.svg"
               mode="scaleToFill"
-              style="margin-top: 40rpx;"
+              style="margin-top: 40rpx"
               @click="bindQe(userType)"
             />
             <!-- <image
@@ -159,7 +159,7 @@
             <text class="button-text" @click="goBusinessLicense">立即参与</text>
           </view>
         </view>
-      </view>       
+      </view>
       <!-- vip -->
       <!-- <view
         class="vip flex justify-center"
@@ -251,9 +251,9 @@
       </view>
       <!-- 更多工具 -->
       <view class="utils flex justify-center">
-        <view class="utils-box flex justify-center">
+        <view class="utils-box">
           <view class="utils-box-c">
-            <view class="utils-box-c-t flex justify-between align-center">
+            <view class="util-list">
               <!-- <view class="flex justify-center flex-wrap" style="width: 102rpx;" @click="goNav('/package/my/resume')">
 								<image src="../../static/images/my/icon/utils/utils1.png"
 									style="width: 54rpx;height: 54rpx;" mode=""></image>
@@ -261,11 +261,7 @@
 									我的简历
 								</view>
 							</view> -->
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNavNoLogin('/pages/my/invitationUser')"
-              >
+              <view class="util-item" @click="goNavNoLogin('/pages/my/invitationUser')">
                 <image
                   src="../../static/images/my/icon/utils/utils2.png"
                   style="width: 54rpx; height: 54rpx"
@@ -280,8 +276,7 @@
               </view>
               <view
                 v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
+                class="util-item"
                 @click="goNavNoLogin('/my/setting/feedbackIndex')"
               >
                 <image
@@ -296,11 +291,7 @@
                   帮助中心
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goChat"
-              >
+              <view class="util-item" @click="goChat">
                 <image
                   src="../../static/images/my/icon/utils/utils4.png"
                   style="width: 54rpx; height: 54rpx"
@@ -313,11 +304,7 @@
                   联系客服
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNavNoLogin('/my/setting/mimi')"
-              >
+              <view class="util-item" @click="goNavNoLogin('/my/setting/mimi')">
                 <image
                   src="../../static/images/my/icon/utils/utils5.png"
                   style="width: 54rpx; height: 54rpx"
@@ -330,8 +317,6 @@
                   隐私协议
                 </view>
               </view>
-            </view>
-            <view class="utils-box-c-b flex justify-between align-center">
               <!-- <view class="flex justify-center flex-wrap" style="width: 112rpx;" @click="goNav('/my/setting/xieyi')">
 								<image src="../../static/images/my/icon/utils/utils6.png"
 									style="width: 54rpx;height: 54rpx;" mode=""></image>
@@ -339,11 +324,7 @@
 									用户协议
 								</view>
 							</view> -->
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNavNoLogin('/my/setting/xieyi')"
-              >
+              <view class="util-item" @click="goNavNoLogin('/my/setting/xieyi')">
                 <image
                   src="../../static/images/my/icon/utils/utils6.png"
                   style="width: 54rpx; height: 54rpx"
@@ -356,11 +337,7 @@
                   用户协议
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNavNoLogin('/my/setting/about')"
-              >
+              <view class="util-item" @click="goNavNoLogin('/my/setting/about')">
                 <!-- goNavNoLogin('/my/setting/about') -->
                 <!-- pages/my/jobApplicant/startPage -->
                 <image
@@ -375,12 +352,7 @@
                   关于我们
                 </view>
               </view>
-              <view
-                v-if="token"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goOut()"
-              >
+              <view v-if="token" class="util-item" @click="goOut()">
                 <image
                   src="../../static/images/my/icon/utils/utils8.png"
                   style="width: 54rpx; height: 54rpx"
@@ -393,11 +365,7 @@
                   退出登录
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/pages/my/ruleCenter')"
-              >
+              <view class="util-item" @click="goNav('/pages/my/ruleCenter')">
                 <image
                   src="../../static/images/my/icon/utils/utils5.png"
                   style="width: 54rpx; height: 54rpx"
@@ -432,7 +400,7 @@
             <image
               src="/static/images/jobApplicant/qiehuan.svg"
               mode="scaleToFill"
-              style="margin-top: 40rpx;"
+              style="margin-top: 40rpx"
               @click="bindQe(userType)"
             />
             <!-- <image
@@ -482,15 +450,24 @@
             class="info-box-num flex align-center justify-between"
             v-if="XCXIsSelect != '否'"
           >
-            <view class="info-box-num-td" @click="goNav('/pages/recruitmentData/communicationRecords')">
+            <view
+              class="info-box-num-td"
+              @click="goNav('/pages/recruitmentData/communicationRecords')"
+            >
               <view class="info-box-num-td-num"> 0 </view>
               <view class="info-box-num-td-name">沟通过</view>
             </view>
-            <view class="info-box-num-td" @click="goNav('/pages/recruitmentData/communicationRecords')">
+            <view
+              class="info-box-num-td"
+              @click="goNav('/pages/recruitmentData/communicationRecords')"
+            >
               <view class="info-box-num-td-num"> 0 </view>
               <view class="info-box-num-td-name">面试</view>
             </view>
-            <view class="info-box-num-td" @click="goNav('/pages/recruitmentData/communicationRecords')">
+            <view
+              class="info-box-num-td"
+              @click="goNav('/pages/recruitmentData/communicationRecords')"
+            >
               <view class="info-box-num-td-num"> 0 </view>
               <view class="info-box-num-td-name">收藏</view>
             </view>
@@ -505,28 +482,24 @@
       <!-- 升级VIP -->
       <view class="vip-upgrade-banner" @click="goVipUpgrade">
         <view class="vip-banner-content">
-          <view class="vip-banner-text">
-            升级VIP专享超值权益
-          </view>
-          <view class="vip-upgrade-button">
-            去升级
-          </view>
+          <view class="vip-banner-text"> 升级VIP专享超值权益 </view>
+          <view class="vip-upgrade-button"> 去升级 </view>
         </view>
       </view>
 
       <!-- 职位管理 -->
-        <view class="job-management-card" @click="goJobManagement">
-          <view class="job-management-content">
-            <view class="job-count-text">
-              <text class="count-number">1</text>
-              <text class="count-label">个在线职位</text>
-            </view>
-            <view class="arrow-icon">
-              <u-icon name="arrow-right" color="#999" size="24"></u-icon>
-            </view>
+      <view class="job-management-card" @click="goJobManagement">
+        <view class="job-management-content">
+          <view class="job-count-text">
+            <text class="count-number">1</text>
+            <text class="count-label">个在线职位</text>
+          </view>
+          <view class="arrow-icon">
+            <u-icon name="arrow-right" color="#999" size="24"></u-icon>
           </view>
         </view>
-        
+      </view>
+
       <!-- vip -->
       <!-- <view
         class="vip flex justify-center"
@@ -722,11 +695,10 @@
       <view class="utils flex justify-center">
         <view class="utils-box flex justify-center">
           <view class="utils-box-c">
-            <view class="utils-box-c-t flex justify-between align-center">
+            <view class="util-list">
               <view
                 v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
+                class="util-item"
                 @click="goNav('/package/myLove/myLove')"
               >
                 <image
@@ -743,8 +715,7 @@
               </view>
               <view
                 v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
+                class="util-item"
                 @click="goNav('/my/jilu/jilu')"
               >
                 <image
@@ -759,12 +730,7 @@
                   面试记录
                 </view>
               </view>
-              <view
-                v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/my/renzheng/zhuanrang')"
-              >
+              <view class="util-item" v-if="XCXIsSelect != '否'" @click="goNav('/my/renzheng/zhuanrang')">
                 <image
                   src="../../static/images/my/icon/utils/qy.png"
                   style="width: 54rpx; height: 54rpx"
@@ -779,8 +745,7 @@
               </view>
               <view
                 v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
+                class="util-item"
                 @click="goNav('/package/blackList/blackList')"
               >
                 <image
@@ -795,13 +760,7 @@
                   黑名单
                 </view>
               </view>
-            </view>
-            <view class="utils-box-c-b flex justify-between align-center">
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/pages/my/invitationUserqy')"
-              >
+              <view class="util-item" @click="goNav('/pages/my/invitationUserqy')">
                 <image
                   src="../../static/images/my/icon/utils/utils2.png"
                   style="width: 54rpx; height: 54rpx"
@@ -814,11 +773,7 @@
                   邀请好友
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goChat"
-              >
+              <view class="util-item" @click="goChat">
                 <image
                   src="../../static/images/my/icon/utils/utils4.png"
                   style="width: 54rpx; height: 54rpx"
@@ -831,11 +786,7 @@
                   联系客服
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/my/setting/mimi')"
-              >
+              <view class="util-item" @click="goNav('/my/setting/mimi')">
                 <image
                   src="../../static/images/my/icon/utils/utils5.png"
                   style="width: 54rpx; height: 54rpx"
@@ -848,11 +799,7 @@
                   隐私协议
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/my/setting/xieyi')"
-              >
+              <view class="util-item" @click="goNav('/my/setting/xieyi')">
                 <image
                   src="../../static/images/my/icon/utils/utils6.png"
                   style="width: 54rpx; height: 54rpx"
@@ -865,13 +812,7 @@
                   用户协议
                 </view>
               </view>
-            </view>
-            <view class="utils-box-c-b flex justify-between align-center">
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goNav('/my/setting/about')"
-              >
+              <view class="util-item" @click="goNav('/my/setting/about')">
                 <image
                   src="../../static/images/my/icon/utils/utils7.png"
                   style="width: 54rpx; height: 54rpx"
@@ -886,8 +827,7 @@
               </view>
               <view
                 v-if="XCXIsSelect != '否'"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
+                class="util-item"
                 @click="goNav('/my/setting/feedbackIndex')"
               >
                 <image
@@ -902,12 +842,7 @@
                   帮助中心
                 </view>
               </view>
-              <view
-                v-if="token"
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx"
-                @click="goOut()"
-              >
+              <view v-if="token" class="util-item" @click="goOut()">
                 <image
                   src="../../static/images/my/icon/utils/utils8.png"
                   style="width: 54rpx; height: 54rpx"
@@ -920,16 +855,6 @@
                   退出登录
                 </view>
               </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx; height: 0"
-              >
-              </view>
-              <view
-                class="flex justify-center flex-wrap"
-                style="width: 112rpx; height: 0"
-              >
-              </view>
             </view>
           </view>
         </view>
@@ -1050,7 +975,7 @@ export default {
         url: "/pages/my/switchRoles",
       });
     },
-    
+
     // 在线客服
     goChat() {
       let that = this;
@@ -1355,18 +1280,18 @@ export default {
     goJobManagement() {
       if (uni.getStorageSync("token")) {
         uni.navigateTo({
-          url: '/pages/jobManagement/jobManagement'
+          url: "/pages/jobManagement/jobManagement",
         });
       } else {
         this.noLogin();
       }
     },
-    
+
     // VIP升级页面跳转
     goVipUpgrade() {
       if (uni.getStorageSync("token")) {
         uni.navigateTo({
-          url: '/pages/my/VIP/benefits'
+          url: "/pages/my/VIP/benefits",
         });
       } else {
         this.noLogin();
@@ -1821,16 +1746,20 @@ page {
 // VIP升级横幅
 .vip-upgrade-banner {
   margin: 20rpx 40rpx 10rpx 40rpx;
-  background: linear-gradient(165.89deg, rgba(251, 231, 185, 1),rgba(240, 176, 72, 1) 100%);
+  background: linear-gradient(
+    165.89deg,
+    rgba(251, 231, 185, 1),
+    rgba(240, 176, 72, 1) 100%
+  );
   border-radius: 16rpx;
   padding: 32rpx;
   box-shadow: 0 4rpx 12rpx rgba(255, 154, 102, 0.3);
-  
+
   .vip-banner-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     .vip-banner-text {
       flex: 1;
       color: rgba(1, 107, 246, 1);
@@ -1841,14 +1770,18 @@ page {
       letter-spacing: 0px;
       text-align: left;
     }
-    
+
     .vip-upgrade-button {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100rpx;
       height: 42rpx;
-      background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%,rgba(255, 102, 0, 0.21),rgba(255, 65, 86, 0.6) 100%);
+      background: radial-gradient(
+        184.79% 115.97% at 92% 113.99999999999999%,
+        rgba(255, 102, 0, 0.21),
+        rgba(255, 65, 86, 0.6) 100%
+      );
       border-radius: 28rpx;
       color: rgba(255, 255, 255, 1);
       font-family: HarmonyOS Sans SC;
@@ -1868,30 +1801,30 @@ page {
   border-radius: 12rpx;
   padding: 12rpx 32rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-  
+
   .job-management-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    
+
     .job-count-text {
       display: flex;
       align-items: center;
-      
+
       .count-number {
         color: #016bf6;
         font-size: 32rpx;
         font-weight: 600;
         margin-right: 8rpx;
       }
-      
+
       .count-label {
         color: #666666;
         font-size: 28rpx;
         font-weight: 400;
       }
     }
-    
+
     .arrow-icon {
       display: flex;
       align-items: center;
@@ -1954,7 +1887,6 @@ page {
 }
 .info {
   width: 100%;
-
   box-sizing: border-box;
   .info-box {
     width: 686rpx;
@@ -2124,26 +2056,36 @@ page {
   width: 100%;
   // height: 308rpx;
   margin-top: 20rpx;
-
+  margin-bottom: 20rpx;
   .utils-box {
     width: 686rpx;
     height: 100%;
     background-color: #ffffff;
     border-radius: 24rpx;
-
+    padding: 40rpx 20rpx;
+    box-sizing: border-box;
     .utils-box-c {
-      width: 626rpx;
+      width: 100%;
       height: 100%;
+      .util-list {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap:30rpx 20rpx;
+        .util-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+      }
     }
 
     .utils-box-c-t {
       width: 100%;
-      height: calc(308rpx / 2);
     }
 
     .utils-box-c-b {
-      width: 100%;
-      height: calc(308rpx / 2);
+      background-color: #016bf6;
     }
   }
 }