正在显示
1 个修改的文件
包含
75 行增加
和
31 行删除
| 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,42 +211,78 @@ | @@ -203,42 +211,78 @@ | ||
| 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); | ||
| 210 | - | ||
| 211 | - :deep(.ant-card-head) { | ||
| 212 | - background-color: #f0f5ff; | ||
| 213 | - border-bottom: 1px solid #e8e8e8; | ||
| 214 | - } | 214 | +.config-card { |
| 215 | + margin: 30px auto; | ||
| 216 | + border: 1px solid #f0f0f0; | ||
| 217 | + border-radius: 6px; | ||
| 218 | + overflow: hidden; | ||
| 219 | + | ||
| 220 | + /* 标题在左上角,放大,背景与表单一致 */ | ||
| 221 | + :deep(.ant-card-head) { | ||
| 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 | +} | ||
| 216 | 230 | ||
| 217 | - .form-item { | ||
| 218 | - margin-bottom: 24px; | 231 | +.config-form { |
| 232 | + margin-left: 16%; | ||
| 233 | + width: 60%; | ||
| 234 | + margin-top: 2%; | ||
| 235 | +} | ||
| 219 | 236 | ||
| 220 | - :deep(.ant-form-item-label) { | ||
| 221 | - font-weight: 500; | ||
| 222 | - margin-bottom: 8px; | ||
| 223 | - } | ||
| 224 | - } | 237 | +/* 表单项增加更大间距 */ |
| 238 | +:deep(.ant-form-item) { | ||
| 239 | + margin-bottom: 32px; /* 增加间距 */ | ||
| 240 | +} | ||
| 225 | 241 | ||
| 226 | - .hint { | ||
| 227 | - font-size: 12px; | ||
| 228 | - color: #999; | ||
| 229 | - margin-top: 4px; | ||
| 230 | - } | 242 | +/* Label 样式 */ |
| 243 | +:deep(.ant-form-item-label > label) { | ||
| 244 | + font-weight: 500; | ||
| 245 | + color: #333; | ||
| 246 | +} | ||
| 231 | 247 | ||
| 232 | - .action-buttons { | ||
| 233 | - margin-top: 24px; | ||
| 234 | - text-align: center; | 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 | +} | ||
| 235 | 255 | ||
| 236 | - .ant-space { | ||
| 237 | - justify-content: center; | ||
| 238 | - } | 256 | +/* 输入框高度适中 */ |
| 257 | +:deep(.ant-input), | ||
| 258 | +:deep(.ant-select-selector), | ||
| 259 | +:deep(.ant-input-textarea) { | ||
| 260 | + min-height: 38px; | ||
| 261 | +} | ||
| 239 | 262 | ||
| 240 | - .ant-btn { | ||
| 241 | - min-width: 120px; | ||
| 242 | - } | 263 | +/* 提示文字 */ |
| 264 | +.hint { | ||
| 265 | + font-size: 12px; | ||
| 266 | + color: #999; | ||
| 267 | + margin-top: 4px; | ||
| 268 | +} | ||
| 269 | + | ||
| 270 | +/* 按钮区域居中 */ | ||
| 271 | +.action-buttons { | ||
| 272 | + | ||
| 273 | + margin-top: 24px; | ||
| 274 | + margin-left: 10%; | ||
| 275 | + text-align: center; | ||
| 276 | + | ||
| 277 | + .ant-space { | ||
| 278 | + justify-content: center; | ||
| 279 | + } | ||
| 280 | + | ||
| 281 | + .ant-btn { | ||
| 282 | + min-width: 120px; | ||
| 243 | } | 283 | } |
| 284 | +} | ||
| 244 | </style> | 285 | </style> |
| 286 | + | ||
| 287 | + | ||
| 288 | + |
-
请 注册 或 登录 后发表评论