赵忠林
f15933fc82
- 修改开发环境API基础URL地址 - 移除门店选择相关功能组件和逻辑 - 调整页面背景渐变色和字体大小 - 优化轮播图触摸操作支持 - 更新分享标题为用户专属推荐 - 调整商品分类显示，隐藏部分分类入口 - 移除领券中心入口 - 简化配送时间选择，只选择日期不选择具体时间 - 移除门店选择界面元素 - 调整时间选择器为日期模式并修正时间格式化逻辑
447 lines
8.4 KiB
SCSS
447 lines
8.4 KiB
SCSS
page {
|
|
//background: url('https://oss.wsdns.cn/20250621/33ca4ca532e647bc918a59d01f5d88a9.jpg?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90') no-repeat top center;
|
|
//background-size: 100%;
|
|
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%, #2fa560 100%);
|
|
}
|
|
|
|
.ticket-card__title {
|
|
color: #ffffff;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.ticket-card__count {
|
|
color: rgba(255, 255, 255, 0.92);
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.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);
|
|
border-radius: 100px;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
.cart-icon{
|
|
background: linear-gradient(to bottom, #bbe094, #4ee265);
|
|
border-radius: 100px 0 0 100px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
|
|
/* 轮播图容器样式，确保支持两种滑动操作 */
|
|
.banner-swiper-container {
|
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
|
|
|
.nut-swiper {
|
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
|
|
|
.nut-swiper-item {
|
|
touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
|
|
|
|
image {
|
|
pointer-events: auto; /* 确保图片点击事件正常 */
|
|
touch-action: manipulation; /* 优化触摸操作 */
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 为Swiper容器添加特殊处理 */
|
|
.nut-swiper--horizontal {
|
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
|
}
|
|
}
|
|
|
|
/* 吸顶状态下的样式 */
|
|
.nutui-sticky--fixed {
|
|
.header-bg {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/* 为Swiper添加更精确的触摸控制 */
|
|
.nut-swiper {
|
|
touch-action: pan-y !important;
|
|
|
|
.nut-swiper-inner {
|
|
touch-action: pan-x pan-y !important;
|
|
}
|
|
}
|
|
|
|
/* 自定义Swiper样式 */
|
|
.custom-swiper {
|
|
touch-action: pan-y !important;
|
|
|
|
.nut-swiper-item {
|
|
touch-action: pan-x pan-y !important;
|
|
}
|
|
}
|
|
|
|
/* 确保Swiper内部元素不会阻止页面滚动 */
|
|
.banner-swiper-container,
|
|
.custom-swiper,
|
|
.nut-swiper,
|
|
.nut-swiper-item {
|
|
-webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */
|
|
}
|