designer-hub/packages/merchant/src/pages/scan_code/index.vue

<route lang="yaml">
style:
  navigationBarTitleText: 扫码
  navigationBarBackgroundColor: '#fff'
</route>
<script lang="ts" setup>
import { bookIcon, scanIcon } from '@designer-hub/assets/src/svgs'
</script>

<template>
  <view>
    <div
      class="bg-white backdrop-blur-[60px] my-[16px] flex flex-col justify-center items-center p-[16px] mt-[20px]"
    >
      <div
        class="w-[68px] h-[68px] bg-[#2357e9] rounded-full mt-[37px] flex items-center justify-center"
      >
        <wd-img width="36px" height="36px" :src="scanIcon"></wd-img>
      </div>
      <div class="w-full mt-[45px]">
        <wd-button block :round="false">
          <div
            class="text-center text-white text-base font-normal font-['PingFang SC'] leading-normal"
          >
            扫码验券
          </div>
        </wd-button>
      </div>
    </div>
    <div
      class="bg-white backdrop-blur-[60px] flex flex-col justify-center items-center p-[16px] mt-[20px]"
    >
      <div
        class="w-[68px] h-[68px] bg-[#2357e9] rounded-full mt-[34px] flex items-center justify-center"
      >
        <wd-img width="36px" height="36px" :src="bookIcon"></wd-img>
      </div>
      <div class="w-full flex items-center mt-[40px]">
        <div
          class="text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed width-[96px]"
        >
          输入订单金额
        </div>
        <div class="bg-[#f5f7f9] rounded-lg flex items-center flex-1 ml-[16px]">
          <wd-input type="number" placeholder="请输金额" />
        </div>
      </div>
      <div class="w-full flex items-center mt-[20px]">
        <div
          class="text-black/90 text-base font-normal font-['PingFang SC'] leading-relaxed width-[96px]"
        >
          需支付积分
        </div>
        <div
          class="text-[#ff2d2d] text-base font-normal font-['PingFang SC'] leading-relaxed ml-[20px]"
        >
          3400 积分
        </div>
      </div>
      <div class="w-full mt-[45px]">
        <wd-button block :round="false">
          <div
            class="text-center text-white text-base font-normal font-['PingFang SC'] leading-normal"
          >
            积分结账
          </div>
        </wd-button>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
:deep(.wd-input) {
  background: transparent;
  height: 100%;
  border: none;
  width: 100%;
}
</style>