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

<route lang="yaml">
layout: tabbar
style:
  navigationBarTitleText: 我的
  navigationBarBackgroundColor: 'transparent'
</route>
<script lang="ts" setup>
import { desinTopBg } from '@designer-hub/assets/src/svgs'
</script>

<template>
  <view class="p-[16px]">
    <div class="aspect-[1.575/1] absolute left-0 right-0 top-0">
      <wd-img width="100%" height="100%" :src="desinTopBg" custom-class="vertical-top"></wd-img>
    </div>
    <div
      class="bg-white rounded-2xl shadow relative mt-[28px] py-[29px] px-[14px] flex items-center"
    >
      <div><img class="w-16 h-16 rounded-full" src="https://via.placeholder.com/64x64" /></div>
      <div class="ml-[10px]">
        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
          商家：GELATO
        </div>
        <div
          class="h-6 px-1.5 py-1 bg-[#f5f6fa] rounded justify-center items-center gap-2.5 inline-flex mt-[17px]"
        >
          <div class="text-[#8b8b8b] text-xs font-normal font-['PingFang SC'] leading-none">
            ID：1201451200
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center mt-[20px]">
      <div class="w-1 h-[19px] bg-[#2357e9] rounded-md"></div>
      <div class="text-black text-lg font-normal font-['PingFang SC'] leading-normal ml-[8px]">
        记录
      </div>
    </div>
    <div class="mt-[16px]">
      <div class="bg-white rounded-2xl p-[16px] flex flex-col">
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          完成时间：2024-10-20 10:00
        </div>

        <div class="flex mt-[19px] items-center">
          <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px]"></div>
          <div class="ml-[16px]">
            <div class="text-black text-base font-normal font-['PingFang SC'] leading-normal">
              阿芙佳朵
            </div>
            <div
              class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
            >
              数量x2
            </div>
            <div
              class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
            >
              600积分
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

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