Bladeren bron

fix(app): 优化材料详情页面展示效果

EvilDragon 4 maanden geleden
bovenliggende
commit
167a877902
1 gewijzigde bestanden met toevoegingen van 35 en 16 verwijderingen
  1. 35 16
      packages/app/src/pages/material/detail/index.vue

+ 35 - 16
packages/app/src/pages/material/detail/index.vue

@@ -168,25 +168,44 @@ onLoad(async (query: { id: number }) => {
         </div>
       </Card>
       <Card>
-        <div class="my-6 text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
-          品牌介绍
-        </div>
-        <img class="w-[319px] h-[194px] rounded-xl" src="https://via.placeholder.com/319x194" />
-        <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
-          Imola瓷砖
-        </div>
-        <div
-          class="w-[319px] h-[186px] text-justify text-black/60 text-sm font-normal font-['PingFang SC'] leading-[25px]"
-        >
-          意大利“蜜蜂”瓷砖制造商—伊莫拉陶瓷股份公司,创建于1874年,意大利IMOLA市。历经百余年,凭借着对工作的执着,对美的追求和不断的创新意识,伊莫拉缔造出“蜜蜂”这一世界知名品牌。
-          <br />
-          “蜜蜂”是具有代表意大利风格及产品质量并极富艺术创造力的典型品牌,其生产始终沿着两条轨道运行,一是及时掌握体现时代趋势和审美品位的设计理念,二是不断提高产品科技含量和制作工艺。
+        <div class="flex flex-col gap-4">
+          <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
+            品牌介绍
+          </div>
+          <div class="rounded-2xl overflow-hidden">
+            <wd-img
+              width="100%"
+              height="100%"
+              :src="materialHomePageData.brandAdvantageUrl"
+              mode="aspectFill"
+              custom-class="aspect-[1.72/1] "
+            ></wd-img>
+          </div>
+          <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
+            <!-- {{ materialHomePageData. }} -->
+            {{
+              materialsManageBrands.find(({ value }) => value === String(data?.manageBrand))?.label
+            }}
+          </div>
+          <div
+            class="text-justify text-black/60 text-sm font-normal font-['PingFang SC'] leading-[25px]"
+          >
+            {{ materialHomePageData.brandAdvantageDesc }}
+          </div>
         </div>
       </Card>
-      <SectionHeading title="产品展示"></SectionHeading>
+      <template v-if="materialHomePageData.productDOList?.length">
+        <SectionHeading title="产品展示"></SectionHeading>
+      </template>
       <template v-for="(it, index) in materialHomePageData.productDOList" :key="index">
-        <div class="aspect-[1.66/1]">
-          <wd-img width="100%" height="100%" class="rounded-2xl" :src="it?.productImgUrl" />
+        <div class="aspect-[1.66/1] rounded-2xl overflow-hidden">
+          <swiper class="h-[55.7vw]">
+            <template v-for="img of it?.productImgUrl?.split(',')" :key="img">
+              <swiper-item class="h-full">
+                <wd-img width="100%" height="100%" class="" :src="img" mode="aspectFill" />
+              </swiper-item>
+            </template>
+          </swiper>
         </div>
       </template>