Explorar o código

fix:我的界面样式更改

jianghaili hai 2 semanas
pai
achega
4c73c8ed89

+ 241 - 47
pages/my/index.vue

@@ -1,5 +1,23 @@
 <template>
-  <view style="padding-bottom: 40rpx">
+  <view class="my-center">
+    <view class="my-bg">
+      <image
+        src="@/static/images/my/icon/paopao.svg"
+        mode="aspectFill"
+        class="paopao paopao-one"
+      />
+      <image
+        src="@/static/images/my/icon/paopao.svg"
+        mode="aspectFill"
+        class="paopao paopao-two"
+      />
+      <image
+        src="@/static/images/my/icon/paopao.svg"
+        mode="aspectFill"
+        class="paopao paopao-three"
+      />
+      <view class="my-bg-bottom"></view>
+    </view>
     <!-- 用户端 -->
     <block v-if="userType == 1">
       <view class="info flex justify-center">
@@ -9,12 +27,17 @@
             v-if="token && XCXIsSelect != '否'"
           >
             <image
+              src="/static/images/jobApplicant/qiehuan.svg"
+              mode="scaleToFill"
+              @click="bindQe(userType)"
+            />
+            <!-- <image
               src="../../static/images/my/icon/selectUser.png"
               style="width: 40rpx; height: 100%; margin-right: 40rpx"
               mode=""
               @click="bindQe(userType)"
             >
-            </image>
+            </image> -->
             <!-- <image src="../../static/images/my/icon/set.png" style="width: 44rpx;height: 100%;" mode="">
 						</image> -->
           </view>
@@ -56,8 +79,11 @@
                   class="info-box-header-r-bj flex align-center"
                   @click="goNav('/package/my/resume')"
                 >
-                  <u-icon name="edit-pen" color="#1D1D1D" size="28"></u-icon>
                   编辑简历
+                  <image
+                    src="@/static/images/jobApplicant/edit-user.svg"
+                    mode="scaleToFill"
+                  />
                 </view>
               </view>
             </view>
@@ -84,13 +110,8 @@
             class="info-box-num flex align-center justify-between"
             v-if="XCXIsSelect != '否'"
           >
-            <view
-              class="info-box-num-td"
-              @click="goNav('/pages/my/onlineResume')"
-            >
-              <view class="info-box-num-td-num">
-                1
-              </view>
+            <view class="info-box-num-td" @click="goNav('/pages/my/onlineResume')">
+              <view class="info-box-num-td-num"> 1 </view>
               <view class="info-box-num-td-name"> 在线简历 </view>
             </view>
             <view
@@ -123,8 +144,20 @@
           </view>
         </view>
       </view>
+      <!-- 推广横幅 -->
+      <view class="promo-banner">
+        <view class="banner-content">
+          <view class="banner-text">
+            <text class="banner-title">牛人找资金</text>
+            <text class="banner-subtitle">带上你的超级项目,这里有无限的可能</text>
+          </view>
+          <view class="banner-button">
+            <text class="button-text">立即参与</text>
+          </view>
+        </view>
+      </view>
       <!-- vip -->
-      <view
+      <!-- <view
         class="vip flex justify-center"
         @click="goNav('/my/vip/index')"
         v-if="XCXIsSelect != '否'"
@@ -169,7 +202,7 @@
             </view>
           </view>
         </view>
-      </view>
+      </view> -->
       <!-- 求职服务 -->
       <view
         class="jobServer flex justify-center"
@@ -184,28 +217,28 @@
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNav('/package/my/resume')"
               >
-                <image src="../../static/images/my/icon/server1.png" mode=""></image>
+                <image src="../../static/images/index/qwzn.svg" mode=""></image>
                 <view class=""> 我的简历 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="refresh()"
               >
-                <image src="../../static/images/my/icon/server2.png" mode=""></image>
+                <image src="../../static/images/index/cpbk.svg" mode=""></image>
                 <view class=""> 简历刷新 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNav('/package/my/pingbi')"
               >
-                <image src="../../static/images/my/icon/server3.png" mode=""></image>
+                <image src="../../static/images/index/fwzx.svg" mode=""></image>
                 <view class=""> 屏蔽公司 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNav('/my/jilu/jiluUser')"
               >
