|
|
@@ -1,13 +1,409 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <div class="container">
|
|
|
+ <div class="bg-img"></div>
|
|
|
+ <div class="user-info-body">
|
|
|
+ <div class="user-info-lf">
|
|
|
+ <van-image
|
|
|
+ width="28px"
|
|
|
+ height="28px"
|
|
|
+ round
|
|
|
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
|
+ />
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="user-info-name" @click="showWallet = true">
|
|
|
+ <div>Wallet</div>
|
|
|
+ <svg-icon style="width: 16px; height: 16px;margin-left: 3px;" name="down" />
|
|
|
+ </div>
|
|
|
+ <div class="user-info-key-body">
|
|
|
+ <span class="user-info-key-body-text">0xF3fefE…EcaB</span>
|
|
|
+ <svg-icon style="width: 16px; height: 16px;" name="copy" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="network">
|
|
|
+ <svg-icon style="width: 20px; height: 20px;" name="acc" />
|
|
|
+ <div class="network-name">ACC</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount">
|
|
|
+ <div>
|
|
|
+ <div>Total assets</div>
|
|
|
+ <div class="amount-item">
|
|
|
+ <div class="item-text">
|
|
|
+ <svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
|
|
|
+ <div>{{isShow?'2,536.00':'****'}}</div>
|
|
|
+ </div>
|
|
|
+ <svg-icon style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <svg-icon style="width: 24px; height: 24px;" name="right" />
|
|
|
+ </div>
|
|
|
+ <div class="card-box">
|
|
|
+ <div class="box-cont">
|
|
|
+ <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="1" />
|
|
|
+ <div>元宝兑换</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont">
|
|
|
+ <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="2" />
|
|
|
+ <div>收款</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont">
|
|
|
+ <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="3" />
|
|
|
+ <div>转账</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont">
|
|
|
+ <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="4" />
|
|
|
+ <div>竞赛</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-cont">
|
|
|
+ <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="5" />
|
|
|
+ <div>区块浏览器</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-box">
|
|
|
+ <div class="list-title">
|
|
|
+ <div>代币</div>
|
|
|
+ <svg-icon style="width: 24px; height: 24px;" name="add" />
|
|
|
+ </div>
|
|
|
+ <div class="list-ul">
|
|
|
+ <div class="list-li" v-for="item in 10">
|
|
|
+ <div class="list-li-lf">
|
|
|
+ <svg-icon style="width: 30px; height: 30px;margin-right: 8px;" name="acc" />
|
|
|
+ <div>ACC</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-li-ri">
|
|
|
+ <div>6.6476474848</div>
|
|
|
+ <div class="list-li-ri-num">$6.6476474848</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup v-model:show="showWallet" position="bottom" round>
|
|
|
+ <div class="pop-content">
|
|
|
+ <div class="pop-title">
|
|
|
+ <svg-icon style="width: 24px; height: 24px;" name="left-arrow" />
|
|
|
+ <div class="title">选择钱包</div>
|
|
|
+ </div>
|
|
|
+ <div class="tree">
|
|
|
+ <div class="tree-lf">
|
|
|
+ <div class="tree-lf-icon" v-for="(item,i) in 10" :class="i == 0?'active-bg':''">
|
|
|
+ <svg-icon style="width: 32px; height: 32px;" name="acc" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tree-ri">
|
|
|
+ <div class="tree-ri-title">ACC</div>
|
|
|
+ <div class="tree-ul">
|
|
|
+ <div class="tree-li" v-for="(item,i) in 10" :class="i == 0?'tree-active':''">
|
|
|
+ <van-image
|
|
|
+ width="37px"
|
|
|
+ height="37px"
|
|
|
+ round
|
|
|
+ src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
|
|
+ />
|
|
|
+ <div class="tree-li-cont">
|
|
|
+ <div class="tree-li-text">名字</div>
|
|
|
+ <div class="tree-li-address">
|
|
|
+ <span>0xF3fefE…EcaB</span>
|
|
|
+ <svg-icon style="width: 16px; height: 16px;margin-left: 2px;" name="copy" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pop-btn">
|
|
|
+ <van-button class="btn" type="primary" size="large" color="#4765DD">
|
|
|
+ <svg-icon style="width: 24px; height: 24px;margin-right: 4px;" name="add1" />添加钱包
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-
|
|
|
+ const isShow = ref(true);
|
|
|
+ const showWallet = ref(false);
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-
|
|
|
+ .container{
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - 50px);
|
|
|
+ .bg-img{
|
|
|
+ background: url('@/assets/img/wallet-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 284px;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .user-info-body{
|
|
|
+ padding: 60px 17px 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .user-info-lf{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .user-info{
|
|
|
+ margin-left: 11px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-size: 10px;
|
|
|
+ .user-info-name{
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .user-info-key-body{
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(255,255,255,0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .user-info-key-body-text{
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .network{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 27px;
|
|
|
+ border: 1px solid rgba(255,255,255,0.6);
|
|
|
+ padding: 0 5px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .network-name{
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ background: url('@/assets/img/wallet-bg1.png') no-repeat;
|
|
|
+ height: 102px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin: 0 17px 23px;
|
|
|
+ padding: 21px 21px 27px 27px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ .amount-item{
|
|
|
+ margin-top: 7px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 25px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ .item-text{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 2px;
|
|
|
+ .my{
|
|
|
+ position: relative;
|
|
|
+ top:1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-box{
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 4px 8px -2px rgba(25,75,137,0.25);
|
|
|
+ border-radius: 17px;
|
|
|
+ height: 78px;
|
|
|
+ margin: 0 17px;
|
|
|
+ padding: 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000000;
|
|
|
+ .box-cont{
|
|
|
+ width: calc(100% / 5);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .box-cont-icon{
|
|
|
+ margin-bottom: 4px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-box{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 25px 17px;
|
|
|
+ padding: 17px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ .list-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 23px;
|
|
|
+ }
|
|
|
+ .list-ul{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: auto;
|
|
|
+ .list-li{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .list-li-lf{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .list-li-ri{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #4F4F4F;
|
|
|
+ text-align: right;
|
|
|
+ .list-li-ri-num{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #8D8D8D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-li:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-ul::-webkit-scrollbar{
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pop-content{
|
|
|
+ background-color: #fff;
|
|
|
+ .pop-title{
|
|
|
+ padding: 17px;
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #000000;
|
|
|
+ .title{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree{
|
|
|
+ display: flex;
|
|
|
+ height: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ .tree-lf{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 67px;
|
|
|
+ overflow: auto;
|
|
|
+ .tree-lf-icon{
|
|
|
+ height: 67px;
|
|
|
+ padding: 17px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .active-bg{
|
|
|
+ background: #ECEFFC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-lf::-webkit-scrollbar{
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ .tree-ri{
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 17px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ .tree-ri-title{
|
|
|
+ margin: 10px 0 4px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .tree-ul{
|
|
|
+ .tree-li{
|
|
|
+ background: #F2F2F2;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F2F2F2;
|
|
|
+ padding: 14px 17px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .tree-li-cont{
|
|
|
+ margin-left: 12px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #8D8D8D;
|
|
|
+ .tree-li-text{
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: @theme-color1;
|
|
|
+ }
|
|
|
+ .tree-li-address{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-active{
|
|
|
+ background: #FAFBFF;
|
|
|
+ border: 1px solid @theme-color1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tree-ri::-webkit-scrollbar{
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pop-btn{
|
|
|
+ margin: 17px;
|
|
|
+ .btn{
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ ::v-deep .van-button__text{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
