🐛 fix: 修复商品中心-商品列表的卡片选择间距错误和无数据渲染错误

.env.development

@@ -5,8 +5,8 @@ ENV = 'development'
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
 # VITE_API_URL = 'http://192.168.1.225/'
- VITE_API_URL = 'http://192.168.1.16:8080/'
-# VITE_API_URL = 'https://ads.vzzon.com'
+# VITE_API_URL = 'http://192.168.1.16:8080/'
+ VITE_API_URL = 'http://amzads.zositechc.cn'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

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

@@ -29,6 +29,7 @@ const pieChartRefs = ref<HTMLDivElement[]>([]);
 const selectedCardIndex = ref(0);
 
 async function fetchProductCardData() {
+  loading.value = true;
   try {
     const { data } = await getProductCardData({
       profileId: profile.value.profile_id,
@@ -38,6 +39,8 @@ async function fetchProductCardData() {
     cardData.value = data;
   } catch (error) {
     console.log('error:', error);
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -143,8 +146,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="out-container" v-loading="loading">
-    <el-scrollbar>
+  <div class="out-container">
+    <el-scrollbar v-loading="loading">
       <div class="scrollbar-flex-content" v-show="cardData">
         <el-card
           v-if="cardData.length !== 0"
@@ -152,7 +155,7 @@ onBeforeUnmount(() => {
           :key="item.productlineId"
           shadow="hover"
           body-style="padding: 0; box-sizing: border-box; position: relative; width: 100%;"
-          class="scrollbar-demo-item mr-1.5"
+          class="scrollbar-demo-item"
           :class="{ selected: selectedCardIndex === index }"
           @click="selectCard(index, item)">
           <div class="pct-chart" :id="`chart${index}-${item.productlineId}`"></div>
@@ -208,7 +211,7 @@ onBeforeUnmount(() => {
   gap: 5px;
   width: 202px;
   height: 92px;
-  margin: 10px 0;
+  margin: 10px 10px 10px 0;
   border-radius: 4px;
   box-sizing: border-box;
   border: 1px solid transparent; /* 添加透明边框 */