designer-hub/packages/app/src/pages/material/detail/index.vue

<route lang="yaml">
style:
  navigationStyle: custom
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import SectionHeading from '@/components/section-heading.vue'
import StartMenuButton from '@/components/start-menu-button.vue'

const handleBackClick = () => {
  uni.navigateBack()
}
</script>
<template>
  <view class="">
    <div class="w-full aspect-[1.16/1] bg-amber">
      <!-- <StartMenuButton></StartMenuButton> -->
    </div>
    <wd-navbar
      fixed
      left-arrow
      safe-area-inset-top
      custom-class="bg-transparent!"
      @click-left="handleBackClick"
    ></wd-navbar>
    <div class="relative top--8 px-3.5">
      <Card>
        <img
          class="w-[78px] h-[78px] rounded-full border border-[#f2f2f2]"
          src="https://via.placeholder.com/78x78"
        />
        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
          IMOLA瓷砖
        </div>
        <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
          进口品牌 | 瓷砖
        </div>
        <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal">
          自营品牌
        </div>
        <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal">
          70％积分
        </div>
        <div>
          <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
            经营品牌：
          </span>
          <span
            class="text-black/40 text-xs font-normal font-['PingFang SC'] uppercase leading-[10.18px]"
          >
            imola / chedit
          </span>
        </div>
      </Card>
      <Card class="my-6">
        <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>
      </Card>
      <SectionHeading title="产品展示" custom-class="my-6"></SectionHeading>
      <img class="w-[347px] h-[209px] rounded-2xl" src="https://via.placeholder.com/347x209" />
      <wd-button custom-class="w-full! rounded-lg!">下载所有素材包</wd-button>
    </div>
  </view>
</template>