fix: index use

pages/index/index.vue

@@ -60,38 +60,38 @@
       </view>
     </view>
 
-    <!-- 大家都在用（竖向列表：左图右文） -->
+    <!-- 大家都在用（网格布局） -->
     <view class="section">
       <view class="section-header">
         <view class="section-bar"></view>
         <text class="section-title">大家都在用</text>
         <text class="section-more" @tap="onMore('use')">查看更多 ></text>
       </view>
-      <view class="use-list">
+      <view class="use-grid">
         <view
           v-for="(card, i) in popularCards"
           :key="i"
-          class="use-row"
+          class="use-card"
           @tap="previewCard(card)"
         >
-          <view class="thumb-wrap">
+          <view class="card-cover-wrap">
-            <image :src="card.cover" class="thumb" mode="aspectFill" />
+            <image :src="card.cover" class="card-cover" mode="aspectFill" />
-            <view v-if="card.type === 'video'" class="thumb-play">▶</view>
+            <view
-          </view>
+              v-if="card.tag"
-          <view class="use-right">
+              class="card-tag"
-            <view class="title-line">
+              :class="`tag--${card.tagType || 'default'}`"
-              <text class="use-title">{{ card.title }}</text>
-              <text
-                v-if="card.tag"
-                class="tag"
-                :class="`tag--${card.tagType || 'default'}`"
-                >{{ card.tag }}</text
-              >
-            </view>
-            <text class="use-desc">{{ card.desc }}</text>
-            <text class="use-cta" @tap.stop="onCta(card)"
-              >{{ card.cta }} ></text
             >
+              {{ card.tag }}
+            </view>
+          </view>
+          <view class="card-info">
+            <view class="card-title">{{ card.title }}</view>
+            <view class="card-desc">{{ card.desc }}</view>
+            <view class="card-footer">
+              <view class="cta-btn" @tap.stop="onCta(card)">
+                {{ card.cta }}
+              </view>
+            </view>
           </view>
         </view>
       </view>
@@ -221,6 +221,15 @@ const popularCards = ref([
       "https://file.lihailezzc.com/91cd1611-bb87-442b-a338-24e9d79e4ee9.png",
     type: "video",
   },
+  {
+    title: "福气满满",
+    tag: "新款",
+    tagType: "new",
+    desc: "福字当头，好运连连。送给最爱的人。",
+    cta: "立即制作",
+    cover:
+      "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
+  },
 ]);
 
 const onFeatureTap = (item) => {
@@ -248,7 +257,8 @@ const onMore = () => {
 };
 
 const onCta = (card) => {
-  uni.showToast({ title: `${card.cta} · ${card.title}`, icon: "none" });
+  // uni.showToast({ title: `${card.cta} · ${card.title}`, icon: "none" });
+  uni.switchTab({ url: "/pages/make/index" });
 };
 
 onPullDownRefresh(() => {
@@ -513,88 +523,99 @@ onShareAppMessage(() => {
   }
 }
 
-/* 大家都在用 - 竖向列表 */
+/* 大家都在用 - 网格列表 */
-.use-list {
+.use-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
   padding: 0 24rpx;
   margin-top: 16rpx;
+  padding-bottom: 40rpx;
 }
-.use-row {
+.use-card {
-  display: flex;
-  align-items: center;
   background: #fff;
-  border-radius: 18rpx;
+  border-radius: 20rpx;
-  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
-  padding: 16rpx;
-  margin-bottom: 18rpx;
-}
-.thumb-wrap {
-  position: relative;
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 16rpx;
   overflow: hidden;
-  margin-right: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
 }
-.thumb {
+.card-cover-wrap {
+  position: relative;
+  width: 100%;
+  padding-bottom: 120%; /* 竖向卡片 */
+  background: #f5f5f5;
+}
+.card-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
-.thumb-play {
+.card-tag {
   position: absolute;
-  right: 8rpx;
+  top: 12rpx;
-  bottom: 8rpx;
+  left: 12rpx;
-  width: 40rpx;
+  padding: 4rpx 12rpx;
-  height: 40rpx;
+  border-radius: 8rpx;
-  border-radius: 50%;
+  font-size: 20rpx;
-  background: rgba(0, 0, 0, 0.55);
   color: #fff;
-  font-size: 22rpx;
+  font-weight: 500;
-  display: flex;
+  &.tag--hot {
-  align-items: center;
+    background: linear-gradient(135deg, #ff3b30, #ff9500);
-  justify-content: center;
+  }
+  &.tag--featured {
+    background: linear-gradient(135deg, #007aff, #5ac8fa);
+  }
+  &.tag--hot2 {
+    background: linear-gradient(135deg, #ff2d55, #ff375f);
+  }
+  &.tag--new {
+    background: linear-gradient(135deg, #5856d6, #af52de);
+  }
+  &.tag--default {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }
-.use-right {
+.card-info {
+  padding: 16rpx;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
-.title-line {
+.card-title {
-  display: flex;
-  align-items: center;
-}
-.use-title {
   font-size: 28rpx;
-  color: #222;
   font-weight: 600;
-  margin-right: 12rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.tag {
+.card-desc {
   font-size: 22rpx;
-  border-radius: 999rpx;
+  color: #999;
-  padding: 4rpx 10rpx;
+  line-height: 1.4;
-  margin-left: 4rpx;
+  margin-bottom: 16rpx;
-  &.tag--hot {
+  /* 限制2行 */
-    color: #ff6a00;
+  overflow: hidden;
-    background: #fff4eb;
+  text-overflow: ellipsis;
-  }
+  display: -webkit-box;
-  &.tag--featured {
+  -webkit-line-clamp: 2;
-    color: #ff4d6d;
+  -webkit-box-orient: vertical;
-    background: #fff0f3;
-  }
-  &.tag--hot2 {
-    color: #7c4dff;
-    background: #f3efff;
-  }
 }
-.use-desc {
+.card-footer {
-  margin-top: 6rpx;
+  margin-top: auto;
-  font-size: 24rpx;
+  display: flex;
-  color: #777;
+  justify-content: flex-end;
-  line-height: 1.5;
 }
-.use-cta {
+.cta-btn {
-  margin-top: 10rpx;
+  font-size: 22rpx;
-  font-size: 24rpx;
   color: #ff3b30;
+  background: rgba(255, 59, 48, 0.08);
+  padding: 8rpx 20rpx;
+  border-radius: 999rpx;
+  font-weight: 500;
 }
 </style>