fix: daily page

This commit is contained in:
zzc
2026-03-01 22:41:38 +08:00
parent 8110e209c7
commit 99cf4249db

View File

@@ -98,12 +98,7 @@
size="24" size="24"
color="#b0bec5" color="#b0bec5"
/> />
<uni-icons <uni-icons v-else type="vip-filled" size="24" color="#cd7f32" />
v-else
type="vip-filled"
size="24"
color="#cd7f32"
/>
</view> </view>
<view class="hot-content"> <view class="hot-content">
<text class="hot-text">{{ item.text }}</text> <text class="hot-text">{{ item.text }}</text>
@@ -119,17 +114,20 @@
<!-- Bottom Actions --> <!-- Bottom Actions -->
<view class="bottom-actions safe-area-bottom"> <view class="bottom-actions safe-area-bottom">
<button class="action-btn secondary" @tap="drawLucky"> <view class="action-btn-group">
<uni-icons type="gift-filled" size="18" color="#fff" /> <button class="save-btn" @tap="saveCard">
<text>抽一句今日好运</text> <view class="icon-circle">
<view class="badge-tag">LUCKY</view> <uni-icons type="download" size="20" color="#333" />
</view>
<text class="btn-text">保存</text>
</button> </button>
<button class="action-btn primary" @tap="sendGreeting"> <button class="send-btn" @tap="sendGreeting">
<uni-icons type="paperplane-filled" size="18" color="#fff" /> <uni-icons type="paperplane-filled" size="20" color="#fff" />
<text>立即发送今日问候</text> <text>立即发送今日问候</text>
</button> </button>
</view> </view>
</view> </view>
</view>
</template> </template>
<script setup> <script setup>
@@ -233,8 +231,8 @@ const useHotItem = (item) => {
}; };
}; };
const drawLucky = () => { const saveCard = () => {
uni.showToast({ title: "好运 +1", icon: "none" }); uni.showToast({ title: "保存功能开发中", icon: "none" });
}; };
const sendGreeting = () => { const sendGreeting = () => {
@@ -548,56 +546,81 @@ const sendGreeting = () => {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx); backdrop-filter: blur(20rpx);
padding: 20rpx 32rpx; padding: 20rpx 32rpx;
display: flex;
flex-direction: column;
gap: 24rpx;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
z-index: 100; z-index: 100;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
} }
.action-btn { .action-btn-group {
width: 100%; display: flex;
align-items: center;
gap: 24rpx;
}
.save-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
padding: 0;
margin: 0;
line-height: 1;
border: none;
width: 100rpx;
&::after {
border: none;
}
.icon-circle {
width: 80rpx;
height: 80rpx;
background: #f5f5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
transition: all 0.2s;
}
.btn-text {
font-size: 20rpx;
color: #666;
font-weight: 500;
}
&:active .icon-circle {
background: #eee;
transform: scale(0.95);
}
}
.send-btn {
flex: 1;
height: 96rpx; height: 96rpx;
border-radius: 48rpx; border-radius: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 16rpx; gap: 16rpx;
font-size: 30rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
border: none; border: none;
position: relative;
&.secondary {
background: #c62828; /* Dark Red */
color: #fff;
background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
box-shadow: 0 8rpx 20rpx rgba(211, 47, 47, 0.3);
}
&.primary {
background: #8e0000; /* Deep Red/Brown */ background: #8e0000; /* Deep Red/Brown */
color: #fff; color: #fff;
background: linear-gradient(135deg, #8e0000 0%, #600000 100%); background: linear-gradient(135deg, #8e0000 0%, #600000 100%);
box-shadow: 0 8rpx 20rpx rgba(142, 0, 0, 0.3); box-shadow: 0 8rpx 24rpx rgba(142, 0, 0, 0.3);
transition: all 0.2s;
&::after {
border: none;
} }
&:active { &:active {
transform: scale(0.99); transform: scale(0.98);
box-shadow: 0 4rpx 12rpx rgba(142, 0, 0, 0.2);
} }
} }
.badge-tag {
position: absolute;
top: -12rpx;
right: 40rpx;
background: #ffbc00;
color: #333;
font-size: 18rpx;
padding: 2rpx 10rpx;
border-radius: 12rpx;
font-weight: 800;
border: 2rpx solid #fff;
}
</style> </style>