优化

src/layout/components/search.vue

@@ -90,7 +90,7 @@ getSearchTitle(1).then((res) => {
     max-width: 1500px;
     margin: 0 auto;
     display: flex;
-    padding: 0 30px;
+    // padding: 0 30px;
   }
 
   &.search-bos1 {

src/views/home/datacomponents/JDBannerCards.vue

@@ -24,7 +24,7 @@
           </div>
           <div class="card-body-two-cols flex">
             <div class="col-item" v-for="(item, index) in dataInfo2.list" :key="index" @click="onPath(item.link)">
-              <img :src="item.image" class="mini-prod-img bank-logo" />
+              <el-image class="mini-prod-img bank-logo" :src="item.image" />
               <span class="col-text text-red">{{ item.name }}</span>
             </div>
           </div>
@@ -38,6 +38,7 @@
           </div>
           <div class="card-body-two-cols flex">
             <div class="col-item" v-for="(item, index) in dataInfo3.list" :key="index" @click="onPath(item.link)">
+              <!-- <el-image class="mini-brand-logo" :src="item.image" /> -->
               <img :src="item.image" class="mini-brand-logo" />
               <span class="col-text text-gray">{{ item.name }}</span>
             </div>
@@ -63,7 +64,7 @@
             :key="index"
             @click="onPath('/item?id=' + item.productId + '&productNo=' + item.productNo)"
           >
-            <img :src="item.image" />
+            <el-image class="p-img" :src="item.image" />
             <p class="price"><span>¥</span>{{ item.price }}</p>
           </div>
         </div>
@@ -79,7 +80,7 @@
           </div>
           <div class="card-body-two-cols flex">
             <div class="col-item" v-for="(item, index) in dataInfo4.list" :key="index" @click="onPath(item.link)">
-              <img :src="item.image" class="mini-prod-img" />
+              <el-image class="mini-prod-img" :src="item.image" />
               <p class="price"><span>¥</span>{{ item.price }}</p>
               <span class="label-buyer">{{ item.tag }}</span>
             </div>
@@ -94,7 +95,7 @@
           </div>
           <div class="card-body-two-cols flex">
             <div class="col-item" v-for="(item, index) in dataInfo5.list" :key="index" @click="onPath(item.link)">
-              <img :src="item.image" class="mini-prod-img" />
+              <el-image class="mini-prod-img" :src="item.image" />
               <p class="price"><span>¥</span>{{ item.price }}</p>
             </div>
           </div>
@@ -421,7 +422,7 @@ onUnmounted(() => stopAuto());
   opacity: 1;
 }
 
-.p-mini img {
+.p-img {
   height: 86px;
   width: 86px;
   object-fit: contain;

src/views/home/datacomponents/JDProducts.vue

@@ -78,7 +78,11 @@ const noMore = ref(false);
 recommendThemeConfig({}).then((res) => {
   if (res.code == 200) {
     document.documentElement.style.setProperty('--hover-data4', res.data.themeColor || '#E7000B');
-    document.documentElement.style.setProperty('--bgOpacity-data4', res.data.bgOpacity || '1');
+    const alphaDecimal = Math.round(Number(res.data.bgOpacity || 1) * 255);
+    const hexAlpha = alphaDecimal.toString(16).padStart(2, '0');
+    const bgOpacity = (res.data.themeColor || '#E7000B') + hexAlpha;
+    document.documentElement.style.setProperty('--bgOpacity-data4', bgOpacity);
+    console.log(bgOpacity, 123123123);
     categories.value = res.data.categoryConfigList;
     categories.value.forEach((item: any) => {
       item.goodsList = [];
@@ -365,8 +369,8 @@ const getTagClass = (tag) => {
 
 /* 选中状态下：圆圈背景变色、文字变色 */
 .cat-item.active .cat-icon-circle {
-  background-color: var(--hover-data4) !important;
-  opacity: var(--bgOpacity-data4) !important;
+  background-color: var(--bgOpacity-data4) !important;
+  /* opacity: var(--bgOpacity-data4) !important; */
 }
 
 .cat-item.active .cat-name-txt {

src/views/home/pccomponents/pages/head.vue

@@ -379,7 +379,7 @@ const warpCss = computed(() => {
       max-width: 1500px;
       min-width: 1200px;
       display: flex;
-      padding: 0 30px;
+      // padding: 0 30px;
     }
 
     .logo {

src/views/home/pccomponents/pages/headData.vue

@@ -364,7 +364,7 @@ const warpCss = computed(() => {
       max-width: 1500px;
       min-width: 1200px;
       display: flex;
-      padding: 0 30px;
+      // padding: 0 30px;
     }
 
     .logo {