<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'
import InvertedTrapezoidButton from '@/components/inverted-trapezoid-button.vue'
import TrapeziumButton from '@/components/trapezium-button.vue'

const data = ref([{}, {}, {}])
const a = ref(1)
</script>

<template>
  <view class="flex-grow flex flex-col gap-14 bg-white px-3.5">
    <template v-for="(it, i) in data" :key="i">
      <div class="flex gap-3">
        <div class="flex items-center">
          <div class="w-4 h-4 rounded-full border border-black/60 border-solid"></div>
        </div>
        <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl"></div>
        <div class="flex flex-col justify-between flex-1">
          <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
            阿芙佳朵
          </div>
          <div class="flex items-center">
            <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
              1000
            </div>
            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
              积分
            </div>
            <div class="flex-1"></div>
            <wd-input-number v-model="a" />
          </div>
        </div>
      </div>
    </template>
    <div class="h-[63px] bg-white backdrop-blur-[20px] flex px-3.5 items-center justify-between">
      <div class="flex">
        <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
          1360
        </div>
        <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-[34px]">
          积分
        </div>
      </div>
      <div class="">
        <TiltedButton size="large">
          <div
            class="w-[49px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
          >
            <div
              class="w-[65px] h-[22px] text-white text-base font-normal font-['PingFang SC'] leading-tight"
            >
              去结算
            </div>
          </div>
        </TiltedButton>
      </div>
    </div>
  </view>
</template>

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