feat: 更新项目配置与组件使用

- 在入口文件中引入uview-plus的配置，优化字体加载逻辑 - 移除manifest.json中不必要的权限描述 - 更新package.json和package-lock.json，添加开发依赖 - 调整多个组件的样式和结构，提升用户体验 - 修复部分组件的逻辑和样式问题，确保兼容性
2026-08-06 10:57:25 +08:00 · 2026-06-30 16:02:40 +08:00
parent f4337fd030
commit e871509bf5
87 changed files with 3546 additions and 1506 deletions
--- a/pages/tabbar/home/template/advertising.scss
+++ b/pages/tabbar/home/template/advertising.scss
@@ -7,7 +7,7 @@
    display: flex;
  }
  .item-price {
-    > span {
+    .price-text {
      font-size: 15px;
      font-weight: 500;
      color: #e1212b;
@@ -26,7 +26,7 @@
    position: relative;
  }
  .item-line-through {
-    > span {
+    .price-text {
      font-size: 10px;
      font-weight: 400;
      text-decoration: line-through;
@@ -46,12 +46,12 @@
    align-items: center;
    background: #fff;
    height: 50px;
-    > div:nth-of-type(1) {
+    .join-title-name {
      font-size: 16px;
      font-weight: bold;
    }
-    > div:nth-of-type(2) {
+    .join-title-more {
      font-size: 12px;
      color: #999;
    }
-  }
+  }
--- a/pages/tabbar/home/template/tpl.scss
+++ b/pages/tabbar/home/template/tpl.scss
@@ -4,8 +4,11 @@
    display: block;
    padding: 2rpx;
 }
+// 首页楼层模块统一左右边距（轮播图、宫格等 .layout 容器）
+$home-layout-padding: 16rpx;
+
 .layout {
-    padding: 16rpx;
+    padding: $home-layout-padding;
    margin: 8rpx 0;
    background: #fff;
 }
--- a/pages/tabbar/home/template/tpl_banner.vue
+++ b/pages/tabbar/home/template/tpl_banner.vue
@@ -1,11 +1,23 @@
 <template>
-  <div class="layout">
-    <div class="box">
-      <u-swiper @click="clickSwiper" interval="5000" duration="500" height="350" v-if="res" name="img" :list="res.list">
+  <view class="layout">
+    <view class="banner-box">
+      <u-swiper
+        v-if="res && res.list && res.list.length"
+        class="home-banner-swiper"
+        :list="res.list"
+        keyName="img"
+        height="350rpx"
+        imgMode="scaleToFill"
+        interval="5000"
+        duration="500"
+        circular
+        indicator
+        @click="clickSwiper"
+      >
        <template #loading><u-loading></u-loading></template>
      </u-swiper>
-    </div>
-  </div>
+    </view>
+  </view>
 </template>

 <script>
@@ -34,4 +46,25 @@ export default {
 </script>
 <style lang="scss" scoped>
@import "./tpl.scss";
+
+.banner-box {
+  width: 100%;
+  overflow: hidden;
+}
+
+:deep(.home-banner-swiper),
+:deep(.u-swiper),
+:deep(.u-swiper__wrapper) {
+  width: 100%;
+}
+
+:deep(.u-swiper__wrapper__item),
+:deep(.u-swiper__wrapper__item__wrapper) {
+  width: 100%;
+}
+
+:deep(.u-swiper__wrapper__item__wrapper__image) {
+  width: 100% !important;
+  display: block;
+}
 </style>
--- a/pages/tabbar/home/template/tpl_flex_four.vue
+++ b/pages/tabbar/home/template/tpl_flex_four.vue
@@ -29,7 +29,4 @@ export default {
  justify-content: center;
  background-size: cover;
 }
-img {
-  width: 84px;
-}
 </style>
--- a/pages/tabbar/home/template/tpl_flex_one.vue
+++ b/pages/tabbar/home/template/tpl_flex_one.vue
@@ -29,9 +29,5 @@ export default {
  width: 100%;
  display: block;
  overflow: hidden;
-  > img {
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>
--- a/pages/tabbar/home/template/tpl_flex_three.vue
+++ b/pages/tabbar/home/template/tpl_flex_three.vue
@@ -33,7 +33,4 @@ export default {
  justify-content: center;
  background-size: cover;
 }
-img {
-  width: 111px;
-}
 </style>
--- a/pages/tabbar/home/template/tpl_flex_two.vue
+++ b/pages/tabbar/home/template/tpl_flex_two.vue
@@ -38,10 +38,5 @@ export default {
 }
 .flex-item {
  width: 50%;
-  > img {
-    display: block;
-    max-width: 100%;
-    height: 100%;
-  }
 }
 </style>
--- a/pages/tabbar/home/template/tpl_goods.vue
+++ b/pages/tabbar/home/template/tpl_goods.vue
@@ -10,76 +10,79 @@
          :key="index"
        >
          <h4 class="h4">{{ title.title }}</h4>
-          <div>{{ title.desc }}</div>
+          <div class="title-desc">{{ title.desc }}</div>
        </div>
      </div>
    </u-sticky>
    <div class="goods-list">
-      <div
-        v-if="
-          item.___index != undefined
-            ? selected.index == item.___index
-            : selected.val == item.type
-        "
-        @click="handleClick(item)"
-        class="goods-item"
-        v-for="(item, item_index) in res.list[0].listWay"
-        :key="item_index"
-      >
-        <div class="goods-img">
-          <u-image
-            :src="item.img"
-            height="350rpx"
-            mode="aspectFit"
-            width="100%"
-          >
-            <template #loading><u-loading></u-loading></template>
-          </u-image>
-        </div>
-        <div class="goods-desc">
-          <div class="goods-title">
-            {{ item.title }}
+      <template v-for="(item, item_index) in res.list[0].listWay" :key="item_index">
+        <div
+          v-if="
+            item.___index != undefined
+              ? selected.index == item.___index
+              : selected.val == item.type
+          "
+          @click="handleClick(item)"
+          class="goods-item"
+        >
+          <div class="goods-img">
+            <u-image
+              :src="item.img"
+              height="350rpx"
+              mode="aspectFit"
+              width="100%"
+            >
+              <template #loading><u-loading></u-loading></template>
+            </u-image>
          </div>
-          <div class="goods-bottom">
-            <div class="goods-price">
-              ¥<span
-                >{{ goodsFormatPrice(item.price)[0] }} </span
-              >.{{ goodsFormatPrice(item.price)[1] }}
+          <div class="goods-desc">
+            <div class="goods-title">
+              {{ item.title }}
+            </div>
+            <div class="goods-bottom">
+              <div class="goods-price">
+                ¥<span class="price-int"
+                  >{{ goodsFormatPrice(item.price)[0] }} </span
+                >.{{ goodsFormatPrice(item.price)[1] }}
+              </div>
            </div>
          </div>
        </div>
-      </div>
+      </template>

-      <div
+      <template
        v-if="res.list[0].titleWay[selected.index].bindCategory && goodsData.length"
-        v-for="(item, index) in goodsData"
-        :key="index"
-        class="goods-item"
-        @click="handleClick(item)"
      >
-        <div class="goods-img">
-          <u-image
-            :src="item.thumbnail"
-            height="350rpx"
-            mode="aspectFit"
-            width="100%"
-          >
-            <template #loading><u-loading></u-loading></template>
-          </u-image>
-        </div>
-        <div class="goods-desc">
-          <div class="goods-title">
-            {{ item.goodsName }}
+        <div
+          v-for="(item, index) in goodsData"
+          :key="index"
+          class="goods-item"
+          @click="handleClick(item)"
+        >
+          <div class="goods-img">
+            <u-image
+              :src="item.thumbnail"
+              height="350rpx"
+              mode="aspectFit"
+              width="100%"
+            >
+              <template #loading><u-loading></u-loading></template>
+            </u-image>
          </div>
-          <div class="goods-bottom">
-            <div class="goods-price">
-              ¥<span
-                >{{ goodsFormatPrice(item.price)[0] }} </span
-              >.{{ goodsFormatPrice(item.price)[1] }}
+          <div class="goods-desc">
+            <div class="goods-title">
+              {{ item.goodsName }}
+            </div>
+            <div class="goods-bottom">
+              <div class="goods-price">
+                ¥<span class="price-int"
+                  >{{ goodsFormatPrice(item.price)[0] }} </span
+                >.{{ goodsFormatPrice(item.price)[1] }}
+              </div>
            </div>
          </div>
        </div>
-      </div>
+      </template>
    </div>
  </div>
 </template>
@@ -170,12 +173,12 @@ $w_94: 94%;
 }

 .selected-title {
-  > h4 {
+  .h4 {
    font-size: 30rpx;
    color: #000 !important;
  }

-  > div {
+  .title-desc {
    font-weight: bold;
    color: $main-color !important;
  }
@@ -191,11 +194,11 @@ $w_94: 94%;
    flex: 1;
    text-align: center;

-    > h4 {
+    .h4 {
      font-size: 32rpx;
    }

-    > div {
+    .title-desc {
      color: #999;
      font-size: 24rpx;
    }
@@ -223,10 +226,6 @@ $w_94: 94%;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
-  > img {
-    width: 100%;
-    height: 100%;
-  }
 }

 .goods-desc {
@@ -252,7 +251,7 @@ $w_94: 94%;
    > .goods-price {
      line-height: 2;
      color: $main-color;
-      > span {
+      .price-int {
        font-size: 42rpx;
      }
    }
--- a/pages/tabbar/home/template/tpl_group.vue
+++ b/pages/tabbar/home/template/tpl_group.vue
@@ -2,8 +2,8 @@
  <div class="layout">
    <div class="join-list">
      <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
-        <div>更多</div>
+        <div class="join-title-name">{{ res.list[0].title }}</div>
+        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
        <div class="join-item" @click="modelNavigateTo(item)" v-for="item in 4" :key="item">
@@ -11,10 +11,10 @@
            <img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
          </div>
          <div class="item-price">
-            <span>￥120.00</span>
+            <span class="price-text">￥120.00</span>
          </div>
          <div class="item-line-through">
-            <span>￥190.00</span>
+            <span class="price-text">￥190.00</span>
          </div>
        </div>
      </div>
--- a/pages/tabbar/home/template/tpl_hot_zone.vue
+++ b/pages/tabbar/home/template/tpl_hot_zone.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="layout">
    <div class="flex-one hot-image">
-      <image mode="widthFix" :src="res.list[0].img" alt=""></image>
+      <image class="hot-image-main" mode="widthFix" :src="res.list[0].img" alt=""></image>

      <image
        v-for="(area, index) in res.list[0].zoneInfo"
@@ -47,11 +47,9 @@ export default {
  width: 100%;
  display: block;
  overflow: hidden;
-  image {
-    width: 100%;
-   
-    min-height: 200rpx;
-    // height: 100%;
-  }
+}
+.hot-image-main {
+  width: 100%;
+  min-height: 200rpx;
 }
 </style>
--- a/pages/tabbar/home/template/tpl_integral.vue
+++ b/pages/tabbar/home/template/tpl_integral.vue
@@ -2,8 +2,8 @@
  <div class="layout">
    <div class="join-list">
      <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
-        <div>更多</div>
+        <div class="join-title-name">{{ res.list[0].title }}</div>
+        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
        <div class="join-item" v-for="item in 4" :key="item">
@@ -11,10 +11,10 @@
            <img class="item-img" src="https://picsum.photos/id/268/200/200" alt />
          </div>
          <div class="item-price">
-            <span>20积分</span>
+            <span class="price-text">20积分</span>
          </div>
          <div class="item-line-through">
-            <span>30积分</span>
+            <span class="price-text">30积分</span>
          </div>
        </div>
      </div>
@@ -34,7 +34,7 @@ export default {
  display: flex;
 }
 .item-price {
-  > span {
+  .price-text {
    font-size: 15px;
    font-weight: 500;
    color: #e1212b;
@@ -53,7 +53,7 @@ export default {
  position: relative;
 }
 .item-line-through {
-  > span {
+  .price-text {
    font-size: 10px;
    font-weight: 400;
    text-decoration: line-through;
@@ -73,11 +73,11 @@ export default {
  align-items: center;
  background: #fff;
  height: 50px;
-  > div:nth-of-type(1) {
+  .join-title-name {
    font-size: 16px;
    font-weight: bold;
  }
-  > div:nth-of-type(2) {
+  .join-title-more {
    font-size: 12px;
    color: #999;
  }
--- a/pages/tabbar/home/template/tpl_join_group.vue
+++ b/pages/tabbar/home/template/tpl_join_group.vue
@@ -2,8 +2,8 @@
  <div class="layout">
    <div class="join-list">
      <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
-        <div>更多</div>
+        <div class="join-title-name">{{ res.list[0].title }}</div>
+        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
        <div class="join-item" v-for="item in 4" :key="item">
@@ -16,10 +16,10 @@
            <div class="item-position-tips">2人团</div>
          </div>
          <div class="item-price">
-            <span>￥120.00</span>
+            <span class="price-text">￥120.00</span>
          </div>
          <div class="item-line-through">
-            <span>￥120.00</span>
+            <span class="price-text">￥120.00</span>
          </div>
        </div>
      </div>
@@ -39,7 +39,7 @@ export default {
  display: flex;
 }
 .item-price {
-  > span {
+  .price-text {
    font-size: 15px;
    font-weight: 500;
    color: #e1212b;
@@ -58,7 +58,7 @@ export default {
  position: relative;
 }
 .item-line-through {
-  > span {
+  .price-text {
    font-size: 10px;
    font-weight: 400;
    text-decoration: line-through;
@@ -78,11 +78,11 @@ export default {
  align-items: center;
  background: #fff;
  height: 50px;
-  > div:nth-of-type(1) {
+  .join-title-name {
    font-size: 16px;
    font-weight: bold;
  }
-  > div:nth-of-type(2) {
+  .join-title-more {
    font-size: 12px;
    color: #999;
  }
--- a/pages/tabbar/home/template/tpl_menu.vue
+++ b/pages/tabbar/home/template/tpl_menu.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="layout">
-    <div class="menu-list">
-      <div
+  <view class="layout">
+    <view class="menu-list">
+      <view
        class="menu-item"
        @click="modelNavigateTo(item)"
        v-for="(item, index) in res.list"
        :key="index"
      >
-        <div>
+        <view class="menu-img-wrap">
          <u-image
            width="88rpx"
            height="88rpx"
@@ -16,11 +16,11 @@
          >
            <template #loading><u-loading></u-loading></template>
          </u-image>
-        </div>
-        <div class="menu-title">{{ item.title }}</div>
-      </div>
-    </div>
-  </div>
+        </view>
+        <view class="menu-title">{{ item.title }}</view>
+      </view>
+    </view>
+  </view>
 </template>
 <script>
 import { modelNavigateTo } from "./tpl";
@@ -38,24 +38,45 @@ export default {
@import "./tpl.scss";
 .menu-list {
  display: flex;
-  align-items: center;
-  justify-content: space-between;
  flex-wrap: wrap;
+  align-items: flex-start;

  > .menu-item {
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
    width: 20%;
-    // flex: 1;
+    flex: 0 0 20%;
+    box-sizing: border-box;
    margin: 20rpx 0;
+    padding: 0 4rpx;
  }
 }
-.menu-img {
-  display: flex;
-  margin: 0 auto;
+
+.menu-img-wrap {
  width: 88rpx;
  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
+.menu-img {
+  flex-shrink: 0;
+}
+
+:deep(.menu-img .u-image) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .menu-title {
+  margin-top: 8rpx;
  font-size: 24rpx;
+  line-height: 1.3;
+  width: 100%;
+  text-align: center;
 }
 </style>
--- a/pages/tabbar/home/template/tpl_promotions_detail.vue
+++ b/pages/tabbar/home/template/tpl_promotions_detail.vue
@@ -9,7 +9,7 @@
      >
        <div>
          <div class="join-title">
-            <div>{{ item.title }}</div>
+            <div class="join-title-name">{{ item.title }}</div>
            <div
              class="sub"
              v-if="item.type !== 'SECKILL'"
@@ -54,7 +54,7 @@
                {{ i.goodsName ? i.goodsName : i.name }}
              </div>
              <div class="item-price">
-                <span>￥{{ i.price ? i.price : i.originalPrice }}</span>
+                <span class="price-text">￥{{ i.price ? i.price : i.originalPrice }}</span>
              </div>
            </div>
          </div>
@@ -195,7 +195,7 @@ export default {
  width: 316rpx !important;
 }
 .item-price {
-  > span {
+  .price-text {
    font-size: 28rpx;
    font-weight: 500;
    color: #e1212b;
@@ -214,7 +214,7 @@ export default {
  position: relative;
 }
 .item-line-through {
-  > span {
+  .price-text {
    font-size: 20rpx;
    font-weight: 400;
    text-decoration: line-through;
@@ -234,11 +234,12 @@ export default {
  align-items: center;
  background: #fff;
  height: 100rpx;
-  > div:nth-of-type(1) {
+  .join-title-name {
    font-size: 30rpx;
    font-weight: bold;
  }
-  > div:nth-of-type(2) {
+  .sub,
+  .sub-seckill {
    font-size: 20rpx;
    line-height: 1.75;
    border-radius: 16rpx;
--- a/pages/tabbar/home/template/tpl_search.vue
+++ b/pages/tabbar/home/template/tpl_search.vue
@@ -1,25 +1,16 @@
 <template>
-  <div class="layout">
-    <div class="search" @click="handleSearch">
+  <view class="layout">
+    <view class="search" @click="handleSearch">
      <u-icon name="search"></u-icon>
-      {{ res.list[0].title }}
-    </div>
-    <div class="navbar-right message" @click="linkMsgDetail" style="border-style:none;background:rgb(234,234,234);">
-		  <image style="width:53rpx;height:53rpx;margin-top:6rpx;" src="@/static/img/title.png"></image>
-	  </div>
-  </div>
+      <text class="search-text">{{ res.list[0].title }}</text>
+    </view>
+  </view>
 </template>
 <script>
 export default {
  title:"搜索栏",
  props: ["res","storeId"],
  methods: {
-    linkMsgDetail(){
-      uni.navigateTo({
-        url:`/pages/tabbar/home/title`
-      })
-    },
- 
    handleSearch() {
      if(this.storeId){
        uni.navigateTo({
@@ -39,25 +30,33 @@ export default {
@import "./tpl.scss";

 .search {
+  width: 100%;
  height: 64rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  padding: 0 10rpx;
  background: #ededed;
+  color: #999;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.search-text {
+  margin-left: 12rpx;
+  font-size: 26rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .layout {
-  background: #fff;
-  padding: 0 16rpx;
-  position: relative;
-}
-.navbar-right{
-	position: absolute;
-	top: 0;
-	// right: 0;
-}
-.message{
-	right:40rpx;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  padding: 0;
+  box-sizing: border-box;
 }
 </style>
--- a/pages/tabbar/home/template/tpl_spike.vue
+++ b/pages/tabbar/home/template/tpl_spike.vue
@@ -2,8 +2,8 @@
  <div class="layout">
    <div class="join-list">
      <div class="join-title">
-        <div>{{ res.list[0].title }}</div>
-        <div>更多</div>
+        <div class="join-title-name">{{ res.list[0].title }}</div>
+        <div class="join-title-more">更多</div>
      </div>
      <div class="join-box">
        <div class="join-item" v-for="item in 4" :key="item">
@@ -15,10 +15,10 @@
            />
          </div>
          <div class="item-price">
-            <span>￥120.00</span>
+            <span class="price-text">￥120.00</span>
          </div>
          <div class="item-line-through">
-            <span>￥190.00</span>
+            <span class="price-text">￥190.00</span>
          </div>
        </div>
      </div>
--- a/pages/tabbar/home/template/tpl_text_picture.vue
+++ b/pages/tabbar/home/template/tpl_text_picture.vue
@@ -58,13 +58,8 @@ export default {
  background-size: cover;
  padding: 0;
 }
-.-item-image{
-     
-     padding: 10px ;
-     >img{
-        
-         width: 100%;
-     }
+.-item-image {
+  padding: 10px;
 }
 .-item-tilte {
  background: $aider-light-color;
--- a/pages/tabbar/home/template/tpl_top_one_bottom_two.vue
+++ b/pages/tabbar/home/template/tpl_top_one_bottom_two.vue
@@ -53,18 +53,10 @@ export default {
  display: flex;
  height: 200rpx;
  width: 100%;
-  > img {
-    width: 100%;
-    height: 100%;
-  }
 }
 .view-height-85 {
  padding: 0 1px;
  width: 50%;
-  > img {
-    width: 100%;
-    height: 100%;
-  }
 }
 .image-mode{
  width: 100%;
--- a/pages/tabbar/home/template/tpl_top_two_bottom_one.vue
+++ b/pages/tabbar/home/template/tpl_top_two_bottom_one.vue
@@ -8,8 +8,9 @@
          width="100%"
          :src="res.list[0].img"
          alt
-          ><u-loading #loading></u-loading
-        ></u-image>
+        >
+          <template #loading><u-loading></u-loading></template>
+        </u-image>
      </div>
      <div class="view-height-85" @click="modelNavigateTo(res.list[1])">
        <u-image
@@ -18,8 +19,9 @@
          width="100%"
          :src="res.list[1].img"
          alt
-          ><u-loading #loading></u-loading
-        ></u-image>
+        >
+          <template #loading><u-loading></u-loading></template>
+        </u-image>
      </div>
    </div>
    <div class="view-width-100"  @click="modelNavigateTo(res.list[2])">
@@ -28,8 +30,9 @@
        height="200rpx"
        width="100%"
        :src="res.list[2].img"
-        ><u-loading #loading></u-loading
-      ></u-image>
+      >
+        <template #loading><u-loading></u-loading></template>
+      </u-image>
    </div>
  </div>
 </template>
--- a/pages/tabbar/home/views.vue
+++ b/pages/tabbar/home/views.vue
@@ -3,16 +3,26 @@
    <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
    <div v-for="(item, index) in pageData.list" :key="index">
      <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->
-      <u-navbar class="navbar" v-if="item.type == 'search'" :auto-back="false" :fixed="index === 1 ? false : true">
-        <search style="width: 100%" :res="item.options" />
-        <!-- #ifndef H5 -->
-        <!-- 扫码功能 不兼容h5 详情文档: https://uniapp.dcloud.io/api/system/barcode?id=scancode -->
-        <template #right>
-          <div class="navbar-right">
-            <u-icon name="scan" @click="scan()" color="#666" size="50"></u-icon>
-          </div>
+      <u-navbar
+        class="navbar"
+        v-if="item.type == 'search'"
+        :auto-back="false"
+        :fixed="index === 1 ? false : true"
+        :placeholder="index === 1 ? false : true"
+        left-icon=""
+        title=""
+        bg-color="#ffffff"
+      >
+        <template #left>
+          <view class="navbar-search-wrap" :style="searchBarStyle" @click.stop>
+            <search :res="item.options" />
+          </view>
+        </template>
+        <template #right>
+          <view class="navbar-message" :style="messageIconStyle" @click="linkMsgDetail">
+            <image class="message-icon" src="/static/img/title.png" mode="aspectFit"></image>
+          </view>
        </template>
-        <!-- #endif -->
      </u-navbar>
      <carousel v-if="item.type == 'carousel'" :res="item.options" />
      <titleLayout v-if="item.type == 'title'" :res="item.options" />
@@ -68,6 +78,8 @@ import tpl_notice from "@/pages/tabbar/home/template/tpl_notice"; //标题栏模
 import tpl_promotions from "@/pages/tabbar/home/template/tpl_promotions_detail"; //标题栏模块
 import storage from "@/utils/storage.js";
 import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon'
+// 与 tpl.scss $home-layout-padding 保持一致
+const HOME_LAYOUT_PADDING_RPX = 16;
 // import {receiveCoupons} from "@/api/members"

 export default {
@@ -79,8 +91,30 @@ export default {
      pageData: "", //楼层页面数据
      isIos: "",
      enableLoad: false, //触底加载 针对于商品模块
+      capsuleInsetRight: 0,
+      searchBarWidth: 0,
    };
  },
+  computed: {
+    messageIconStyle() {
+      if (!this.capsuleInsetRight) {
+        return {};
+      }
+      return {
+        marginRight: `${this.capsuleInsetRight}px`,
+      };
+    },
+    searchBarStyle() {
+      if (this.searchBarWidth) {
+        return {
+          width: `${this.searchBarWidth}px`,
+        };
+      }
+      return {
+        width: '560rpx',
+      };
+    },
+  },
  components: {
    carousel: tpl_banner,
    titleLayout: tpl_title,
@@ -104,6 +138,7 @@ export default {
  },

  mounted () {
+    this.setCapsuleInset();
    this.init();
    // #ifdef MP-WEIXIN
    // 小程序默认分享
@@ -112,6 +147,28 @@ export default {
   
  },
  methods: {
+    setCapsuleInset() {
+      // #ifdef MP-WEIXIN
+      try {
+        const menuButton = uni.getMenuButtonBoundingClientRect();
+        const { windowWidth } = uni.getWindowInfo();
+        this.capsuleInsetRight = windowWidth - menuButton.left;
+        const messageWidth = uni.upx2px(20);
+        const leftPadding = uni.upx2px(HOME_LAYOUT_PADDING_RPX);
+        const gap = uni.upx2px(0);
+        this.searchBarWidth =
+          windowWidth - this.capsuleInsetRight - messageWidth - leftPadding - gap;
+      } catch (e) {
+        this.capsuleInsetRight = 90;
+        this.searchBarWidth = 260;
+      }
+      // #endif
+    },
+    linkMsgDetail() {
+      uni.navigateTo({
+        url: "/pages/tabbar/home/title",
+      });
+    },
    fetchCoupon(){
       this.$refs.coupon.firstGetAuto();
    },
@@ -245,7 +302,31 @@ export default {
 </script>

 <style scoped lang="scss">
-.navbar-right {
-  padding: 0 16rpx 0 0;
+@import "@/pages/tabbar/home/template/tpl.scss";
+
+.navbar {
+  width: 100%;
+
+  :deep(.u-navbar__content__left) {
+    width: auto !important;
+    padding: 0 0 0 $home-layout-padding !important;
+  }
+}
+
+.navbar-search-wrap {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.navbar-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.message-icon {
+  width: 53rpx;
+  height: 53rpx;
+  display: block;
 }
 </style>