美食模块列表没有美食图时展示店铺logo ui修改细化

Reviewed-on: #13

src/components/HotRecommend/HotRecommend.vue

@@ -14,7 +14,20 @@
         <SwiperSlide v-for="item of list" :key="item.shopCode">
           <div class="relative overflow-hidden rounded-xl bg-white">
             <div class="h-[180px] w-80">
-              <img v-lazy="item.doorMaterialList?.[0]" :data-code="item.shopCode" class="cover" alt="" />
+              <img
+                v-show="item.doorMaterialList?.length"
+                :src="item.doorMaterialList?.[0]"
+                :data-code="item.shopCode"
+                class="cover"
+                alt=""
+              />
+              <img
+                v-show="!item.doorMaterialList?.length"
+                :src="mapShopListByCode[item.shopCode]?.[0]?.logoUrl"
+                :data-code="item.shopCode"
+                class="cover"
+                alt=""
+              />
             </div>
             <div class="absolute inset-x-0 bottom-0 flex h-10.5 items-center justify-between bg-black/20 px-3 backdrop-blur-xl">
               <div class="font-700 text-14 text-white">{{ i18n(item, 'shopName') }}</div>

src/components/ShopDetail/LeftInfo.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="info rounded-xl bg-white">
     <div class="relative h-[486px] w-[864px] rounded-xl bg-gray-100">
-      <EffectFade pagination :list="shop.doorMaterialList ?? []">
+      <EffectFade v-if="shop.doorMaterialList?.length" pagination :list="shop.doorMaterialList ?? []">
         <template v-slot="{ item }">
           <div class="h-[486px] w-[864px] rounded-xl bg-gray-50">
             <img :src="item" class="rounded-xl cover" alt="" />
           </div>
         </template>
       </EffectFade>
+      <div v-else class="h-[486px] w-[864px] rounded-xl bg-gray-50">
+        <img :src="shop.logoUrl" class="rounded-xl contain" alt="" />
+      </div>
     </div>
     <div class="relative z-10 ml-12 mr-6.5 flex">
       <div class="-mt-15.5 mr-10.5 size-40 overflow-hidden rounded-xl bg-white shadow-default">

src/views/Foods/Foods.vue

@@ -20,7 +20,14 @@
                 @click="handleShop(shop)"
               >
                 <div class="relative z-10 size-[174px] overflow-hidden rounded-full bg-white">
-                  <img v-lazy="shop.foodMaterialList?.[0]" :data-code="shop.shopCode" class="cover" alt="" />
+                  <img
+                    v-show="shop.foodMaterialList?.length"
+                    v-lazy="shop.foodMaterialList?.[0]"
+                    :data-code="shop.shopCode"
+                    class="cover"
+                    alt=""
+                  />
+                  <img v-show="!shop.foodMaterialList?.length" v-lazy="shop.logoUrl" :data-code="shop.shopCode" class="cover" alt="" />
                 </div>
                 <div class="-mt-[140px] h-54 w-full rounded-xl bg-gradient-to-b from-white/0 to-white"></div>
                 <div class="relative z-10 -mt-26 mb-3 size-12 rounded-full border border-solid border-orange-default bg-white p-2">

src/views/Index/Index.vue

@@ -16,9 +16,9 @@
             :style="{ backgroundImage: `url(${menuList[1].moduleActivateLogo})` }"
             @pointerdown="goPage(menuList[1])"
           >
-            <p class="flex items-center justify-between px-8 pt-8">
+            <p class="flex items-center justify-between pl-8 pr-1 pt-8">
               <span class="font-700 text-28 leading-9 text-black/80">{{ menuList[1].moduleName }}</span>
-              <span class="font-700 text-20 leading-7 text-black/50">{{ device.building }}-{{ device.floor }}</span>
+              <span class="font-700 text-14 leading-7 text-black/50">{{ device.building }}-{{ device.floor }}</span>
             </p>
             <div class="px-8 text-18 uppercase leading-7 text-black/40">{{ menuList[1].moduleNameEn }}</div>
           </div>