作者 lixiang

智能助手配置,样式调整

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 +