385 lines
8.0 KiB
Plaintext
385 lines
8.0 KiB
Plaintext
/* pages/kaohe_jinpai/kaohe_jinpai.wxss - 晨雾微光风格 */
|
|
.page-root {
|
|
min-height: 100vh;
|
|
background: linear-gradient(135deg, #F5F7FA 0%, #E4E8F0 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
padding: 30rpx 50rpx;
|
|
gap: 60rpx;
|
|
background: rgba(255, 255, 255, 0.65);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
.tab-item {
|
|
font-size: 32rpx;
|
|
color: #6B7280;
|
|
padding-bottom: 10rpx;
|
|
border-bottom: 4rpx solid transparent;
|
|
transition: all 0.3s;
|
|
}
|
|
.tab-item.active {
|
|
color: #4C5BF0;
|
|
border-bottom-color: #4C5BF0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
.scroll-view {
|
|
height: 100%;
|
|
padding: 30rpx 0;
|
|
}
|
|
|
|
.plate-group {
|
|
margin-bottom: 50rpx;
|
|
}
|
|
.plate-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #1F2937;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 30rpx;
|
|
border-left: 6rpx solid #4C5BF0;
|
|
margin-left: 30rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.tag-card {
|
|
background: #FFFFFF;
|
|
border-radius: 28rpx;
|
|
padding: 30rpx;
|
|
margin: 0 30rpx 20rpx 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
|
border: 1rpx solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
.tag-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
.jinpai-badge {
|
|
font-size: 22rpx;
|
|
color: #F59E0B;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
padding: 4rpx 14rpx;
|
|
border-radius: 20rpx;
|
|
font-weight: 600;
|
|
}
|
|
.fee-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.fee-item {
|
|
font-size: 24rpx;
|
|
color: #4B5563;
|
|
background: #F3F4F6;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.apply-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
background: linear-gradient(135deg, #4C5BF0, #6D7AF5);
|
|
color: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
letter-spacing: 2rpx;
|
|
transition: all 0.2s;
|
|
}
|
|
.apply-btn:active {
|
|
opacity: 0.85;
|
|
transform: scale(0.98);
|
|
}
|
|
.owned-tip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
color: #10B981;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 记录卡片 */
|
|
.record-card {
|
|
background: #FFFFFF;
|
|
border-radius: 28rpx;
|
|
padding: 30rpx;
|
|
margin: 0 30rpx 20rpx 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
|
|
border: 1rpx solid rgba(0, 0, 0, 0.04);
|
|
}
|
|
.card-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.tag-name { font-size: 32rpx; font-weight: 600; color: #1F2937; }
|
|
.status-text { font-size: 26rpx; }
|
|
.card-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #4B5563;
|
|
}
|
|
|
|
/* 联系考核官：蓝色下划线 */
|
|
.contact-text-link {
|
|
color: #4C5BF0;
|
|
text-decoration: underline;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.fee-predict {
|
|
background: #F3F4F6;
|
|
padding: 12rpx 16rpx;
|
|
border-radius: 12rpx;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rpx;
|
|
font-size: 24rpx;
|
|
color: #4B5563;
|
|
}
|
|
|
|
.reapply-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
margin-top: 20rpx;
|
|
background: #F59E0B;
|
|
color: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
.reapply-btn:active {
|
|
opacity: 0.85;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
padding: 20rpx 30rpx;
|
|
gap: 40rpx;
|
|
}
|
|
.filter-tag {
|
|
font-size: 28rpx;
|
|
color: #6B7280;
|
|
padding-bottom: 8rpx;
|
|
border-bottom: 3rpx solid transparent;
|
|
}
|
|
.filter-tag.active {
|
|
color: #4C5BF0;
|
|
border-bottom-color: #4C5BF0;
|
|
}
|
|
|
|
/* 弹窗 */
|
|
.modal-mask {
|
|
position: fixed; top:0; left:0; width:100%; height:100%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.modal-dialog {
|
|
width: 85%;
|
|
background: #FFFFFF;
|
|
border-radius: 36rpx;
|
|
padding: 40rpx;
|
|
box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
.modal-header { font-size: 34rpx; font-weight: 700; color: #1F2937; margin-bottom: 30rpx; }
|
|
.form-group { margin-bottom: 25rpx; }
|
|
.form-label { font-size: 28rpx; color: #4B5563; margin-bottom: 10rpx; display: block; }
|
|
.form-input, .form-textarea {
|
|
width: 100%;
|
|
background: #F9FAFB;
|
|
border-radius: 14rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #1F2937;
|
|
border: 1rpx solid #E5E7EB;
|
|
}
|
|
.form-textarea { height: 150rpx; }
|
|
.fee-info { text-align: center; font-size: 30rpx; margin: 20rpx 0; color: #F59E0B; }
|
|
.fee-amount { font-weight: 700; }
|
|
.modal-actions { display: flex; gap: 20rpx; margin-top: 30rpx; }
|
|
.btn-cancel, .btn-confirm {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn-cancel { background: #F3F4F6; color: #4B5563; }
|
|
.btn-cancel:active { background: #E5E7EB; }
|
|
.btn-confirm { background: linear-gradient(135deg, #4C5BF0, #6D7AF5); color: #FFFFFF; }
|
|
.btn-confirm:active { opacity: 0.85; transform: scale(0.98); }
|
|
|
|
.loading-more, .no-more { text-align: center; padding: 30rpx; color: #9CA3AF; font-size: 26rpx; }
|
|
|
|
.kg-avatar {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
margin-right: 8rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 原有样式保留，以下是新增样式 */
|
|
|
|
/* 指定考核官选择按钮 */
|
|
.select-kg-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
background: #F3F4F6;
|
|
color: #4B5563;
|
|
border-radius: 34rpx;
|
|
font-size: 28rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.select-kg-btn:active {
|
|
background: #E5E7EB;
|
|
}
|
|
|
|
/* 已选择的考核官卡片 */
|
|
.selected-kg-card {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F9FAFB;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
margin-top: 10rpx;
|
|
border: 1rpx solid #E5E7EB;
|
|
}
|
|
.kg-avatar {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
margin-right: 16rpx;
|
|
}
|
|
.kg-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
}
|
|
.kg-uid {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #1F2937;
|
|
}
|
|
.kg-nick {
|
|
font-size: 24rpx;
|
|
color: #6B7280;
|
|
}
|
|
.kg-status {
|
|
font-size: 22rpx;
|
|
padding: 2rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
width: fit-content;
|
|
}
|
|
.kg-status.renzheng {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: #10B981;
|
|
}
|
|
.kg-status.not-renzheng {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
color: #F59E0B;
|
|
}
|
|
.clear-kg-btn {
|
|
color: #EF4444;
|
|
font-size: 26rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
.clear-kg-btn:active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 禁用指定提示 */
|
|
.kg-disabled-tip {
|
|
background: #FEF3C7;
|
|
padding: 16rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 24rpx;
|
|
color: #92400E;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
/* 考核官选择弹窗内搜索 */
|
|
.search-box {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.search-input {
|
|
width: 100%;
|
|
background: #F9FAFB;
|
|
border-radius: 14rpx;
|
|
padding: 16rpx;
|
|
font-size: 28rpx;
|
|
border: 1rpx solid #E5E7EB;
|
|
}
|
|
|
|
/* 考核官滚动列表 */
|
|
.kg-scroll {
|
|
max-height: 500rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
/* 单个考核官项 */
|
|
.kg-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 12rpx;
|
|
border: 1rpx solid #F3F4F6;
|
|
}
|
|
.kg-item:active {
|
|
background: #F9FAFB;
|
|
}
|
|
.kg-item .kg-state {
|
|
font-size: 22rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
.kg-state.free {
|
|
color: #10B981;
|
|
}
|
|
.kg-state.busy {
|
|
color: #EF4444;
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
color: #9CA3AF;
|
|
font-size: 26rpx;
|
|
} |