✨ feat: 广告活动SD: 所有列表数据渲染样式更新

src/views/adManage/sd/audiences/index.vue

@@ -107,14 +107,16 @@ watch(
                   <span v-else>
                     {{ item.type ? sdtargetMap[item.type] + ': ' : '--' }}
                   </span>
-                  {{ item.value ?? '--' }}
+                  <span style="color: #000;">
+                    {{ item.value ?? '--' }}
+                  </span>
                   <span v-if="index < scope.row.expression[0].value.length - 1">&nbsp;</span>
                 </span>
               </template>
             </div>
           </div>
           <!-- 如果 expression 不存在或为空数组，显示暂无数据 -->
-          <div v-else style="font-weight: 500">暂无数据</div>
+          <div v-else style="font-weight: 500; color: #000;">暂无数据</div>
         </div>
       </template>
 

src/views/adManage/sd/campaigns/index.vue

@@ -1,3 +1,51 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import AdStructChart from './chartComponents/adStruct.vue'
+import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData, getLineHourData } from './api'
+import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import DataCompare from '/@/components/dataCompare/index.vue'
+
+const tabActiveName = ref('dataTendency')
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange,
+})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
+const router = useRouter()
+const showCompare = ref(false)
+
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'SdCampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName, row: row },
+  })
+  console.log('row', row)
+}
+
+onMounted(async () => {
+  crudExpose.doRefresh()
+})
+
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
+</script>
+
 <template>
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -55,54 +103,6 @@
   </fs-page>
 </template>
 
-<script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
-import { FsPage, useFs } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
-import { useRouter } from 'vue-router'
-import AdStructChart from './chartComponents/adStruct.vue'
-import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData, getLineHourData } from './api'
-import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
-import DataCompare from '/@/components/dataCompare/index.vue'
-
-const tabActiveName = ref('dataTendency')
-const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
-const { profile } = storeToRefs(shopInfo)
-const queryParams = ref({
-  profileId: profile.value.profile_id,
-  dateRange,
-})
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
-const router = useRouter()
-const showCompare = ref(false)
-
-const jumpGroup = (row: any) => {
-  router.push({
-    name: 'SdCampaignDetail',
-    query: { campaignId: row.campaignId, tagsViewName: row.campaignName, row: row },
-  })
-  console.log('row', row)
-}
-
-onMounted(async () => {
-  crudExpose.doRefresh()
-})
-
-watch(
-  queryParams,
-  async () => {
-    crudExpose.doRefresh()
-  },
-  { deep: true }
-)
-</script>
-
 <style lang="scss" scoped>
 .compare-switch {
   flex: none;

src/views/adManage/sd/matchedDelivery/crud.tsx

@@ -129,10 +129,10 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
             }
           }
         },
-        xxxx: {
+        expression: {
           title: '定向投放',
           column: {
-            width: 230,
+            width: 260,
             align: 'left'
           }
         },

src/views/adManage/sd/matchedDelivery/index.vue

@@ -1,3 +1,69 @@
+<script lang="ts" setup>
+import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { storeToRefs } from 'pinia'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import { createCrudOptions } from './crud'
+import DataCompare from '/@/components/dataCompare/index.vue'
+import { usePublicData } from '/@/stores/publicData'
+import { useShopInfo } from '/@/stores/shopInfo'
+import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
+import { SdMatchedDeliveryColumn } from '/@/views/adManage/utils/commonTabColumn'
+import { sdTypeMap, sdtargetMap } from '/@/views/adManage/utils/enum'
+
+const tabActiveName = ref('dataTendency')
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange,
+})
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
+const route = useRoute()
+const router = useRouter()
+const adStructChartRef = ref()
+const dataTendencyRef = ref()
+const showCompare = ref(false)
+
+onMounted(() => {
+  crudExpose.doRefresh()
+})
+
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'CampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+  })
+}
+
+const resizeTabChart = () => {
+  if (tabActiveName.value === 'dataTendency') {
+    dataTendencyRef.value.resizeChart()
+  } else if (tabActiveName.value === 'adStruct') {
+    adStructChartRef.value.resizeChart()
+  }
+}
+const changeTab = () => {
+  nextTick(() => {
+    resizeTabChart()
+  })
+}
+defineExpose({ resizeTabChart })
+
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
+</script>
+
 <template>
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -10,8 +76,7 @@
               :fetchCard="getCardData"
               :fetch-line-month="getLineMonthData"
               :fetch-line-week="getLineWeekData"
