bn-q-icon/pages/home/home-index.vue

<script>
export default {
  name: "home-index",
  components: {},
  data() {
    return {};
  },
  mounted() {
  },
  methods: {},
}
</script>

<template>
  <view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <image
          class="head-img"
          :src="require('@/static/img/index/index/bannerhome.png')"
		   mode="widthFix"
          ></image>
    </view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <view class="b-rad-20 h-80 align-items-center bgc-f1f9fe">
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            DAO價格($)
          </view>
          <view class="fs-28 fw-b">
            0.13
          </view>
        </view>
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            DAO餘額
          </view>
          <view class="fs-28 fw-b">
            0.13
          </view>
        </view>
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            贡献总额
          </view>
          <view class="fs-28 fw-b">
            0.13
          </view>
        </view>
      </view>
    </view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <view class="fs-28 pt-5 mb-4">
        贡献收益记录
      </view>
      <view class="bgc-F6F7FA">
        <view class="item-box align-items-center flex-justify-space" v-for="item in 3" :key="item.id">
          <view>
            <view class="mb-4 fs-28 fw-b">贡献数量</view>
            <view class="fs-24">2025-01-10</view>
          </view>
          <view class="align-items-center">
            <view class="fs-24">奖励:</view>
            <view class="fs-28 fc-ED301D">2.5</view>
          </view>
        </view>
        <view class="h-50 text-align-center fs-28">
          ~暂无记录
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.head-img {
  width: 100%;
  // height: 128px;
}
.h-80{
  height: 160rpx;
}
.h-50{
  height: 100rpx;
  line-height: 100rpx;
}
.item-box{
  width: 100%;
  height: 120rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  border-top: 2rpx solid #e5e5e5;
}
.item-box:first-child {
  border-top: none;
}
</style>