|
|
|
@ -1,4 +1,45 @@ |
|
|
|
/* pages/seller/index.wxss */ |
|
|
|
/* 全局样式重置 */ |
|
|
|
page { |
|
|
|
background-color: #f5f7fa; |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主色调定义 */ |
|
|
|
:root { |
|
|
|
--primary-color: #1677ff; |
|
|
|
--success-color: #52c41a; |
|
|
|
--warning-color: #faad14; |
|
|
|
--error-color: #f5222d; |
|
|
|
--text-primary: #333333; |
|
|
|
--text-secondary: #666666; |
|
|
|
--text-tertiary: #999999; |
|
|
|
--border-color: #e8e8e8; |
|
|
|
--background-color: #ffffff; |
|
|
|
--light-background: #f5f7fa; |
|
|
|
--shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); |
|
|
|
--shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12); |
|
|
|
--shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.16); |
|
|
|
--border-radius-sm: 8rpx; |
|
|
|
--border-radius-md: 12rpx; |
|
|
|
--border-radius-lg: 16rpx; |
|
|
|
--transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* 容器样式优化 */ |
|
|
|
.container { |
|
|
|
background-color: var(--light-background); |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面标题样式 */ |
|
|
|
.title { |
|
|
|
font-size: 40rpx; |
|
|
|
font-weight: 700; |
|
|
|
color: var(--text-primary); |
|
|
|
margin-bottom: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 立体玻璃质感按钮基础样式 */ |
|
|
|
.glass-btn { |
|
|
|
position: relative; |
|
|
|
@ -7,13 +48,10 @@ |
|
|
|
padding: 28rpx 40rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: |
|
|
|
0 8rpx 24rpx 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; |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
box-shadow: var(--shadow-md); |
|
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|
|
|
transition: all 0.3s ease; |
|
|
|
transition: var(--transition); |
|
|
|
background: rgba(255, 255, 255, 0.8); |
|
|
|
backdrop-filter: blur(10rpx); |
|
|
|
-webkit-backdrop-filter: blur(10rpx); |
|
|
|
@ -26,47 +64,118 @@ |
|
|
|
/* 按压效果 */ |
|
|
|
.glass-btn:active { |
|
|
|
transform: translateY(2rpx); |
|
|
|
box-shadow: |
|
|
|
0 4rpx 12rpx 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; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
/* 主按钮 - 蓝色玻璃效果 */ |
|
|
|
.primary-glass-btn { |
|
|
|
background: rgba(22, 119, 255, 0.7); |
|
|
|
background: linear-gradient(135deg, var(--primary-color), #4096ff); |
|
|
|
color: white; |
|
|
|
box-shadow: 0 8rpx 24rpx rgba(22, 119, 255, 0.3); |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮基础样式 */ |
|
|
|
.btn { |
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 16rpx 32rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
border: none; |
|
|
|
transition: var(--transition); |
|
|
|
cursor: pointer; |
|
|
|
text-align: center; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮变体 */ |
|
|
|
.btn-primary { |
|
|
|
background-color: var(--primary-color); |
|
|
|
color: white; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-primary:active { |
|
|
|
background-color: #4096ff; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-success { |
|
|
|
background-color: var(--success-color); |
|
|
|
color: white; |
|
|
|
box-shadow: |
|
|
|
0 8rpx 24rpx 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; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-success:active { |
|
|
|
background-color: #73d13d; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-warning { |
|
|
|
background-color: var(--warning-color); |
|
|
|
color: white; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-warning:active { |
|
|
|
background-color: #ffc53d; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-danger { |
|
|
|
background-color: var(--error-color); |
|
|
|
color: white; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-danger:active { |
|
|
|
background-color: #ff4d4f; |
|
|
|
} |
|
|
|
|
|
|
|
.btn-outline { |
|
|
|
background-color: transparent; |
|
|
|
color: var(--primary-color); |
|
|
|
border: 2rpx solid var(--primary-color); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-outline:active { |
|
|
|
background-color: rgba(22, 119, 255, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 按钮尺寸 */ |
|
|
|
.btn-sm { |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
border-radius: var(--border-radius-sm); |
|
|
|
} |
|
|
|
|
|
|
|
.btn-lg { |
|
|
|
padding: 20rpx 48rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
} |
|
|
|
|
|
|
|
/* 联系客服按钮样式 */ |
|
|
|
.customer-service-btn { |
|
|
|
background: #f0f0f0; |
|
|
|
color: black; |
|
|
|
font-size: 30rpx; |
|
|
|
width: 70rpx; |
|
|
|
height: 80rpx; |
|
|
|
line-height: 70rpx; |
|
|
|
background: var(--background-color); |
|
|
|
color: var(--text-primary); |
|
|
|
font-size: 28rpx; |
|
|
|
width: 120rpx; |
|
|
|
height: 64rpx; |
|
|
|
line-height: 64rpx; |
|
|
|
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; |
|
|
|
border-radius: var(--border-radius-full, 32rpx); |
|
|
|
border: 2rpx solid var(--border-color); |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
transition: var(--transition); |
|
|
|
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; |
|
|
|
background: var(--light-background); |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
/* 服务区域容器 */ |
|
|
|
@ -76,31 +185,405 @@ |
|
|
|
gap: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/* 未入驻状态样式 */ |
|
|
|
.no-settlement-status { |
|
|
|
/* 入驻状态样式 */ |
|
|
|
.settlement-status { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #ff4d4f; |
|
|
|
padding: 0 10rpx; |
|
|
|
padding: 4rpx 16rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.settlement-status.approved { |
|
|
|
color: var(--success-color); |
|
|
|
background-color: rgba(82, 196, 26, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.settlement-status.pending { |
|
|
|
color: var(--warning-color); |
|
|
|
background-color: rgba(250, 173, 20, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 入驻按钮样式 */ |
|
|
|
.apply-settlement-btn { |
|
|
|
background: #1677ff; |
|
|
|
background: var(--primary-color); |
|
|
|
color: white; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
border: none; |
|
|
|
box-shadow: none; |
|
|
|
transition: all 0.2s ease; |
|
|
|
min-width: 100rpx; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
transition: var(--transition); |
|
|
|
min-width: 120rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.apply-settlement-btn:active { |
|
|
|
background: #4096ff; |
|
|
|
transform: none; |
|
|
|
box-shadow: none; |
|
|
|
transform: translateY(2rpx); |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
/* 搜索框样式 */ |
|
|
|
.search-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
margin-bottom: 32rpx; |
|
|
|
background-color: var(--background-color); |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
padding: 12rpx 20rpx; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input { |
|
|
|
flex: 1; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
font-size: 28rpx; |
|
|
|
color: var(--text-primary); |
|
|
|
background: transparent; |
|
|
|
padding: 12rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input::placeholder { |
|
|
|
color: var(--text-tertiary); |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
background-color: var(--primary-color); |
|
|
|
color: white; |
|
|
|
border: none; |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
padding: 12rpx 24rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn:active { |
|
|
|
background-color: #4096ff; |
|
|
|
transform: translateY(2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片样式 */ |
|
|
|
.card { |
|
|
|
background-color: var(--background-color); |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
margin-bottom: 24rpx; |
|
|
|
overflow: hidden; |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.card:hover { |
|
|
|
box-shadow: var(--shadow-md); |
|
|
|
transform: translateY(-2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
/* 分类标题样式 */ |
|
|
|
.category-title { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
color: var(--text-primary); |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 0 4rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.category-title .count { |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 400; |
|
|
|
color: var(--text-secondary); |
|
|
|
} |
|
|
|
|
|
|
|
.category-title .toggle-btn { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 28rpx; |
|
|
|
color: var(--text-tertiary); |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.category-title .toggle-btn:active { |
|
|
|
color: var(--primary-color); |
|
|
|
transform: rotate(180deg); |
|
|
|
} |
|
|
|
|
|
|
|
/* 模态框样式 */ |
|
|
|
.modal { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 999; |
|
|
|
backdrop-filter: blur(4rpx); |
|
|
|
animation: fadeIn 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-content { |
|
|
|
width: 92%; |
|
|
|
max-width: 600rpx; |
|
|
|
background: white; |
|
|
|
padding: 40rpx; |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
max-height: 85vh; |
|
|
|
position: relative; |
|
|
|
box-shadow: var(--shadow-lg); |
|
|
|
transform: translateZ(0); |
|
|
|
-webkit-transform: translateZ(0); |
|
|
|
animation: slideUp 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表单元素样式 */ |
|
|
|
.form-group { |
|
|
|
margin-bottom: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.form-label { |
|
|
|
display: block; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: var(--text-primary); |
|
|
|
margin-bottom: 12rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.form-input { |
|
|
|
width: 100%; |
|
|
|
height: 90rpx; |
|
|
|
line-height: 90rpx; |
|
|
|
padding: 0 24rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
border: 2rpx solid var(--border-color); |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
box-sizing: border-box; |
|
|
|
background: white; |
|
|
|
transition: var(--transition); |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.form-input:focus { |
|
|
|
border-color: var(--primary-color); |
|
|
|
box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
/* 上传区域样式 */ |
|
|
|
.upload-area { |
|
|
|
width: 100%; |
|
|
|
margin: 0 auto 30rpx; |
|
|
|
border: 2rpx dashed var(--border-color); |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
padding: 24rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #fafafa; |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-area:hover { |
|
|
|
border-color: var(--primary-color); |
|
|
|
background-color: rgba(22, 119, 255, 0.05); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-item { |
|
|
|
position: relative; |
|
|
|
width: 160rpx; |
|
|
|
height: 160rpx; |
|
|
|
margin: 10rpx; |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
overflow: hidden; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-item:hover { |
|
|
|
box-shadow: var(--shadow-md); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-item .delete-icon { |
|
|
|
position: absolute; |
|
|
|
top: 8rpx; |
|
|
|
right: 8rpx; |
|
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
|
color: white; |
|
|
|
width: 44rpx; |
|
|
|
height: 44rpx; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 28rpx; |
|
|
|
transition: var(--transition); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-item .delete-icon:active { |
|
|
|
background-color: rgba(0, 0, 0, 0.8); |
|
|
|
transform: scale(0.9); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-btn { |
|
|
|
width: 160rpx; |
|
|
|
height: 160rpx; |
|
|
|
margin: 10rpx; |
|
|
|
border: 2rpx dashed var(--primary-color); |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: rgba(22, 119, 255, 0.05); |
|
|
|
transition: var(--transition); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.upload-btn:hover { |
|
|
|
background-color: rgba(22, 119, 255, 0.1); |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
|
|
|
|
.upload-btn:active { |
|
|
|
transform: scale(0.95); |
|
|
|
} |
|
|
|
|
|
|
|
/* 选择器样式 */ |
|
|
|
.selector { |
|
|
|
width: 100%; |
|
|
|
height: 90rpx; |
|
|
|
line-height: 90rpx; |
|
|
|
padding: 0 24rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
border: 2rpx solid var(--border-color); |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
box-sizing: border-box; |
|
|
|
background: white; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
transition: var(--transition); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.selector:hover { |
|
|
|
border-color: var(--primary-color); |
|
|
|
} |
|
|
|
|
|
|
|
.selector:active { |
|
|
|
background-color: rgba(22, 119, 255, 0.05); |
|
|
|
} |
|
|
|
|
|
|
|
.selector .arrow { |
|
|
|
color: var(--text-tertiary); |
|
|
|
font-size: 24rpx; |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.selector:active .arrow { |
|
|
|
transform: rotate(180deg); |
|
|
|
} |
|
|
|
|
|
|
|
/* 动画效果 */ |
|
|
|
@keyframes fadeIn { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
to { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes slideUp { |
|
|
|
from { |
|
|
|
opacity: 0; |
|
|
|
transform: translateY(40rpx); |
|
|
|
} |
|
|
|
to { |
|
|
|
opacity: 1; |
|
|
|
transform: translateY(0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
|
0%, 100% { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
50% { |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 加载更多样式 */ |
|
|
|
.load-more { |
|
|
|
text-align: center; |
|
|
|
padding: 32rpx 0; |
|
|
|
color: var(--text-tertiary); |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.load-more .loading-text { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
gap: 12rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.load-more .loading-text::before { |
|
|
|
content: ''; |
|
|
|
width: 24rpx; |
|
|
|
height: 24rpx; |
|
|
|
border: 2rpx solid var(--text-tertiary); |
|
|
|
border-top-color: var(--primary-color); |
|
|
|
border-radius: 50%; |
|
|
|
animation: spin 1s linear infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.load-more .load-more-text { |
|
|
|
color: var(--primary-color); |
|
|
|
cursor: pointer; |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.load-more .load-more-text:active { |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
to { |
|
|
|
transform: rotate(360deg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 空状态样式 */ |
|
|
|
.empty-state { |
|
|
|
text-align: center; |
|
|
|
padding: 80rpx 0; |
|
|
|
color: var(--text-tertiary); |
|
|
|
} |
|
|
|
|
|
|
|
.empty-state .icon { |
|
|
|
font-size: 120rpx; |
|
|
|
margin-bottom: 24rpx; |
|
|
|
opacity: 0.5; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-state .text { |
|
|
|
font-size: 28rpx; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.empty-state .subtext { |
|
|
|
font-size: 24rpx; |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
|
|
|
|
/* 登录授权弹窗样式 - 专门用于登录相关弹窗 */ |
|
|
|
@ -115,13 +598,16 @@ |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 999; |
|
|
|
animation: fadeIn 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.auth-modal-container { |
|
|
|
background-color: white; |
|
|
|
border-radius: 16rpx; |
|
|
|
background-color: var(--background-color); |
|
|
|
border-radius: var(--border-radius-lg); |
|
|
|
width: 80%; |
|
|
|
padding: 40rpx; |
|
|
|
box-shadow: var(--shadow-lg); |
|
|
|
animation: slideUp 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.auth-modal-title { |
|
|
|
@ -132,12 +618,13 @@ |
|
|
|
.auth-modal-title text { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: var(--text-primary); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-modal-content { |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
color: #666; |
|
|
|
color: var(--text-secondary); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-modal-content text { |
|
|
|
@ -149,18 +636,35 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.auth-primary-button { |
|
|
|
background-color: #1677ff; |
|
|
|
background-color: var(--primary-color); |
|
|
|
color: white; |
|
|
|
width: 100%; |
|
|
|
border-radius: 8rpx; |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border: none; |
|
|
|
padding: 20rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 500; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-primary-button:active { |
|
|
|
background-color: #4096ff; |
|
|
|
transform: translateY(2rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-cancel-button { |
|
|
|
background: none; |
|
|
|
color: #666; |
|
|
|
color: var(--text-secondary); |
|
|
|
border: none; |
|
|
|
padding: 16rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
transition: var(--transition); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-cancel-button:active { |
|
|
|
color: var(--text-primary); |
|
|
|
} |
|
|
|
|
|
|
|
/* 头像选择样式 */ |
|
|
|
@ -179,6 +683,7 @@ |
|
|
|
width: 160rpx; |
|
|
|
height: 160rpx; |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: var(--shadow-sm); |
|
|
|
} |
|
|
|
|
|
|
|
/* 表单样式 */ |
|
|
|
@ -190,14 +695,26 @@ |
|
|
|
font-size: 28rpx; |
|
|
|
margin-bottom: 10rpx; |
|
|
|
display: block; |
|
|
|
color: var(--text-primary); |
|
|
|
} |
|
|
|
|
|
|
|
.auth-form-input { |
|
|
|
border: 1rpx solid #eee; |
|
|
|
border-radius: 8rpx; |
|
|
|
border: 2rpx solid var(--border-color); |
|
|
|
border-radius: var(--border-radius-md); |
|
|
|
padding: 20rpx; |
|
|
|
width: 100%; |
|
|
|
max-width: 100%; |
|
|
|
font-size: 28rpx; |
|
|
|
color: var(--text-primary); |
|
|
|
transition: var(--transition); |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.auth-form-input:focus { |
|
|
|
border-color: var(--primary-color); |
|
|
|
box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1); |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
徐飞洋
3 months ago