830 lines
19 KiB
Vue
830 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
|||
|
|
<!-- 顶部 Banner -->
|
|||
|
|
<view class="hero">
|
|||
|
|
<view class="hero-badge">
|
|||
|
|
<text class="badge-dot">•</text>
|
|||
|
|
<text class="badge-text">{{ countdownText }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="hero-title">
|
|||
|
|
<text class="year">2026</text>
|
|||
|
|
<text class="main">新春祝福</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="hero-sub">新年快乐，万事如意!</text>
|
|||
|
|
<!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 新春提示栏 -->
|
|||
|
|
<view v-if="noticeList && noticeList.length > 0" class="notice-bar">
|
|||
|
|
<view class="notice-left">
|
|||
|
|
<swiper
|
|||
|
|
class="notice-swiper"
|
|||
|
|
vertical
|
|||
|
|
autoplay
|
|||
|
|
circular
|
|||
|
|
interval="3000"
|
|||
|
|
duration="500"
|
|||
|
|
>
|
|||
|
|
<swiper-item
|
|||
|
|
v-for="(tip, index) in noticeList"
|
|||
|
|
:key="index"
|
|||
|
|
class="notice-swiper-item"
|
|||
|
|
@tap="onNoticeTap(tip)"
|
|||
|
|
>
|
|||
|
|
<text v-if="tip.tag" class="notice-tag">{{
|
|||
|
|
getTagText(tip.tag)
|
|||
|
|
}}</text>
|
|||
|
|
<text class="notice-text">{{ tip.text }}</text>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
</view>
|
|||
|
|
<text class="notice-arrow">›</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 功能入口宫格 -->
|
|||
|
|
<view class="feature-grid">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, idx) in features"
|
|||
|
|
:key="idx"
|
|||
|
|
class="feature-item"
|
|||
|
|
@tap="onFeatureTap(item)"
|
|||
|
|
>
|
|||
|
|
<image
|
|||
|
|
class="feature-icon"
|
|||
|
|
:src="item.icon"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
:style="{
|
|||
|
|
backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC',
|
|||
|
|
}"
|
|||
|
|
/>
|
|||
|
|
<view class="feature-texts">
|
|||
|
|
<text class="feature-title">{{ item.title }}</text>
|
|||
|
|
<text class="feature-sub">{{ item.subtitle }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 今日灵感 -->
|
|||
|
|
<view class="daily-section">
|
|||
|
|
<view class="daily-header">
|
|||
|
|
<text class="daily-title">今日灵感</text>
|
|||
|
|
<text class="daily-date">{{ todayDate }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="daily-card">
|
|||
|
|
<view class="daily-content">
|
|||
|
|
<text class="quote-mark">“</text>
|
|||
|
|
<text class="daily-text">{{ dailyGreeting }}</text>
|
|||
|
|
<text class="quote-mark right">”</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="daily-actions">
|
|||
|
|
<!-- <view class="action-btn copy" @tap="copyGreeting">
|
|||
|
|
<text class="icon">❐</text> 复制
|
|||
|
|
</view> -->
|
|||
|
|
<view class="action-btn use" @tap="useGreeting">
|
|||
|
|
<text class="icon">✎</text> 去制作
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</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-grid">
|
|||
|
|
<view
|
|||
|
|
v-for="(card, i) in recommendList"
|
|||
|
|
:key="i"
|
|||
|
|
class="use-card"
|
|||
|
|
@tap="onCardClick(card)"
|
|||
|
|
>
|
|||
|
|
<view class="card-cover-wrap">
|
|||
|
|
<image :src="card.imageUrl" class="card-cover" mode="aspectFill" />
|
|||
|
|
<view v-if="card.tag" class="card-tag" :class="`tag--${card.tag}`">
|
|||
|
|
{{ getTagText(card.tag) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-info">
|
|||
|
|
<view class="card-title">{{ card.title }}</view>
|
|||
|
|
<view class="card-desc">{{ card.content }}</view>
|
|||
|
|
<view class="card-footer">
|
|||
|
|
<view class="cta-btn" @tap.stop="onCardClick(card)">
|
|||
|
|
{{ getCtaText(card.type) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="loading" class="loading-text">加载中...</view>
|
|||
|
|
<view v-if="!hasMore && recommendList.length > 0" class="no-more-text"
|
|||
|
|
>没有更多了</view
|
|||
|
|
>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from "vue";
|
|||
|
|
import {
|
|||
|
|
onPullDownRefresh,
|
|||
|
|
onShareAppMessage,
|
|||
|
|
onShareTimeline,
|
|||
|
|
onReachBottom,
|
|||
|
|
onLoad,
|
|||
|
|
onShow,
|
|||
|
|
} from "@dcloudio/uni-app";
|
|||
|
|
import { getBavBarHeight } from "@/utils/system";
|
|||
|
|
import { getRecommendList, getRandomGreeting, getTipsList } from "@/api/system";
|
|||
|
|
import { getShareToken, saveViewRequest, trackRecord } from "@/utils/common.js";
|
|||
|
|
|
|||
|
|
const countdownText = ref("");
|
|||
|
|
const recommendList = ref([]);
|
|||
|
|
const page = ref(1);
|
|||
|
|
const hasMore = ref(true);
|
|||
|
|
const loading = ref(false);
|
|||
|
|
|
|||
|
|
const updateCountdown = () => {
|
|||
|
|
const now = new Date();
|
|||
|
|
const springFestival = new Date("2026-02-17T00:00:00"); // 2026春节
|
|||
|
|
|
|||
|
|
// 只比较日期，忽略时分秒
|
|||
|
|
now.setHours(0, 0, 0, 0);
|
|||
|
|
springFestival.setHours(0, 0, 0, 0);
|
|||
|
|
|
|||
|
|
const diffTime = now.getTime() - springFestival.getTime();
|
|||
|
|
const days = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|||
|
|
|
|||
|
|
if (days < 0) {
|
|||
|
|
countdownText.value = `距春节还有 ${Math.abs(days)} 天`;
|
|||
|
|
} else if (days === 0) {
|
|||
|
|
countdownText.value = "大年初一";
|
|||
|
|
} else {
|
|||
|
|
const cnNums = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
|
|||
|
|
if (days < 10) {
|
|||
|
|
countdownText.value = `大年初${cnNums[days]}`;
|
|||
|
|
} else if (days < 15) {
|
|||
|
|
const sub = days + 1 - 10;
|
|||
|
|
const subCn = ["一", "二", "三", "四", "五"][sub - 1];
|
|||
|
|
countdownText.value = `正月十${subCn}`;
|
|||
|
|
} else if (days === 14) {
|
|||
|
|
// days=14是第15天
|
|||
|
|
countdownText.value = "元宵节";
|
|||
|
|
} else {
|
|||
|
|
countdownText.value = "蛇年大吉";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const todayDate = ref("");
|
|||
|
|
const dailyGreeting = ref("");
|
|||
|
|
|
|||
|
|
onShow(() => {
|
|||
|
|
updateCountdown();
|
|||
|
|
getIndexTips();
|
|||
|
|
const date = new Date();
|
|||
|
|
todayDate.value = `${date.getMonth() + 1}月${date.getDate()}日`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onLoad((options) => {
|
|||
|
|
if (options.shareToken) saveViewRequest(options.shareToken, "index");
|
|||
|
|
|
|||
|
|
// updateCountdown();
|
|||
|
|
getRandomGreetingText();
|
|||
|
|
fetchRecommendList();
|
|||
|
|
trackRecord({
|
|||
|
|
eventName: "index_page_visit",
|
|||
|
|
eventType: `visit`,
|
|||
|
|
});
|
|||
|
|
// Daily Inspiration Logic
|
|||
|
|
// const startOfYear = new Date(date.getFullYear(), 0, 0);
|
|||
|
|
// const diff = date - startOfYear;
|
|||
|
|
// const oneDay = 1000 * 60 * 60 * 24;
|
|||
|
|
// const dayOfYear = Math.floor(diff / oneDay);
|
|||
|
|
|
|||
|
|
// const index = dayOfYear % inspirationList.length;
|
|||
|
|
// dailyGreeting.value = inspirationList[index];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onShareAppMessage(async () => {
|
|||
|
|
const shareToken = await getShareToken("index");
|
|||
|
|
return {
|
|||
|
|
title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
|
|||
|
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
|||
|
|
imageUrl:
|
|||
|
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onShareTimeline(async () => {
|
|||
|
|
const shareToken = await getShareToken("index_timeline");
|
|||
|
|
return {
|
|||
|
|
title: "新年好运已送达 🎊｜祝福卡·头像·壁纸",
|
|||
|
|
query: `shareToken=${shareToken}`,
|
|||
|
|
imageUrl:
|
|||
|
|
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const getIndexTips = async () => {
|
|||
|
|
const res = await getTipsList();
|
|||
|
|
noticeList.value = res || [];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getRandomGreetingText = async () => {
|
|||
|
|
const content = await getRandomGreeting();
|
|||
|
|
dailyGreeting.value =
|
|||
|
|
content || "烟火起，照人间，举杯敬此年。烟花落，看人间，家家户户皆团圆。";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const useGreeting = () => {
|
|||
|
|
trackRecord({
|
|||
|
|
eventName: "index_goto_make",
|
|||
|
|
eventType: "jump",
|
|||
|
|
elementId: dailyGreeting.value,
|
|||
|
|
});
|
|||
|
|
uni.setStorageSync("TEMP_BLESSING_TEXT", dailyGreeting.value);
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: "/pages/make/index",
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const noticeList = ref([]);
|
|||
|
|
|
|||
|
|
const onNoticeTap = (tip) => {
|
|||
|
|
if (!tip.url) return;
|
|||
|
|
|
|||
|
|
if (tip.type === "path") {
|
|||
|
|
uni.navigateTo({ url: tip.url });
|
|||
|
|
} else if (tip.type === "switchTab") {
|
|||
|
|
uni.switchTab({ url: tip.url });
|
|||
|
|
} else {
|
|||
|
|
// 默认跳转 webview (公众号文章)
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/webview/index?url=" + encodeURIComponent(tip.url),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const features = ref([
|
|||
|
|
{
|
|||
|
|
title: "新春祝福卡片",
|
|||
|
|
subtitle: "定制专属贺卡吧",
|
|||
|
|
icon: "/static/icon/celebrate.png",
|
|||
|
|
type: "card",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "新年运势",
|
|||
|
|
subtitle: "抽取新年关键词",
|
|||
|
|
icon: "/static/icon/yunshi.png",
|
|||
|
|
type: "fortune",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "新春头像",
|
|||
|
|
subtitle: "焕上节日新饰",
|
|||
|
|
icon: "/static/icon/guashi.png",
|
|||
|
|
type: "avatar_decor",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "精美壁纸",
|
|||
|
|
subtitle: "获取精美壁纸",
|
|||
|
|
icon: "/static/icon/bizhi.png",
|
|||
|
|
type: "wallpaper",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const fetchRecommendList = async (isRefresh = false) => {
|
|||
|
|
if (loading.value || (!hasMore.value && !isRefresh)) return;
|
|||
|
|
loading.value = true;
|
|||
|
|
if (isRefresh) {
|
|||
|
|
page.value = 1;
|
|||
|
|
hasMore.value = true;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const res = await getRecommendList(page.value);
|
|||
|
|
const list = res?.list || [];
|
|||
|
|
if (isRefresh) {
|
|||
|
|
recommendList.value = list;
|
|||
|
|
} else {
|
|||
|
|
recommendList.value = [...recommendList.value, ...list];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (res.hasNext !== undefined) {
|
|||
|
|
hasMore.value = res.hasNext;
|
|||
|
|
} else {
|
|||
|
|
// Fallback if API doesn't return hasNext
|
|||
|
|
if (list.length < 10) hasMore.value = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (list.length > 0) {
|
|||
|
|
page.value++;
|
|||
|
|
} else {
|
|||
|
|
hasMore.value = false;
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTagText = (tag) => {
|
|||
|
|
const map = {
|
|||
|
|
hot: "热门",
|
|||
|
|
new: "新品",
|
|||
|
|
featured: "精选",
|
|||
|
|
hot2: "爆款",
|
|||
|
|
};
|
|||
|
|
return map[tag] || tag;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getCtaText = (type) => {
|
|||
|
|
const map = {
|
|||
|
|
frame: "去制作",
|
|||
|
|
decor: "去装饰",
|
|||
|
|
avatar: "去查看",
|
|||
|
|
card: "去写祝福",
|
|||
|
|
fortune: "去抽取",
|
|||
|
|
};
|
|||
|
|
return map[type] || "立即查看";
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onCardClick = (card) => {
|
|||
|
|
// 构造传递的数据
|
|||
|
|
trackRecord({
|
|||
|
|
eventName: "index_recommend_click",
|
|||
|
|
eventType: `jump_${card.type}`,
|
|||
|
|
elementId: card?.recommendId || "",
|
|||
|
|
});
|
|||
|
|
const query = `recommendId=${card.recommendId || ""}&type=${card.type || ""}&imageUrl=${encodeURIComponent(card.imageUrl || "")}`;
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
card.scene === "avatar_download" ||
|
|||
|
|
["frame", "decor", "avatar"].includes(card.type)
|
|||
|
|
) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/avatar/index?${query}`,
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Default fallback based on type
|
|||
|
|
if (card.type === "card") {
|
|||
|
|
// 贺卡制作通常是 Tab 页，通过 Storage 传递参数
|
|||
|
|
uni.setStorageSync("RECOMMEND_CARD_DATA", {
|
|||
|
|
recommendId: card.recommendId,
|
|||
|
|
imageUrl: card.imageUrl,
|
|||
|
|
type: card.type,
|
|||
|
|
});
|
|||
|
|
uni.switchTab({ url: "/pages/make/index" });
|
|||
|
|
} else if (card.type === "fortune") {
|
|||
|
|
uni.navigateTo({ url: "/pages/fortune/index" });
|
|||
|
|
} else {
|
|||
|
|
// 默认跳转到头像页
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: `/pages/avatar/index?${query}`,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onFeatureTap = (item) => {
|
|||
|
|
trackRecord({
|
|||
|
|
eventName: "index_function_select",
|
|||
|
|
eventType: "jump",
|
|||
|
|
elementId: item.type,
|
|||
|
|
});
|
|||
|
|
if (item.type === "fortune") {
|
|||
|
|
uni.navigateTo({ url: "/pages/fortune/index" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (item.type === "card") {
|
|||
|
|
uni.switchTab({ url: "/pages/make/index" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (item.type === "avatar_decor" || item.type === "avatar_frame") {
|
|||
|
|
uni.navigateTo({ url: "/pages/avatar/index" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (item.type === "wallpaper") {
|
|||
|
|
uni.navigateTo({ url: "/pages/wallpaper/index" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.showToast({ title: `进入：${item.title}`, icon: "none" });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onReachBottom(() => {
|
|||
|
|
fetchRecommendList();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onPullDownRefresh(async () => {
|
|||
|
|
updateCountdown();
|
|||
|
|
await Promise.all([fetchRecommendList(true), getRandomGreetingText()]);
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
uni.showToast({ title: "已为你更新内容", icon: "success" });
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.spring-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #f8f6f6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部 Banner */
|
|||
|
|
.hero {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 24rpx auto;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
height: 324rpx;
|
|||
|
|
width: 92vw;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
|
|||
|
|
background-size: cover;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.hero-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background: rgba(255, 255, 255, 0.2);
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
.badge-dot {
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.hero-title {
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
.year {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.hero-sub {
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.hero-decor {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 12rpx;
|
|||
|
|
bottom: 12rpx;
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
opacity: 0.3;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 新春提示栏 */
|
|||
|
|
.notice-bar {
|
|||
|
|
margin: 0 24rpx 20rpx;
|
|||
|
|
padding: 16rpx 24rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
|||
|
|
|
|||
|
|
.notice-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 40rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.notice-tag {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #ff3b30;
|
|||
|
|
background: rgba(255, 59, 48, 0.1);
|
|||
|
|
padding: 2rpx 12rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-swiper {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.notice-swiper-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-text {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #333;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-arrow {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #ccc;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 功能入口宫格 - 2x2 */
|
|||
|
|
.feature-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
grid-gap: 20rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
|
|||
|
|
.feature-item {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: left;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
.feature-item::after {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-bottom-left-radius: 80rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
.feature-item:nth-child(1)::after,
|
|||
|
|
.feature-item:nth-child(2)::after {
|
|||
|
|
background: #fef2f2; /* 可换成你的主题粉 */
|
|||
|
|
}
|
|||
|
|
.feature-item:nth-child(3)::after,
|
|||
|
|
.feature-item:nth-child(4)::after {
|
|||
|
|
background: #fffbec; /* 温柔一点的黄 */
|
|||
|
|
}
|
|||
|
|
.feature-icon {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
padding: 5rpx;
|
|||
|
|
}
|
|||
|
|
.feature-texts {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.feature-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #222;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.feature-sub {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #888;
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 今日灵感 */
|
|||
|
|
.daily-section {
|
|||
|
|
margin: 24rpx 24rpx 0;
|
|||
|
|
.daily-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
.daily-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.daily-date {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.daily-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 59, 48, 0.08);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.daily-card::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 8rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #ff3b30;
|
|||
|
|
}
|
|||
|
|
.daily-content {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 10rpx 20rpx;
|
|||
|
|
.quote-mark {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #ff3b30;
|
|||
|
|
opacity: 0.2;
|
|||
|
|
position: absolute;
|
|||
|
|
line-height: 1;
|
|||
|
|
font-family: serif;
|
|||
|
|
}
|
|||
|
|
.quote-mark:first-child {
|
|||
|
|
top: -10rpx;
|
|||
|
|
left: -10rpx;
|
|||
|
|
}
|
|||
|
|
.quote-mark.right {
|
|||
|
|
bottom: -20rpx;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
.daily-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #444;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
font-style: italic;
|
|||
|
|
display: block;
|
|||
|
|
text-align: justify;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.daily-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
.action-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
.icon {
|
|||
|
|
margin-right: 6rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.action-btn.copy {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.action-btn.use {
|
|||
|
|
background: #ff3b30;
|
|||
|
|
color: #fff;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用区块标题 */
|
|||
|
|
.section {
|
|||
|
|
margin-top: 28rpx;
|
|||
|
|
}
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
.section-bar {
|
|||
|
|
width: 10rpx;
|
|||
|
|
height: 30rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
background: #ff3b30;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
}
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #222;
|
|||
|
|
flex: 1;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.section-more {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #ff3b30;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 大家都在用 - 网格列表 */
|
|||
|
|
.use-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
padding-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
.use-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.card-cover-wrap {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
padding-bottom: 120%; /* 竖向卡片 */
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
.card-cover {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.card-tag {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12rpx;
|
|||
|
|
left: 12rpx;
|
|||
|
|
padding: 4rpx 12rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.card-info {
|
|||
|
|
padding: 16rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
.card-desc {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.card-footer {
|
|||
|
|
margin-top: auto;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
.cta-btn {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #ff3b30;
|
|||
|
|
background: rgba(255, 59, 48, 0.08);
|
|||
|
|
padding: 8rpx 20rpx;
|
|||
|
|
border-radius: 999rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-text,
|
|||
|
|
.no-more-text {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|