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

<script setup lang="ts">
import TiltedButton from '@/components/tilted-button.vue'

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

<template>
  <view class="bg-white flex-grow px-3.5">
    <wd-swiper :list="data" autoplay height="128px"></wd-swiper>
    <div class="bg-black rounded-2xl pt-11 my-6">
      <div class="bg-white rounded-2xl shadow p-3.5"></div>
    </div>
    <div class="inline-flex gap-2">
      <wd-button type="primary" size="small">GELATO专区</wd-button>
      <wd-button plain size="small">设计周边</wd-button>
    </div>
    <div class="h-16">
      <div class="fixed bottom-0 left-0 right-0">
        <div class="h-16 flex items-center justify-around">
          <div><wd-button type="icon" icon="cart" size="small"></wd-button></div>
          <div>
            <TiltedButton custom-class="text-center">
              <span>购物车</span>
              <span
                class="w-20 h-[22px] text-white text-sm font-normal font-['PingFang SC'] leading-tight"
              >
                （已选2件）
              </span>
            </TiltedButton>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

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