|
@@ -1,551 +1,907 @@
|
|
|
: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;
|
|
|
- }
|
|
|
-
|
|
|
- /* 容器样式 */
|
|
|
+ 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 100px;
|
|
|
+ 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);
|
|
|
+}
|
|
|
+
|
|
|
+/* 文件上传区域 */
|
|
|
+.upload-area {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-container {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 30px 20px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-container:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: var(--shadow-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.upload-label {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-label i {
|
|
|
+ font-size: 36px;
|
|
|
+ color: var(--primary);
|
|
|
+ background: var(--primary-light);
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-label span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--dark);
|
|
|
+}
|
|
|
+
|
|
|
+.upload-hint {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--gray);
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 对话聊天区 */
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.current-role-indicator {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-indicator {
|
|
|
+ background: var(--blue-light);
|
|
|
+ color: var(--blue);
|
|
|
+}
|
|
|
+
|
|
|
+.assistant-indicator {
|
|
|
+ background: var(--primary-light);
|
|
|
+ color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-chat {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ color: var(--gray);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-chat i {
|
|
|
+ font-size: 48px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 客户标签编辑区 */
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.processing-indicator {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ color: var(--primary);
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.processing-indicator i {
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ from { transform: rotate(0deg); }
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
+}
|
|
|
+
|
|
|
+/* 策略卡片组 */
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.fixed-buttons {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ max-width: 480px;
|
|
|
+ padding: 0 16px;
|
|
|
+ z-index: 50;
|
|
|
+}
|
|
|
+
|
|
|
+/* 角色指示器 */
|
|
|
+.current-role-indicator {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.customer-indicator {
|
|
|
+ background: var(--blue-light);
|
|
|
+ color: var(--blue);
|
|
|
+}
|
|
|
+
|
|
|
+.assistant-indicator {
|
|
|
+ background: var(--primary-light);
|
|
|
+ color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+/* 策略卡片动画增强 */
|
|
|
+.strategy-card:hover {
|
|
|
+ box-shadow: 0 10px 30px rgba(100, 160, 255, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.strategy-card:active {
|
|
|
+ transform: translateY(5px) scale(0.98);
|
|
|
+}
|
|
|
+
|
|
|
+/* 标签悬停效果 */
|
|
|
+.tag {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tag::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
|
+ transition: all 0.6s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.tag:hover::before {
|
|
|
+ left: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入区域增强 */
|
|
|
+.text-input {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.text-input:focus {
|
|
|
+ border-color: var(--primary);
|
|
|
+ box-shadow: 0 0 0 3px rgba(100, 160, 255, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+/* 历史记录模态框 */
|
|
|
+.history-modal {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 100;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-content {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 450px;
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
|
+ animation: fadeInModal 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeInModal {
|
|
|
+ from { opacity: 0; transform: scale(0.95); }
|
|
|
+ to { opacity: 1; transform: scale(1); }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid rgba(10, 25, 47, 0.05);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ background: var(--white);
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn:hover {
|
|
|
+ background: var(--light-gray);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-item {
|
|
|
+ background: var(--light-gray);
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.history-item:hover {
|
|
|
+ background: var(--primary-light);
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.history-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.history-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.history-title span:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.history-timestamp {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--gray);
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn {
|
|
|
+ color: var(--gray);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-btn:hover {
|
|
|
+ color: #ff4d4f;
|
|
|
+}
|
|
|
+
|
|
|
+.history-summary {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--gray);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-history {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 50px 0;
|
|
|
+ color: var(--gray);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-history i {
|
|
|
+ font-size: 48px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 380px) {
|
|
|
.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);
|
|
|
+ padding: 0 12px 100px;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
+ height: 300px;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
+ height: 260px;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
+ .chat-area {
|
|
|
+ height: 320px;
|
|
|
}
|
|
|
|
|
|
- .card-hint {
|
|
|
- font-size: 14px;
|
|
|
- color: var(--gray);
|
|
|
+ .current-role-indicator {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
- /* 卡片导航点 */
|
|
|
- .card-navigation {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- margin-top: 15px;
|
|
|
+ .chat-title, .input-title, .strategy-title {
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
|
|
|
- .card-nav-btn {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- border-radius: 50%;
|
|
|
- background: var(--light-gray);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s ease;
|
|
|
+ .modal-content {
|
|
|
+ width: 95%;
|
|
|
}
|
|
|
-
|
|
|
- .card-nav-btn.active {
|
|
|
+}
|
|
|
+/* 添加禁用状态样式 */
|
|
|
+.save-btn.disabled {
|
|
|
+ opacity: 0.6;
|
|
|
+ cursor: not-allowed;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+/* 保持AI回答按钮与发送消息按钮风格一致 */
|
|
|
+.action-buttons .action-btn {
|
|
|
+ &:nth-child(3) {
|
|
|
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;
|
|
|
- }
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 1px solid rgba(100, 160, 255, 0.2);
|
|
|
|
|
|
- .strategy-card {
|
|
|
- height: 260px;
|
|
|
- padding: 20px;
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 20px rgba(100, 160, 255, 0.4);
|
|
|
}
|
|
|
|
|
|
- .chat-area {
|
|
|
- height: 320px;
|
|
|
+ &.disabled {
|
|
|
+ opacity: 0.6;
|
|
|
+ cursor: not-allowed;
|
|
|
+ box-shadow: none;
|
|
|
+ transform: none;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|