作者 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,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 +