|
|
|
@ -1,15 +1,128 @@ |
|
|
|
/* pages/seller/index.wxss */ |
|
|
|
/* 重置默认样式，确保不继承父类样式 */ |
|
|
|
button { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
border: none; |
|
|
|
background: none; |
|
|
|
font-size: inherit; |
|
|
|
color: inherit; |
|
|
|
line-height: inherit; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面容器样式 */ |
|
|
|
.container { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
padding: 0 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100%; |
|
|
|
background-color: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面标题栏 */ |
|
|
|
.title-bar { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 10rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.title-bar .title { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面主标题样式 */ |
|
|
|
.title { |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #2c3e50; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); |
|
|
|
letter-spacing: 2rpx; |
|
|
|
margin: 20rpx 0; |
|
|
|
align-self: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 搜索框样式 */ |
|
|
|
.search-container { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 0 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container .search-box { |
|
|
|
width: 100%; |
|
|
|
max-width: 720rpx; |
|
|
|
display: flex; |
|
|
|
border: 2rpx solid #d9d9d9; |
|
|
|
border-radius: 8rpx; |
|
|
|
overflow: hidden; |
|
|
|
background-color: white; |
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container .search-box:focus-within { |
|
|
|
border-color: #1890ff; |
|
|
|
box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.search-container input { |
|
|
|
flex: 1; |
|
|
|
padding: 24rpx 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
background-color: transparent; |
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: 32rpx center; |
|
|
|
background-size: 28rpx 28rpx; |
|
|
|
padding-left: 80rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container button { |
|
|
|
padding: 0 40rpx; |
|
|
|
background-color: #1890ff; |
|
|
|
color: white; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
transition: all 0.2s ease; |
|
|
|
border-radius: 0 8rpx 8rpx 0; |
|
|
|
text-align: center; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.search-container button:active { |
|
|
|
background-color: #40a9ff; |
|
|
|
transform: translateY(1rpx); |
|
|
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 立体玻璃质感按钮基础样式 */ |
|
|
|
.glass-btn { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
border: none; |
|
|
|
padding: 28rpx 40rpx; |
|
|
|
padding: 32rpx 45rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
border-radius: 16rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
box-shadow: |
|
|
|
0 8rpx 24rpx rgba(0, 0, 0, 0.15), |
|
|
|
0 10rpx 28rpx rgba(0, 0, 0, 0.15), |
|
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.3) inset, |
|
|
|
0 1rpx 0 rgba(255, 255, 255, 0.2) inset; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
@ -18,62 +131,58 @@ |
|
|
|
backdrop-filter: blur(10rpx); |
|
|
|
-webkit-backdrop-filter: blur(10rpx); |
|
|
|
white-space: nowrap; |
|
|
|
width: auto; |
|
|
|
min-width: 80%; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按压效果 */ |
|
|
|
.glass-btn:active { |
|
|
|
transform: translateY(2rpx); |
|
|
|
transform: translateY(3rpx); |
|
|
|
box-shadow: |
|
|
|
0 4rpx 12rpx rgba(0, 0, 0, 0.1), |
|
|
|
0 5rpx 15rpx rgba(0, 0, 0, 0.1), |
|
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset, |
|
|
|
0 1rpx 0 rgba(255, 255, 255, 0.1) inset; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主按钮 - 蓝色玻璃效果 */ |
|
|
|
.primary-glass-btn { |
|
|
|
background: rgba(22, 119, 255, 0.7); |
|
|
|
background: linear-gradient(135deg, rgba(22, 119, 255, 0.8), rgba(33, 150, 243, 0.7)); |
|
|
|
color: white; |
|
|
|
box-shadow: |
|
|
|
0 8rpx 24rpx rgba(22, 119, 255, 0.3), |
|
|
|
0 10rpx 28rpx rgba(22, 119, 255, 0.3), |
|
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.3) inset, |
|
|
|
0 1rpx 0 rgba(255, 255, 255, 0.2) inset; |
|
|
|
} |
|
|
|
|
|
|
|
/* 联系客服按钮样式 */ |
|
|
|
.customer-service-btn { |
|
|
|
background: #f0f0f0; |
|
|
|
color: black; |
|
|
|
font-size: 30rpx; |
|
|
|
width: 70rpx; |
|
|
|
height: 80rpx; |
|
|
|
line-height: 70rpx; |
|
|
|
padding: 0; |
|
|
|
border-radius: 500rpx; |
|
|
|
border: 1rpx solid #d9d9d9; |
|
|
|
box-shadow: |
|
|
|
0 4rpx 16rpx rgba(0, 0, 0, 0.1), |
|
|
|
0 1rpx 0 rgba(255, 255, 255, 0.5) inset; |
|
|
|
transition: all 0.3s ease; |
|
|
|
background: #1890ff; |
|
|
|
color: white; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
padding: 15rpx 25rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: none; |
|
|
|
box-shadow: 0 2rpx 4rpx rgba(24, 144, 255, 0.2); |
|
|
|
transition: all 0.2s ease; |
|
|
|
white-space: nowrap; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.customer-service-btn:active { |
|
|
|
transform: translateY(2rpx); |
|
|
|
background: #f5f5f5; |
|
|
|
box-shadow: |
|
|
|
0 2rpx 8rpx rgba(0, 0, 0, 0.08), |
|
|
|
0 1rpx 0 rgba(255, 255, 255, 0.3) inset; |
|
|
|
transform: translateY(1rpx); |
|
|
|
background: #40a9ff; |
|
|
|
box-shadow: 0 1rpx 2rpx rgba(24, 144, 255, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
/* 服务区域容器 */ |
|
|
|
.service-container { |
|
|
|
/* 标题栏操作区域 */ |
|
|
|
.title-bar-actions { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 20rpx; |
|
|
|
gap: 15rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 未入驻状态样式 */ |
|
|
|
@ -85,22 +194,332 @@ |
|
|
|
|
|
|
|
/* 入驻按钮样式 */ |
|
|
|
.apply-settlement-btn { |
|
|
|
background: #1677ff; |
|
|
|
background: #52c41a; |
|
|
|
color: white; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
padding: 15rpx 25rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: none; |
|
|
|
box-shadow: none; |
|
|
|
box-shadow: 0 2rpx 4rpx rgba(82, 196, 26, 0.2); |
|
|
|
transition: all 0.2s ease; |
|
|
|
min-width: 100rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.apply-settlement-btn:active { |
|
|
|
background: #4096ff; |
|
|
|
transform: none; |
|
|
|
box-shadow: none; |
|
|
|
transform: translateY(1rpx); |
|
|
|
background: #73d13d; |
|
|
|
box-shadow: 0 1rpx 2rpx rgba(82, 196, 26, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
/* 未入驻状态按钮 - 红色 */ |
|
|
|
.apply-settlement-btn.not-approved { |
|
|
|
background: #ff4d4f; |
|
|
|
box-shadow: 0 2rpx 4rpx rgba(255, 77, 79, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.apply-settlement-btn.not-approved:active { |
|
|
|
transform: translateY(1rpx); |
|
|
|
background: #ff7875; |
|
|
|
box-shadow: 0 1rpx 2rpx rgba(255, 77, 79, 0.15); |
|
|
|
} |
|
|
|
|
|
|
|
/* 货源分类标题 */ |
|
|
|
.supply-category { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 0 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-category .category-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-category .expand-icon { |
|
|
|
width: 50rpx; |
|
|
|
height: 30rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 15rpx; |
|
|
|
background-color: rgba(0, 0, 0, 0.05); |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片样式 */ |
|
|
|
.card { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 30rpx; |
|
|
|
background-color: white; |
|
|
|
border-radius: 12rpx; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片内容布局 */ |
|
|
|
.card-content { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
/* 图片区域 */ |
|
|
|
.card-image { |
|
|
|
width: 100%; |
|
|
|
height: 360rpx; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.card-image image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
|
|
|
|
/* 信息区域 */ |
|
|
|
.card-info { |
|
|
|
padding: 24rpx; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品标题 */ |
|
|
|
.card-title { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
word-break: break-word; |
|
|
|
line-height: 1.4; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品状态标签 */ |
|
|
|
.status-tag { |
|
|
|
display: inline-block; |
|
|
|
margin-left: 10rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
color: #fff; |
|
|
|
padding: 4rpx 12rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
.status-tag.published { |
|
|
|
background-color: #52c41a; |
|
|
|
} |
|
|
|
|
|
|
|
.status-tag.pending { |
|
|
|
background-color: #1677ff; |
|
|
|
} |
|
|
|
|
|
|
|
.status-tag.rejected { |
|
|
|
background-color: #f5222d; |
|
|
|
} |
|
|
|
|
|
|
|
.status-tag.draft { |
|
|
|
background-color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品详细信息 */ |
|
|
|
.card-details { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 20rpx 40rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #666; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item .detail-label { |
|
|
|
color: #999; |
|
|
|
margin-right: 12rpx; |
|
|
|
min-width: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.detail-item .detail-value { |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
/* 货源卡片样式 */ |
|
|
|
.supply-card { |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 25rpx; |
|
|
|
background-color: white; |
|
|
|
border-radius: 16rpx; |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-card:hover { |
|
|
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12); |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片图片区域 */ |
|
|
|
.card-image-section { |
|
|
|
width: 100%; |
|
|
|
height: 360rpx; |
|
|
|
position: relative; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
|
|
|
|
.image-container { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.image-swiper { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
|
|
|
|
.no-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background-color: #f5f5f5; |
|
|
|
color: #999; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-pagination { |
|
|
|
position: absolute; |
|
|
|
bottom: 15rpx; |
|
|
|
right: 15rpx; |
|
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
|
color: white; |
|
|
|
padding: 6rpx 12rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片信息区域 */ |
|
|
|
.card-info-section { |
|
|
|
padding: 24rpx; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品名称行 */ |
|
|
|
.supply-name-row { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-name { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #333; |
|
|
|
flex: 1; |
|
|
|
margin-right: 15rpx; |
|
|
|
word-break: break-word; |
|
|
|
line-height: 1.4; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-status { |
|
|
|
padding: 6rpx 16rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: white; |
|
|
|
align-self: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-status.published { |
|
|
|
background-color: #52c41a; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-status.pending { |
|
|
|
background-color: #1677ff; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-status.rejected { |
|
|
|
background-color: #f5222d; |
|
|
|
} |
|
|
|
|
|
|
|
.supply-status.draft { |
|
|
|
background-color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
/* 商品详情 */ |
|
|
|
.supply-details { |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 创建时间 */ |
|
|
|
.create-time { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮区域 */ |
|
|
|
.card-actions { |
|
|
|
display: flex; |
|
|
|
gap: 20rpx; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 统一按钮样式 */ |
|
|
|
.action-btn { |
|
|
|
flex: 1; |
|
|
|
padding: 18rpx 0; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 600; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
transition: all 0.2s ease; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮变体 */ |
|
|
|
.action-btn.delete { |
|
|
|
background-color: #f5222d; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn.unpublish { |
|
|
|
background-color: #faad14; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn.edit { |
|
|
|
background-color: #1677ff; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.action-btn.publish { |
|
|
|
background-color: #52c41a; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮点击效果 */ |
|
|
|
.action-btn:active { |
|
|
|
transform: translateY(2rpx); |
|
|
|
opacity: 0.9; |
|
|
|
} |
|
|
|
|
|
|
|
/* 登录授权弹窗样式 - 专门用于登录相关弹窗 */ |
|
|
|
@ -155,12 +574,18 @@ |
|
|
|
border-radius: 8rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border: none; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-cancel-button { |
|
|
|
background: none; |
|
|
|
color: #666; |
|
|
|
border: none; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 头像选择样式 */ |
|
|
|
@ -173,6 +598,8 @@ |
|
|
|
padding: 0; |
|
|
|
background: none; |
|
|
|
border: none; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.auth-avatar { |
|
|
|
@ -213,6 +640,15 @@ |
|
|
|
width: 100%; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: none; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
/* 半页空白页样式 */ |
|
|
|
.half-page-blank { |
|
|
|
height: 50vh; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
/* 加载更多样式 */ |
|
|
|
|
徐飞洋
3 months ago