designer-hub/packages/app/src/pages/home/mall/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '品质商城',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import TiltedButton from '@/components/tilted-button.vue'
import Product from './components/product.vue'
import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'

const data = ref(['https://via.placeholder.com/347x128'])
const products = ref([{}, {}, {}])
</script>

<template>
  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
    <wd-swiper :list="data" autoplay height="128px"></wd-swiper>
    <div class="bg-black rounded-2xl pt-11">
      <div class="bg-white rounded-2xl shadow p-3.5"></div>
    </div>
    <div class="w-full inline-flex gap-2">
      <div><wd-button type="primary" size="small">GELATO专区</wd-button></div>
      <div>
        <wd-button plain size="small">设计周边</wd-button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-2.5">
      <template v-for="({}, i) of products" :key="i">
        <Product></Product>
      </template>
    </div>
    <div class="h-16">
      <div class="fixed bottom-0 left-0 right-0">
        <div class="h-16 bg-white flex items-center justify-between px-7">
          <div>
            <!-- <wd-button type="text" size="small"> -->
            <wd-img :round="false" width="32" height="32" :src="shoppingBag"></wd-img>
            <!-- </wd-button> -->
          </div>
          <div>
            <TiltedButton custom-class="text-center! items-center">
              <span
                class="h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
              >
                购物车
              </span>
              <span class="h-[22px] text-white text-sm font-normal font-['PingFang SC']">
                （已选2件）
              </span>
            </TiltedButton>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<style scoped lang="scss"></style>