From c7cd83f3e9bf7c702668f2cf60190e55dd7b327a Mon Sep 17 00:00:00 2001 From: zzc <1761997216@qq.com> Date: Wed, 25 Feb 2026 23:59:11 +0800 Subject: [PATCH] fix: rank --- pages/index/index.vue | 1164 +++++++++++++---------------------------- 1 file changed, 355 insertions(+), 809 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index 8d2b433..fa803d8 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -28,201 +28,124 @@ - - - - - - LUCKY STATUS - {{ luckyScore }}% - - - - - {{ lunarDate.year }}年-{{ lunarDate.month - }}{{ lunarDate.day }} - - - 宜：{{ lunarDate.yi }} - - - 忌：{{ lunarDate.ji }} - + + + + LUCKY + + {{ luckyScore }} + % - - - 幸运色：{{ luckyColor }} - - - - - - - 已连续签到 {{ continuousDays }} 天 - 连续7天得大奖 - - - - {{ day.label }} - - - - - - - + + + + 宜 {{ lunarDate.yi.split("、")[0] }} + 忌 {{ lunarDate.ji.split("、")[0] }} + 幸运色：{{ luckyColor }} - - - - - - + - + - 排行榜单 - - - 壁纸 - 头像 - 贺卡 - + 制作贺卡·选场景 + + + + + + + {{ item.name }} + + + + - - - - {{ - index + 1 - }} - - - - {{ item.title }} - - - HOT - {{ item.usageCount }} 人在用 - - - - - 去制作 - - - - - - - + + + + + 热门好运壁纸 + + 查看全部 + + + + + {{ item.title }} + + + + + + + + + + 本周爆款头像 + + + 人气榜 + + + + + + + {{ item.title }} + + + + 更多 + + + @@ -246,15 +169,8 @@ import { ref, onMounted, computed } from "vue"; import { getStatusBarHeight } from "@/utils/system"; import { onShareAppMessage, onShareTimeline, onShow } from "@dcloudio/uni-app"; import { useUserStore } from "@/stores/user"; -import { - getRecommendList, - getRankList, - abilityCheck, - watchAdReward, -} from "@/api/system"; -import { saveRemoteImageToLocal, saveRecordRequest } from "@/utils/common"; +import { getRankList, watchAdReward } from "@/api/system"; import { getUserSignInfo, userSignIn } from "@/api/user"; -import { avatarDownloadRecord } from "@/api/avatar"; import LoginPopup from "@/components/LoginPopup/LoginPopup.vue"; import LuckyPopup from "@/components/LuckyPopup/LuckyPopup.vue"; @@ -270,48 +186,6 @@ const isLoggedIn = computed(() => !!userStore.userInfo.nickName); const userPoints = computed(() => userStore.userInfo.points || 0); const signInfo = ref({}); // 用户签到信息 -const weekDays = computed(() => { - const now = new Date(); - const todayStr = - signInfo.value.today || - `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`; - - const current = new Date(todayStr); - const day = current.getDay() || 7; // 1 (Mon) - 7 (Sun) - const monday = new Date(current); - monday.setDate(current.getDate() - day + 1); - - const days = []; - const labels = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]; - const signedDays = signInfo.value.signedDays || []; - - for (let i = 0; i < 7; i++) { - const d = new Date(monday); - d.setDate(monday.getDate() + i); - const y = d.getFullYear(); - const m = String(d.getMonth() + 1).padStart(2, "0"); - const da = String(d.getDate()).padStart(2, "0"); - const dateStr = `${y}-${m}-${da}`; - - let isSigned = false; - const isToday = dateStr === todayStr; - const isFuture = dateStr > todayStr; - - if (signedDays.includes(i + 1)) { - isSigned = true; - } - - days.push({ - label: labels[i], - date: dateStr, - isToday, - isSigned, - isFuture, - }); - } - return days; -}); - const greetingText = computed(() => { const hour = new Date().getHours(); if (hour < 6) return "凌晨好"; @@ -333,36 +207,47 @@ const handleLogin = () => { uni.$emit("show-login-popup"); } }; -const luckyScore = ref(98); -const luckyColor = ref("赤金朱红"); -const continuousDays = computed(() => signInfo.value.continuousDays || 0); -const currentMonthDays = computed(() => signInfo.value.totalDays || 0); -const totalMonthDays = computed(() => { - const date = new Date(); - return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); -}); // 当前月总天数 -const currentTab = ref("wallpaper"); +const luckyScore = ref(92); +const luckyColor = ref("如意金"); // 模拟农历数据 const lunarDate = ref({ year: "2026", month: "正月", day: "初一", - yi: "开光、祈福、求嗣", - ji: "安葬、动土", + yi: "团聚、访友、祈福", + ji: "远行、搬家", }); -const rankingList = ref([]); +const sceneList = ref([ + { + id: 1, + name: "节日祝福", + icon: "/static/icon/celebrate.png", + type: "holiday", + }, + { + id: 2, + name: "生日纪念", + icon: "/static/icon/guashi.png", + type: "birthday", + }, + { id: 3, name: "每日问候", icon: "/static/icon/yunshi.png", type: "daily" }, + { id: 4, name: "情感表达", icon: "/static/icon/hongbao.png", type: "love" }, +]); + +const wallpaperList = ref([]); +const avatarList = ref([]); onMounted(() => { fetchUserSingInfo(); // 获取用户签到信息 - fetchRankingData(); + fetchHomeData(); }); onShow(() => { - if (userStore.userInfo) { - // userInfo.value = userStore.userInfo; // 已改为 computed - } + // if (userStore.userInfo) { + // // userInfo.value = userStore.userInfo; // 已改为 computed + // } }); const fetchUserSingInfo = async () => { @@ -371,32 +256,39 @@ const fetchUserSingInfo = async () => { signInfo.value = res || {}; }; -const fetchRankingData = async () => { +const fetchHomeData = async () => { try { - const res = await getRankList(currentTab.value); - if (res && Array.isArray(res)) { - rankingList.value = res.slice(0, 10); - } else { - rankingList.value = []; + const [wallpapers, avatars] = await Promise.all([ + getRankList("wallpaper"), + getRankList("avatar"), + ]); + + if (wallpapers && Array.isArray(wallpapers)) { + wallpaperList.value = wallpapers.slice(0, 5); + } + + if (avatars && Array.isArray(avatars)) { + avatarList.value = avatars.slice(0, 5); } } catch (e) { - console.error("fetchRankingData error", e); - rankingList.value = []; + console.error("fetchHomeData error", e); } }; -const switchTab = (tab) => { - if (currentTab.value === tab) return; - currentTab.value = tab; - fetchRankingData(); +const navTo = (url) => { + uni.navigateTo({ url }); }; -const onNoticeTap = () => { - uni.showToast({ title: "暂无新消息", icon: "none" }); +const navToMake = (item) => { + uni.switchTab({ url: "/pages/make/index" }); }; -const onWalletTap = () => { - uni.navigateTo({ url: "/pages/mine/vip" }); +const navToWallpaper = (item) => { + uni.navigateTo({ url: `/pages/wallpaper/detail?id=${item.id}` }); +}; + +const navToAvatar = (item) => { + uni.navigateTo({ url: `/pages/avatar/index?id=${item.id}` }); }; const onOpenLucky = async () => { @@ -418,23 +310,9 @@ const onOpenLucky = async () => { signInfo.value.isSignedToday = true; if (typeof res.totalDays === "number") { signInfo.value.totalDays = res.totalDays; - } else { - signInfo.value.totalDays = (signInfo.value.totalDays || 0) + 1; } - - // Update signedDays locally - if (!signInfo.value.signedDays) { - signInfo.value.signedDays = []; - } - const today = new Date(signInfo.value.today || new Date()); - const dayIndex = today.getDay() || 7; - if (!signInfo.value.signedDays.includes(dayIndex)) { - signInfo.value.signedDays.push(dayIndex); - } - - // Update user assets (points) + fetchUserSingInfo(); userStore.fetchUserAssets(); - luckyPopupRef.value?.open(); } else { uni.showToast({ title: "签到失败", icon: "none" }); @@ -447,100 +325,6 @@ const onOpenLucky = async () => { } }; -const navTo = (url) => { - uni.navigateTo({ url }); -}; - -const handleCreate = (item) => { - uni.setStorageSync("RECOMMEND_CARD_DATA", { - recommendId: item.targetId, - imageUrl: item?.resourceInfo?.url, - }); - uni.navigateTo({ url: "/pages/make/index" }); - // uni.navigateTo({ - // url: "/pages/make/index", - // success: () => { - // // Pass the template ID to the make page via global event or storage since switchTab doesn't support query params directly - // // However, for better UX, we can use a global state or event bus. - // // Or simply navigate if it's just switching tabs. - // // Since the user wants to use the selected template, we should try to pass it. - // // Uni-app's switchTab doesn't support params. We can use a global variable or store. - // // Here we will use uni.$emit to notify the make page after switching. - // setTimeout(() => { - // uni.$emit("select-template", item.id); - // }, 100); - // }, - // }); -}; - -const handleDownload = async (item) => { - if (!isLoggedIn.value) { - uni.$emit("show-login-popup"); - return; - } - - const type = - item.type === "wallpaper" ? "wallpaper_download" : "avatar_download"; - const abilityRes = await abilityCheck(type); - - if (!abilityRes.canUse) { - if ( - abilityRes?.blockType === "need_share" && - abilityRes?.message === "分享可继续" - ) { - uni.showToast({ - title: "分享给好友即可下载", - icon: "none", - }); - return; - } - if ( - abilityRes?.blockType === "need_ad" && - abilityRes?.message === "观看广告可继续" - ) { - uni.showModal({ - title: "积分不足", - content: "观看广告可获得50积分，继续下载", - success: (res) => { - if (res.confirm) { - rewardAdRef.value.show(); - } - }, - }); - return; - } - uni.showToast({ - title: "您今日下载次数已用完，明日再试", - icon: "none", - }); - return; - } - - uni.showLoading({ title: "下载中..." }); - try { - const promises = [ - saveRemoteImageToLocal(item.resourceInfo.url), - saveRecordRequest("", item.id, type, item.resourceInfo.url), - ]; - - if (item.type === "avatar") { - promises.push( - avatarDownloadRecord({ id: item.id, url: item.resourceInfo.url }), - ); - } - - await Promise.all(promises); - - await userStore.fetchUserAssets(); - uni.showToast({ title: "保存成功 消耗 20 积分" }); - } catch (e) { - console.error("Download failed", e); - uni.showToast({ title: "下载失败", icon: "none" }); - } finally { - uni.hideLoading(); - } -}; - const handleAdReward = async (token) => { try { const res = await watchAdReward(token); @@ -557,16 +341,6 @@ const handleAdReward = async (token) => { } }; -const onRankItemTap = (item) => { - if (item.type === "avatar") { - uni.navigateTo({ url: `/pages/avatar/index?id=${item.id}` }); - } else if (item.type === "card") { - uni.switchTab({ url: "/pages/make/index" }); - } else if (item.type === "wallpaper") { - uni.navigateTo({ url: `/pages/wallpaper/index` }); - } -}; - onShareAppMessage(() => { return { title: "开启你的2026新春好运！", @@ -657,224 +431,107 @@ onShareTimeline(() => { } } -/* 主卡片 (Lucky Status) */ -.main-card { - position: relative; +/* Lucky Card */ +.lucky-card { width: 100%; - height: 640rpx; - background: linear-gradient(180deg, #fcece8 0%, #f7dcd6 100%); - border-radius: 40rpx; - padding: 40rpx; + height: 240rpx; + background: #fff; + border-radius: 32rpx; + padding: 32rpx; box-sizing: border-box; - box-shadow: 0 20rpx 40rpx rgba(189, 87, 87, 0.15); display: flex; - flex-direction: column; + align-items: center; justify-content: space-between; - overflow: hidden; margin-bottom: 48rpx; + box-shadow: 0 12rpx 32rpx rgba(216, 30, 6, 0.08); - .card-bg-decor { - position: absolute; - top: -50rpx; - right: -50rpx; - width: 300rpx; - height: 300rpx; - background: radial-gradient( - circle, - rgba(255, 255, 255, 0.4) 0%, - rgba(255, 255, 255, 0) 70% - ); - border-radius: 50%; - } - - .card-top { - display: flex; - justify-content: space-between; - align-items: flex-start; - z-index: 2; - - .lucky-status { - display: flex; - flex-direction: column; - - .status-label { - font-size: 22rpx; - color: #a85a5a; - letter-spacing: 2rpx; - font-weight: 600; - margin-bottom: 8rpx; - } - - .status-value { - font-size: 88rpx; - font-weight: bold; - color: #a85a5a; - line-height: 1; - - .percent { - font-size: 40rpx; - margin-left: 4rpx; - } - } - } - - .date-box { - background: rgba(255, 255, 255, 0.6); - border-radius: 20rpx; - padding: 20rpx; - backdrop-filter: blur(10rpx); - - .date-row { - display: flex; - align-items: center; - margin-bottom: 12rpx; - - .date-text { - font-size: 24rpx; - color: #8b5a5a; - font-weight: bold; - margin-left: 8rpx; - } - } - - .yi-ji-row { - font-size: 20rpx; - margin-bottom: 4rpx; - color: #666; - - .label { - color: #999; - } - .content { - color: #555; - } - } - } - } - - .card-center { + .lucky-left { display: flex; flex-direction: column; - align-items: center; - justify-content: center; - flex: 1; - z-index: 2; + align-items: flex-start; - .lucky-color-tag { - background: #fff; - padding: 12rpx 36rpx; - border-radius: 40rpx; - font-size: 26rpx; + .lucky-label { + font-size: 20rpx; color: #d81e06; - font-weight: 600; - box-shadow: 0 4rpx 12rpx rgba(216, 30, 6, 0.15); + font-weight: bold; letter-spacing: 2rpx; + margin-bottom: 4rpx; + } + + .lucky-score { + display: flex; + align-items: baseline; + + .score-value { + font-size: 64rpx; + font-weight: 800; + color: #d81e06; + line-height: 1; + } + .score-unit { + font-size: 32rpx; + color: #d81e06; + margin-left: 4rpx; + font-weight: bold; + } } } - .card-bottom { - z-index: 2; + .lucky-divider { + width: 2rpx; + height: 64rpx; + background: #eee; + margin: 0 24rpx; + } - .open-lucky-btn { - width: 100%; - height: 108rpx; - background: #fff; - border-radius: 54rpx; + .lucky-middle { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + + .lucky-tags { display: flex; - align-items: center; - justify-content: center; - color: #d81e06; - font-size: 34rpx; - font-weight: 800; - margin-bottom: 32rpx; - box-shadow: 0 8rpx 20rpx rgba(216, 30, 6, 0.2); - letter-spacing: 2rpx; + gap: 12rpx; + margin-bottom: 12rpx; - &::after { - border: none; + .tag-yi, + .tag-ji { + background: #f5f5f5; + padding: 4rpx 12rpx; + border-radius: 8rpx; + font-size: 20rpx; + color: #666; + } + .tag-yi { + color: #d81e06; + background: rgba(216, 30, 6, 0.05); } } - .week-sign-section { - width: 100%; + .lucky-color { + font-size: 22rpx; + color: #999; + } + } - .sign-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 24rpx; + .lucky-btn { + width: 180rpx; + height: 72rpx; + background: linear-gradient(135deg, #b8860b 0%, #d4a017 100%); + border-radius: 36rpx; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 24rpx; + font-weight: bold; + box-shadow: 0 8rpx 16rpx rgba(184, 134, 11, 0.3); + margin: 0; + padding: 0; - .sign-title { - font-size: 24rpx; - color: #a85a5a; - font-weight: bold; - } - - .sign-tip { - font-size: 20rpx; - color: #a85a5a; - opacity: 0.7; - } - } - - .week-days { - display: flex; - justify-content: space-between; - - .day-item { - display: flex; - flex-direction: column; - align-items: center; - - .day-label { - font-size: 20rpx; - color: #a85a5a; - margin-bottom: 12rpx; - opacity: 0.8; - } - - .status-icon { - width: 44rpx; - height: 44rpx; - border-radius: 50%; - background: rgba(255, 255, 255, 0.4); - display: flex; - align-items: center; - justify-content: center; - - .dot { - width: 8rpx; - height: 8rpx; - border-radius: 50%; - background: #a85a5a; - opacity: 0.3; - } - } - - &.is-today { - .day-label { - font-weight: bold; - opacity: 1; - } - - .status-icon { - background: #fff; - box-shadow: 0 4rpx 12rpx rgba(216, 30, 6, 0.1); - } - } - - &.is-signed { - .status-icon { - background: #d81e06; - box-shadow: 0 4rpx 12rpx rgba(216, 30, 6, 0.2); - } - - .day-label { - color: #d81e06; - } - } - } - } + &::after { + border: none; } } } @@ -889,283 +546,172 @@ onShareTimeline(() => { margin-bottom: 24rpx; .title-left-decor { - width: 6rpx; - height: 28rpx; + width: 8rpx; + height: 32rpx; background: #d81e06; border-radius: 4rpx; - margin-right: 12rpx; + margin-right: 16rpx; } .section-title { - font-size: 32rpx; - font-weight: bold; + font-size: 34rpx; + font-weight: 800; color: #333; flex: 1; + letter-spacing: 1rpx; } .header-right { display: flex; align-items: center; - - .refresh-text { - font-size: 22rpx; - color: #999; - margin-left: 6rpx; - } } } } -/* 大家都在用 */ -.compact-section { - .section-header { - margin-bottom: 20rpx; - } -} +/* Scene Scroll */ +.scene-scroll { + white-space: nowrap; + width: 100%; -.feature-row { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - - .feature-item { - width: 48%; - background: #fff; - border-radius: 24rpx; - padding: 20rpx; + .scene-list { display: flex; - align-items: center; - box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03); - box-sizing: border-box; - margin-bottom: 20rpx; + padding-bottom: 24rpx; /* Space for shadow */ - .left-content { - display: flex; + .scene-item { + display: inline-flex; + flex-direction: column; align-items: center; - width: 100%; + margin-right: 32rpx; + width: 140rpx; - .icon-wrap { + &:last-child { + margin-right: 0; + } + + .scene-icon-box { + width: 120rpx; + height: 120rpx; + background: #fff; + border-radius: 32rpx; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16rpx; + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04); + border: 2rpx solid #fff; + } + + .scene-icon { width: 64rpx; height: 64rpx; - border-radius: 16rpx; - display: flex; - align-items: center; - justify-content: center; - margin-right: 16rpx; - flex-shrink: 0; - - &.yellow-bg { - background: #fff8e1; - } - &.blue-bg { - background: #e3f2fd; - } - - .feature-icon { - width: 36rpx; - height: 36rpx; - } } - .text-content { - display: flex; - flex-direction: column; - overflow: hidden; - - .feature-name { - font-size: 26rpx; - font-weight: bold; - color: #333; - margin-bottom: 2rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .feature-desc { - font-size: 20rpx; - color: #999; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .scene-name { + font-size: 24rpx; + color: #333; + font-weight: 500; } } } } -/* 排行榜单 */ -.rank-tabs-mini { - display: flex; - margin-left: auto; /* Push to right */ - background: #eee; - border-radius: 30rpx; - padding: 4rpx; +/* Wallpaper Scroll */ +.wallpaper-scroll { + white-space: nowrap; + width: 100%; - .rank-tab-mini { - padding: 8rpx 20rpx; - border-radius: 26rpx; - font-size: 22rpx; - color: #666; - transition: all 0.3s; - - &.active { - background: #fff; - color: #333; - font-weight: bold; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); - } - } -} - -.rank-list { - background: #fff; - border-radius: 32rpx; - padding: 16rpx 24rpx; - box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03); - - .rank-item { + .wallpaper-list { display: flex; - align-items: center; - padding: 24rpx 0; - border-bottom: 2rpx solid #f5f5f5; + padding-bottom: 24rpx; - &:last-child { - border-bottom: none; + .wallpaper-item { + display: inline-flex; + flex-direction: column; + align-items: center; + margin-right: 24rpx; + width: 200rpx; + + .wallpaper-img { + width: 200rpx; + height: 320rpx; + border-radius: 24rpx; + margin-bottom: 16rpx; + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); + } + + .wallpaper-name { + font-size: 24rpx; + color: #666; + width: 100%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } +} + +/* Avatar Scroll */ +.avatar-scroll { + white-space: nowrap; + width: 100%; + + .avatar-list { + display: flex; + padding-bottom: 24rpx; + + .avatar-item { + display: inline-flex; + flex-direction: column; + align-items: center; + margin-right: 24rpx; + width: 140rpx; + + .avatar-img { + width: 140rpx; + height: 140rpx; + border-radius: 32rpx; + margin-bottom: 12rpx; + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05); + border: 4rpx solid #fff; + } + + .avatar-name { + font-size: 22rpx; + color: #999; + width: 100%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } - .rank-num { - width: 40rpx; - height: 40rpx; - display: flex; + .avatar-more-btn { + display: inline-flex; + flex-direction: column; align-items: center; justify-content: center; - font-size: 28rpx; - font-weight: bold; - color: #999; - margin-right: 24rpx; - border-radius: 50%; + width: 140rpx; + height: 140rpx; + background: #d81e06; + border-radius: 32rpx; + box-shadow: 0 8rpx 24rpx rgba(216, 30, 6, 0.2); + vertical-align: top; /* Align with other inline-flex items */ - &.rank-1 { - background: #ffd700; - color: #fff; - } - &.rank-2 { - background: #c0c0c0; - color: #fff; - } - &.rank-3 { - background: #cd7f32; - color: #fff; - } - } - - .rank-thumb { - width: 88rpx; - height: 88rpx; - border-radius: 16rpx; - background: #eee; - margin-right: 24rpx; - } - - .rank-info { - flex: 1; - - .rank-title-row { - display: flex; - align-items: center; - margin-bottom: 8rpx; - - .rank-title { - font-size: 28rpx; - font-weight: bold; - color: #333; - } - } - - .rank-meta { - display: flex; - align-items: center; - - .tag-hot { - font-size: 18rpx; - color: #d81e06; - background: #ffebee; - padding: 2rpx 8rpx; - border-radius: 8rpx; - margin-right: 12rpx; - font-weight: 600; - } - - .usage-count { - font-size: 22rpx; - color: #999; - } - } - } - - .rank-action { - .download-btn { - width: 56rpx; - height: 56rpx; - border-radius: 50%; - background: linear-gradient(135deg, #ff9800, #ff5722); - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4rpx 12rpx rgba(255, 87, 34, 0.3); - - &:active { - opacity: 0.9; - transform: scale(0.95); - } - } - - .create-btn { - padding: 8rpx 20rpx; - background: linear-gradient(135deg, #ff3b30, #ff1744); - color: #fff; - border-radius: 24rpx; + .more-label { font-size: 22rpx; + color: #fff; + margin-top: 8rpx; font-weight: bold; - box-shadow: 0 4rpx 12rpx rgba(255, 23, 68, 0.2); - - &:active { - opacity: 0.9; - transform: scale(0.95); - } } } } } -.rank-footer { - text-align: center; +.more-text { font-size: 22rpx; - color: #ccc; - padding: 24rpx 0; -} - -/* 悬浮分享按钮 */ -.float-share-btn { - position: fixed; - right: 32rpx; - bottom: 60rpx; /* 避开 tabBar */ - background: #fff; - border-radius: 40rpx; - padding: 16rpx 32rpx; - display: flex; - align-items: center; - box-shadow: 0 8rpx 24rpx rgba(216, 30, 6, 0.2); - border: 2rpx solid #ffebee; - z-index: 100; - - text { - font-size: 26rpx; - color: #d81e06; - font-weight: 600; - margin-left: 12rpx; - } + color: #999; }