|
|
@@ -0,0 +1,550 @@
|
|
|
+:host {
|
|
|
+ display: block;
|
|
|
+ background-color: #f0f5ff;
|
|
|
+ color: var(--dark);
|
|
|
+ line-height: 1.6;
|
|
|
+ overflow-x: hidden;
|
|
|
+ background: linear-gradient(135deg, #e6f0ff 0%, #f5f9ff 100%);
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 变量定义 */
|
|
|
+ :root {
|
|
|
+ --primary: #64a0ff;
|
|
|
+ --primary-light: rgba(100, 160, 255, 0.1);
|
|
|
+ --dark: #0a192f;
|
|
|
+ --dark-light: #112240;
|
|
|
+ --gray: #8892b0;
|
|
|
+ --light-gray: #f8f9fa;
|
|
|
+ --white: #ffffff;
|
|
|
+ --blue: #64a0ff;
|
|
|
+ --blue-light: rgba(100, 160, 255, 0.15);
|
|
|
+ --yellow: #ffd43b;
|
|
|
+ --orange: #ff922b;
|
|
|
+ --purple: #9c36b5;
|
|
|
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|
|
+ --shadow-primary: 0 4px 20px rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 基础样式 */
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 容器样式 */
|
|
|
+ .container {
|
|
|
+ max-width: 480px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 16px 30px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部导航 */
|
|
|
+ .app-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 15px 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-bottom: 1px solid rgba(10, 25, 47, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--dark);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title i {
|
|
|
+ color: var(--primary);
|
|
|
+ background: var(--primary-light);
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 场景选择 */
|
|
|
+ .scene-selector {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-options {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-option {
|
|
|
+ flex: 1;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 15px;
|
|
|
+ background: var(--light-gray);
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-option.active {
|
|
|
+ background: var(--primary-light);
|
|
|
+ border-color: var(--primary);
|
|
|
+ box-shadow: var(--shadow-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-option i {
|
|
|
+ font-size: 28px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-option h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-option p {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 对话聊天区 */
|
|
|
+ .chat-area {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ height: 350px;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-title, .input-title, .strategy-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: var(--dark);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid rgba(100, 160, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-title i, .input-title i, .strategy-title i {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-message {
|
|
|
+ max-width: 85%;
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-radius: 18px;
|
|
|
+ position: relative;
|
|
|
+ animation: fadeIn 0.3s ease;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadeIn {
|
|
|
+ from { opacity: 0; transform: translateY(10px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-message {
|
|
|
+ background: linear-gradient(135deg, #e6f0ff, #ebf2ff);
|
|
|
+ align-self: flex-start;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ border-left: 3px solid var(--blue);
|
|
|
+ }
|
|
|
+
|
|
|
+ .assistant-message {
|
|
|
+ background: linear-gradient(135deg, #e6f7ff, #ebf9ff);
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.3);
|
|
|
+ align-self: flex-end;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ border-right: 3px solid var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer-header .icon {
|
|
|
+ background: var(--blue-light);
|
|
|
+ color: var(--blue);
|
|
|
+ }
|
|
|
+
|
|
|
+ .assistant-header .icon {
|
|
|
+ background: var(--primary-light);
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-header .icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-content {
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-time {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--gray);
|
|
|
+ margin-top: 8px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 客户标签编辑区 */
|
|
|
+ .tags-area {
|
|
|
+ background: var(--light-gray);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-tags {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ background: var(--primary-light);
|
|
|
+ color: var(--primary);
|
|
|
+ padding: 6px 12px 6px 8px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag:hover {
|
|
|
+ background: rgba(100, 160, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag .delete {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 5px;
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag .delete:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-tag {
|
|
|
+ background: rgba(136, 146, 176, 0.1);
|
|
|
+ color: var(--gray);
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-tag:hover {
|
|
|
+ background: rgba(136, 146, 176, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 输入工作区 */
|
|
|
+ .input-area {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .role-selector {
|
|
|
+ display: flex;
|
|
|
+ background: var(--light-gray);
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 4px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .role-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .role-btn.active {
|
|
|
+ background: var(--white);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-field {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid rgba(136, 146, 176, 0.2);
|
|
|
+ background: var(--light-gray);
|
|
|
+ resize: none;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--dark);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-input:focus {
|
|
|
+ outline: none;
|
|
|
+ border-color: var(--primary);
|
|
|
+ box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 策略卡片组 */
|
|
|
+ .strategy-area {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cards-container {
|
|
|
+ position: relative;
|
|
|
+ height: 320px;
|
|
|
+ perspective: 1000px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .strategy-card {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 25px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
|
+ opacity 0.4s ease,
|
|
|
+ box-shadow 0.3s ease;
|
|
|
+ backface-visibility: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-aggressive {
|
|
|
+ background: linear-gradient(135deg, #eef6ff, #f0f8ff);
|
|
|
+ border-top: 4px solid var(--blue);
|
|
|
+ z-index: 30;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-neutral {
|
|
|
+ background: linear-gradient(135deg, #fff9e6, #fffbf0);
|
|
|
+ border-top: 4px solid var(--yellow);
|
|
|
+ transform: translateY(20px) scale(0.95);
|
|
|
+ z-index: 20;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-conservative {
|
|
|
+ background: linear-gradient(135deg, #f9f0ff, #fdf5ff);
|
|
|
+ border-top: 4px solid var(--purple);
|
|
|
+ transform: translateY(40px) scale(0.9);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content p {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ line-height: 1.7;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-highlight {
|
|
|
+ background: rgba(10, 25, 47, 0.05);
|
|
|
+ padding: 12px 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border-left: 3px solid var(--primary);
|
|
|
+ margin: 15px 0;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid rgba(136, 146, 176, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-hint {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 卡片导航点 */
|
|
|
+ .card-navigation {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-nav-btn {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--light-gray);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-nav-btn.active {
|
|
|
+ background: var(--primary);
|
|
|
+ transform: scale(1.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 操作按钮 */
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .save-btn {
|
|
|
+ background: var(--primary);
|
|
|
+ color: var(--dark);
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 15px rgba(100, 160, 255, 0.3);
|
|
|
+ }
|
|
|
+
|
|
|
+ .save-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 20px rgba(100, 160, 255, 0.4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-btn {
|
|
|
+ background: var(--white);
|
|
|
+ color: var(--dark);
|
|
|
+ border: 2px solid var(--primary);
|
|
|
+ box-shadow: 0 4px 15px rgba(100, 160, 255, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .history-btn:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 20px rgba(100, 160, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 响应式调整 */
|
|
|
+ @media (max-width: 380px) {
|
|
|
+ .container {
|
|
|
+ padding: 0 12px 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-options {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cards-container {
|
|
|
+ height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .strategy-card {
|
|
|
+ height: 260px;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-area {
|
|
|
+ height: 320px;
|
|
|
+ }
|
|
|
+ }
|