-                <image src="../../static/images/my/icon/server4.png" mode=""></image>
+                <image src="../../static/images/index/rmhd.svg" mode=""></image>
                 <view class=""> 我的面试 </view>
               </view>
             </view>
@@ -324,8 +357,8 @@
                 style="width: 112rpx"
                 @click="goNavNoLogin('/pages/my/jobApplicant/startPage')"
               >
-              <!-- goNavNoLogin('/my/setting/about') -->
-              <!-- pages/my/jobApplicant/startPage -->
+                <!-- goNavNoLogin('/my/setting/about') -->
+                <!-- pages/my/jobApplicant/startPage -->
                 <image
                   src="../../static/images/my/icon/utils/utils7.png"
                   style="width: 54rpx; height: 54rpx"
@@ -393,12 +426,17 @@
             class="info-box-btn flex justify-end align-center"
           >
             <image
+              src="/static/images/jobApplicant/qiehuan.svg"
+              mode="scaleToFill"
+              @click="bindQe(userType)"
+            />
+            <!-- <image
               src="../../static/images/my/icon/selectUser.png"
               style="width: 40rpx; height: 100%; margin-right: 40rpx"
               @click="bindQe(userType)"
               mode=""
             >
-            </image>
+            </image> -->
             <!-- <image src="../../static/images/my/icon/set.png" style="width: 44rpx;height: 100%;" mode="">
 						</image> -->
           </view>
@@ -425,15 +463,30 @@
                 class="info-box-header-r-bj flex align-center"
                 @click="goNav('/my/renzheng/index')"
               >
-                <u-icon name="edit-pen" color="#1D1D1D" size="28"></u-icon>
                 编辑企业信息
+                <image
+                  src="@/static/images/jobApplicant/edit-user.svg"
+                  mode="scaleToFill"
+                />
               </view>
             </view>
           </view>
         </view>
       </view>
+      <!-- 推广横幅 -->
+      <view class="promo-banner">
+        <view class="banner-content">
+          <view class="banner-text">
+            <text class="banner-title">牛人找资金</text>
+            <text class="banner-subtitle">带上你的超级项目,这里有无限的可能</text>
+          </view>
+          <view class="banner-button">
+            <text class="button-text">立即参与</text>
+          </view>
+        </view>
+      </view>
       <!-- vip -->
-      <view
+      <!-- <view
         class="vip flex justify-center"
         @click="goNav('/my/vip/index')"
         v-if="XCXIsSelect != '否'"
@@ -478,7 +531,7 @@
             </view>
           </view>
         </view>
-      </view>
+      </view> -->
       <!-- 求职服务 -->
       <view
         class="jobServer flex justify-center"
@@ -493,28 +546,28 @@
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNavStatus('/package/addJob/addJob')"
               >
-                <image src="../../static/images/my/icon/server1.png" mode=""></image>
+                <image src="../../static/images/index/qwzn.svg" mode=""></image>
                 <view class=""> 发布招聘 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="refreshJob()"
               >
-                <image src="../../static/images/my/icon/server2.png" mode=""></image>
+                <image src="../../static/images/index/cpbk.svg" mode=""></image>
                 <view class=""> 招聘刷新 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNav('/my/renzheng/index')"
               >
-                <image src="../../static/images/my/icon/server3.png" mode=""></image>
+                <image src="../../static/images/index/fwzx.svg" mode=""></image>
                 <view class=""> 认证中心 </view>
               </view>
               <view
                 class="jobServer-box-btn-item flex justify-center flex-wrap"
                 @click="goNav('/package/deliveryRecord/deliveryRecord')"
               >
-                <image src="../../static/images/my/icon/server4.png" mode=""></image>
+                <image src="../../static/images/index/rmhd.svg" mode=""></image>
                 <view class=""> 已投简历 </view>
               </view>
             </view>
@@ -1591,23 +1644,145 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
-  background-color: #f2f6fc;
+  // background-color: #f2f6fc;
 }