-              :fetchLine="getLineData"
-            ></DataTendencyChart>
+              :fetchLine="getLineData"></DataTendencyChart>
           </el-tab-pane>
           <!-- <el-tab-pane label="广告结构" name="adStruct">
             <AdStructChart v-if="tabActiveName === 'adStruct'" />
@@ -23,23 +88,58 @@
         <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
       </template>
 
-      <template #cell_resolvedExpression_value="scope">
-        <el-tooltip effect="dark" placement="top">
-          <template #content>
-            <p>{{ scope.row.resolvedExpression_value }}</p>
-            {{ scope.row.ASIN }}
-          </template>
-          <div>
-            <el-link :underline="false" class="ellipsis-inline" style="color: rgb(30, 33, 40); display: inline-block; max-width: 100%">
-              {{ scope.row.resolvedExpression_value }}
-            </el-link>
-            <br />
-            <span class="ellipsis">
-              <span style="color: rgb(109, 119, 132)">ASIN:</span>
-              <span style="color: rgb(30, 33, 40)">{{ scope.row.ASIN }}</span>
-            </span>
+      <template #cell_expression="{ row }">
+        <div style="display: flex">
+          <img class="img-part" v-if="row.expression[0].image" :src="row.expression[0].image" alt="" />
+          <el-image v-else class="img-part">
+            <template #error>
+              <div class="image-slot">
+                <el-icon><icon-picture /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <div class="right-part">
+            <div v-for="(expr, index) in row.expression" :key="`expr-${index}`">
+              <!-- 对于 type 为 asinSameAs 的特殊处理 -->
+              <div v-if="expr.type === 'asinSameAs'">
+                <el-tooltip effect="dark" :content="expr.itemName" placement="top-start">
+                  <div class="list-item-title">
+                    {{ sdtargetMap[expr.type] }}:
+                    <span class="title-font">
+                      {{ expr.itemName ? expr.itemName : '--' }}
+                    </span>
+                  </div>
+                </el-tooltip>
+                <div>
+                  ASIN: 
+                  <span class="value-font">
+                    {{ expr.value ? expr.value : '--' }}
+                  </span>
+                  <span>
+                    <el-link
+                      :href="expr.amazon_url"
+                      target="_blank"
+                      :disabled="!expr.amazon_url"
+                      :underline="false"
+                      :icon="Connection"
+                      :style="{ marginLeft: '8px', color: expr.amazon_url ? '#3a83f7' : '#c0c4cc' }">
+                    </el-link>
+                  </span>
+                </div>
+              </div>
+              <!-- 对于包含 value 数组的情况 -->
+              <div v-else>
+                <div v-for="(item, idx) in expr.value" :key="`item-${idx}`" class="list-other-type">
+                  <el-tooltip effect="dark" :content="item.value" placement="top-start">
+                    <div>
+                      {{ sdtargetMap[item.type] || item.type }}: <span class="value-font">{{ item.value ? item.value : '--' }}</span>
+                    </div>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
           </div>
-        </el-tooltip>
+        </div>
       </template>
 
       <template #cell_matchedTargetAsin="scope">
@@ -70,9 +170,7 @@
           {{ scope.row.suggestedBid_upper ? `$${scope.row.suggestedBid_upper}` : '--' }}
         </div>
       </template>
