零售端-公告样式修改

mallApp/src/components/home/noticeBar.vue

@@ -1,33 +1,37 @@
 <!--
   店铺公告条（首页 / 购物车 / 订单提交等复用）
   拉取 /shop-notice/show-list；position：1首页 2分类 4购物车 8订单提交
-  点击文案进详情；点击右侧 › 进公告列表（全部上架公告）
+  图标与样式对齐 shop-category：喇叭雪碧图 + 浅粉条 + 粉色向右箭头
+  点击文案进详情；点击右侧箭头进公告列表（全部上架公告）
 -->
 <template>
-  <view class="home-notice-bar" v-if="noticeList.length">
-    <!-- 原 32upx 喇叭图，颜色与公告条主题色一致 -->
-    <zui-svg-icon class="notice-icon" icon="general-notice-horn" :width="16" :height="16" />
-    <text class="notice-tag">公告</text>
-    <!-- 标题/摘要区域：跳转当前轮播条详情 -->
-    <swiper
-      class="notice-swiper"
-      :key="'home-notice-' + position + '-' + noticeList.length"
-      vertical
-      :autoplay="noticeList.length > 1"
-      :circular="noticeList.length > 1"
-      :interval="6000"
-      :duration="400"
-      :disable-touch="disableTouch"
-      :skip-hidden-item-layout="true"
-      @change="onNoticeChange"
-      @tap.stop="openNoticeDetail"
-    >
-      <swiper-item v-for="item in noticeList" :key="item.id">
-        <text class="notice-text">{{ item.title || item.summary }}</text>
-      </swiper-item>
-    </swiper>
-    <!-- 右侧箭头：进入该位置公告列表 -->
-    <text class="notice-arrow" @tap.stop="openNoticeList">›</text>
+  <!-- 外层占组件根节点：微信小程序根节点 margin 不生效，左右/上边距必须写在内层 -->
+  <view class="notice-bar-host" v-if="noticeList.length">
+    <view class="notice-bar" :class="{ 'notice-bar--flush': flush }">
+      <view class="notice-left" @tap.stop="openNoticeDetail">
+        <sprite-icon name="notice" :size="30" custom-class="notice-horn-icon" />
+        <text class="notice-tag">公告</text>
+        <swiper
+          class="notice-swiper"
+          :key="'home-notice-' + position + '-' + noticeList.length"
+          vertical
+          :autoplay="noticeList.length > 1"
+          :circular="noticeList.length > 1"
+          :interval="6000"
+          :duration="400"
+          :disable-touch="disableTouch"
+          :skip-hidden-item-layout="true"
+          @change="onNoticeChange"
+        >
+          <swiper-item v-for="item in noticeList" :key="item.id">
+            <text class="notice-summary">{{ item.title || item.summary }}</text>
+          </swiper-item>
+        </swiper>
+      </view>
+      <view class="notice-arrow" @tap.stop="openNoticeList">
+        <sprite-icon name="xiangyou-pink" :size="15" />
+      </view>
+    </view>
   </view>
 </template>
 
@@ -59,6 +63,14 @@ export default {
     disableTouch: {
       type: Boolean,
       default: false
+    },
+    /**
+     * 是否嵌在已有左右内边距的容器里（如结算页）
+     * 为 true 时去掉公告条自身左右外边距，与同级卡片同宽
+     */
+    flush: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -106,7 +118,7 @@ export default {
         query: { id: item.id, account: this.resolveAccount() }
       })
     },
