diff --git a/pages/index/index.vue b/pages/index/index.vue index bf2e65a..7ddbb3f 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -32,11 +32,16 @@ - LUCKY - - {{ luckyScore }} - % + + {{ currentDate.day }} + + {{ currentDate.month }}月 + {{ currentDate.year }} + + 农历 {{ lunarDate.month }}{{ lunarDate.day }} @@ -208,6 +213,15 @@ const handleLogin = () => { const luckyScore = ref(92); const luckyColor = ref("如意金"); +const currentDate = computed(() => { + const now = new Date(); + return { + year: now.getFullYear(), + month: now.getMonth() + 1, + day: now.getDate(), + }; +}); + // 模拟农历数据 const lunarDate = ref({ year: "2026", @@ -458,31 +472,45 @@ onShareTimeline(() => { flex-direction: column; align-items: flex-start; - .lucky-label { - font-size: 20rpx; - color: #d81e06; - font-weight: bold; - letter-spacing: 2rpx; - margin-bottom: 4rpx; - } - - .lucky-score { + .date-group { display: flex; align-items: baseline; + margin-bottom: 8rpx; - .score-value { + .date-val { font-size: 64rpx; font-weight: 800; color: #d81e06; line-height: 1; + margin-right: 8rpx; } - .score-unit { - font-size: 32rpx; - color: #d81e06; - margin-left: 4rpx; - font-weight: bold; + + .date-sub { + display: flex; + flex-direction: column; + + .date-month { + font-size: 24rpx; + font-weight: bold; + color: #d81e06; + line-height: 1.2; + } + .date-year { + font-size: 20rpx; + color: #d81e06; + opacity: 0.6; + line-height: 1.2; + } } } + + .lunar-text { + font-size: 22rpx; + color: #d81e06; + opacity: 0.8; + font-weight: 500; + letter-spacing: 1rpx; + } } .lucky-divider {