-      <template #cell_MissedImpressions="scope">
-        {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
-      </template>
+      <template #cell_MissedImpressions="scope"> {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }} </template>
       <template #cell_MissedClicks="scope">{{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
       <template #cell_MissedSales="scope">{{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
 
@@ -83,8 +181,7 @@
           :prev-val="scope.row[`prev${field}`]"
           :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"
-        />
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -96,71 +193,6 @@
   </fs-page>
 </template>
 
-<script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
-import { FsPage, useFs } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-import { useRoute, useRouter } from 'vue-router'
-import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import AdStructChart from './chartComponents/adStruct.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { storeToRefs } from 'pinia'
-import { SdMatchedDeliveryColumn } from '/@/views/adManage/utils/commonTabColumn'
-import DataCompare from '/@/components/dataCompare/index.vue'
-
-const tabActiveName = ref('dataTendency')
-const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
-const { profile } = storeToRefs(shopInfo)
-const queryParams = ref({
-  profileId: profile.value.profile_id,
-  dateRange,
-})
-
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
-const route = useRoute()
-const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
-const showCompare = ref(false)
-
-onMounted(() => {
-  crudExpose.doRefresh()
-})
-
-const jumpGroup = (row: any) => {
-  router.push({
-    name: 'CampaignDetail',
-    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
-  })
-}
-
-const resizeTabChart = () => {
-  if (tabActiveName.value === 'dataTendency') {
-    dataTendencyRef.value.resizeChart()
-  } else if (tabActiveName.value === 'adStruct') {
-    adStructChartRef.value.resizeChart()
-  }
-}
-const changeTab = () => {
-  nextTick(() => {
-    resizeTabChart()
-  })
-}
-defineExpose({ resizeTabChart })
-
-watch(
-  queryParams,
-  async () => {
-    crudExpose.doRefresh()
-  },
-  { deep: true }
-)
-</script>
-
 <style lang="scss" scoped>
 .campare-switch {
   flex: none;
@@ -227,4 +259,45 @@ watch(
   text-overflow: ellipsis;
   display: inline;
 }
+
+.img-part {
+  min-width: 65px;
+  height: 65px;
+  margin: 0 5px 0 0;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 65px;
+  height: 65px;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+
+.list-item-title {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.title-font {
+  font-weight: 500;
+  color: #1d2129;
+}
+.list-other-type {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.value-font {
+  color: #000;
+}
 </style>

src/views/adManage/sd/promoteProducts/crud.tsx

@@ -133,7 +133,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '广告活动名称',
           column: {
             width: 180,
-          }
+          },
         },
         adGroupName: {
           title: '广告组名称',

src/views/adManage/sd/promoteProducts/index.vue

@@ -1,3 +1,68 @@
+<script lang="ts" setup>
+import { Connection, Picture as IconPicture } from '@element-plus/icons-vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { storeToRefs } from 'pinia'
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import { createCrudOptions } from './crud'
+import DataCompare from '/@/components/dataCompare/index.vue'
+import { usePublicData } from '/@/stores/publicData'
+import { useShopInfo } from '/@/stores/shopInfo'
+import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
+import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
+
+const tabActiveName = ref('dataTendency')
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange,
+})
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
+const route = useRoute()
+const router = useRouter()
+const adStructChartRef = ref()
+const dataTendencyRef = ref()
+const showCompare = ref(false)
+
+onMounted(() => {
+  crudExpose.doRefresh()
+})
+
+const jumpGroup = (row: any) => {
+  router.push({
+    name: 'CampaignDetail',
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
+  })
+}
+
+const resizeTabChart = () => {
+  if (tabActiveName.value === 'dataTendency') {
+    dataTendencyRef.value.resizeChart()
+  } else if (tabActiveName.value === 'adStruct') {
+    adStructChartRef.value.resizeChart()
+  }
+}
+const changeTab = () => {
+  nextTick(() => {
+    resizeTabChart()
+  })
+}
+defineExpose({ resizeTabChart })
+
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
+</script>
+
 <template>
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
@@ -10,8 +75,7 @@
               :fetchCard="getCardData"
               :fetch-line-month="getLineMonthData"
               :fetch-line-week="getLineWeekData"
-              :fetchLine="getLineData"
-            >
+              :fetchLine="getLineData">
             </DataTendencyChart>
           </el-tab-pane>
           <!-- <el-tab-pane label="广告结构" name="adStruct">
@@ -21,26 +85,47 @@
         </el-tabs>
       </template>
 
-      <template #cell_commodity="scope">
-        <el-tooltip effect="dark" placement="top">
-          <template #content>
-            <p>{{ scope.row.campaignName }}</p>
-            <p>ASIN: {{ scope.row.promotedAsin }}</p>
-            SKU: {{ scope.row.promotedSku }}
-          </template>
-          <div>
-            <el-link :underline="false" class="ellipsis-inline" style="color: rgb(29, 35, 43); display: inline-block; font-weight: 450;">
-              {{ scope.row.campaignName ? scope.row.campaignName : '--' }}
-            </el-link>
-            <br>
-            <span class="ellipsis">
-              <span style="color: rgb(109, 119, 132)">ASIN: </span>
-              <span style="color: rgb(30, 33, 40)">{{ scope.row.promotedAsin }}</span>
-              <span style="color: rgb(109, 119, 132); margin-left: 10px;">SKU: </span>
-              <span style="color: rgb(30, 33, 40)">{{ scope.row.promotedSku }}</span>
-            </span>
-          </div>
-        </el-tooltip>
+      <template #cell_commodity="{ row }">
+        <div style="display: flex">
+          <img class="img-part" v-if="row.image" :src="row.image" />
+          <el-image v-else class="img-part">
+            <template #error>
+              <div class="image-slot">
+                <el-icon><icon-picture /></el-icon>
+              </div>
+            </template>
+          </el-image>
+          <el-tooltip effect="dark" placement="top">
+            <template #content>
+              <p>{{ row.itemName }}</p>
+            </template>
+            <div>
+              <div class="list-item-title">
+                {{ row.itemName ? row.itemName : '--' }}
+              </div>
+              <span>
+                <div class="list-item-label">
+                  ASIN:
+                  <span class="list-item-value">{{ row.promotedAsin }}</span>
+                  <span>
+                    <el-link
+                      :href="row.amazon_url"
+                      target="_blank"
+                      :disabled="!row.amazon_url"
+                      :underline="false"
+                      :icon="Connection"
+                      :style="{ marginLeft: '8px', color: row.amazon_url ? '#3a83f7' : '#c0c4cc' }">
+                    </el-link>
+                  </span>
+                </div>
+                <div class="list-item-label">
+                  SKU:
+                  <span class="list-item-value">{{ row.promotedSku ? row.promotedSku : '--' }}</span>
+                </div>
+              </span>
+            </div>
+          </el-tooltip>
+        </div>
       </template>
 
       <template #cell_percentTimeInBudget="scope">
@@ -49,7 +134,7 @@
       <template #cell_campaignName="scope">
         <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
           <el-link type="primary" :underline="false" @click="jumpGroup(scope.row)">
-            <div class="en-text">{{ scope.row.campaignName }}</div>
+            <div class="en-text">{{ scope.row.campaignName ? scope.row.campaignName : '--' }}</div>
           </el-link>
         </el-tooltip>
       </template>
@@ -62,9 +147,7 @@
         </el-tooltip>
       </template>
 
-      <template #cell_MissedImpressions="scope">
-        {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
-      </template>
+      <template #cell_MissedImpressions="scope"> {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }} </template>
       <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
       <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
 
@@ -75,8 +158,7 @@
           :prev-val="scope.row[`prev${field}`]"
           :gap-val="scope.row[`gap${field}`]"
           :date-range="dateRange"
-          :show-compare="showCompare"
-        />
+          :show-compare="showCompare" />
       </template>
       <template #toolbar-left>
         <div class="campare-switch">
@@ -88,72 +170,6 @@
   </fs-page>
 </template>
 
-<script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
-import { FsPage, useFs } from '@fast-crud/fast-crud'
-import { createCrudOptions } from './crud'
-import { useRoute, useRouter } from 'vue-router'
-import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import { usePublicData } from '/@/stores/publicData'
-import AdStructChart from './chartComponents/adStruct.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { storeToRefs } from 'pinia'
-import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn'
-import DataCompare from '/@/components/dataCompare/index.vue'
-import { sdTypeMap, sdtargetMap } from '/@/views/adManage/utils/enum'
-
-const tabActiveName = ref('dataTendency')
-const shopInfo = useShopInfo()
-const publicData = usePublicData()
-const { dateRange } = storeToRefs(publicData)
-const { profile } = storeToRefs(shopInfo)
-const queryParams = ref({
-  profileId: profile.value.profile_id,
-  dateRange,
-})
-
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
-const route = useRoute()
-const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
-const showCompare = ref(false)
-
-onMounted(() => {
-  crudExpose.doRefresh()
-})
-
-const jumpGroup = (row: any) => {
-  router.push({
-    name: 'CampaignDetail',
-    query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
-  })
-}
-
-const resizeTabChart = () => {
-  if (tabActiveName.value === 'dataTendency') {
-    dataTendencyRef.value.resizeChart()
-  } else if (tabActiveName.value === 'adStruct') {
-    adStructChartRef.value.resizeChart()
-  }
-}
-const changeTab = () => {
-  nextTick(() => {
-    resizeTabChart()
-  })
-}
-defineExpose({ resizeTabChart })
-
-watch(
-  queryParams,
-  async () => {
-    crudExpose.doRefresh()
-  },
-  { deep: true }
-)
-</script>
-
 <style lang="scss" scoped>
 .campare-switch {
   flex: none;
@@ -219,4 +235,39 @@ watch(
   text-overflow: ellipsis;
   display: inline;
 }
+
+.list-item-title {
+  color: #000;
+  font-weight: 500;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.img-part {
+  min-width: 65px;
+  height: 65px;
+  margin: 0 5px 0 0;
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 65px;
+  height: 65px;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+.list-item-label {
+  color: rgb(109, 119, 132);
+}
+.list-item-value {
+  color: rgb(30, 33, 40);
+}
 </style>