样式修改
This commit is contained in:
@@ -187,7 +187,6 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
background: rgba(255, 255, 255, 0.25);
|
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@@ -286,38 +285,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 活动专区 section-card 图标底色(循环使用)
|
|
||||||
.card-ic-0 .card-icon {
|
|
||||||
background: #fff0ed;
|
|
||||||
}
|
|
||||||
.card-ic-1 .card-icon {
|
|
||||||
background: #fff7e6;
|
|
||||||
}
|
|
||||||
.card-ic-2 .card-icon {
|
|
||||||
background: #e6f7ff;
|
|
||||||
}
|
|
||||||
.card-ic-3 .card-icon {
|
|
||||||
background: #f0edff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-section {
|
|
||||||
padding: 0 32px;
|
|
||||||
|
|
||||||
// 每张卡片图标不同底色
|
|
||||||
.card-hot .card-icon {
|
|
||||||
background: #fff0ed;
|
|
||||||
}
|
|
||||||
.card-discount .card-icon {
|
|
||||||
background: #fff7e6;
|
|
||||||
}
|
|
||||||
.card-new .card-icon {
|
|
||||||
background: #e6f7ff;
|
|
||||||
}
|
|
||||||
.card-order .card-icon {
|
|
||||||
background: #f0edff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 底部留白
|
// 底部留白
|
||||||
.bottom-spacer {
|
.bottom-spacer {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
|||||||
@@ -160,7 +160,7 @@ export default function Index() {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{activity.length > 0 ? (
|
{activity.length > 0 && (
|
||||||
<>
|
<>
|
||||||
{/* 前两个:activity-card 渐变卡片 */}
|
{/* 前两个:activity-card 渐变卡片 */}
|
||||||
<View className={`activity-cards ${activity.length === 1 ? 'single' : ''}`}>
|
<View className={`activity-cards ${activity.length === 1 ? 'single' : ''}`}>
|
||||||
@@ -187,7 +187,7 @@ export default function Index() {
|
|||||||
{activity.slice(2).map((item, index) => (
|
{activity.slice(2).map((item, index) => (
|
||||||
<View
|
<View
|
||||||
key={item.id}
|
key={item.id}
|
||||||
className={`section-card card-ic-${index % 4}`}
|
className='section-card'
|
||||||
onClick={() => handleNavigate(item)}
|
onClick={() => handleNavigate(item)}
|
||||||
>
|
>
|
||||||
<View className='card-icon'>
|
<View className='card-icon'>
|
||||||
@@ -201,83 +201,9 @@ export default function Index() {
|
|||||||
</View>
|
</View>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
) : (
|
|
||||||
/* 兜底静态内容 */
|
|
||||||
<View className='activity-cards'>
|
|
||||||
{/* 满减优惠 */}
|
|
||||||
<View
|
|
||||||
className='activity-card card-fullcut'
|
|
||||||
onClick={() => {
|
|
||||||
// TODO: 活动页面上线后配置跳转链接
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View className='deco-circle circle-1' />
|
|
||||||
<View className='deco-circle circle-2' />
|
|
||||||
<View className='activity-card-main'>
|
|
||||||
<View className='activity-icon'>🎫</View>
|
|
||||||
<View className='activity-name'>满减优惠</View>
|
|
||||||
<View className='activity-desc'>满30减5 · 可与券叠加</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 新品首发 */}
|
|
||||||
<View
|
|
||||||
className='activity-card card-newbie'
|
|
||||||
onClick={() => {
|
|
||||||
// TODO: 活动页面上线后配置跳转链接
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View className='deco-circle circle-1' />
|
|
||||||
<View className='deco-circle circle-2' />
|
|
||||||
<View className='activity-card-main'>
|
|
||||||
<View className='activity-icon'>✨</View>
|
|
||||||
<View className='activity-name'>新品首发</View>
|
|
||||||
<View className='activity-desc'>每周三上新 · 限时尝鲜价</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 5. 底部推荐卡片 */}
|
|
||||||
<View className='bottom-section'>
|
|
||||||
<View className='section-card card-hot'>
|
|
||||||
<View className='card-icon'>🔥</View>
|
|
||||||
<View className='card-info'>
|
|
||||||
<View className='card-title'>热门推荐</View>
|
|
||||||
<View className='card-desc'>查看同学们都在点什么</View>
|
|
||||||
</View>
|
|
||||||
<View className='card-arrow'>›</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View className='section-card card-discount'>
|
|
||||||
<View className='card-icon'>💰</View>
|
|
||||||
<View className='card-info'>
|
|
||||||
<View className='card-title'>限时优惠</View>
|
|
||||||
<View className='card-desc'>超值套餐低至9.9元</View>
|
|
||||||
</View>
|
|
||||||
<View className='card-arrow'>›</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View className='section-card card-new'>
|
|
||||||
<View className='card-icon'>⭐</View>
|
|
||||||
<View className='card-info'>
|
|
||||||
<View className='card-title'>新品上架</View>
|
|
||||||
<View className='card-desc'>尝尝校园新味道</View>
|
|
||||||
</View>
|
|
||||||
<View className='card-arrow'>›</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View className='section-card card-order'>
|
|
||||||
<View className='card-icon'>📋</View>
|
|
||||||
<View className='card-info'>
|
|
||||||
<View className='card-title'>我的订单</View>
|
|
||||||
<View className='card-desc'>查看订单状态与历史</View>
|
|
||||||
</View>
|
|
||||||
<View className='card-arrow'>›</View>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 底部留白 */}
|
{/* 底部留白 */}
|
||||||
<View className='bottom-spacer' />
|
<View className='bottom-spacer' />
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user