feat:移动端首页各模块ui及交互调整

apps/mobile/src/assets/style/_variables.scss

@@ -17,7 +17,7 @@ $gray_8: #33323a; // VIP背景灰色
 $gray_89: #1b1a2a; // VIP背景灰色
 $gray_9: #171826;
 
-$main: #2ABED1;
+$main: #2abed1;
 $green: #00d086;
 $blue: #3399ff;
 $purple: #8e6df2;
@@ -34,6 +34,7 @@ $main_deep: #1db5e5;
 $purple_deep: #6d00db;
 $red_deep: #ef3024;
 $gold_deep: #d69e55; // VIP 金色deep
+$orange_red: #fa6f33;
 
 $color_main: $main;
 $color_red: $red;
@@ -41,17 +42,17 @@ $gray_vip: $gray_9;
 
 // Background
 // 透明背景色使用时，需要配合白色背景使用
-$color_main_background: rgb($color_main,.1);
-$color_red_background: rgba($color_red,.1);
-$color_gold_deep_background: rgba($gold_deep,.1);
+$color_main_background: rgb($color_main, 0.1);
+$color_red_background: rgba($color_red, 0.1);
+$color_gold_deep_background: rgba($gold_deep, 0.1);
 
 // Border
-$border_color_1: rgba($white,.5);
-$border_color_2: rgba($white,.9);
-$border_color_3: rgba($black,.04);
-$border_color_4: rgba($black,.1);
-$border_color_5: rgba($black,.15);
-$border_color_6: rgba($black,.3);
+$border_color_1: rgba($white, 0.5);
+$border_color_2: rgba($white, 0.9);
+$border_color_3: rgba($black, 0.04);
+$border_color_4: rgba($black, 0.1);
+$border_color_5: rgba($black, 0.15);
+$border_color_6: rgba($black, 0.3);
 
 $gradient_main: linear-gradient(to bottom, $main, $main_deep);
 $gradient_green: linear-gradient(to bottom, #0bd991, #00b031);
@@ -64,7 +65,12 @@ $gradient_gold: linear-gradient(to right, $gold_light, $gold);
 // VIP 深色渐变
 $gradient_gray: linear-gradient(135deg, #3e3e52 0%, #2f2f3d 100%, #2f2f3d 100%);
 
-$gradient_search_header: linear-gradient(280.62deg, #D7F6FB 1.93%, #E7FCFF 49.44%, #E7F2FF 98.41%);;
+$gradient_search_header: linear-gradient(
+  280.62deg,
+  #d7f6fb 1.93%,
+  #e7fcff 49.44%,
+  #e7f2ff 98.41%
+);
 
 // Radius
 $radius_base: 2px;

apps/mobile/src/assets/style/common.scss

@@ -8,12 +8,18 @@
   color: $color_main;
 }
 
+// 新文字颜色高亮
+.new-highlight-text {
+  color: $orange_red;
+}
+
 // 禁止选中
 .no-select {
   user-select: none;
 }
 
-input, textarea {
+input,
+textarea {
   caret-color: $color_main;
 }
 
@@ -68,7 +74,7 @@ input, textarea {
 .cell-clickable {
   transition: background-color 0.1s ease;
   &:active {
-    background-color: $gray_2!important;
+    background-color: $gray_2 !important;
   }
 }
 
@@ -176,9 +182,9 @@ input, textarea {
   align-items: center;
   justify-content: center;
   padding: 5px 10px;
-  color: #5F5E64;
+  color: #5f5e64;
   font-size: 14px;
-  background: #F5F6F7;
+  background: #f5f6f7;
   height: 36px;
   min-width: 78px;
   border-radius: 4px;
@@ -257,23 +263,23 @@ button[disabled] {
 }
 
 .tag-warning {
-  color: #FF9F40;
-  border-color: #FF9F40;
+  color: #ff9f40;
+  border-color: #ff9f40;
 }
 
 .tag-danger {
-  color: #FB483D;
-  border-color: #FB483D;
+  color: #fb483d;
+  border-color: #fb483d;
 }
 
 .tag-success {
-  color: #2ABED1;
-  border-color: #2ABED1;
+  color: #2abed1;
+  border-color: #2abed1;
 }
 
 /* page change */
 // FROM: https://juejin.im/post/5ba358a56fb9a05d2068401d
-$--transition-time: .3s;
+$--transition-time: 0.3s;
 
 // ============
 // fold-left -> forward
@@ -319,7 +325,7 @@ $--transition-time: .3s;
   animation-name: fold-right-out;
   animation-duration: $--transition-time;
 }
-@keyframes fold-right-in{
+@keyframes fold-right-in {
   0% {
     width: 100%;
     transform: translate3d(-100%, 0, 0);
@@ -333,7 +339,7 @@ $--transition-time: .3s;
     transform: translate3d(0, 0, 0);
   }
 }
-@keyframes fold-right-out  {
+@keyframes fold-right-out {
   0% {
     width: 100%;
     transform: translate3d(0, 0, 0);
@@ -369,14 +375,14 @@ $--transition-time: .3s;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: #E6E6E6;
+  background-color: #e6e6e6;
   transform-origin: center right;
   transform: scaleX(0);
 }
 
 .hover-css--slide.hover {
   cursor: pointer;
-  color: #9B9CA3;
+  color: #9b9ca3;
 }
 
 .hover-css--slide.hover::before {

apps/mobile/src/assets/style/pic-icon.scss

@@ -219,3 +219,10 @@
   background-image: url(@/assets/image/icon/icon-big-search.png);
   background-size: contain;
 }
+
+.icon-vip-badge {
+  width: 14px;
+  height: 14px;
+  background-image: url(@/assets/image/icon/vip/v_icon.png);
+  flex-shrink: 0;
+}

apps/mobile/src/components/ad/SwipeFloor.vue

@@ -237,7 +237,7 @@ $swiper-floor-item-font-size: 11px;
     color: $swiper-floor-item-color;
     .van-image {
       width: $swiper-floor-item-width;
-      height: 44px;
+      height: 40px;
     }
     span {
       margin-top: 4px;

apps/mobile/src/components/home/list.vue

@@ -1,10 +1,9 @@
 <template>
   <div class="home-list">
-    <div class="divider-container">
+    <!-- <div class="divider-container">
       <van-divider>最新标讯</van-divider>
-    </div>
-    <van-loading v-if="loading" style="text-align: center" />
-    <div
+    </div> -->
+    <!-- <div
       class="to-setting-container fixed-bottom"
       v-if="showToSettingTip"
       ref="settingTip"
@@ -17,16 +16,21 @@
           <span>去设置</span>
           <van-icon name="arrow" />
         </button>
-        <!-- <van-button
-          size="mini"
-          class="setting-button"
-          type="confirm"
+      </div>
+    </div> -->
+    <div class="flex flex-items-center van-hairline--bottom home-list-header">
+      <h3 class="header-title">商机推荐</h3>
+      <div class="flex flex-items-center header-value">
+        <span class="header-desc">完善信息，推荐更准</span>
+        <span
+          class="flex flex-items-center header-set"
           @click="gotoKeySettingPage"
-          >去设置</van-button
-        > -->
+          >去设置 <van-icon name="arrow" color="#2ABED1"></van-icon
+        ></span>
       </div>
     </div>
     <div class="list">
+      <van-loading v-if="loading" style="text-align: center" />
       <project-cell
         class="right-bottom"
         v-for="(item, index) in list"
@@ -67,7 +71,7 @@
             <AppIcon
               style="margin-right: 4px"
               svg
-              size="20"
+              size="16"
               :name="item.isCollected ? 'shoucang' : 'shoucang_weishoucang'"
             />
             <span class="label-icon">收藏</span>
@@ -470,7 +474,8 @@ export default {
       }
       openAppOrWxPage({
         wx: LINKS.标讯详情页前缀.wx + item.id + '.html?' + qs.stringify(query),
-        app: LINKS.标讯详情页前缀.app + item.id + '.html?' + qs.stringify(query),
+        app:
+          LINKS.标讯详情页前缀.app + item.id + '.html?' + qs.stringify(query),
         h5: LINKS.标讯详情页前缀.h5 + item.id + '.html?' + qs.stringify(query)
       })
     },
@@ -563,8 +568,8 @@ export default {
                 v?.bidamount
                   ? formatMoney(v?.bidamount)
                   : v?.budget
-                  ? formatMoney(v?.budget)
-                  : ''
+                    ? formatMoney(v?.budget)
+                    : ''
               ].filter((v) => v),
               time: v?.publishTime ? v.publishTime * 1000 : '',
               data: v
@@ -591,6 +596,34 @@ export default {
 
 <style lang="scss" scoped>
 .home-list {
+  .home-list-header {
+    margin: 8px 8px 0;
+    padding: 6px 12px;
+    background: linear-gradient(#d7fbff, #ffffff);
+    border-radius: 12px 12px 0 0;
+    .header-title {
+      margin-right: 8px;
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 700;
+    }
+    .header-value {
+      padding: 0 8px;
+    }
+    .header-desc {
+      color: #5f5e64;
+      font-size: 11px;
+    }
+    .header-set {
+      padding-left: 10px;
+      font-size: 11px;
+      line-height: 16px;
+      color: $color_main;
+    }
+    .van-icon-arrow {
+      margin-left: 4px;
+    }
+  }
   .list {
     background: #f5f6f7;
   }
@@ -630,6 +663,10 @@ export default {
     &::after {
       margin-left: 16px;
     }
+    &:first-child {
+      margin-top: 0;
+      border-radius: 0 0 12px 12px;
+    }
   }
   .list-tips {
     background-color: #fff;
@@ -667,7 +704,7 @@ export default {
   left: 50%;
   bottom: calc(50px + 16px);
   transform: translateX(-50%);
-  transition: bottom ease .2s;
+  transition: bottom ease 0.2s;
   z-index: 98;
 }
 .to-setting-container {
@@ -683,8 +720,8 @@ export default {
     line-height: 18px;
     color: #171826;
     border-radius: 8px;
-    background: linear-gradient(180deg, #E8FFFF 0%, #FFFFFF 100%);
-    box-shadow: 0px 4px 16px 0px #081F2614;
+    background: linear-gradient(180deg, #e8ffff 0%, #ffffff 100%);
+    box-shadow: 0px 4px 16px 0px #081f2614;
     border: 0.5px solid $main;
   }
   .to-setting-text {

apps/mobile/src/components/message/message-card.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="message-bg" v-if="list.length">
     <div class="message-main clickable">
-      <div class="card-title">
+      <!-- <div class="card-title">
         <span>最新消息</span>
         <span class="message-unread" v-if="msgData.unread > 0">
           {{ setUnRead }}
@@ -9,7 +9,7 @@
         <div class="icon-box" @click="goMore">
           <AppIcon name="youbian" size="14" color="#c0c4cc" />
         </div>
-      </div>
+      </div> -->
       <div
         class="message-card"
         :class="{ 'have-one': list.length === 1 }"
@@ -30,10 +30,19 @@
             ref="listItem"
             @click="goMessage(item)"
           >
-            <span class="dot"></span>
-            <span class="type">{{ item.type }}</span>
-            <div class="van-ellipsis title">{{ item.title }}</div>
-            <span class="time">{{ item.time }}</span>
+            <!-- <span class="dot"></span> -->
+            <van-cell class="message-item-cell" is-link>
+              <template #title>
+                <span class="icon iconfont icon-nav_un_message"></span>
+                <span class="type">{{ item.type }}</span>
+                <span class="flex-1 title">{{ item.title }}</span>
+              </template>
+              <template #default>
+                <span class="time">{{ item.time }}</span>
+              </template>
+            </van-cell>
+            <!-- <div class="van-ellipsis title">{{ item.title }}</div>
+            <span class="time">{{ item.time }}</span> -->
           </div>
         </div>
       </div>
@@ -48,6 +57,7 @@ import {
   ajaxMessageOpenLog
 } from '@/api/modules/message'
 import { AppIcon } from '@/ui'
+import { Cell } from 'vant'
 import { dateMatter } from '@/utils/date'
 import { appCallReloadTab } from '@/utils/callFn/appFn'
 import { callChangeTab, openLinkOfOther } from '@/utils'
@@ -59,7 +69,8 @@ import { vw2px, px2viewport } from '@/utils'
 export default {
   name: 'message-card',
   components: {
-    [AppIcon.name]: AppIcon
+    [AppIcon.name]: AppIcon,
+    [Cell.name]: Cell
   },
   data() {
     return {
@@ -252,7 +263,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 6px 0 10px;
+  // padding: 6px 0 10px;
   height: 100%;
   background-color: #fff;
   border-radius: 12px;
@@ -292,15 +303,19 @@ export default {
     align-items: center;
   }
   .message-group {
-    max-width: 315px;
+    //max-width: 315px;
     transition: transform 0.5s ease; /* 添加过渡效果 */
   }
   .message-item {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 20px;
+    height: 40px;
     line-height: 18px;
+    &-cell {
+      padding: 0;
+      line-height: normal;
+    }
     &.visited {
       .dot {
         background-color: #c0c4cc;
@@ -324,7 +339,7 @@ export default {
     }
     .title {
       font-size: 11px;
-      line-height: 18px;
+      line-height: 24px;
       color: #171826;
       margin-right: 12px;
     }
@@ -334,6 +349,27 @@ export default {
       line-height: 18px;
       color: #9b9ca3;
     }
+    .icon-nav_un_message {
+      margin-right: 4px;
+      color: $color_main;
+    }
+    ::v-deep {
+      .van-cell__title {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .van-cell__value {
+        flex: unset;
+      }
+      .van-cell__right-icon {
+        color: $color_main;
+        font-size: 12px;
+        line-height: 26px;
+      }
+    }
   }
   .icon-youbian {
     font-size: 16px;

apps/mobile/src/views/tabbar/Home.vue

@@ -4,7 +4,7 @@
     @scroll="onScroll"
     @click.capture="doSave"
     ref="home-page"
-    :class="{ 'app-header-top': appHeaderTop}"
+    :class="{ 'app-header-top': appHeaderTop }"
   >
     <!-- 头部广告位 -->
     <div class="header-exposure" v-if="isLogin"></div>
@@ -46,12 +46,19 @@
       <!-- 消息 -->
       <message-card></message-card>
       <!-- 最新标讯 -->
-      <home-list ref="list" @bottomSetTip="bottomSetTip" :show-set-tip="showSetTip"></home-list>
+      <home-list
+        ref="list"
+        @bottomSetTip="bottomSetTip"
+        :show-set-tip="showSetTip"
+      ></home-list>
     </div>
     <!-- 侧边广告位 -->
-    <ad-side :config="AD.side" :scroll-status="sideStatus" :bottom-position="hasBottomSetTip ? '22%' :'18%'"></ad-side>
+    <!-- <ad-side :config="AD.side" :scroll-status="sideStatus" :bottom-position="hasBottomSetTip ? '22%' :'18%'"></ad-side> -->
     <!--客服-->
-    <customer-corner :scroll-status="sideStatus" :bottom-position="hasBottomSetTip ? '16%' :'12%'"/>
+    <customer-corner
+      :scroll-status="sideStatus"
+      :bottom-position="hasBottomSetTip ? '16%' : '12%'"
+    />
     <!-- 弹窗广告位 -->
     <AdPopScreen
       v-if="AD.full.pic"
@@ -434,7 +441,7 @@ export default {
       const scrollTop = e.target.scrollTop
       this.sideStatus = scrollTop < 60
       // P599需求，滚动到最新咨询展示
-      if(this.$refs.list) {
+      if (this.$refs.list) {
         const listRect = this.$refs.list.$el.getBoundingClientRect() || {}
         const listTop = listRect.top
         this.showSetTip = listTop <= scrollTop
@@ -605,7 +612,7 @@ export default {
       }
     },
     // 有无订阅关键词设置提示，影响侧边广告、客服距离底部高度
-    bottomSetTip (show) {
+    bottomSetTip(show) {
       this.hasBottomSetTip = show
     }
   }
@@ -638,8 +645,7 @@ export default {
   }
 
   .hot-key-wrapper {
-    padding: 0 8px;
-    padding-bottom: 12px;
+    padding: 0 8px 8px;
   }
 
   .home-content-container {
@@ -681,7 +687,7 @@ export default {
       display: flex;
       flex-direction: row;
       align-items: center;
-      height: 40px;
+      height: 36px;
       padding: 0 12px;
       background: #ffffff;
       transition: background-color 0.2s;
@@ -703,7 +709,7 @@ export default {
     left: 0;
     width: 100%;
     min-height: 240px;
-    background: linear-gradient(180deg, #00aee6 0%, #05b6cd 38%, #87efea 100%);
+    background: linear-gradient(180deg, #00aee6 0%, #05b6cd 38%, #87dfea 100%);
     img {
       width: 100%;
       max-width: 100%;