<route lang="json">
{ "style": { "navigationStyle": "custom" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'
import { calculatorBg, linkBuckle } from '../../../core/libs/pngs'
import { back } from '../../../core/utils/router'
</script>
<template>
  <div class="flex-grow px-3.5" :style="{ background: `url(${calculatorBg}) 100% 100%` }">
    <wd-navbar
      left-arrow
      safe-area-inset-top
      custom-class="bg-transparent! color-white!"
      :bordered="false"
      @click-left="back()"
    ></wd-navbar>
    <div
      class="mx-4.5 text-start text-[#e7d2c6] text-[34px] font-bold font-['Alimama ShuHeiTi'] leading-relaxed"
    >
      积分计算器
    </div>
    <div
      class="mx-4.5 mb-3 text-start text-white text-base font-normal font-['PingFang SC'] leading-relaxed"
    >
      获取积分小帮手
    </div>
    <Card>
      <div
        class="text-center text-[#ef4343] text-[40px] font-normal font-['D-DIN Exp'] leading-normal"
      >
        16000
      </div>
      <div
        class="text-center text-black text-base font-normal font-['PingFang SC'] leading-relaxed"
      >
        积分
      </div>
    </Card>
    <div class="relative h-2.5">
      <div class="flex justify-around absolute left-0 right-0 top--3">
        <wd-img :width="8" :src="linkBuckle" mode="widthFix" />
        <div></div>
        <wd-img :width="8" :src="linkBuckle" mode="widthFix" />
      </div>
    </div>
    <Card>
      <wd-input></wd-input>
      <wd-input></wd-input>
      <wd-input></wd-input>
      <wd-button :round="false" block custom-class="my-4">开始计算</wd-button>
      <div
        class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-relaxed"
      >
        积分 = 订单金额 x 20% x 10 x 材料商兑换积分比例
      </div>
    </Card>
  </div>
</template>
