1062 lines
17 KiB
Plaintext
1062 lines
17 KiB
Plaintext
page {
|
||
background: var(--bg-primary);
|
||
font-family: 'PingFang SC', -apple-system, sans-serif;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.page-loading {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page-empty,
|
||
.page-error {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 240rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: var(--text-tertiary);
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.error-text {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: var(--text-secondary);
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.retry-btn {
|
||
margin-top: 32rpx;
|
||
padding: 16rpx 48rpx;
|
||
background: var(--color-primary);
|
||
color: var(--color-white);
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.retry-btn--hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Banner - 固定高度220rpx，SVG顶部对齐 */
|
||
.banner-area {
|
||
position: relative;
|
||
height: 202rpx;
|
||
overflow: hidden;
|
||
background: linear-gradient(330deg, var(--task-high-priority-from) 0%, var(--task-high-priority-from) 15%, var(--task-high-priority-border) 40%, var(--task-high-priority-border) 60%, #ef4444 85%, #ef4444 100%);
|
||
}
|
||
|
||
.banner-bg-svg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 270%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.banner-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: 44rpx 0 36rpx 44rpx;
|
||
}
|
||
|
||
/* Banner 放弃按钮 - 右上角 */
|
||
.banner-abandon-btn {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
right: 36rpx;
|
||
padding: 8rpx 16rpx;
|
||
z-index: 3;
|
||
}
|
||
|
||
.banner-abandon-text {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.banner-abandon-btn--hover .banner-abandon-text {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.customer-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28rpx;
|
||
padding-top: 8rpx;
|
||
}
|
||
|
||
.avatar-box {
|
||
width: 116rpx;
|
||
height: 116rpx;
|
||
border-radius: 30rpx;
|
||
background: rgba(255, 255, 255, 0.20);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.avatar-text {
|
||
font-size: 44rpx;
|
||
line-height: 1;
|
||
font-weight: 700;
|
||
color: var(--color-white);
|
||
}
|
||
|
||
.info-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.customer-name {
|
||
font-size: 36rpx;
|
||
line-height: 51rpx;
|
||
font-weight: 600;
|
||
color: var(--color-white);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex-shrink: 1;
|
||
}
|
||
|
||
.task-type-tag {
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(255, 255, 255, 0.25);
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: var(--color-white);
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sub-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.phone-toggle-btn {
|
||
padding: 4rpx 14rpx;
|
||
background: rgba(255, 255, 255, 0.20);
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.phone-toggle-text {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.phone-toggle-btn--hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.storage-level-text {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Main content */
|
||
.main-content {
|
||
padding: 30rpx 30rpx 160rpx;
|
||
}
|
||
|
||
.card {
|
||
background: var(--bg-secondary);
|
||
border-radius: 30rpx;
|
||
padding: 36rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.card:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
position: relative;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.title-pink::before {
|
||
background: linear-gradient(180deg, var(--rel-excellent-from), var(--rel-excellent-to));
|
||
}
|
||
|
||
.title-orange::before {
|
||
background: linear-gradient(180deg, var(--rel-good-from), var(--rel-good-to));
|
||
}
|
||
|
||
.title-green::before {
|
||
background: linear-gradient(180deg, #00a870, #4cd964);
|
||
}
|
||
|
||
.title-blue::before {
|
||
background: linear-gradient(180deg, var(--color-primary), var(--primary-500));
|
||
}
|
||
|
||
/* Relationship */
|
||
.relationship-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 28rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.rel-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 14rpx 28rpx;
|
||
border-radius: 22rpx;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rel-level-poor {
|
||
background: linear-gradient(135deg, var(--rel-poor-from), var(--rel-poor-to));
|
||
box-shadow: 0 4rpx 12rpx var(--rel-poor-shadow);
|
||
}
|
||
|
||
.rel-level-normal {
|
||
background: linear-gradient(135deg, var(--rel-normal-from), var(--rel-normal-to));
|
||
box-shadow: 0 4rpx 12rpx var(--rel-normal-shadow);
|
||
}
|
||
|
||
.rel-level-good {
|
||
background: linear-gradient(135deg, var(--rel-good-from), var(--rel-good-to));
|
||
box-shadow: 0 4rpx 12rpx var(--rel-good-shadow);
|
||
}
|
||
|
||
.rel-level-excellent {
|
||
background: linear-gradient(135deg, var(--rel-excellent-from), var(--rel-excellent-to));
|
||
box-shadow: 0 4rpx 12rpx var(--rel-excellent-shadow);
|
||
}
|
||
|
||
.rel-tag-text {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
font-weight: 600;
|
||
color: var(--color-white);
|
||
}
|
||
|
||
.rel-bar {
|
||
flex: 1;
|
||
height: 22rpx;
|
||
background: var(--bg-tertiary);
|
||
border-radius: 11rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rel-bar-fill {
|
||
height: 100%;
|
||
border-radius: 11rpx;
|
||
transition: width 0.6s ease, background 0.3s ease;
|
||
}
|
||
|
||
.rel-score {
|
||
font-size: 33rpx;
|
||
line-height: 51rpx;
|
||
font-weight: 700;
|
||
flex-shrink: 0;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.card-desc-wrap {
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Suggestion */
|
||
.suggestion-box {
|
||
background: linear-gradient(135deg, #eff6ff, #eef2ff);
|
||
border: 2rpx solid #bfdbfe;
|
||
border-radius: 22rpx;
|
||
padding: 28rpx;
|
||
margin-top: 22rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.suggestion-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.suggestion-icon-text {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
font-weight: 600;
|
||
color: #0052d9;
|
||
}
|
||
|
||
.suggestion-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
line-height: 36rpx;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.suggestion-intro {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #5e5e5e;
|
||
}
|
||
|
||
.suggestion-item-text {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #5e5e5e;
|
||
}
|
||
|
||
.speech-section {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.speech-title {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
font-weight: 600;
|
||
color: #4b4b4b;
|
||
display: block;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.speech-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 36rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.speech-bubble {
|
||
position: relative;
|
||
background: #f0f4ff;
|
||
border: 2rpx solid #c5c5c5;
|
||
border-radius: 22rpx;
|
||
padding: 22rpx 28rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.speech-bubble-inner {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.speech-text-wrap {
|
||
flex: 1;
|
||
}
|
||
|
||
.speech-text {
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: #1d1d1d;
|
||
}
|
||
|
||
.speech-copy-row {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.copy-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
padding: 4rpx 0;
|
||
}
|
||
|
||
.copy-btn-text {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.copy-btn--hover .copy-btn-text {
|
||
color: #0052d9;
|
||
}
|
||
|
||
.speech-arrow {
|
||
position: absolute;
|
||
bottom: -14rpx;
|
||
right: 44rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: #f0f4ff;
|
||
border-right: 2rpx solid var(--text-disabled);
|
||
border-bottom: 2rpx solid var(--text-disabled);
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
/* Clues */
|
||
.clue-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18rpx;
|
||
}
|
||
|
||
/* Notes */
|
||
.note-count {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.note-item {
|
||
padding: 26rpx;
|
||
background: #fafafa;
|
||
border-radius: 22rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.note-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.note-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.note-content-wrap {
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.note-date {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.note-top-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.note-delete-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 14rpx;
|
||
background: #fff;
|
||
border: 2rpx solid #e7e7e7;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.note-delete-btn--hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.note-content {
|
||
font-size: 26rpx;
|
||
line-height: 44rpx;
|
||
color: #101010;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.note-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 48rpx 0;
|
||
}
|
||
|
||
.empty-hint {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #c5c5c5;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
/* Service records */
|
||
.svc-summary {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 22rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.svc-summary-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
padding: 18rpx 0;
|
||
border-radius: 22rpx;
|
||
}
|
||
|
||
.svc-summary-blue {
|
||
background: rgba(0, 82, 217, 0.05);
|
||
}
|
||
|
||
.svc-summary-green {
|
||
background: rgba(0, 168, 112, 0.05);
|
||
}
|
||
|
||
.svc-summary-orange {
|
||
background: rgba(237, 123, 47, 0.05);
|
||
}
|
||
|
||
.svc-summary-value-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 2rpx;
|
||
}
|
||
|
||
.svc-summary-value {
|
||
font-size: 33rpx;
|
||
line-height: 51rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.svc-val-blue {
|
||
color: #0052d9;
|
||
}
|
||
|
||
.svc-val-green {
|
||
color: #00a870;
|
||
}
|
||
|
||
.svc-val-orange {
|
||
color: #ed7b2f;
|
||
}
|
||
|
||
.svc-summary-unit {
|
||
font-size: 20rpx;
|
||
line-height: 29rpx;
|
||
color: #a6a6a6;
|
||
margin-left: 2rpx;
|
||
}
|
||
|
||
.svc-summary-label {
|
||
font-size: 20rpx;
|
||
line-height: 29rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.svc-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.svc-record {
|
||
padding: 26rpx 26rpx;
|
||
border-radius: 22rpx;
|
||
border: 2rpx solid #eeeeee;
|
||
background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
|
||
}
|
||
|
||
.svc-record-row1 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.svc-record-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.svc-record-row2 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.svc-table {
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
color: #0052d9;
|
||
background: #ecf2fe;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.svc-type {
|
||
font-size: 24rpx;
|
||
line-height: 29rpx;
|
||
font-weight: 500;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.svc-type-basic {
|
||
background: rgba(0, 82, 217, 0.10);
|
||
color: #0052d9;
|
||
}
|
||
|
||
.svc-type-incentive {
|
||
background: rgba(0, 168, 112, 0.10);
|
||
color: #00a870;
|
||
}
|
||
|
||
.svc-duration {
|
||
font-size: 28rpx;
|
||
line-height: 36rpx;
|
||
font-weight: 600;
|
||
color: #393939;
|
||
}
|
||
|
||
.svc-income {
|
||
font-size: 30rpx;
|
||
line-height: 36rpx;
|
||
font-weight: 700;
|
||
color: #242424;
|
||
}
|
||
|
||
.svc-drinks {
|
||
font-size: 24rpx;
|
||
line-height: 32rpx;
|
||
color: #777777;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 380rpx;
|
||
}
|
||
|
||
.svc-date {
|
||
font-size: 24rpx;
|
||
line-height: 29rpx;
|
||
color: #8b8b8b;
|
||
}
|
||
|
||
.svc-view-all {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 28rpx 0 4rpx;
|
||
}
|
||
|
||
.svc-view-all-text {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
font-weight: 500;
|
||
color: #0052d9;
|
||
}
|
||
|
||
.svc-view-all--hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Bottom bar */
|
||
.bottom-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 22rpx;
|
||
padding: 16rpx 30rpx;
|
||
background: rgba(255, 255, 255, 0.97);
|
||
border-top: 2rpx solid #eeeeee;
|
||
z-index: 100;
|
||
}
|
||
|
||
.safe-area-bottom {
|
||
padding-bottom: 16rpx;
|
||
}
|
||
|
||
.btn-ask {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10rpx;
|
||
height: 80rpx;
|
||
border-radius: 22rpx;
|
||
background: linear-gradient(135deg, #0052d9, #2979ff);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 82, 217, 0.30);
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.btn-ask--hover {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.btn-note {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10rpx;
|
||
height: 80rpx;
|
||
border-radius: 22rpx;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.btn-text-dark {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 500;
|
||
color: #242424;
|
||
}
|
||
|
||
.btn-note--hover {
|
||
background: #eeeeee;
|
||
}
|
||
|
||
/* Abandon modal */
|
||
.abandon-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.50);
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
padding: 0 44rpx;
|
||
transition: align-items 0.3s ease;
|
||
}
|
||
|
||
/* 键盘弹出时，弹窗移到顶部 */
|
||
.abandon-overlay--keyboard-open {
|
||
align-items: flex-start;
|
||
padding: 0;
|
||
}
|
||
|
||
.abandon-modal {
|
||
width: 100%;
|
||
max-width: 620rpx;
|
||
background: #fff;
|
||
border-radius: 30rpx;
|
||
padding: 36rpx;
|
||
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.20);
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
transition: border-radius 0.3s ease;
|
||
}
|
||
|
||
/* 键盘弹出时，改为全圆角 */
|
||
.abandon-overlay--keyboard-open .abandon-modal {
|
||
border-radius: 0;
|
||
max-height: none;
|
||
}
|
||
|
||
.abandon-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.abandon-title {
|
||
font-size: 30rpx;
|
||
line-height: 44rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
}
|
||
|
||
.abandon-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
border-radius: 999rpx;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.abandon-close--hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.abandon-desc-wrap {
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.abandon-desc {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx;
|
||
color: #8b8b8b;
|
||
}
|
||
|
||
.abandon-textarea {
|
||
width: 100%;
|
||
min-height: 200rpx;
|
||
padding: 22rpx;
|
||
background: #fafafa;
|
||
border: 2rpx solid #eeeeee;
|
||
border-radius: 22rpx;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: #242424;
|
||
box-sizing: border-box;
|
||
margin-bottom: 16rpx;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.abandon-textarea:focus {
|
||
border-color: #0052d9;
|
||
background: #fff;
|
||
}
|
||
|
||
.abandon-error-wrap {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.abandon-error {
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #e34d59;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.abandon-footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* 键盘弹出时固定在键盘上方 */
|
||
.abandon-footer--float {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 12rpx 44rpx 16rpx;
|
||
background: #fff;
|
||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
z-index: 1001;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.abandon-confirm-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #e34d59, #f87171);
|
||
border-radius: 22rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(227, 77, 89, 0.30);
|
||
}
|
||
|
||
.abandon-confirm-text {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
|
||
.abandon-confirm-btn--hover {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.abandon-cancel-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 72rpx;
|
||
}
|
||
|
||
.abandon-cancel-text {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.abandon-cancel-btn--hover .abandon-cancel-text {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Debug panel */
|
||
.debug-panel {
|
||
position: fixed;
|
||
bottom: 120rpx;
|
||
right: 30rpx;
|
||
width: 520rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
|
||
z-index: 999;
|
||
}
|
||
|
||
.debug-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.debug-title {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
}
|
||
|
||
.debug-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 999rpx;
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.debug-close--hover {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.debug-section {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.debug-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.debug-label {
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #5e5e5e;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.debug-btn-group {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.debug-btn {
|
||
padding: 12rpx 20rpx;
|
||
background: #f3f3f3;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
line-height: 32rpx;
|
||
color: #5e5e5e;
|
||
border: 2rpx solid transparent;
|
||
}
|
||
|
||
.debug-btn--active {
|
||
background: #ecf2fe;
|
||
color: #0052d9;
|
||
border-color: #0052d9;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.debug-slider {
|
||
width: 100%;
|
||
margin: 12rpx 0;
|
||
}
|
||
|
||
.debug-hint {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.debug-hint text {
|
||
font-size: 20rpx;
|
||
line-height: 29rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.debug-trigger {
|
||
position: fixed;
|
||
bottom: 180rpx;
|
||
right: 30rpx;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, var(--ai-color-indigo, #667eea), var(--tag-social-text, #764ba2));
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.40);
|
||
z-index: 998;
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.debug-trigger--hover {
|
||
opacity: 0.85;
|
||
} |