diff --git a/pages/index/index.vue b/pages/index/index.vue index f3a1e77..894906f 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -60,38 +60,38 @@ - + 大家都在用 查看更多 > - + - - - - - - - {{ card.title }} - {{ card.tag }} - - {{ card.desc }} - {{ card.cta }} > + + + {{ card.tag }} + + + + {{ card.title }} + {{ card.desc }} + + + {{ card.cta }} + + @@ -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 { - display: flex; - align-items: center; +.use-card { background: #fff; - border-radius: 18rpx; - 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; + border-radius: 20rpx; 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; - bottom: 8rpx; - width: 40rpx; - height: 40rpx; - border-radius: 50%; - background: rgba(0, 0, 0, 0.55); + top: 12rpx; + left: 12rpx; + padding: 4rpx 12rpx; + border-radius: 8rpx; + font-size: 20rpx; color: #fff; - font-size: 22rpx; - display: flex; - align-items: center; - justify-content: center; + font-weight: 500; + &.tag--hot { + background: linear-gradient(135deg, #ff3b30, #ff9500); + } + &.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 { - display: flex; - align-items: center; -} -.use-title { +.card-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; - padding: 4rpx 10rpx; - margin-left: 4rpx; - &.tag--hot { - color: #ff6a00; - background: #fff4eb; - } - &.tag--featured { - color: #ff4d6d; - background: #fff0f3; - } - &.tag--hot2 { - color: #7c4dff; - background: #f3efff; - } + color: #999; + line-height: 1.4; + margin-bottom: 16rpx; + /* 限制2行 */ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } -.use-desc { - margin-top: 6rpx; - font-size: 24rpx; - color: #777; - line-height: 1.5; +.card-footer { + margin-top: auto; + display: flex; + justify-content: flex-end; } -.use-cta { - margin-top: 10rpx; - font-size: 24rpx; +.cta-btn { + font-size: 22rpx; color: #ff3b30; + background: rgba(255, 59, 48, 0.08); + padding: 8rpx 20rpx; + border-radius: 999rpx; + font-weight: 500; }