style: 移动端首页样式调整

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

@@ -48,7 +48,7 @@ $color_gold_deep_background: rgba($gold_deep,.1);
 // Border
 $border_color_1: rgba($white,.5);
 $border_color_2: rgba($white,.9);
-$border_color_3: rgba($black,.05);
+$border_color_3: rgba($black,.04);
 $border_color_4: rgba($black,.1);
 $border_color_5: rgba($black,.15);
 $border_color_6: rgba($black,.3);

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

@@ -82,7 +82,7 @@ export default {
   },
   computed: {
     getItemWidth() {
-      return px2viewport('343px')
+      return px2viewport('359px')
     },
     getImages() {
       return this.ad ? this.list : this.images
@@ -134,7 +134,7 @@ $swipe-item-fill-color: #edeff2;
 
 $swipe-item-width: 343px;
 $swipe-item-height: 88px;
-$swipe-item-margin: 16px;
+$swipe-item-margin: 8px;
 $swipe-item-radius: 12px;
 $swipe-indicator-bottom: 6px;
 $swipe-indicator-size: 4px;

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

@@ -590,6 +590,7 @@ export default {
     padding: 0 34px;
     ::v-deep {
       .van-divider {
+        margin: 14px 0;
         font-size: 11px;
         color: rgba(0, 0, 0, 0.5);
       }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="message-bg" v-if="list.length">
-    <div class="message-main clickable" :style="{ height: setHeight + 'vw' }">
+    <div class="message-main clickable">
       <div class="message-unread" v-if="msgData.unread > 0">
         {{ setUnRead }}条未读
       </div>
@@ -18,7 +18,7 @@
         >
           <div
             class="message-item"
-            style="height: 26px"
+            style="height: 24px"
             v-for="(item, index) in list"
             :key="index"
             :class="{ visited: item.visited }"
@@ -31,9 +31,9 @@
             <span class="time">{{ item.time }}</span>
           </div>
         </div>
-        <div class="icon-box" @click="goMore">
-          <AppIcon name="youbian" />
-        </div>
+      </div>
+      <div class="icon-box" @click="goMore">
+        <AppIcon name="youbian" />
       </div>
     </div>
   </div>
@@ -84,9 +84,9 @@ export default {
     setHeight() {
       const height = !this.msgData.unread
       if (height) {
-        return 76 / 3.75
+        return 70 / 3.75
       } else {
-        return 82 / 3.75
+        return 76 / 3.75
       }
     }
   },
@@ -113,15 +113,16 @@ export default {
       return decimalValue ? decimalValue[0] : ''
     },
     startScrolling() {
+      const offsetY = 24
       let listItem
       if (this.$refs.listItem) {
         listItem = this.$refs.listItem[1] // 列表项高度
       } else {
         listItem = {
-          offsetHeight: 26
+          offsetHeight: offsetY
         }
       }
-      const listItemHeight = (listItem?.offsetHeight || 26) * 2
+      const listItemHeight = (listItem?.offsetHeight || offsetY) * 2
       this.groupHeight = (this.list.length / 2) * listItemHeight
       this.scrollInterval = setInterval(() => {
         this.offsetHeight += listItemHeight // 每次滚动的距离，根据需求调整
@@ -238,13 +239,14 @@ export default {
 <style lang="scss" scoped>
 .message-bg {
   background-color: #f5f6f7;
-  padding: 8px 12px;
+  padding: 12px 8px;
 }
 .message-main {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 15px 0 9px;
   height: 100%;
   background-color: #fff;
   border-radius: 12px;
@@ -253,12 +255,12 @@ export default {
     position: absolute;
     left: 0;
     top: 0;
-    padding: 0 6px;
+    padding: 0 10px;
     width: fit-content;
     line-height: 15px;
     background: #fb483d;
     color: #fff;
-    border-radius: 40px 40px 40px 0;
+    border-radius: 40px 0 40px 0;
     font-size: 11px;
   }
 }
@@ -318,14 +320,16 @@ export default {
       color: #9b9ca3;
     }
   }
-  .icon-box {
-    margin-top: 10px;
-    flex-shrink: 0;
-    padding: 8px 0 8px 8px;
-  }
   .icon-youbian {
     font-size: 16px;
     color: #c0c4cc;
   }
 }
+.icon-box {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  z-index: 2;
+}
 </style>

apps/mobile/src/components/search/bidding/filters.vue

@@ -146,7 +146,7 @@
             </template>
           </JCell>
           <van-cell
-            class="more-filter-item"
+            class="more-filter-item one-line-filter-item"
             :isLink="true"
             title="信息类型"
             :border="false"
@@ -164,7 +164,7 @@
           </JCell>
           <van-cell
             v-show="isLogin"
-            class="more-filter-item"
+            class="more-filter-item one-line-filter-item"
             :isLink="true"
             title="采购单位类型"
             :border="false"
@@ -1236,6 +1236,10 @@ export default {
   background-color: $color_main_background;
 }
 
+.one-line-filter-item {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
 .more-filter-item {
   &:not(:last-of-type) {
     border-bottom: 1px solid $border_color_3;

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

@@ -607,7 +607,7 @@ export default {
   }
 
   .hot-key-wrapper {
-    padding: 0 16px;
+    padding: 0 8px;
     padding-bottom: 12px;
   }