Browse Source

fix(ui): 首页全局样式泄漏阻断 DimensionProducts 商城卡片布局

Agnes Agent 1 week ago
parent
commit
c126b6c6ec
1 changed files with 19 additions and 19 deletions
  1. 19 19
      cfc-frontend/pages/index-home/index.vue

+ 19 - 19
cfc-frontend/pages/index-home/index.vue

@@ -303,7 +303,7 @@
       <text class="hero-slogan">家里每个人的状态,你真的看见了吗?</text>
 
       <button class="hero-cta-btn" @click="handleLogin">免费体验 · 登录 / 注册</button>
-      <text class="hero-powered">亿图腾科技出品</text>
+      <text class="hero-powered">浠艾福科技出品</text>
     </view>
 
     <!-- ② 平台作用·价值主张 -->
@@ -409,15 +409,15 @@
         <view v-if="hotProducts.length === 0" class="empty-state" style="padding: 40rpx 0;">
           <text class="empty-text">暂无商品</text>
         </view>
-        <view class="product-list" v-else>
-          <view class="product-card" v-for="prod in hotProducts" :key="prod.id" @click="goHotProduct(prod)">
-            <image class="product-cover" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill" lazy-load />
-            <view class="product-info">
-              <text class="product-name line-clamp-1">{{ prod.name }}</text>
-              <text class="product-desc line-clamp-1">{{ prod.desc }}</text>
-              <view class="product-bottom">
-                <text class="product-fee" v-if="prod.price">¥{{ prod.price }}</text>
-                <text class="product-fee" v-else>立即查看 ›</text>
+        <view class="hot-product-list" v-else>
+          <view class="hot-product-card" v-for="prod in hotProducts" :key="prod.id" @click="goHotProduct(prod)">
+            <image class="hot-product-cover" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill" lazy-load />
+            <view class="hot-product-info">
+              <text class="hot-product-name line-clamp-1">{{ prod.name }}</text>
+              <text class="hot-product-desc line-clamp-1">{{ prod.desc }}</text>
+              <view class="hot-product-bottom">
+                <text class="hot-product-fee" v-if="prod.price">¥{{ prod.price }}</text>
+                <text class="hot-product-fee" v-else>立即查看 ›</text>
               </view>
             </view>
           </view>
@@ -2761,12 +2761,12 @@ $c-warm-tint:     #FFF3E7;
 }
 
 /* ===== 热门商品列表 ===== */
-.product-list {
+.hot-product-list {
   display: flex;
   flex-direction: column;
   gap: 16rpx;
 }
-.product-card {
+.hot-product-card {
   background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
@@ -2774,38 +2774,38 @@ $c-warm-tint:     #FFF3E7;
   flex-direction: row;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
-.product-card:active {
+.hot-product-card:active {
   opacity: 0.8;
 }
-.product-cover {
+.hot-product-cover {
   width: 200rpx;
   height: 160rpx;
   flex-shrink: 0;
   background: $facade-fill;
 }
-.product-info {
+.hot-product-info {
   flex: 1;
   padding: 16rpx;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-.product-name {
+.hot-product-name {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: bold;
   color: $facade-text-strong;
   margin-bottom: 6rpx;
 }
-.product-desc {
+.hot-product-desc {
   font-size: calc(22rpx * var(--font-scale, 1));
   color: $facade-text-muted;
   margin-bottom: 8rpx;
 }
-.product-bottom {
+.hot-product-bottom {
   display: flex;
   align-items: center;
 }
-.product-fee {
+.hot-product-fee {
   font-size: calc(22rpx * var(--font-scale, 1));
   color: $brand-primary;
   font-weight: 600;