✨ feat: 商品分析: 顶部卡片左上角动态分类标题

src/views/productCenter/productAnalysis/components/TopParentAsin/ExchangeProduct.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-popover placement="bottom-start" :width="1000" :visible="visible" persistent="false">
+  <el-popover placement="bottom-start" :width="1000" :visible="visible">
     <template #reference>
       <span class="exchange-btn" @click="visible = true">
         <el-icon><Switch /></el-icon>

src/views/productCenter/productAnalysis/components/TopParentAsin/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="top-parent-asin" v-loading="topCardloading">
-    <el-card body-style="padding: 10px;">
+    <el-card body-style="padding: 8px;">
       <div class="product-card">
         <div class="product-image">
           <img :src="dataSet.Image" class="img" />
         </div>
         <div class="product-info">
           <div>
-            <ExchangeProduct></ExchangeProduct>
+            <ExchangeProduct />
+
             <div style="position: relative">
-              <div style="position: absolute; top: -21px; left: 100px;">父Asin</div>
+              <div class="classification-title" :style="classificationStyle">{{ classification }}</div>
             </div>
           </div>
           <div class="product-title">
@@ -46,12 +47,13 @@
 <script setup lang="ts">
 import ExchangeProduct from './ExchangeProduct.vue'
 import { getDetail } from '../../api'
-import { inject, onMounted, ref } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
 import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
 const topCardloading = ref(false)
 const dataSet = <any>ref({})
+// const classification = ref('')
 
 const parentAsin = ref('')
 const childAsin = ref('')
@@ -88,11 +90,32 @@ async function fetchDetail() {
     dataSet.value = res.data
   } catch (error) {
     console.log('error:', error)
-  } finally{
+  } finally {
     topCardloading.value = false
   }
 }
 
+const classification = computed(() => {
+  if (dataSet.value.Asin) {
+    return 'ASIN'
+  } else if (dataSet.value.sku) {
+    return 'SKU'
+  } else {
+    return '父ASIN'
+  }
+})
+
+const classificationStyle = computed(() => {
+  switch (classification.value) {
+    case 'ASIN':
+      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #6759f6)' }
+    case 'SKU':
+      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #91cc69)' }
+    default:
+      return { backgroundImage: 'linear-gradient(to right bottom, #ffffff, #478cf7)' }
+  }
+})
+
 onMounted(() => {
   fetchDetail()
 })
@@ -171,4 +194,15 @@ onMounted(() => {
   line-height: 16px;
   font-weight: 500;
 }
+.classification-title {
+  position: absolute;
+  top: -29px;
+  left: -152px;
+  width: 70px;
+  height: 22px;
+  text-align: center;
+  border-bottom-right-radius: 12px;
+  border-top-left-radius: 4px;
+  color: white;
+}
 </style>

src/views/productCenter/productAnalysis/components/TrendOverview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <el-card>
-    <p>{{ queryParams }}</p>
+    <!-- <p>{{ queryParams }}</p> -->
     <DataTendencyChart :metricEnum="productListMetricsEnum" 
       :query="queryParams" 
       :fetchCard="getCardData"