|
|
@@ -1145,16 +1145,17 @@ $text-light: $text-tertiary;
|
|
|
// 信息卡片
|
|
|
.info-card {
|
|
|
padding: 20px;
|
|
|
- background-color: $bg-light;
|
|
|
- border-radius: 8px;
|
|
|
+ background-color: color-mix(in srgb, $bg-light 80%, $bg-white);
|
|
|
+ border-radius: 10px;
|
|
|
|
|
|
.card-title {
|
|
|
font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
+ font-weight: 700;
|
|
|
color: $text-primary;
|
|
|
- margin: 0 0 16px 0;
|
|
|
- padding-bottom: 12px;
|
|
|
- border-bottom: 1px solid $border-color;
|
|
|
+ margin: 0 0 14px 0;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid color-mix(in srgb, $border-color 80%, transparent);
|
|
|
+ letter-spacing: .2px;
|
|
|
}
|
|
|
|
|
|
// 客户信息
|
|
|
@@ -1165,14 +1166,18 @@ $text-light: $text-tertiary;
|
|
|
label {
|
|
|
display: block;
|
|
|
font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- color: $text-tertiary;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $text-secondary;
|
|
|
+ letter-spacing: .2px;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
color: $text-primary;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ letter-spacing: .1px;
|
|
|
}
|
|
|
|
|
|
.tag-container {
|
|
|
@@ -1181,11 +1186,13 @@ $text-light: $text-tertiary;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.tag {
|
|
|
- padding: 4px 12px;
|
|
|
+ padding: 4px 10px;
|
|
|
font-size: 12px;
|
|
|
- color: $primary-color;
|
|
|
- background-color: #e3f2fd;
|
|
|
- border-radius: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: color.mix($primary-color, black, 85%);
|
|
|
+ background-color: color-mix(in srgb, #e3f2fd 80%, white);
|
|
|
+ border-radius: 14px;
|
|
|
+ letter-spacing: .2px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1245,15 +1252,16 @@ $text-light: $text-tertiary;
|
|
|
margin-left: 12px;
|
|
|
|
|
|
.member-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
color: $text-primary;
|
|
|
margin-bottom: 2px;
|
|
|
+ letter-spacing: .2px;
|
|
|
}
|
|
|
|
|
|
.member-role {
|
|
|
font-size: 12px;
|
|
|
- color: $text-light;
|
|
|
+ color: $text-secondary;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1330,8 +1338,8 @@ $text-light: $text-tertiary;
|
|
|
|
|
|
.feedback-content {
|
|
|
font-size: 14px;
|
|
|
- color: $text-secondary;
|
|
|
- line-height: 1.5;
|
|
|
+ color: $text-primary;
|
|
|
+ line-height: 1.6;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
@@ -2045,4 +2053,383 @@ $text-light: $text-tertiary;
|
|
|
.wechat-sidebar { display: none; }
|
|
|
.project-content-main { width: 100%; }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// Project Detail iOS segmented & refinements (ABCD)
|
|
|
+.project-detail-container {
|
|
|
+ // A+B: 胶囊分段标签 + 细化激活态
|
|
|
+ .project-tabs.ios-tabs {
|
|
|
+ background: $background-primary;
|
|
|
+ border-radius: $border-radius;
|
|
|
+ box-shadow: $shadow-sm;
|
|
|
+ padding: 8px;
|
|
|
+
|
|
|
+ .tab-header {
|
|
|
+ background: $background-secondary;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ border-radius: $border-radius;
|
|
|
+ padding: 4px;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-btn {
|
|
|
+ position: relative;
|
|
|
+ border-radius: $border-radius;
|
|
|
+ padding: 10px 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: $text-secondary;
|
|
|
+ transition: color .18s ease, background-color .18s ease, transform .18s ease;
|
|
|
+
|
|
|
+ &:hover { background-color: color-mix(in srgb, $primary-color 6%, transparent); }
|
|
|
+ &:active { transform: scale(0.98); }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $primary-color;
|
|
|
+ font-weight: 600; // B: 激活时略增字重
|
|
|
+ }
|
|
|
+ &.active::before { // A: 胶囊式激活背景
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: $background-primary;
|
|
|
+ border-radius: inherit;
|
|
|
+ box-shadow: 0 1px 2px rgba(0,0,0,0.06);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ &.active::after { // B: 极细底线增强层次
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ right: 12px;
|
|
|
+ bottom: 6px;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: $primary-color;
|
|
|
+ opacity: .7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // C: 输入区细化
|
|
|
+ .wechat-input-area {
|
|
|
+ .wechat-input::placeholder { color: $text-tertiary; }
|
|
|
+
|
|
|
+ .action-btn:hover {
|
|
|
+ background-color: color-mix(in srgb, $text-primary 8%, transparent);
|
|
|
+ color: $text-primary;
|
|
|
+ }
|
|
|
+
|
|
|
+ .send-btn {
|
|
|
+ &:active:not(:disabled) { transform: scale(0.98); }
|
|
|
+ &:disabled {
|
|
|
+ background-color: $background-tertiary;
|
|
|
+ color: $text-tertiary;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ opacity: 0.9;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // D: 侧栏与卡片阴影/圆角统一
|
|
|
+ .wechat-sidebar { box-shadow: $shadow-sm; }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .project-detail-container {
|
|
|
+ .wechat-sidebar { border-radius: $border-radius; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Project Detail iOS buttons + history + bottom actions
|
|
|
+.project-detail-container {
|
|
|
+ // 顶部右侧两个按钮：导出报告（secondary）、联系客户（primary）
|
|
|
+ .header-actions {
|
|
|
+ .primary-btn,
|
|
|
+ .secondary-btn {
|
|
|
+ height: 36px;
|
|
|
+ padding: 0 14px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: .2px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ transition: background-color .18s ease, color .18s ease, transform .12s ease;
|
|
|
+
|
|
|
+ svg { width: 16px; height: 16px; }
|
|
|
+
|
|
|
+ &:active { transform: scale(0.98); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .secondary-btn {
|
|
|
+ color: $text-primary;
|
|
|
+ background-color: $bg-white;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+
|
|
|
+ &:hover { background-color: $bg-light; }
|
|
|
+ &:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, $text-primary 10%, transparent); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn {
|
|
|
+ color: #fff;
|
|
|
+ background-color: $primary-color;
|
|
|
+ border: 1px solid $primary-color;
|
|
|
+
|
|
|
+ &:hover { background-color: color.adjust($primary-color, $lightness: -6%); }
|
|
|
+ &:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, $primary-color 20%, transparent); }
|
|
|
+ &:disabled { background: $text-tertiary; border-color: $text-tertiary; cursor: not-allowed; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 历史服务记录板块字体与排版
|
|
|
+ .historical-records-card {
|
|
|
+ .record-section {
|
|
|
+ .projects-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
|
|
+ .project-item { padding: 10px 12px; border-radius: 8px; background: $bg-white; border: 1px solid $border-color; }
|
|
|
+ .project-name { font-size: 14px; font-weight: 600; color: $text-primary; margin-bottom: 4px; }
|
|
|
+ .project-period { font-size: 12px; color: $text-tertiary; margin-bottom: 6px; }
|
|
|
+ .project-description { font-size: 14px; color: $text-primary; line-height: 1.6; margin-bottom: 4px; }
|
|
|
+ .project-status { font-size: 12px; color: $text-secondary; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部售后操作栏（固定在底部的小界面）：现代感与极简
|
|
|
+ .after-sales-actions.ios-actions {
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 5;
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ .actions-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px 16px;
|
|
|
+ background: color-mix(in srgb, $bg-white 70%, transparent);
|
|
|
+ border-top: 1px solid $border-color;
|
|
|
+ backdrop-filter: saturate(160%) blur(10px);
|
|
|
+ -webkit-backdrop-filter: saturate(160%) blur(10px);
|
|
|
+ box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn,
|
|
|
+ .secondary-btn,
|
|
|
+ .warning-btn {
|
|
|
+ height: 36px;
|
|
|
+ padding: 0 14px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: .2px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ transition: background-color .18s ease, color .18s ease, transform .12s ease;
|
|
|
+ &:active { transform: scale(0.98); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .primary-btn { color: #fff; background: $primary-color; border-color: $primary-color; &:hover { background: color.adjust($primary-color, $lightness: -6%); } }
|
|
|
+ .secondary-btn { color: $text-primary; background: $bg-white; border-color: $border-color; &:hover { background: $bg-light; } }
|
|
|
+ .warning-btn { color: #8a6100; background: #fff8e1; border-color: #ffe0a5; &:hover { background: #ffefc2; } }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 里程碑小界面下方的动作区
|
|
|
+ .milestone-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ padding-top: 8px;
|
|
|
+ border-top: 1px dashed $border-color;
|
|
|
+
|
|
|
+ .primary-btn.small {
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 移动端微调
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .project-detail-container {
|
|
|
+ .after-sales-actions.ios-actions .actions-container { border-radius: 10px; gap: 8px; }
|
|
|
+ .historical-records-card .record-section .consultation-item { padding: 10px; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// iOS micro tuning — apply all requested adjustments
|
|
|
+.project-detail-container {
|
|
|
+ // Header actions buttons
|
|
|
+ .header-actions {
|
|
|
+ .primary-btn,
|
|
|
+ .secondary-btn {
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 16px;
|
|
|
+ border-radius: 12px;
|
|
|
+ }
|
|
|
+ .primary-btn:hover {
|
|
|
+ background-color: color.adjust($primary-color, $lightness: -4%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Historical records cards — softer borders
|
|
|
+ .historical-records-card .record-section {
|
|
|
+ .consultation-item,
|
|
|
+ .cooperation-item,
|
|
|
+ .feedback-item,
|
|
|
+ .project-item {
|
|
|
+ border-color: color-mix(in srgb, $border-color 70%, transparent);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Bottom sticky actions — lighter frosted glass and rounded container
|
|
|
+ .after-sales-actions.ios-actions {
|
|
|
+ .actions-container {
|
|
|
+ background: color-mix(in srgb, $bg-white 60%, transparent);
|
|
|
+ backdrop-filter: saturate(160%) blur(8px);
|
|
|
+ -webkit-backdrop-filter: saturate(160%) blur(8px);
|
|
|
+ border-radius: 14px;
|
|
|
+ }
|
|
|
+ .warning-btn {
|
|
|
+ color: #7a5200;
|
|
|
+ background: #fff5d6;
|
|
|
+ border-color: #ffd88a;
|
|
|
+ &:hover { background: #ffedbd; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Milestone small actions
|
|
|
+ .milestone-actions .primary-btn.small {
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .project-detail-container {
|
|
|
+ .header-actions {
|
|
|
+ .primary-btn,
|
|
|
+ .secondary-btn { height: 38px; padding: 0 14px; }
|
|
|
+ }
|
|
|
+ .after-sales-actions.ios-actions .actions-container { border-radius: 12px; }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Override: 历史卡片改为无描边 + 极浅阴影（高优先级覆盖）
|
|
|
+.project-detail-container {
|
|
|
+ .historical-records-card .record-section {
|
|
|
+ .consultation-item,
|
|
|
+ .cooperation-item,
|
|
|
+ .feedback-item,
|
|
|
+ .project-item {
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .project-detail-container {
|
|
|
+ .historical-records-card .record-section {
|
|
|
+ .consultation-item,
|
|
|
+ .cooperation-item,
|
|
|
+ .feedback-item,
|
|
|
+ .project-item {
|
|
|
+ box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Typography & layout improvements for Historical Records — 更直观的数据层级
|
|
|
+.project-detail-container {
|
|
|
+ .historical-records-card {
|
|
|
+ .record-section {
|
|
|
+ h4 { font-size: 16px; font-weight: 600; color: $text-primary; margin-bottom: 10px; }
|
|
|
+
|
|
|
+ // 过往咨询记录：日期-内容-状态 三段式布局
|
|
|
+ .consultation-list {
|
|
|
+ .consultation-item {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 128px 1fr auto; // 日期 | 内容 | 状态
|
|
|
+ gap: 8px 12px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .consultation-date {
|
|
|
+ font-size: 12px;
|
|
|
+ color: $text-tertiary;
|
|
|
+ letter-spacing: .2px;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ }
|
|
|
+ .consultation-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: $text-primary;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+ .consultation-status {
|
|
|
+ justify-self: end;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: $text-primary;
|
|
|
+ background: $bg-light;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ // 三色状态：成功/处理中/待处理
|
|
|
+ &.status-processed { color: $success-color; background-color: #e8f5e9; }
|
|
|
+ &.status-processing { color: $primary-color; background-color: #e3f2fd; }
|
|
|
+ &.status-pending { color: $warning-color; background-color: #fff3e0; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 合作项目：名称/周期/描述/状态的网格分区，突出名称与状态
|
|
|
+ .projects-list {
|
|
|
+ .project-item {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr auto;
|
|
|
+ grid-template-areas:
|
|
|
+ 'name status'
|
|
|
+ 'period status'
|
|
|
+ 'desc desc';
|
|
|
+ row-gap: 4px;
|
|
|
+ column-gap: 12px;
|
|
|
+
|
|
|
+ .project-name { grid-area: name; font-size: 15px; font-weight: 600; color: $text-primary; }
|
|
|
+ .project-period { grid-area: period; font-size: 12px; color: $text-tertiary; font-variant-numeric: tabular-nums; }
|
|
|
+ .project-description { grid-area: desc; font-size: 14px; color: $text-secondary; line-height: 1.6; }
|
|
|
+ .project-status { grid-area: status; align-self: start; justify-self: end; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #f2f4f7; color: $text-secondary; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 历史反馈：日期等数值统一用等宽数字，正文稍加对比度
|
|
|
+ .feedback-list {
|
|
|
+ .feedback-item {
|
|
|
+ .feedback-date { font-variant-numeric: tabular-nums; letter-spacing: .2px; color: $text-light; }
|
|
|
+ .feedback-content { color: $text-primary; line-height: 1.7; }
|
|
|
+ .rating-number { font-variant-numeric: tabular-nums; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 响应式：在移动端收敛为纵向信息流
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .project-detail-container {
|
|
|
+ .historical-records-card {
|
|
|
+ .record-section {
|
|
|
+ .consultation-list .consultation-item {
|
|
|
+ grid-template-columns: 1fr; // 纵向排列：内容 -> 状态 -> 日期
|
|
|
+ .consultation-status { justify-self: start; margin-top: 4px; }
|
|
|
+ .consultation-date { margin-top: 2px; }
|
|
|
+ }
|
|
|
+ .projects-list .project-item {
|
|
|
+ grid-template-columns: 1fr; grid-template-areas: 'name' 'status' 'period' 'desc';
|
|
|
+ .project-status { justify-self: start; margin: 2px 0 6px; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
0235711