feat(home): 重构首页界面并更新API配置
- 移除底部导航栏中的"基地生活"选项卡 - 切换开发环境API地址为线上测试接口 - 添加完整的首页样式定义，包括英雄区域、商品卡片、快捷入口等 - 重构首页组件结构，集成商品列表、分类标签页和交互功能 - 更新主题管理逻辑，支持多种主题模式和用户ID兼容处理 - 添加商品数据获取和展示功能，实现首页内容动态加载
This commit is contained in:
@@ -4,6 +4,376 @@ page {
|
||||
background: linear-gradient(to bottom, #e9fff2, #ffffff);
|
||||
}
|
||||
|
||||
.home-page {
|
||||
padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.home-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 28rpx;
|
||||
background: linear-gradient(180deg, #bfefff 0%, #eafaff 40%, #fff7ec 100%);
|
||||
box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.home-hero__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(360rpx 240rpx at 18% 16%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
|
||||
radial-gradient(320rpx 220rpx at 84% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)),
|
||||
linear-gradient(180deg, rgba(0, 207, 255, 0.12), rgba(0, 0, 0, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.home-hero__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18rpx;
|
||||
padding: 26rpx 24rpx 28rpx;
|
||||
min-height: 320rpx;
|
||||
}
|
||||
|
||||
.home-hero__left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-hero__topRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.home-hero__brand {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 214, 84, 0.92);
|
||||
color: #2a2a2a;
|
||||
font-weight: 700;
|
||||
font-size: 24rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-hero__brandText {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-hero__tag {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%);
|
||||
box-shadow: 0 14rpx 24rpx rgba(36, 202, 148, 0.22);
|
||||
}
|
||||
|
||||
.home-hero__tagText {
|
||||
font-size: 56rpx;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-hero__date {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.home-hero__dateText {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.home-hero__headline {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.home-hero__headlineText {
|
||||
display: block;
|
||||
font-size: 42rpx;
|
||||
font-weight: 900;
|
||||
color: #0b0b0b;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.home-hero__right {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.home-hero__bottle {
|
||||
position: relative;
|
||||
width: 190rpx;
|
||||
height: 250rpx;
|
||||
border-radius: 28rpx;
|
||||
background:
|
||||
radial-gradient(240rpx 360rpx at 60% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18)),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.65);
|
||||
box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.home-hero__bottleCap {
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 88rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(180deg, #d7e6f3, #b0cadd);
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.home-hero__bottleLabel {
|
||||
position: absolute;
|
||||
left: 18rpx;
|
||||
right: 18rpx;
|
||||
bottom: 30rpx;
|
||||
padding: 12rpx 12rpx;
|
||||
border-radius: 18rpx;
|
||||
background: linear-gradient(90deg, rgba(0, 150, 255, 0.18), rgba(0, 255, 210, 0.18));
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.home-hero__bottleLabelText {
|
||||
font-size: 30rpx;
|
||||
font-weight: 800;
|
||||
color: rgba(0, 80, 140, 0.95);
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ticket-card {
|
||||
margin-top: 18rpx;
|
||||
border-radius: 22rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.ticket-card__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 18rpx 20rpx;
|
||||
background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%);
|
||||
}
|
||||
|
||||
.ticket-card__title {
|
||||
color: #ffffff;
|
||||
font-weight: 800;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.ticket-card__count {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ticket-card__countNum {
|
||||
color: #ffffff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ticket-card__body {
|
||||
padding: 20rpx 10rpx 22rpx;
|
||||
}
|
||||
|
||||
.shortcut-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.shortcut-grid__item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.shortcut-grid__icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: #20c26a;
|
||||
border: 2rpx solid rgba(32, 194, 106, 0.35);
|
||||
}
|
||||
|
||||
.shortcut-grid__text {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.home-tabs {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.home-tabs__inner {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.home-tabs__item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-tabs__item--active {
|
||||
background: rgba(32, 194, 106, 0.16);
|
||||
}
|
||||
|
||||
.home-tabs__itemText {
|
||||
font-size: 28rpx;
|
||||
color: #2a2a2a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-tabs__item--active .home-tabs__itemText {
|
||||
color: #16b65a;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.goods-grid {
|
||||
margin-top: 18rpx;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
border-radius: 22rpx;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18rpx 36rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.goods-card__imgWrap {
|
||||
padding: 18rpx 18rpx 0;
|
||||
}
|
||||
|
||||
.goods-card__img {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
.goods-card__body {
|
||||
padding: 18rpx 18rpx 20rpx;
|
||||
}
|
||||
|
||||
.goods-card__title {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #1c1c1c;
|
||||
min-height: 72rpx;
|
||||
}
|
||||
|
||||
.goods-card__meta {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.goods-card__sold {
|
||||
font-size: 22rpx;
|
||||
color: #9a9a9a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goods-card__price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
color: #27c86b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goods-card__priceUnit {
|
||||
font-size: 22rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.goods-card__priceValue {
|
||||
font-size: 36rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.goods-card__actions {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.goods-card__btn {
|
||||
flex: 1;
|
||||
height: 64rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.goods-card__btn--ghost {
|
||||
border: 2rpx solid rgba(32, 194, 106, 0.7);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.goods-card__btn--primary {
|
||||
background: linear-gradient(90deg, #24d34c 0%, #6df09a 100%);
|
||||
}
|
||||
|
||||
.goods-card__btnText {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #18b85a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.goods-card__btnText--primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.buy-btn{
|
||||
height: 70px;
|
||||
background: linear-gradient(to bottom, #1cd98a, #24ca94);
|
||||
@@ -73,4 +443,4 @@ page {
|
||||
.nut-swiper,
|
||||
.nut-swiper-item {
|
||||
-webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user