🌈 style: 样式调整

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

@@ -3,23 +3,18 @@
     <div class="left-part" v-loading="infiniteLoad">
       <el-tabs v-model="activeName">
         <el-tab-pane label="搜索" name="search">
-          <div style="margin: 0 10px">
+          <div class="product-search">
             <vxe-input v-model="searchInp" placeholder="请输入商品名称" type="search" class="search-input" />
           </div>
           <div class="padding-0-10">
             <div class="list-bar">
               <span class="padding-0-10">商品列表</span>
-              <vxe-button
-                style="position: absolute; margin: 3px; right: 0; color: #3c59b0"
-                type="text"
-                content="添加"
-                icon="vxe-icon-add"
-                @click="handleSelectedItems" />
+              <vxe-button class="custom-vxe-btn" type="text" content="添加" icon="vxe-icon-add" @click="handleSelectedItems" />
             </div>
           </div>
-          <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+          <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto;">
             <div>
-              <el-collapse v-model="activeNames" class="padding-0-10" style="border: none">
+              <el-collapse v-model="activeNames" class="padding-0-10 border-none">
                 <el-collapse-item v-for="(item, index) in data" :key="item.parentAsin" :name="String(index)">
                   <template #title>
                     <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)" :disabled="item.allChildrenExist">
@@ -91,7 +86,7 @@
           </span>
         </div>
         <el-scrollbar height="540px">
-          <el-collapse v-model="activeNames" class="padding-0-10" style="border: none">
+          <el-collapse v-model="activeNames" class="padding-0-10 border-none">
             <el-collapse-item v-for="(item, index) in selectedData" :key="item.parentAsin" :name="String(index)">
               <template #title>
                 <el-checkbox v-model="item.checked" @click.stop="" @change="checkAll(item, item.checked)">{{ item.parentAsin }}</el-checkbox>
@@ -141,7 +136,7 @@ const activeNames = ref([])
 const infiniteLoad = ref(false)
 let currentPage = 1
 let total = 0
-let limit = 20
+let limit = 10
 
 function load() {
   if (currentPage * limit < total) {
@@ -466,4 +461,19 @@ onBeforeUnmount(() => {
   color: #86909c;
   font-weight: 700;
 }
+.custom-vxe-btn {
+  position: absolute;
+  margin: 3px;
+  right: 0;
+  color: #3c59b0;
+}
+.product-search {
+  margin: 0 10px;
+}
+.border-none {
+  border: none;
+}
+:deep(.el-collapse-item:last-child .el-collapse-item__wrap ) {
+  border-bottom: none;
+}
 </style>

src/views/productCenter/productList/components/ProductDialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="createProductDialog" @close="closeDialog"  title="新建产品线" width="1300">
+  <el-dialog v-model="createProductDialog" @close="closeDialog" title="新建产品线" width="1300">
     <el-form
       v-loading="load"
       ref="ruleFormRef"
@@ -14,7 +14,7 @@
         <template #label>
           <span class="form-label"> 产品线名称: </span>
         </template>
-        <el-input v-model="ruleForm.productLineName" placeholder="请输入产品线名称" maxlength="150" show-word-limit style="width: 500px" />
+        <el-input v-model="ruleForm.productLineName" placeholder="请输入产品线名称" maxlength="150" show-word-limit style="width: 500px;" />
       </el-form-item>
       <el-form-item required>
         <template #label>
@@ -24,8 +24,8 @@
       </el-form-item>
       <el-form-item>
         <div style="display: flex; flex-direction: row-reverse">
-          <el-button v-if="!isUpdate" style="margin-left: 10px" color="#3c59b0" @click="submitForm(ruleFormRef)"> 创建 </el-button>
-          <el-button v-if="isUpdate" style="margin-left: 10px" color="#3c59b0" @click="updateForm(ruleFormRef)"> 确定 </el-button>
+          <el-button v-if="!isUpdate" style="margin-left: 10px;" color="#3c59b0;" @click="submitForm(ruleFormRef)"> 创建 </el-button>
+          <el-button v-if="isUpdate" style="margin-left: 10px;" color="#3c59b0;" @click="updateForm(ruleFormRef)"> 确定 </el-button>
           <el-button plain @click="createProductDialog = false">取消</el-button>
         </div>
       </el-form-item>

src/views/productCenter/productList/components/ProductSelectCard/index.vue

@@ -131,7 +131,6 @@ emitter.on('ProductList-updateCardData', (value: any) => {
 })
 
 emitter.on('TopFilters-selectValue', (value: any) => {
-  console.log('value.selectValue', value.selectValue)
   const newIndex = cardData.value.findIndex((item) => item.productlineId === value.selectValue)
   if (newIndex !== -1) {
     selectedCardIndex.value = newIndex

src/views/productCenter/productList/components/TopFilters/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="filters">
     <el-input placeholder="ASIN/父ASIN/标题/SKU"></el-input>
-    <el-select v-model="selectValue" style="width: 300px">
-      <el-option v-for="(item, index) in options" :key="item.productlineId" :label="item.productlinename" :value="item.productlineId" />
+    <el-select v-model="selectValue" class="filter-select">
+      <el-option v-for="item in options" :key="item.productlineId" :label="item.productlinename" :value="item.productlineId" />
     </el-select>
     <DateRangePicker v-model="dateRange"></DateRangePicker>
   </div>
@@ -56,4 +56,7 @@ onBeforeUnmount(() => {
   justify-content: space-between;
   gap: 10px;
 }
+.filter-select {
+  width: 300px;
+}
 </style>

src/views/productCenter/productList/index.vue

@@ -3,7 +3,7 @@
     <TopFilters></TopFilters>
     <div class="table-tips">
       <el-icon><Warning /></el-icon>
-      <p style="margin-left: 3px;">商品中心广告数据统计不包含SB广告</p>
+      <p class="prompt-words">商品中心广告数据统计不包含SB广告</p>
     </div>
     <el-card>
       <DataTendencyChart
@@ -113,4 +113,7 @@ function handleProductlog() {
 ::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
   color: red;
 }
+.rompt-words {
+  margin-left: 3px;
+}
 </style>