diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue index f81a64a..e0b24dc 100644 --- a/src/pages/home/home.vue +++ b/src/pages/home/home.vue @@ -81,12 +81,29 @@ class="anniversary-item" @click="viewAnniversary(item)" > - - + + + + 生日 + + {{ item.title }} - {{ item.date }} + + + {{ item.date }} + {{ getCountdownText(item) }} @@ -240,11 +257,31 @@ const getCountdownText = (item) => { // 获取纪念日图标 const getIconByType = (type) => { const iconMap = { - 1: 'heart-fill', // 恋爱纪念日 - 2: 'gift-fill', // 生日 - 3: 'calendar-fill' // 其他 + 1: 'heart-filled', // 恋爱纪念日 - 使用 heart-filled + 2: 'star-filled', // 生日 - 使用 star-filled + 3: 'calendar-filled' // 其他 - 使用 calendar-filled } - return iconMap[type] || 'calendar-fill' + return iconMap[type] || 'calendar-filled' +} + +// 获取纪念日图标颜色 +const getIconColorByType = (type) => { + const colorMap = { + 1: '#FF6B9D', // 恋爱纪念日 - 粉色 + 2: '#FFD700', // 生日 - 金色 + 3: '#4CAF50' // 其他 - 绿色 + } + return colorMap[type] || '#FF6B9D' +} + +// 获取纪念日类型文字 +const getTypeTextByType = (type) => { + const textMap = { + 1: '恋爱纪念日', + 2: '生日', + 3: '其他' + } + return textMap[type] || '其他' } // 方法 @@ -595,31 +632,51 @@ onPullDownRefresh(() => { .anniversary-icon { margin-right: 35rpx; - background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%); border-radius: 50%; padding: 20rpx; - box-shadow: 0 4rpx 15rpx rgba(255, 107, 157, 0.3); position: relative; z-index: 1; transition: all 0.3s ease; + &[data-type="1"], + &[data-type="2"], + &[data-type="3"] { + background: transparent; + box-shadow: none; + } + &::after { - content: ''; - position: absolute; - top: -2rpx; - left: -2rpx; - right: -2rpx; - bottom: -2rpx; - background: linear-gradient(135deg, #FF6B9D, #FF8E9E); - border-radius: 50%; - z-index: -1; - opacity: 0.3; - transition: all 0.3s ease; + display: none; + } + + .icon-wrapper { + background: transparent; + border-radius: 0; + padding: 0; + box-shadow: none; + + .birthday-icon { + width: 50rpx; + height: 50rpx; + object-fit: contain; + display: block; + } } &:hover { transform: scale(1.1); - box-shadow: 0 6rpx 20rpx rgba(255, 107, 157, 0.4); + + &[data-type="1"] { + box-shadow: 0 6rpx 20rpx rgba(255, 107, 157, 0.4); + } + + &[data-type="2"] { + box-shadow: 0 6rpx 20rpx rgba(255, 215, 0, 0.4); + } + + &[data-type="3"] { + box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4); + } &::after { opacity: 0.5; @@ -643,15 +700,50 @@ onPullDownRefresh(() => { text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05); } - .anniversary-date { - font-size: 26rpx; - color: #7f8c8d; - font-weight: 500; - background: rgba(255, 255, 255, 0.8); - padding: 6rpx 12rpx; - border-radius: 15rpx; - display: inline-block; - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + .anniversary-meta { + display: flex; + align-items: center; + gap: 10rpx; + margin-bottom: 12rpx; + + .anniversary-type { + font-size: 24rpx; + font-weight: 600; + padding: 6rpx 12rpx; + border-radius: 12rpx; + border: 1rpx solid; + position: relative; + overflow: hidden; + + &[data-type="1"] { + color: #FF6B9D; + background: rgba(255, 107, 157, 0.1); + border-color: rgba(255, 107, 157, 0.3); + } + + &[data-type="2"] { + color: #FFD700; + background: rgba(255, 215, 0, 0.1); + border-color: rgba(255, 215, 0, 0.3); + } + + &[data-type="3"] { + color: #4CAF50; + background: rgba(76, 175, 80, 0.1); + border-color: rgba(76, 175, 80, 0.3); + } + } + + .anniversary-date { + font-size: 26rpx; + color: #7f8c8d; + font-weight: 500; + background: rgba(255, 255, 255, 0.8); + padding: 6rpx 12rpx; + border-radius: 15rpx; + display: inline-block; + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); + } } } diff --git a/src/static/images/birthday.png b/src/static/images/birthday.png new file mode 100644 index 0000000..5a3f189 Binary files /dev/null and b/src/static/images/birthday.png differ