表单label样式修改

src/views/productCenter/productList/components/ProductLineDialog.vue

@@ -9,15 +9,24 @@
       size="default"
       label-position="top"
       status-icon>
-      <el-form-item label="产品线名称:" prop="productLine">
+      <el-form-item prop="productLine">
+        <template #label>
+          <span class="form-label"> 产品线名称: </span>
+        </template>
         <el-input v-model="ruleForm.productLine" placeholder="请输入产品线名称" maxlength="150" show-word-limit style="width: 500px" />
       </el-form-item>
-      <el-form-item label="商品:" required>
+      <el-form-item required>
+        <template #label>
+          <span class="form-label"> 商品: </span>
+        </template>
         <ProductList></ProductList>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitForm(ruleFormRef)"> 创建 </el-button>
-        <el-button @click="createProductDialog = false">取消</el-button>
+        <div style="display: flex">
+          <el-button style="margin: 0 auto" type="primary" @click="submitForm(ruleFormRef)"> 创建 </el-button>
+        </div>
+
+        <!-- <el-button @click="createProductDialog = false">取消</el-button> -->
       </el-form-item>
     </el-form>
   </el-dialog>
@@ -84,4 +93,8 @@ onBeforeUnmount(() => {
 ::v-deep(.el-form-item__content) {
   display: block !important;
 }
+.form-label {
+  font-weight: 500;
+  color: #505968;
+}
 </style>

src/views/productCenter/productList/components/ProductList.vue

@@ -60,8 +60,8 @@
               :rows="15"
               type="textarea"
               placeholder="请输入ASIN, 多个ASIN使用逗号、空格或换行符分隔" />
-            <div style="display: flex">
-              <el-button style="flex-direction: row-reverse" :disabled="!textarea" type="primary" text bg>添加</el-button>
+            <div style="display: flex; flex-direction: row-reverse;">
+              <el-button :disabled="!textarea" type="primary" text bg>添加</el-button>
             </div>
           </div>
         </el-tab-pane>

src/views/productCenter/productList/index.vue

@@ -109,4 +109,7 @@ function handleProductlog() {
   position: absolute;
   color: #3a83f7 !important;
 }
+::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
+  color: red;
+}
 </style>