|
|
@@ -1,3 +1,435 @@
|
|
|
-<template><div>asset</div></template>
|
|
|
-<script setup></script>
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<template>
|
|
|
+ <div class="asset-index">
|
|
|
+ <div class="asset-header">
|
|
|
+ <div class="header-content pf600 fs18 fc121212">
|
|
|
+ 资产
|
|
|
+ <div class="save pf600 fs14 fc333333">我的资产</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="asset-total">
|
|
|
+ <div class="total-text pf400 fs16 fcFFFFFF">总资产估值(USDT)</div>
|
|
|
+ <div class="all-asset pf600 fs32 fcFFFFFF">1,125,158.00</div>
|
|
|
+ <div class="about-asset pf500 fs16 fcFFFFFF">≈35,458.00</div>
|
|
|
+ <div class="asset-func">
|
|
|
+ <div class="asset-item">
|
|
|
+ <div class="item-top pf400 fs12 fcFFFFFF">可用资金(USDT)</div>
|
|
|
+ <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="asset-item">
|
|
|
+ <div class="item-top pf400 fs12 fcFFFFFF">浮动盈亏</div>
|
|
|
+ <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
|
|
|
+ </div>
|
|
|
+ <div class="asset-item">
|
|
|
+ <div class="item-top pf400 fs12 fcFFFFFF">占用资金(USDT)</div>
|
|
|
+ <div class="item-bottom pf500 fs16 fcFFFFFF">5,678.00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="asset-money">
|
|
|
+ <div class="money-item">
|
|
|
+ <div class="item-img">
|
|
|
+ <img src="../../assets/img/index/Rectangle 8.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="pf400 fs14 fc666666">充币</div>
|
|
|
+ <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
|
|
|
+ </div>
|
|
|
+ <div class="money-item">
|
|
|
+ <div class="item-img">
|
|
|
+ <img src="../../assets/img/index/Rectangle 9.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="pf400 fs14 fc666666">提币</div>
|
|
|
+ <img src="../../assets/icon/asset/divider.svg" alt="" class="divider-img" />
|
|
|
+ </div>
|
|
|
+ <div class="money-item">
|
|
|
+ <div class="item-img">
|
|
|
+ <img src="../../assets/img/index/user/huazhuan.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="pf400 fs14 fc666666">划转</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="asset-details">
|
|
|
+ <div class="details-title">
|
|
|
+ <div class="notifi-classifi">
|
|
|
+ <div class="pf600 fs18 fc121212">持仓明细</div>
|
|
|
+ <div class="sys-notifi pf600 fs14 fcA8A8A8">ICO明细</div>
|
|
|
+ </div>
|
|
|
+ <div class="history pf600 fs14 fcA8A8A8">
|
|
|
+ <img src="../../assets/icon/asset/clock-rewind.svg" alt="" />
|
|
|
+ 历史
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="details-main">
|
|
|
+ <div class="details-item" v-for="(item, index) in 2" :key="index">
|
|
|
+ <div class="item-name">
|
|
|
+ <div class="name-left">
|
|
|
+ <img src="../../assets/icon/coin/bnb.svg" alt="" class="left-coin" />
|
|
|
+ <div class="name-area">
|
|
|
+ <div class="pf500 fs16 fc121212">BTC/USDT 永续</div>
|
|
|
+ <div class="name-flag">
|
|
|
+ <div class="flag-buy pf500 fs10 fcFFFFFF">买入</div>
|
|
|
+ <div class="flag-cang pf500 fs10 fcFFFFFF">逐仓 20X</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="name-right">
|
|
|
+ <div class="pf500 fs12 fc767676">2025-11-04, 16:30</div>
|
|
|
+ <div class="pf500 fs12 fc767676">下单时间</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-line"></div>
|
|
|
+ <div class="item-yingkui">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">未实现盈亏(USDT)</div>
|
|
|
+ <div class="pf500 fs12 fc45B26B">+0.2015 USDT</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-price">
|
|
|
+ <div class="price-top">
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">持仓数量</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">开仓价格</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">标记价格</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="price-bottom">
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">保证金</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">强平价格</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ <div class="price-item">
|
|
|
+ <div class="pf500 fs12 fcA8A8A8">收益率</div>
|
|
|
+ <div class="pf500 fs12 fc333333">0.215 USDT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import { useRouter } from "vue-router";
|
|
|
+
|
|
|
+ const router = useRouter();
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .asset-index {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 100px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .asset-header {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ background: #ffffff;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .header-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+
|
|
|
+ .left-arrow-image {
|
|
|
+ position: absolute;
|
|
|
+ left: 14px;
|
|
|
+ top: 15px;
|
|
|
+ width: 9px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .save {
|
|
|
+ position: absolute;
|
|
|
+ top: 16px;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .asset-total {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 48px;
|
|
|
+ width: 345px;
|
|
|
+ height: 196px;
|
|
|
+ background-image: url("../../assets/icon/asset/asset-index.svg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+
|
|
|
+ .total-text {
|
|
|
+ margin-top: 34px;
|
|
|
+ width: 318px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ letter-spacing: -0.7%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .all-asset {
|
|
|
+ margin-top: 3px;
|
|
|
+ width: 318px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .about-asset {
|
|
|
+ margin-top: 1px;
|
|
|
+ width: 318px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .asset-func {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 9px;
|
|
|
+ width: 318px;
|
|
|
+ height: 44px;
|
|
|
+
|
|
|
+ .asset-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .asset-money {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 9px;
|
|
|
+ width: 345px;
|
|
|
+ height: 80px;
|
|
|
+
|
|
|
+ .money-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ width: 114px;
|
|
|
+ height: 80px;
|
|
|
+
|
|
|
+ .divider-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 14.5px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-img {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .asset-details {
|
|
|
+ margin-top: 0.7px;
|
|
|
+ width: 345px;
|
|
|
+
|
|
|
+ .details-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+
|
|
|
+ .notifi-classifi {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-end;
|
|
|
+ width: 345px;
|
|
|
+ height: 24px;
|
|
|
+
|
|
|
+ .sys-notifi {
|
|
|
+ margin-left: 47px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .history {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-end;
|
|
|
+ width: 60px;
|
|
|
+ height: 24px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-right: 3px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-main {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .details-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 345px;
|
|
|
+ height: 182px;
|
|
|
+ border: 1px solid #ebebeb;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .item-name {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 320px;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .name-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .left-coin {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name-area {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ margin-left: 8px;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .name-flag {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ height: 15px;
|
|
|
+
|
|
|
+ .flag-buy {
|
|
|
+ width: 33px;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ background: #45b26b;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .flag-cang {
|
|
|
+ margin-left: 2px;
|
|
|
+ width: 49px;
|
|
|
+ height: 15px;
|
|
|
+ line-height: 15px;
|
|
|
+ text-align: center;
|
|
|
+ background: #a8a8a8;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: flex-end;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-line {
|
|
|
+ margin-top: 8px;
|
|
|
+ width: 320px;
|
|
|
+ height: 1.5px;
|
|
|
+ background: #e9e9e9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-yingkui {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 6px;
|
|
|
+ width: 320px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-price {
|
|
|
+ margin-top: 7px;
|
|
|
+ width: 320px;
|
|
|
+ height: 85px;
|
|
|
+
|
|
|
+ .price-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+
|
|
|
+ .price-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ width: 80px;
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-bottom {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 9px;
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+
|
|
|
+ .price-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ width: 80px;
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
jhaoG
