mirror of
https://gitee.com/java110/WechatOwnerService.git
synced 2026-02-23 21:36:38 +08:00
677 lines
10 KiB
CSS
677 lines
10 KiB
CSS
/* ========= 全局 & 重置 ========= */
|
||
.app {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
background: #f5f5f5;
|
||
position: relative;
|
||
padding-bottom: 104rpx;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ========= 顶部栏 ========= */
|
||
.header {
|
||
background: #fa2e1b;
|
||
padding: 20rpx 24rpx 16rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
|
||
.header-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.location {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.location-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 50%;
|
||
background: #fa2e1b;
|
||
margin-right: 8rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.location-icon::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 8rpx;
|
||
top: 6rpx;
|
||
width: 12rpx;
|
||
height: 16rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.location-arrow {
|
||
margin-left: 8rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 10rpx solid #ffffff;
|
||
border-left: 8rpx solid transparent;
|
||
border-right: 8rpx solid transparent;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 搜索栏 */
|
||
.search-wrap {
|
||
background: #fa2e1b;
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
background: #ffffff;
|
||
border-radius: 36rpx;
|
||
padding: 4rpx 6rpx 4rpx 20rpx;
|
||
align-items: center;
|
||
height: 68rpx;
|
||
box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
background: transparent;
|
||
}
|
||
|
||
.search-input::placeholder {
|
||
color: #d0d0d0;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #fa2e1b;
|
||
position: relative;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-icon::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 14rpx;
|
||
height: 4rpx;
|
||
background: #fa2e1b;
|
||
right: -8rpx;
|
||
bottom: -2rpx;
|
||
transform: rotate(40deg);
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
border-radius: 32rpx;
|
||
border: none;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
background: #fa2e1b;
|
||
box-shadow: 0 4rpx 0 rgba(250, 46, 27, 0.65);
|
||
margin-left: 12rpx;
|
||
line-height: 60rpx;
|
||
padding: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
/* ========= 顶部分类图标 ========= */
|
||
.nav-panel {
|
||
background: #ffffff;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 12rpx;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
}
|
||
|
||
.nav-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.nav-item {
|
||
width: 20%;
|
||
padding: 16rpx 0 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 28rpx;
|
||
margin-bottom: 8rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.category-image-bg {
|
||
display: block;
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 单个图标颜色（红色主题） */
|
||
.nav-icon.takeout {
|
||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.group {
|
||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.hotel {
|
||
background: linear-gradient(135deg, #7dd5ff, #36a7ff);
|
||
}
|
||
|
||
.nav-icon.flash {
|
||
background: linear-gradient(135deg, #ff4757, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.movie {
|
||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.beauty {
|
||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.fun {
|
||
background: linear-gradient(135deg, #ff7ae0, #ff49b4);
|
||
}
|
||
|
||
.nav-icon.sports {
|
||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.hair {
|
||
background: linear-gradient(135deg, #ff9ec5, #ff657a);
|
||
}
|
||
|
||
.nav-icon.show {
|
||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.station {
|
||
background: linear-gradient(135deg, #66b6ff, #3388ff);
|
||
}
|
||
|
||
.nav-icon.life {
|
||
background: linear-gradient(135deg, #35d6ff, #1d9dff);
|
||
}
|
||
|
||
.nav-icon.medical {
|
||
background: linear-gradient(135deg, #5ec8ff, #297fff);
|
||
}
|
||
|
||
.nav-icon.cosmetic {
|
||
background: linear-gradient(135deg, #ff6b6b, #fa2e1b);
|
||
}
|
||
|
||
.nav-icon.run {
|
||
background: linear-gradient(135deg, #ff5252, #fa2e1b);
|
||
}
|
||
|
||
/* ========= 秒杀横滑区域 ========= */
|
||
.section {
|
||
margin-top: 16rpx;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
padding: 20rpx 20rpx 12rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.section-title-main {
|
||
color: #333333;
|
||
font-weight: 600;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.section-title-highlight {
|
||
color: #ff5339;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.section-sub {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
flex: 1;
|
||
}
|
||
|
||
.section-more {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.section-more::after {
|
||
content: "›";
|
||
margin-left: 4rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.flash-list {
|
||
padding: 0 16rpx 16rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.flash-item {
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
border-radius: 16rpx;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
margin-right: 16rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||
position: relative;
|
||
font-size: 22rpx;
|
||
vertical-align: top;
|
||
white-space: normal;
|
||
}
|
||
|
||
.flash-tag {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background: rgba(250, 46, 27, 0.9);
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
padding: 4rpx 8rpx 4rpx 12rpx;
|
||
border-bottom-right-radius: 16rpx;
|
||
font-weight: 600;
|
||
z-index: 1;
|
||
}
|
||
|
||
.flash-img {
|
||
width: 100%;
|
||
height: 0;
|
||
padding-bottom: 100%;
|
||
background: #eee;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.flash-img image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.flash-info {
|
||
padding: 8rpx 12rpx 12rpx;
|
||
}
|
||
|
||
.flash-price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.flash-price-symbol {
|
||
font-size: 20rpx;
|
||
color: #ff5339;
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.flash-price {
|
||
font-size: 32rpx;
|
||
color: #ff5339;
|
||
font-weight: 700;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.flash-old-price {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.flash-btn {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 60rpx;
|
||
background: #ff007d;
|
||
color: #ffffff;
|
||
font-size: 22rpx;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 24rpx 0 0 24rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.flash-desc {
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
line-height: 1.2;
|
||
height: 48rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ========= 列表卡片 ========= */
|
||
.card-section {
|
||
margin-top: 16rpx;
|
||
background: #ffffff;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
.card-section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx 12rpx;
|
||
}
|
||
|
||
.card-section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.card-section-tag {
|
||
font-size: 20rpx;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 6rpx;
|
||
background: #fa2e1b;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.card-list {
|
||
padding: 0 20rpx 20rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.card-small {
|
||
display: inline-block;
|
||
width: 360rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||
margin-right: 20rpx;
|
||
vertical-align: top;
|
||
white-space: normal;
|
||
}
|
||
|
||
.card-small-img {
|
||
width: 100%;
|
||
height: 0;
|
||
padding-bottom: 100%;
|
||
background: #eee;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-small-img image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.card-small-body {
|
||
padding: 12rpx 12rpx 16rpx;
|
||
}
|
||
|
||
.card-small-title {
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 1.3;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-small-sub {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.card-small-price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.price-main {
|
||
color: #ff5339;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.price-symbol {
|
||
color: #ff5339;
|
||
font-size: 22rpx;
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.price-old {
|
||
color: #999999;
|
||
text-decoration: line-through;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.price-desc {
|
||
margin-left: 12rpx;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.tag-orange {
|
||
display: inline-block;
|
||
font-size: 20rpx;
|
||
color: #fa2e1b;
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #fa2e1b;
|
||
padding: 0 6rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
/* ========= 商品瀑布流列表 ========= */
|
||
.feed-section {
|
||
margin-top: 16rpx;
|
||
background: transparent;
|
||
padding-top: 16rpx;
|
||
}
|
||
|
||
/* 标签栏 */
|
||
.goods-cell-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
}
|
||
|
||
.goods-item-title {
|
||
flex: 0 0 25%;
|
||
min-width: 25%;
|
||
padding: 20rpx 12rpx;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.goods-item-title .h4 {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin: 0;
|
||
padding: 0;
|
||
line-height: 1.2;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.goods-item-subtitle {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.goods-item-title.selected-title .goods-item-subtitle {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.feed-section-header {
|
||
padding: 0 20rpx 12rpx;
|
||
}
|
||
|
||
.feed-section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.feed {
|
||
margin-top: 0;
|
||
padding: 0 16rpx 5rpx;
|
||
}
|
||
|
||
.feed-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.feed-card {
|
||
width: calc(50% - 8rpx);
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
|
||
font-size: 22rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.feed-img {
|
||
width: 100%;
|
||
height: 0;
|
||
padding-bottom: 100%;
|
||
background: #eee;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.feed-img image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.feed-body {
|
||
padding: 12rpx 12rpx 14rpx;
|
||
}
|
||
|
||
.feed-tag-top {
|
||
position: absolute;
|
||
left: 12rpx;
|
||
top: 12rpx;
|
||
padding: 0 8rpx;
|
||
height: 32rpx;
|
||
border-radius: 6rpx;
|
||
background: rgba(250, 46, 27, 0.95);
|
||
font-size: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.feed-title {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 1.3;
|
||
height: 66rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.feed-sub {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.feed-price-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.feed-price-row .price-symbol {
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.feed-meta-row {
|
||
margin-top: 4rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.feed-meta-dot {
|
||
width: 6rpx;
|
||
height: 6rpx;
|
||
background: #ccc;
|
||
border-radius: 50%;
|
||
margin: 0 6rpx;
|
||
}
|
||
|
||
.feed-shop {
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.feed-type-tag {
|
||
border-radius: 6rpx;
|
||
border: 2rpx solid #fa2e1b;
|
||
color: #fa2e1b;
|
||
padding: 0 4rpx;
|
||
font-size: 20rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|