-    /** 点击右侧 ›：跳转公告列表（全部上架公告，不按位置过滤） */
+    /** 点击粉色向右箭头：跳转公告列表（全部上架公告，不按位置过滤） */
     openNoticeList() {
       this.$util.pageTo({
         url: '/pages/home/shop-notice-list',
@@ -120,54 +132,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.home-notice-bar {
+.notice-bar-host {
+  width: 100%;
+}
+
+/* 通知公告：间距写在内层，避免小程序组件根节点吃掉 margin */
+.notice-bar {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  height: 64upx;
-  margin: 8upx 24upx 12upx;
-  padding: 0 20upx;
-  border-radius: 32upx;
-  background: #FFF0F3;
-  box-shadow: 0 2upx 12upx rgba(255, 77, 125, 0.1);
+  margin: 16upx 24upx 16upx;
+  padding: 16upx 20upx;
+  background: #fff5f5;
+  border-radius: 12upx;
   box-sizing: border-box;
 }
-.notice-icon {
-  flex-shrink: 0;
-  margin-right: 8upx;
+
+/* 结算页已有 20upx 内边距，去掉左右外边距以免比商品卡片更窄 */
+.notice-bar--flush {
+  margin: 0 0 20upx;
+  width: 100%;
+}
+
+.notice-left {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+  min-width: 0;
 }
+
 .notice-tag {
   flex-shrink: 0;
-  height: 32upx;
-  line-height: 30upx;
-  padding: 0 8upx;
-  margin-right: 12upx;
-  font-size: 20upx;
-  color: #FF4D7D;
-  border: 1upx solid #FF4D7D;
-  border-radius: 6upx;
-  box-sizing: border-box;
+  font-size: 26upx;
+  font-weight: 600;
+  color: #ff4757;
+  margin: 0 12upx;
 }
+
 .notice-swiper {
   flex: 1;
   width: 0;
   height: 40upx;
   min-width: 0;
 }
-.notice-text {
+
+.notice-summary {
   display: block;
-  font-size: 24upx;
-  color: #FF4D7D;
+  font-size: 26upx;
+  color: #666;
   line-height: 40upx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .notice-arrow {
   flex-shrink: 0;
-  font-size: 32upx;
-  line-height: 1;
-  color: #FF4D7D;
   margin-left: 8upx;
   padding: 8upx 4upx 8upx 12upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::v-deep .notice-horn-icon {
+  flex-shrink: 0;
 }
 </style>

mallApp/src/pages/billing/affirmMix.vue

@@ -1,13 +1,13 @@
 <!--
   混合结算页（花束+花材），立即购买
   用途：商城混合购物车确认下单，支持多种配送方式、红包、贺卡与匿名配送
-  顶部公告：/shop-notice/show-list position=8（订单提交）
+  顶部公告：/shop-notice/show-list position=8（订单提交），公告条与分类页 shop-category 同款（noticeBar）
 -->
 <template>
 	<view class="app-main app-content affirm-page">
 		<view class="affirm-scroll">
-			<!-- 订单提交公告：position=8，UI 复用首页 noticeBar -->
-			<home-notice-bar :account="account" :position="8" />
+			<!-- 订单提交公告：position=8，与分类页同款公告条 -->
+			<home-notice-bar :account="account" :position="8" :flush="true" />
 			<form>
 				<!-- 商品卡片 -->
 				<view class="affirm-card product-card">

mallApp/src/pages/home/cart.vue

@@ -1,15 +1,17 @@
 <!--
   店铺购物车页
   用途：展示花材+花束购物车（Vuex cg 选型，property 区分），支持勾选、改数量、删除；去结算统一跳转 affirmMix
-  顶部公告：/shop-notice/show-list position=4（购物车），UI 复用首页 noticeBar
+  顶部公告：/shop-notice/show-list position=4（购物车），公告条与分类页 shop-category 同款（noticeBar）
   滚动：页面原生滚动（不用 scroll-view），公告条 disableTouch，减少滑动卡顿
   路由：pages/home/cart?account=xxx&hdId=xxx
 -->
 <template>
   <view class="cart-page" :class="{ 'cart-page--has-checkout': displayCartList.length }">
     <!-- 使用页面原生滚动，避免 scroll-view + 竖向公告 swiper 抢手势导致滑动卡顿 -->
-    <!-- 购物车公告：与首页公告条同组件，位置为购物车(4)；disableTouch 避免抢纵向滑动 -->
-    <home-notice-bar :account="shopAccount" :position="4" :disable-touch="true" />
+    <!-- 间距写在页面容器上：小程序自定义组件根节点 margin 不生效 -->
+    <view class="cart-notice">
+      <home-notice-bar :account="shopAccount" :position="4" :disable-touch="true" :flush="true" />
+    </view>
 
       <!-- 店铺信息 -->
       <view class="store-card" v-if="displayCartList.length">
@@ -737,6 +739,12 @@ export default {
   padding-bottom: calc(#{$shopTabBarTotalHeight} + #{$shopCartCheckoutHeight});
 }
 
+/* 公告条左右 24upx 与 store-card 对齐，上边距与导航栏分开 */
+.cart-notice {
+  padding: 16upx 24upx 12upx;
+  box-sizing: border-box;
+}
+
 .store-card {
   margin: 16upx 24upx 0;
   padding: 24upx;

mallApp/src/pages/home/index.vue

@@ -33,7 +33,10 @@
               :custom-id="myCustomId"
               :shop-info="shopInfo"
             />
-            <home-notice-bar :account="account" />
+            <!-- 间距写在页面容器上，避免组件根节点 margin 在小程序不生效 -->
+            <view class="home-notice-wrap">
+              <home-notice-bar :account="account" :flush="true" />
+            </view>
           </view>
           <home-nav-grid
             v-else-if="mod.key === 'navGrid'"
@@ -352,6 +355,10 @@ export default {
   flex-direction: column;
   background: #ffffff;
 }
+.home-notice-wrap {
+  padding: 16upx 24upx 16upx;
+  box-sizing: border-box;
+}
 .home-loading {
   padding: 200upx 0;
   text-align: center;

mallApp/src/pages/home/shop-category.vue

@@ -26,7 +26,7 @@
         <view class="search-btn" @tap.stop="goSearchToGoodsList">搜索</view>
       </view>
 
-      <!-- 通知公告：点击文案进详情，点击 › 进列表 -->
+      <!-- 通知公告：点击文案进详情，点击粉色向右箭头进列表 -->
       <view
         class="notice-bar"
         v-if="noticeList.length"
@@ -50,7 +50,9 @@
             </swiper-item>
           </swiper>
         </view>
-        <text class="notice-arrow" @tap.stop="openNoticeList">›</text>
+        <view class="notice-arrow" @tap.stop="openNoticeList">
+          <sprite-icon name="xiangyou-pink" :size="15" />
+        </view>
       </view>
     </view>
 
@@ -72,10 +74,12 @@
               </view>
               <text class="item-cate-header-text">{{ itemCateLabel }}</text>
               <view class="item-cate-header-side item-cate-header-side--right">
-                <text
+                <!-- 收起向右、展开向下，用两套雪碧图，避免旋转文字箭头 -->
+                <sprite-icon
                   class="item-cate-arrow"
-                  :class="{ 'item-cate-arrow--expanded': itemExpanded }"
-                >></text>
+                  :name="itemExpanded ? 'xiangxia-pink' : 'xiangyou-pink'"
+                  :size="itemExpanded ? 25 : 15"
+                />
               </view>
             </view>
             <block v-if="itemExpanded">
@@ -135,10 +139,12 @@
               </view>
               <text class="item-cate-header-text">{{ itemCateLabel }}</text>
               <view class="item-cate-header-side item-cate-header-side--right">
-                <text
+                <!-- 收起向右、展开向下，用两套雪碧图，避免旋转文字箭头 -->
+                <sprite-icon
                   class="item-cate-arrow"
-                  :class="{ 'item-cate-arrow--expanded': itemExpanded }"
-                >></text>
+                  :name="itemExpanded ? 'xiangxia-pink' : 'xiangyou-pink'"
+                  :height="itemExpanded ? 12 : 20"
+                />
               </view>
             </view>
             <block v-if="itemExpanded">
@@ -1216,11 +1222,11 @@ export default {
 
 .notice-arrow {
   flex-shrink: 0;
-  font-size: 36upx;
-  color: $fontPinkColor;
   margin-left: 8upx;
-  line-height: 1;
   padding: 8upx 4upx 8upx 12upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .main-body {
@@ -1290,15 +1296,7 @@ export default {
 }
 
 .item-cate-arrow {
-  font-size: 30upx;
-  color: $fontPinkColor;
   flex-shrink: 0;
-  line-height: 1;
-}
-
-/* 展开时箭头向下 */
-.item-cate-arrow--expanded {
-  transform: rotate(90deg);
 }
 
 .item-cate-sub {

mallApp/src/utils/mainIndexSprite.js

@@ -16,7 +16,7 @@ const DEFAULT_SHEET_KEY = "main";
  */
 export const SPRITE_SHEETS = {
   main: {
-    path: "/hhb/sprite_icon/main-index.webp?time=2608191707",
+    path: "/hhb/sprite_icon/main-index.webp?time=26082017",
     width: 500,
     height: 500,
     icons: {
@@ -55,6 +55,10 @@ export const SPRITE_SHEETS = {
 	  "icon-order-active": { x: 409, y: 245, w: 50, h: 50 },
 	  "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
 	  "notice": { x: 216, y: 15 , w: 31, h: 31 },//公告通知
+	  "xiangyou-pink": { x: 277, y: 17, w: 17, h: 27 },//向右-粉色
+	  "xiangxia-pink": { x: 294, y: 27, w: 27, h: 17 },//向下-粉色
+	  "xiangyou-gray": { x: 339, y: 17, w: 17, h: 27 },//向右-灰色
+	  "xiangyou-green": { x: 321, y: 17, w: 17, h: 27 },//向右-绿色
     }
   },
   /** 进货/供货商专用雪碧图，坐标待设计稿测量后补全 */