feat: 封装获取图片主色调指令

src/views/agent/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="agent-wrap relative">
+  <div class="agent-wrap relative h-full">
     <a-input
       v-model="query.name"
       @blur="getData()"
@@ -23,10 +23,13 @@
                 :xxl="4"
                 v-for="(product, k) in item.agent_products">
           <div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
-              <img
-                class="card-image h-120px object-contain w-100% mb-8px bg-#F0EDFF"
+            <div class="card-image h-120px w-100%  bg-cover bg-center" v-image-main-color="product.image_url">
+                <img
+                class=" object-contain h-full w-100% mb-8px "
                 :src="product?.image_url"
               />
+            </div>
+             
             <div class="card-content">
               <div class="card-title mb-4px">{{ product?.name }}</div>
               <TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />