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

<template>
  <view class="contract-box">
    <view class="contract-top">
      <top-head :top-type="2"></top-head>
    </view>
    <view class="contract-data">
      <view class="data-input">
        <view class="input-item">
          <view class="item-detail">数量</view>
          <view class="item-detail">可用余额</view>
        </view>
        <view class="input-item">
          <view class="item-detail">100</view>
          <view class="item-detail item-img">
            <view class="text-img">
              <image src="@/static/img/index/bnb.png"></image>
            </view>
            <view class="text">BNB</view>
          </view>
        </view>
      </view>
      <view class="data-but">
        <button>定金</button>
      </view>
      <view class="data-button">
        <image src="@/static/img/index/msg.svg"></image>
        <view>阅读文档>></view>
      </view>
    </view>
    <view class="contract-list">
      <view class="list-title">
        <view class="title-img">
          <image src="@/static/img/index/bnb2.png" mode="aspectFill"></image>
        </view>
        <view class="title-text">我的收支明细(100)</view>
      </view>
      <division></division>
      <view v-for="i in 5" class="item">
        <view class="list-item">
          <view class="item-line">
            <view class="item-text">BNB</view>
          </view>
          <view class="item-line line-text">
            <view class="item-text">平台分润</view>
          </view>
          <view class="item-line">
            <view class="item-text">BNB Number</view>
            <view class="item-text text-two">
              <view class="text-img">
                <image src="@/static/img/index/bnb2.png"></image>
              </view>
              <view class="text">56</view>
            </view>
          </view>
          <view class="item-line">
            <view class="item-text">积分</view>
            <view class="item-text text-two">
              <view class="text-img">
                <image src="@/static/img/index/jf.svg"></image>
              </view>
              <view class="text">56</view>
            </view>
          </view>
          <view class="item-line">
            <view class="item-text">手续费</view>
            <view class="item-text">56</view>
          </view>
          <view class="item-line">
            <view class="item-text">时间</view>
            <view class="item-text">56</view>
          </view>
        </view>
        <division class="division-item"></division>
      </view>

    </view>
    <view class="contract-bottom"></view>
  </view>
</template>

<script>

import TopHead from "@/pages/index/components/top-head";
import Division from "@/pages/index/components/division";

export default {
  name: "contract",
  components: {Division, TopHead},
  props: {},
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {
    goToUrl(type) {
      switch (type) {
        case 1:
          uni.navigateTo({
            'url': 'pages/index/contract'
          })
          break
        case 2:
          uni.navigateTo({
            'url': 'pages/index/contract'
          })
          break
        case 3:
          uni.navigateTo({
            'url': 'pages/index/contract'
          })
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">
.contract-box {
  box-shadow: 0 0 24rpx 0 rgba(0, 0, 0, 0.16);

  .contract-top {
    padding: 20rpx 0;
    background: #fff;
  }

  .contract-data {
    background: #fff;
    width: 90%;
    margin: 60rpx auto 0;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    font-size: 36rpx;
    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);

    .data-input {
      border: 1rpx solid #000;
      overflow: hidden;
      border-radius: 10rpx;
      padding: 20rpx;

      .input-item {
        display: flex;
        justify-content: space-between;

        .item-detail {
          font-size: 26rpx;
        }
      }

      .item-img {
        display: flex;
        justify-content: right;

        .text-img {
          display: inline-block;
          border-radius: 50%;
          height: 60rpx;
          width: 60rpx;
          box-sizing: border-box;
          margin-right: 10rpx;

          image {
            width: 60rpx;
            height: 60rpx;
            z-index: 100;
          }
        }

        .text {
          line-height: 60rpx;
        }
      }

      .input-item:first-child {
        margin-bottom: 40rpx;
      }

      .input-item:last-child {
        height: 60rpx;

        .item-detail {
          font-size: 32rpx;
          line-height: 60rpx;
        }
      }
    }

    .data-but {
      border-radius: 20rpx;
      margin-top: 60rpx;

      button {
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: rgb(0, 87, 255);
        color: #fff;
        font-size: 26rpx;
      }
    }

    .data-button {
      margin-top: 40rpx;
      display: flex;
      justify-content: right;
      image {
        width: 40rpx;
        height: 40rpx;
      }
      view {
        font-size: 26rpx;
        margin-left: 10rpx;
        color: rgb(0, 87, 255);
        line-height: 40rpx;
      }

    }

  }

  .contract-list {
    background: #fff;
    width: 90%;
    margin: 40rpx auto;
    border-radius: 10px;
    padding: 20px 10px;
    overflow: hidden;
    font-size: 13px;
    box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.08);

    .list-title {
      display: flex;
      justify-content: left;

      .title-img {
        background: rgb(0, 87, 255);
        padding: 10rpx;
        border-radius: 20rpx;

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .title-text {
        margin-left: 20rpx;
        line-height: 100rpx;
        font-size: 34rpx;
        font-weight: bold;
      }
    }

    .list-item {
      margin-top: 20rpx;

      .item-line {
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;

        .item-text {
          font-size: 26rpx;
          color: rgb(177, 177, 177);
          line-height: 42rpx;
          height: 42rpx;
        }

        .text-two {
          display: flex;
          justify-content: right;

          .text-img {
            display: inline-block;
            padding: 6rpx;
            background: rgb(0, 87, 255);
            border-radius: 50%;
            height: 42rpx;
            width: 42rpx;
            box-sizing: border-box;

            image {
              width: 30rpx;
              height: 30rpx;
              z-index: 100;
            }
          }

          .text {
            margin-left: 10rpx;
            font-size: 30rpx;
          }
        }
      }

      .line-text {
        margin-bottom: 40rpx;

        .item-text {
          font-weight: bold;
          font-size: 26rpx;
          color: #222;
        }
      }
    }

    .item:last-child {
      .division-item {
        display: none;
      }
    }
  }

  .contract-bottom {
    height: 50rpx;
  }
}

</style>