| | |
| | | </template> |
| | | </tab-head> |
| | | |
| | | <div class="wallet"> |
| | | <!-- <div class="wallet"> |
| | | <div class="wallet_title flex-start"> |
| | | <img src="@/assets/img/钱袋.png" alt="" /> |
| | | <span>{{ $t("hj244") }}</span> |
| | | </div> |
| | | |
| | | <div class="wallet_price flex-between" v-for="i in moneyData" :key="i.id"> |
| | | <span>{{ i.symbol }} {{ i.totalMoney }}</span> |
| | | <span>{{ i.symbol }} {{ i.availableBalance }}</span> |
| | | </div> |
| | | |
| | | <div class="wallet_price_name flex-between"> |
| | | <span>{{ $t("hometips") }}</span> |
| | | <span>{{ $t("hj48") }}</span> |
| | | <div class="wallet_record flex-center" @click="toPage('/wallet')"> |
| | | <span>{{ $t("我的钱包") }}</span> |
| | | <van-icon name="play" size=".5em" /> |
| | | </div> |
| | | |
| | | <div class="wallet_record flex-center" @click="toPage('/Record')"> |
| | | <span>{{ $t("账户变动记录") }}</span> |
| | | <van-icon name="play" size=".5em" /> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | |
| | | <div class="account_tabs flex-between"> |
| | | <div class="tab flex-center" @click="toPage('/recharge')"> |
| | | <div class="tab flex-center" @click="czts()"> |
| | | <img src="@/assets/img/cz.png" alt="" /> |
| | | <span>{{ $t("hj172") }}</span> |
| | | </div> |
| | |
| | | <img src="@/assets/img/tx.png" alt="" /> |
| | | <span>{{ $t("subdka") }}</span> |
| | | </div> |
| | | <div class="tab flex-center" @click="toPage('/rechargelist')"> |
| | | <img src="@/assets/img/jl.png" alt="" /> |
| | | <span>{{ $t("jl") }}</span> |
| | | <div class="tab flex-center" @click="toPage('/wallet')"> |
| | | <div class="qb_icon flex-center"> |
| | | <img src="@/assets/img/qb.png" alt="" /> |
| | | </div> |
| | | <span>{{ $t("hj244") }}</span> |
| | | </div> |
| | | <div class="tab flex-center" @click="toPage('/transferNew')"> |
| | | <div class="tab flex-center" @click="toPage('/moneyRecord')"> |
| | | <img src="@/assets/img/jl.png" alt="" /> |
| | | <span>{{ $t("划转") }}</span> |
| | | <span>{{ $t("资金记录") }}</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="account_loan flex-between" @click="toPage('/loan')"> |
| | | <!-- <div class="account_loan flex-between" @click="toPage('/loan')"> |
| | | <div class="loan_left"> |
| | | <p class="loan_left_title">{{ $t("待还款金额") }}</p> |
| | | <p>$ {{ userInfo.refundAmount || 0 }}</p> |
| | |
| | | {{ $t("我的贷款") }} |
| | | <van-icon name="play" style="margin-left:.5em" /> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | |
| | | <div class="account_card"> |
| | | <div class="held_head flex-between"> |
| | |
| | | <span class="held_icon">US</span> |
| | | <p>{{ $t("持仓收益") }}</p> |
| | | </div> |
| | | <div |
| | | class="item_right flex-end" |
| | | :class="{ |
| | | descend: positionData.usPositionEarnings < 0, |
| | | rise: positionData.usPositionEarnings > 0 |
| | | }" |
| | | > |
| | | <img |
| | | src="@/assets/img/rise.png" |
| | | v-if="positionData.usPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/img/descend.png" |
| | | alt="" |
| | | v-else-if="positionData.usPositionEarnings < 0" |
| | | /> |
| | | <div class="item_right flex-end" :class="{ |
| | | descend: positionData.usPositionEarnings < 0, |
| | | rise: positionData.usPositionEarnings > 0 |
| | | }"> |
| | | <img src="@/assets/img/rise.png" v-if="positionData.usPositionEarnings > 0" /> |
| | | <img src="@/assets/img/descend.png" alt="" v-else-if="positionData.usPositionEarnings < 0" /> |
| | | {{ positionData.usPositionEarnings }} |
| | | ({{ positionData.usPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">JP</span> |
| | | <p>{{ $t("Worth") }}</p> |
| | | </div> |
| | | <div class="item_right flex-end"> |
| | | {{ positionData.jpMarketValue }} JPY |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">JP</span> |
| | | <p>{{ $t("持仓收益") }}</p> |
| | | </div> |
| | | <div class="item_right flex-end" :class="{ |
| | | descend: positionData.jpPositionEarnings < 0, |
| | | rise: positionData.jpPositionEarnings > 0 |
| | | }"> |
| | | <img src="@/assets/img/rise.png" v-if="positionData.jpPositionEarnings > 0" /> |
| | | <img src="@/assets/img/descend.png" alt="" v-else-if="positionData.jpPositionEarnings < 0" /> |
| | | {{ positionData.jpPositionEarnings }} |
| | | ({{ positionData.jpPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">HK</span> |
| | | <p>{{ $t("Worth") }}</p> |
| | |
| | | {{ positionData.hkPositionEarnings }} |
| | | ({{ positionData.hkPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | |
| | | <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">IN</span> |
| | | <p>{{ $t("Worth") }}</p> |
| | | </div> |
| | | <div class="item_right flex-end"> |
| | | {{ positionData.inMarketValue }} INR |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">IN</span> |
| | | <p>{{ $t("持仓收益") }}</p> |
| | | </div> |
| | | <div |
| | | class="item_right flex-end" |
| | | :class="{ |
| | | descend: positionData.inPositionEarnings < 0, |
| | | rise: positionData.inPositionEarnings > 0 |
| | | }" |
| | | > |
| | | <img |
| | | src="@/assets/img/rise.png" |
| | | v-if="positionData.inPositionEarnings > 0" |
| | | /> |
| | | <img |
| | | src="@/assets/img/descend.png" |
| | | alt="" |
| | | v-else-if="positionData.inPositionEarnings < 0" |
| | | /> |
| | | {{ positionData.inPositionEarnings }} |
| | | ({{ positionData.inPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="held_item flex-between"> |
| | | <!-- <div class="held_item flex-between"> |
| | | <div class="item_left flex-start"> |
| | | <span class="held_icon2">TW</span> |
| | | <p>{{ $t("Worth") }}</p> |
| | |
| | | {{ positionData.twPositionEarnings }} |
| | | ({{ positionData.twPositionEarningsParent }}) |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { Toast } from "vant"; |
| | | import tabHead from "@/components/tabHead.vue"; |
| | | import config from "@/config"; |
| | | import * as api from "@/axios/api"; |
| | | export default { |
| | | name: "account", |
| | |
| | | toPage(url) { |
| | | if (!url) return; |
| | | this.$router.push(url); |
| | | }, |
| | | // 充值提示 |
| | | czts() { |
| | | // Toast(this.$t("充值提示")); |
| | | window.open(config.onlineService); // 跳转客服 |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | @green: #c4d600; |
| | | @red: #ee0a24; |
| | | @dark_green: #07c160; |
| | | |
| | | .account { |
| | | width: 100%; |
| | | min-height: 100vh; |
| | |
| | | font-size: 10vw; |
| | | padding-top: 0.2em; |
| | | padding-bottom: 1.4rem; |
| | | |
| | | .account_loan { |
| | | height: 2em; |
| | | background-color: #e5eff7; |
| | |
| | | p { |
| | | font-size: 0.4em; |
| | | } |
| | | |
| | | .loan_left_title { |
| | | font-size: 0.3em; |
| | | color: #999; |
| | | margin-bottom: 0.75em; |
| | | } |
| | | } |
| | | |
| | | .loan_right { |
| | | font-size: 0.4em; |
| | | } |
| | |
| | | .held_head { |
| | | height: 1.333em; |
| | | box-shadow: 0 0.05333rem 0.26667rem #0000000d; |
| | | font-size: .8rem; |
| | | |
| | | .head_left, |
| | | .head_right { |
| | | width: 50%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .head_left { |
| | | color: @green; |
| | | position: relative; |
| | |
| | | background-color: #ddd; |
| | | } |
| | | } |
| | | |
| | | .head_right { |
| | | color: @red; |
| | | } |
| | | |
| | | img { |
| | | width: 0.6em; |
| | | margin-left: 0.1em; |
| | | } |
| | | |
| | | span { |
| | | font-size: 0.45em; |
| | | font-weight: 600; |
| | |
| | | } |
| | | |
| | | .account_tabs { |
| | | box-shadow: 0 -0.26667rem 0.53333rem #1a00394d; |
| | | // box-shadow: 0 -0.26667rem 0.53333rem #1a00394d; |
| | | width: 100%; |
| | | padding: 0.4em 0.25em 0.5em; |
| | | background-color: #f1f1f1; |
| | |
| | | font-size: 0.42em; |
| | | } |
| | | |
| | | img { |
| | | .qb_icon { |
| | | width: 1.6em; |
| | | height: 1.6em; |
| | | background-color: rgba(@green, 0.2); |
| | | border-radius: 50%; |
| | | margin-bottom: 0.3em; |
| | | |
| | | img { |
| | | width: 1em; |
| | | height: auto; |
| | | } |
| | | } |
| | | |
| | | &>img { |
| | | width: 1.6em; |
| | | margin-bottom: 0.3em; |
| | | } |
| | |
| | | background-color: @purple; |
| | | border-radius: 0.25em 0.25em 0 0; |
| | | color: #fff; |
| | | |
| | | .wallet_record { |
| | | color: @green; |
| | | margin-top: 0.5em; |
| | | padding: 0.5em; |
| | | // margin-top: 0.5em; |
| | | padding: 0.3em; |
| | | border-top: 0.01em solid rgba(#fff, 0.1); |
| | | |
| | | span { |
| | | font-size: 0.4em; |
| | | } |
| | | } |
| | | |
| | | .wallet_price_name { |
| | | padding: 0 0.25em; |
| | | padding: 0 0.25em 0.25em; |
| | | |
| | | span { |
| | | font-size: 0.3em; |
| | | } |
| | | } |
| | | |
| | | .wallet_i_title { |
| | | border-top: rgba(#fff, 0.1) solid 0.01em; |
| | | font-size: 0.4em; |
| | | padding: 0.6em 0; |
| | | } |
| | | |
| | | .wallet_price { |
| | | color: #f7b52b; |
| | | padding: 0 0.25em; |
| | | margin-bottom: 0.25em; |
| | | |
| | | span { |
| | | font-size: 0.4em; |
| | | } |
| | |
| | | .wallet_title { |
| | | padding: 0 0.25em; |
| | | margin-bottom: 0.25em; |
| | | |
| | | span { |
| | | font-size: 0.5em; |
| | | } |
| | | |
| | | img { |
| | | width: 0.75em; |
| | | } |
| | |
| | | border-radius: 50%; |
| | | margin-right: 0.25em; |
| | | } |
| | | |
| | | .real_name { |
| | | font-size: 0.5em; |
| | | } |
| | | |
| | | .phone { |
| | | font-size: 0.4em; |
| | | color: #999; |