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

<template>
  <view class="icon-box">
    <Nav title="资产" :left-show="false" bgckgroundBox="#146AF0" titleColor="#fff"></Nav>
    <view class="mui-content">
      <view class="ln-assets-blue">
        <view class="ln-assets-top">总账户资产折合（USDT）</view>
        <view class="ln-assets-hd">
          <view class="ln-assets-num">{{totalUsdt.toFixed(6)}}</view>
          <view class="ln-assets-price">&asymp;{{totalPrice.toFixed(2)}} CNY</view>
        </view>
      </view>
      <view class="order-list">
        <view class="order-item" v-for="coin in list">
          <view @click="" class="order-list-hd">
            <view class="order-list-nm text-blue">{{coin.coin_name}}</view>
            <view class="order-list-state"><i class="iconfont mui-icon-arrowright">&#xe62b;</i></view>
          </view>
          <view class="order-list-con ">
            <view class="order-list-iteam">
              <view class="order-list-tit">可用({{coin.coin_name}})</view>
              <view class="order-list-num">{{coin.num.toFixed(6)}}</view>
            </view>
            <view class="order-list-iteam">
              <view class="order-list-tit">冻结({{coin.coin_name}})</view>
              <view class="order-list-num">{{coin.lock_num.toFixed(6)}}</view>
            </view>
            <view class="order-list-iteam order-list-iteamr">
              <view class="order-list-tit">折合(CNY)</view>
              <view class="order-list-num">&asymp;{{coin.price.toFixed(2)}}</view>
            </view>
          </view>
        </view>

      </view>


    </view>
  </view>
</template>

<script>
import {getIconList} from "@/api/member";

export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {
      totalPrice:0,
      totalUsdt:0,
      list:[],
    }
  },
  watch: {},
  mounted() {
    this.getIconList()
  },
  methods: {
    getIconList(){
      getIconList().then((res)=>{
        if(res.code===1){
          this.totalPrice=res.data.totalPrice
          this.totalUsdt=res.data.totalUsdt
          this.list=res.data.list
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import url("/components/static/css/en-common.css") ;
.icon-box{
  background: #131E30;
  min-height: calc(100vh - 50px);
  .mui-icon-arrowright{
    color: #7388a7;
  }
  .mui-content{
    color: #7388a7;
    .ln-assets-blue{
      position: relative;
      width: 100%;
      padding:0 10px 10px 10px;
      color: rgba(255,255,255,0.6);
      background: #146AF0;
      .ln-assets-top{
        width: 100%;
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgba(255,255,255,0.6);
      }
      .ln-assets-hd{
        width: 100%;
        margin: 15px auto;
        .ln-assets-num {
          width: 100%;
          line-height: 28px;
          color: #FFFFFF;
          font-size: 24px;
        }
        .ln-assets-price {
          width: 100%;
          line-height: 20px;
          font-size: 12px;
          color: rgba(255,255,255,0.6);
        }
      }
    }
    .order-list{
      width: calc(100% - 20px);
      list-style-type: none;
      margin: 0;
      -webkit-padding-start: 0;
      padding: 0 10px;
      .order-item{
        width: 100%;
        padding: 6px 0;
        border-bottom: 1px solid #213141;
        position: relative;
        margin: 0;
        -webkit-padding-start: 0;
        .order-list-hd {
          width: 100%;
          height: 28px;
          line-height: 28px;
          padding: 6px 0;
          .order-list-nm.text-blue {
            font-size: 16px;
            color: #146AF0;
          }
          .order-list-nm {
            max-width: 70%;
            height: 28px;
            font-size: 16px;
            font-weight: 800;
            color: #FFFFFF;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .order-list-state, .order-list-statewhite {
            width: 28%;
            height: 28px;
            line-height: 28px;
            text-align: right;
            float: right;
          }
        }
        .order-list-con {
          position: relative;
          width: 100%;
          padding: 6px 0;
          overflow: auto;
          .order-list-iteam {
            width: 35%;
            margin-right: 2%;
            float: left;
            .order-list-tit {
              width: 100%;
              height: 20px;
              line-height: 20px;
              color: #495B73;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .order-list-num {
              width: 100%;
              height: 24px;
              line-height: 24px;
              font-size: 13px;
              color: #FFFFFF;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .order-list-iteamr {
            width: 26%;
            margin-right: 0;
            text-align: right;
          }
        }
      }
    }
  }
}

</style>