<template>
    <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>