+// 推广横幅
+.promo-banner {
+  margin: 40rpx;
+  margin-top: 60rpx;
+  background: var(
+    --线性渐变,
+    linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%)
+  );
+  border-radius: 24rpx;
+  padding: 16rpx 40rpx;
+
+  .banner-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .banner-text {
+      flex: 1;
+
+      .banner-title {
+        color: rgba(255, 255, 255, 1);
+        font-family: HarmonyOS Sans SC;
+        font-size: 32rpx;
+        font-weight: 900;
+        line-height: 48rpx;
+        letter-spacing: 0%;
+        text-align: left;
+        display: block;
+        margin-bottom: 8rpx;
+        transform: skew(-10deg);
+      }
+
+      .banner-subtitle {
+        color: rgba(255, 255, 255, 0.7);
+        font-family: HarmonyOS Sans SC;
+        font-size: 26rpx;
+        font-weight: 400;
+        line-height: 36rpx;
+        letter-spacing: 0%;
+        text-align: left;
+        display: block;
+      }
+    }
 
+    .banner-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 138rpx;
+      height: 48rpx;
+      border-radius: 26px;
+      background: #ffffff;
+
+      .button-text {
+        background: var(
+          --线性渐变,
+          linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%)
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        text-fill-color: transparent;
+        font-family: HarmonyOS Sans SC;
+        font-size: 26rpx;
+        font-weight: 500;
+        line-height: 18px;
+        letter-spacing: 0%;
+        text-align: left;
+      }
+    }
+  }
+}
+.my-center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.my-bg {
+  /* 容器 52 */
+  width: 100%;
+  height: 656rpx;
+  background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  .paopao {
+    position: absolute;
+    width: 662rpx;
+    height: 662rpx;
+  }
+  .paopao-one {
+    left: -221rpx;
+    top: -170rpx;
+  }
+  .paopao-two {
+    top: -374rpx;
+    right: -64rpx;
+  }
+  .paopao-three {
+    width: 320rpx;
+    height: 320rpx;
+    bottom: -170rpx;
+    left: -40rpx;
+  }
+  .my-bg-bottom {
+    background: linear-gradient(
+      to top,
+      rgba(250, 250, 250, 1),
+      rgba(255, 255, 255, 0.5) 46%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    height: 328rpx;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
 .info {
   width: 100%;
-  background: linear-gradient(to bottom, #d9feed, #fbfdf0, #f2f6fc);
-
   .info-box {
     width: 686rpx;
     padding-bottom: 20rpx;
-
     .info-box-btn {
       width: 100%;
-      height: 44rpx;
-      margin-top: 20rpx;
+      padding:  44rpx 0 80rpx 0;
+      box-sizing: border-box;
+      image {
+        width: 32rpx;
+        height: 32rpx;
+      }
     }
 
     .info-box-header {
@@ -1619,24 +1794,36 @@ page {
         margin-right: 20rpx;
 
         image {
-          width: 90rpx;
-          height: 90rpx;
+          width: 128rpx;
+          height: 128rpx;
           border-radius: 50%;
         }
       }
 
       .info-box-header-r {
         .info-box-header-r-name {
-          color: #1d1d1d;
-          font-size: 32rpx;
-          font-weight: 800;
-          margin-bottom: 10rpx;
+          color: rgba(255, 255, 255, 1);
+          font-family: DM Sans;
+          font-size: 48rpx;
+          font-weight: 400;
+          line-height: 72rpx;
+          text-align: left;
         }
 
         .info-box-header-r-bj {
-          color: #1d1d1d;
+          color: rgba(255, 255, 255, 1);
+          font-family: DM Sans;
           font-size: 24rpx;
           font-weight: 400;
+          line-height: 32rpx;
+          letter-spacing: 0%;
+          text-align: left;
+          margin-top: 8rpx;
+          image {
+            width: 32rpx;
+            height: 32rpx;
+            margin-left: 8rpx;
+          }
         }
       }
     }
@@ -1695,13 +1882,13 @@ page {
 .jobServer {
   width: 100%;
   height: 235rpx;
-  margin-top: -46rpx;
+  margin-top: 46rpx;
   z-index: 1;
-
   .jobServer-box {
     width: 686rpx;
     height: 100%;
-    background-color: #ffffff;
+    // background-color: #fff;
+    // background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
     border-radius: 24rpx;
     z-index: 1;
 
@@ -1711,11 +1898,13 @@ page {
     }
 
     .jobServer-box-title {
-      margin-top: 30rpx;
+      margin-top: 20rpx;
       width: 100%;
-      color: #161616;
+      color: rgba(29, 33, 41, 1);
+      font-family: DM Sans;
       font-size: 28rpx;
-      font-weight: 800;
+      font-weight: 500;
+      line-height: 44rpx;
     }
 
     .jobServer-box-btn {
@@ -1728,8 +1917,13 @@ page {
 
       .jobServer-box-btn-item {
         width: 120rpx;
-        color: #161616;
+        color: rgba(56, 58, 63, 1);
+        font-family: DM Sans;
         font-size: 24rpx;
+        font-weight: 400;
+        line-height: 36rpx;
+        letter-spacing: 0%;
+        text-align: center;
 
         image {
           width: 62rpx;

+ 6 - 0
static/images/jobApplicant/edit-user.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none">
+	<rect id="svg 26" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
+	<path id="矢量 31" d="M12.2447 14.5309L2.77536 14.5309C2.05699 14.5309 1.46924 13.9431 1.46924 13.2247L1.46924 3.75534C1.46924 3.03697 2.05699 2.44922 2.77536 2.44922L9.14271 2.44922C9.3223 2.44922 9.46924 2.59616 9.46924 2.77575C9.46924 2.95534 9.3223 3.10228 9.14271 3.10228L2.77536 3.10228C2.41618 3.10228 2.1223 3.39616 2.1223 3.75534L2.1223 13.2247C2.1223 13.5839 2.41618 13.8778 2.77536 13.8778L12.2447 13.8778C12.6039 13.8778 12.8978 13.5839 12.8978 13.2247L12.8978 6.85738C12.8978 6.67779 13.0447 6.53085 13.2243 6.53085C13.4039 6.53085 13.5509 6.67779 13.5509 6.85738L13.5509 13.2247C13.5509 13.9431 12.9631 14.5309 12.2447 14.5309L12.2447 14.5309Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+	<path id="矢量 32" d="M7.79578 8.80825C7.64068 8.80825 7.49374 8.74294 7.37129 8.62866C7.1917 8.44907 7.14272 8.18784 7.24884 7.95927L7.73864 6.91437C7.89374 6.57968 8.10598 6.27764 8.35904 6.02458L12.6203 1.76335C13.0366 1.34703 13.7468 1.36335 14.1876 1.81233C14.6366 2.26131 14.6529 2.96335 14.2366 3.37968L9.97537 7.6409C9.71414 7.90213 9.42027 8.10621 9.08557 8.26131L8.04068 8.75111C7.95904 8.79192 7.87741 8.80825 7.79578 8.80825L7.79578 8.80825ZM13.355 2.12254C13.2488 2.12254 13.1509 2.16335 13.0774 2.23682L8.81619 6.48988C8.6121 6.69396 8.44884 6.9307 8.32639 7.19192L7.9019 8.08988L8.79986 7.66539C9.06108 7.54294 9.29782 7.37968 9.5019 7.1756L13.7631 2.91437C13.8366 2.8409 13.8774 2.73478 13.8692 2.61233C13.8611 2.48172 13.8039 2.35927 13.7141 2.26947C13.6162 2.17151 13.4937 2.11437 13.3713 2.11437C13.3631 2.12254 13.3631 2.12254 13.355 2.12254L13.355 2.12254Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+	<path id="矢量 33" d="M9.71423 7.77123C9.6326 7.77123 9.55097 7.73858 9.48566 7.67327L8.32648 6.52225C8.19586 6.39164 8.19586 6.18756 8.32648 6.05694C8.45709 5.92633 8.66117 5.92633 8.79178 6.05694L9.9428 7.20796C10.0734 7.33858 10.0734 7.54266 9.9428 7.67327C9.8775 7.73858 9.79586 7.77123 9.71423 7.77123L9.71423 7.77123Z" fill="rgb(255,255,255)" fill-rule="nonzero" />
+</svg>

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 3 - 0
static/images/jobApplicant/qiehuan.svg


Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio