正在显示
1 个修改的文件
包含
62 行增加
和
18 行删除
| 1 | <template> | 1 | <template> |
| 2 | <a-card title="智能助手配置" class="config-card"> | 2 | <a-card title="智能助手配置" class="config-card"> |
| 3 | - <a-form :model="formState" layout="vertical" ref="formRef" :rules="rules"> | 3 | + <a-form |
| 4 | + :model="formState" | ||
| 5 | + layout="horizontal" | ||
| 6 | + ref="formRef" | ||
| 7 | + :rules="rules" | ||
| 8 | + :labelCol="{ span: 3 }" | ||
| 9 | + :wrapperCol="{ span: 16 }" | ||
| 10 | + class="config-form" | ||
| 11 | + > | ||
| 4 | <!-- 向量模型 --> | 12 | <!-- 向量模型 --> |
| 5 | <a-form-item label="向量模型" class="form-item required" name="embeddingId"> | 13 | <a-form-item label="向量模型" class="form-item required" name="embeddingId"> |
| 6 | <a-select | 14 | <a-select |
| @@ -203,34 +211,67 @@ | @@ -203,34 +211,67 @@ | ||
| 203 | </script> | 211 | </script> |
| 204 | 212 | ||
| 205 | <style lang="less" scoped> | 213 | <style lang="less" scoped> |
| 206 | - .config-card { | ||
| 207 | - max-width: 1800px; | ||
| 208 | - margin: 20px auto; | ||
| 209 | - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); | 214 | +.config-card { |
| 215 | + margin: 30px auto; | ||
| 216 | + border: 1px solid #f0f0f0; | ||
| 217 | + border-radius: 6px; | ||
| 218 | + overflow: hidden; | ||
| 210 | 219 | ||
| 220 | + /* 标题在左上角,放大,背景与表单一致 */ | ||
| 211 | :deep(.ant-card-head) { | 221 | :deep(.ant-card-head) { |
| 212 | - background-color: #f0f5ff; | ||
| 213 | - border-bottom: 1px solid #e8e8e8; | ||
| 214 | - } | 222 | + background-color: #fff; /* 与输入区一致 */ |
| 223 | + border-bottom: 1px solid #f0f0f0; | ||
| 224 | + text-align: left; | ||
| 225 | + font-size: 20px; /* 字体放大 */ | ||
| 226 | + //font-weight: 600; | ||
| 227 | + padding-left: 24px; | ||
| 215 | } | 228 | } |
| 229 | +} | ||
| 230 | + | ||
| 231 | +.config-form { | ||
| 232 | + margin-left: 16%; | ||
| 233 | + width: 60%; | ||
| 234 | + margin-top: 2%; | ||
| 235 | +} | ||
| 216 | 236 | ||
| 217 | - .form-item { | ||
| 218 | - margin-bottom: 24px; | 237 | +/* 表单项增加更大间距 */ |
| 238 | +:deep(.ant-form-item) { | ||
| 239 | + margin-bottom: 32px; /* 增加间距 */ | ||
| 240 | +} | ||
| 219 | 241 | ||
| 220 | - :deep(.ant-form-item-label) { | 242 | +/* Label 样式 */ |
| 243 | +:deep(.ant-form-item-label > label) { | ||
| 221 | font-weight: 500; | 244 | font-weight: 500; |
| 222 | - margin-bottom: 8px; | ||
| 223 | - } | ||
| 224 | - } | 245 | + color: #333; |
| 246 | +} | ||
| 247 | + | ||
| 248 | +/* 输入框/选择框100%宽度 */ | ||
| 249 | +:deep(.ant-form-item-control input), | ||
| 250 | +:deep(.ant-form-item-control textarea), | ||
| 251 | +:deep(.ant-form-item-control .ant-select), | ||
| 252 | +:deep(.ant-form-item-control .ant-select-selector) { | ||
| 253 | + width: 100% !important; | ||
| 254 | +} | ||
| 255 | + | ||
| 256 | +/* 输入框高度适中 */ | ||
| 257 | +:deep(.ant-input), | ||
| 258 | +:deep(.ant-select-selector), | ||
| 259 | +:deep(.ant-input-textarea) { | ||
| 260 | + min-height: 38px; | ||
| 261 | +} | ||
| 225 | 262 | ||
| 226 | - .hint { | 263 | +/* 提示文字 */ |
| 264 | +.hint { | ||
| 227 | font-size: 12px; | 265 | font-size: 12px; |
| 228 | color: #999; | 266 | color: #999; |
| 229 | margin-top: 4px; | 267 | margin-top: 4px; |
| 230 | - } | 268 | +} |
| 269 | + | ||
| 270 | +/* 按钮区域居中 */ | ||
| 271 | +.action-buttons { | ||
| 231 | 272 | ||
| 232 | - .action-buttons { | ||
| 233 | margin-top: 24px; | 273 | margin-top: 24px; |
| 274 | + margin-left: 10%; | ||
| 234 | text-align: center; | 275 | text-align: center; |
| 235 | 276 | ||
| 236 | .ant-space { | 277 | .ant-space { |
| @@ -240,5 +281,8 @@ | @@ -240,5 +281,8 @@ | ||
| 240 | .ant-btn { | 281 | .ant-btn { |
| 241 | min-width: 120px; | 282 | min-width: 120px; |
| 242 | } | 283 | } |
| 243 | - } | 284 | +} |
| 244 | </style> | 285 | </style> |
| 286 | + | ||
| 287 | + | ||
| 288 | + |
-
请 注册 或 登录 后发表评论