柜内商品展示页优化：开门按钮突出显示

haha-mp/src/components/BrandSlogan.vue

@@ -74,24 +74,24 @@ const displayText = computed(() => {
   &__divider {
     width: 2rpx;
     height: 28rpx;
-    background: #666666;
+    background: $color-text-tertiary;
     opacity: 0.6;
     flex-shrink: 0;
 
     &--dark {
-      background: #000000;
+      background: $color-text-primary;
     }
   }
 
   &__text {
     font-size: 24rpx;
-    color: #666666;
+    color: $color-text-secondary;
     line-height: 1.5;
     white-space: nowrap;
     font-family: 'PingFang SC', -apple-system, 'Helvetica Neue', sans-serif;
 
     &--dark {
-      color: #000000;
+      color: $color-text-primary;
     }
   }
 

haha-mp/src/pages/products/products.vue

@@ -101,9 +101,11 @@
 
     <!-- 底部操作栏 -->
     <view v-if="!loading && !errorMsg" class="bottom-bar">
-      <view class="btn-back" @click="goBack">返回</view>
-      <view class="bottom-bar-center">
+      <view class="bottom-trust">
         <BrandSlogan type="standard" serviceType="先享后付" :compact="true" />
+      </view>
+      <view class="bottom-actions">
+        <view class="btn-back" @click="goBack">返回</view>
         <view class="btn-open" @click="handleOpenDoor">开门购物</view>
       </view>
     </view>
@@ -297,7 +299,7 @@ const goBack = () => {
 }
 
 .loading-text {
-  margin-top: 20rpx;
+  margin-top: $spacing-sm;
   font-size: 28rpx;
   color: $color-text-secondary;
 }
@@ -318,27 +320,27 @@ const goBack = () => {
   line-height: 80rpx;
   text-align: center;
   background: $color-error;
-  color: #fff;
+  color: $color-bg-primary;
   border-radius: 50%;
   font-size: 40rpx;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .error-text {
-  margin-top: 24rpx;
+  margin-top: $spacing-md;
   font-size: 28rpx;
   color: $color-text-secondary;
   text-align: center;
 }
 
 .error-btn {
-  margin-top: 40rpx;
-  padding: 16rpx 60rpx;
+  margin-top: $spacing-xl;
+  padding: $spacing-sm 60rpx;
   background: $color-primary;
   color: $color-text-primary;
-  border-radius: 40rpx;
+  border-radius: $radius-xl;
   font-size: 28rpx;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 /* 门Tab切换 */
@@ -359,7 +361,7 @@ const goBack = () => {
 
 .door-tab.active {
   color: $color-text-primary;
-  font-weight: bold;
+  font-weight: 600;
 
   &::after {
     content: '';
@@ -376,13 +378,13 @@ const goBack = () => {
 
 /* 楼层列表 */
 .floors-list {
-  padding: 20rpx;
+  padding: $spacing-sm;
 }
 
 .floor-card {
   background: $color-bg-primary;
   border-radius: $radius-md;
-  margin-bottom: 20rpx;
+  margin-bottom: $spacing-sm;
   overflow: hidden;
   box-shadow: $shadow-sm;
 }
@@ -401,15 +403,15 @@ const goBack = () => {
   text-align: center;
   background: $color-primary;
   color: $color-text-primary;
-  border-radius: 10rpx;
+  border-radius: $radius-sm;
   font-size: 24rpx;
-  font-weight: bold;
-  margin-right: 16rpx;
+  font-weight: 600;
+  margin-right: $spacing-sm;
 }
 
 .floor-title {
   font-size: 28rpx;
-  font-weight: bold;
+  font-weight: 600;
   color: $color-text-primary;
   flex: 1;
 }
@@ -510,7 +512,7 @@ const goBack = () => {
 .goods-price {
   font-size: 32rpx;
   color: $color-error;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .goods-discount-price {
@@ -541,7 +543,7 @@ const goBack = () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 80rpx 0;
+  padding: $spacing-xxl 0;
 }
 
 .empty-icon {
@@ -549,21 +551,21 @@ const goBack = () => {
 }
 
 .empty-main-text {
-  margin-top: 20rpx;
+  margin-top: $spacing-md;
   font-size: 28rpx;
   color: $color-text-primary;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .empty-sub-text {
-  margin-top: 8rpx;
+  margin-top: $spacing-xs;
   font-size: 24rpx;
   color: $color-text-secondary;
 }
 
 /* 底部占位 */
 .bottom-placeholder {
-  height: 140rpx;
+  height: 180rpx;
 }
 
 /* 底部操作栏 */
@@ -572,22 +574,30 @@ const goBack = () => {
   bottom: 0;
   left: 0;
   right: 0;
-  display: flex;
-  align-items: center;
-  gap: 20rpx;
-  padding: 20rpx 30rpx;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  padding: $spacing-md 30rpx;
+  padding-bottom: calc($spacing-md + env(safe-area-inset-bottom));
   background: $color-bg-primary;
-  box-shadow: $shadow-lg;
+  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.04);
+}
+
+.bottom-trust {
+  display: flex;
+  justify-content: center;
+  margin-bottom: $spacing-sm;
+}
+
+.bottom-actions {
+  display: flex;
+  gap: $spacing-sm;
 }
 
 .btn-back {
-  flex: 1;
+  flex: 2;
   text-align: center;
   padding: 22rpx 0;
-  border-radius: 44rpx;
+  border-radius: $radius-xl;
   font-size: 28rpx;
-  font-weight: bold;
+  font-weight: 500;
   color: $color-text-secondary;
   background: $color-bg-tertiary;
 
@@ -596,28 +606,31 @@ const goBack = () => {
   }
 }
 
-.bottom-bar-center {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10rpx;
-}
-
 .btn-open {
-  width: 100%;
+  flex: 3;
   text-align: center;
   padding: 22rpx 0;
-  border-radius: 44rpx;
-  font-size: 28rpx;
-  font-weight: bold;
+  border-radius: $radius-xl;
+  font-size: 30rpx;
+  font-weight: 600;
   color: $color-text-primary;
-  background: linear-gradient(135deg, $color-primary-light, $color-primary);
-  box-shadow: $shadow-primary;
+  background: linear-gradient(135deg, $color-primary, $color-primary-dark);
+  box-shadow: 0 6rpx 20rpx rgba(255, 160, 0, 0.3);
+  animation: btn-breathe 2.4s $ease-in-out infinite;
 
   &:active {
     opacity: 0.9;
     transform: scale(0.98);
+    animation: none;
+  }
+}
+
+@keyframes btn-breathe {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.04);
   }
 }
 </style>