youxi-app/pages/user/components/conversion.uvue

<script setup lang='ts'>
import { fetchSubjectFeeRecord } from '@/services/subject/record'
import { onMounted, ref } from 'vue'
import { user } from '@/.cool'
const recordList = ref<any[]>([])
onMounted(() => {
  fetchSubjectFeeRecord({
    userId: user.info.value?.userInfo.userId
  }).then(res => {
    recordList.value = res
  })
})
</script>
<template>
  <view class=" bg-[#fff] shadow rounded-xl mt-[20px] text-[#00A9FF] ">
    <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar">
      <view class="w-full grid grid-cols-2 gap-4" v-if="recordList.length > 0">
        <view v-for="item in recordList" :key="item" class="box flex flex-row  items-center gap-2">
          <view class="h-full">
            <cl-image src="https://oss.xiaoxiongcode.com/static/个人中心/图层 13.png" mode="heightFix" height="100%"
              width="auto"></cl-image>
          </view>
          <view class="flex flex-col justify-around h-full">
            <view class="text-[16px] font-bold text-[#FC500F]">
              {{ item.mainTitle }}
            </view>
            <view class="text-[14px] text-[#999]">
              兑换时间：{{ item.createTime }}
            </view>
            <view class="text-[14px] text-[#999]">
              到期时间：{{ item.updateTime }}
            </view>
          </view>
        </view>
      </view>
      <view v-else class="w-full h-full flex flex-col justify-center items-center">
        <view class="text-center text-[#999] text-[14px]">
          暂无兑换记录
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss" scoped>
.sidebar {
  height: calc(80vh - 90px);
  max-height: calc(620px - 90px);
  padding: 20px;
}

.box {
  width: 98%;
  // 宽高比3/1
  aspect-ratio: 4 / 1;
  padding: 5px;
  border-radius: 10px;
  background: linear-gradient(0deg, #FFFBF7 0%, #FFE0CC 100%);
  box-shadow: 3px 6px 4px 0px rgba(239, 103, 36, 0.48);
}
</style>