<template>
|
<div class="account-container page-content">
|
<!-- 账户概览 -->
|
<div class="account-overview page-w sb_b a_card">
|
<div class="overview-header">
|
<div class="title">
|
<!-- <i class="el-icon-lock"></i> -->
|
<img src="@/assets/images/fund-icon_b.png" alt="Account" />
|
<span>{{ $t("ao1") }}</span>
|
</div>
|
</div>
|
|
<div class="flex-between" style="width: 100%">
|
<div class="action-buttons">
|
<el-button
|
type="success"
|
class="deposit-btn"
|
@click="trasferireVisible = true"
|
>
|
<div class="flex-center">
|
<img src="@/assets/images/account_hz.png" alt="Deposit" />
|
{{ $t("劃轉") }}
|
</div>
|
</el-button>
|
<el-button
|
type="success"
|
class="deposit-btn"
|
@click="depositDialogVisible = true"
|
>
|
<div class="flex-center">
|
<img src="@/assets/images/account_rec.png" alt="Deposit" />
|
{{ $t("dep") }}
|
</div>
|
</el-button>
|
<el-button class="withdraw-btn" @click="withdrawVisible = true">
|
<div class="flex-center">
|
<img src="@/assets/images/account_ret.png" alt="Withdraw" />
|
{{ $t("hj177") }}
|
</div>
|
</el-button>
|
</div>
|
</div>
|
|
<!-- <div class="loan-info flex-between-start">
|
<div style="width: 50%" class="flex-center">
|
<div class="loan-item">
|
<div class="loan-label">{{ $t("待还款金额") }}</div>
|
<div class="loan-value">$ {{ userInfo.refundAmount || 0 }}</div>
|
</div>
|
<div class="loan-item">
|
<div class="loan-label">{{ $t("信用分") }}</div>
|
<div class="loan-value">{{ userInfo.creditScore || 0 }}</div>
|
</div>
|
<div class="loan-item">
|
<div class="loan-label">{{ $t("剩余贷款额度") }}</div>
|
<div class="loan-value">$ {{ userInfo.loanLimit || 0 }}</div>
|
</div>
|
</div>
|
<div class="loan-buttons flex-end">
|
<el-button
|
type="text"
|
class="loan-btn"
|
@click="applicationVisible = true"
|
>
|
{{ $t("贷款申请") }}
|
</el-button>
|
<el-button
|
type="text"
|
class="loan-btn2"
|
@click="recordsVisible = true"
|
>{{ $t("dkjl") }}</el-button
|
>
|
</div>
|
</div> -->
|
</div>
|
|
<!-- 市场数据 -->
|
<div class="market-data page-w a_card">
|
<div class="market-section sb_b">
|
<div class="market-header">
|
<h3>{{ $t("美国") }}</h3>
|
</div>
|
|
<div
|
class="overview-content"
|
v-for="i in moneyData"
|
:key="i.id"
|
v-show="i.accectType == 'US'"
|
>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj49") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.totalMoney }}</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj48") }}</div>
|
<div class="item-value">
|
{{ i.symbol }} {{ i.availableBalance }}
|
</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("ff1") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.freezeMoney }}</div>
|
</div>
|
</div>
|
|
<div class="market-content">
|
<div class="market-row">
|
<div class="market-label">
|
<span class="market-tag sc_c">US</span>
|
<span>{{ $t("mv1") }}</span>
|
</div>
|
<div class="market-value">{{ positionData.usMarketValue }} USD</div>
|
</div>
|
<div class="market-row">
|
<div class="market-label">
|
<span class="market-tag sc_c">US</span>
|
<span>{{ $t("upl1") }}</span>
|
</div>
|
<div
|
class="market-value flex-center"
|
:class="`${positionData.usPositionEarnings < 0 ? 'r_c' : ''} ${
|
positionData.usPositionEarnings > 0 ? 'lc_c' : ''
|
}`"
|
>
|
<img
|
src="@/assets/images/up.png"
|
alt=""
|
v-if="positionData.usPositionEarnings > 0"
|
/>
|
<img
|
src="@/assets/images/down.png"
|
alt=""
|
v-else-if="positionData.usPositionEarnings < 0"
|
/>
|
{{ positionData.usPositionEarnings }}
|
({{ positionData.usPositionEarningsParent }})
|
</div>
|
</div>
|
<div class="market-footer">
|
<div class="position-btn sc_c" @click="positionOpen('US')">
|
{{ $t("hj2") }}
|
</div>
|
<div class="trade-log-btn lc_c" @click="tradeLogOpen('US')">
|
{{ $t("hj121") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="market-section sb_b">
|
<div class="market-header">
|
<h3>{{ $t("hk1") }}</h3>
|
</div>
|
|
<div
|
class="overview-content"
|
v-for="i in moneyData"
|
:key="i.id"
|
v-show="i.accectType == 'HK'"
|
>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj49") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.totalMoney }}</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj48") }}</div>
|
<div class="item-value">
|
{{ i.symbol }} {{ i.availableBalance }}
|
</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("ff1") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.freezeMoney }}</div>
|
</div>
|
</div>
|
|
<div class="market-content">
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px">
|
HK
|
</el-tag>
|
<span>{{ $t("mv1") }}</span>
|
</div>
|
<div class="market-value">{{ positionData.hkMarketValue }} HKD</div>
|
</div>
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px"
|
>HK</el-tag
|
>
|
<span>{{ $t("upl1") }}</span>
|
</div>
|
<div
|
class="market-value flex-center"
|
:class="`${positionData.hkPositionEarnings < 0 ? 'r_c' : ''} ${
|
positionData.hkPositionEarnings > 0 ? 'lc_c' : ''
|
}`"
|
>
|
<img
|
src="@/assets/images/up.png"
|
alt=""
|
v-if="positionData.hkPositionEarnings > 0"
|
/>
|
<img
|
src="@/assets/images/down.png"
|
alt=""
|
v-else-if="positionData.hkPositionEarnings < 0"
|
/>
|
{{ positionData.hkPositionEarnings }}
|
({{ positionData.hkPositionEarningsParent }})
|
</div>
|
</div>
|
<div class="market-footer">
|
<div class="position-btn sc_c" @click="positionOpen('HK')">
|
{{ $t("hj2") }}
|
</div>
|
<div class="trade-log-btn lc_c" @click="tradeLogOpen('HK')">
|
{{ $t("hj121") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="market-data page-w a_card" style="padding-top: 0">
|
<div class="market-section sb_b">
|
<div class="market-header">
|
<h3>{{ $t("tw") }}</h3>
|
</div>
|
|
<div
|
class="overview-content"
|
v-for="i in moneyData"
|
:key="i.id"
|
v-show="i.accectType == 'TW'"
|
>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj49") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.totalMoney }}</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj48") }}</div>
|
<div class="item-value">
|
{{ i.symbol }} {{ i.availableBalance }}
|
</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("ff1") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.freezeMoney }}</div>
|
</div>
|
</div>
|
|
<div class="market-content">
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px">
|
TW
|
</el-tag>
|
<span>{{ $t("mv1") }}</span>
|
</div>
|
<div class="market-value">{{ positionData.twMarketValue }} TWD</div>
|
</div>
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px"
|
>TW</el-tag
|
>
|
<span>{{ $t("upl1") }}</span>
|
</div>
|
<div
|
class="market-value flex-center"
|
:class="`${positionData.twPositionEarnings < 0 ? 'r_c' : ''} ${
|
positionData.twPositionEarnings > 0 ? 'lc_c' : ''
|
}`"
|
>
|
<img
|
src="@/assets/images/up.png"
|
alt=""
|
v-if="positionData.twPositionEarnings > 0"
|
/>
|
<img
|
src="@/assets/images/down.png"
|
alt=""
|
v-else-if="positionData.twPositionEarnings < 0"
|
/>
|
{{ positionData.twPositionEarnings }}
|
({{ positionData.twPositionEarningsParent }})
|
</div>
|
</div>
|
<div class="market-footer">
|
<div class="position-btn sc_c" @click="positionOpen('TW')">
|
{{ $t("hj2") }}
|
</div>
|
<div class="trade-log-btn lc_c" @click="tradeLogOpen('TW')">
|
{{ $t("hj121") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="market-section sb_b">
|
<div class="market-header">
|
<h3>{{ $t("id1") }}</h3>
|
</div>
|
|
<div
|
class="overview-content"
|
v-for="i in moneyData"
|
:key="i.id"
|
v-show="i.accectType == 'IN'"
|
>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj49") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.totalMoney }}</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("hj48") }}</div>
|
<div class="item-value">
|
{{ i.symbol }} {{ i.availableBalance }}
|
</div>
|
</div>
|
<div class="overview-item">
|
<div class="item-label">{{ $t("ff1") }}</div>
|
<div class="item-value">{{ i.symbol }} {{ i.freezeMoney }}</div>
|
</div>
|
</div>
|
|
<div class="market-content">
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px">
|
IN
|
</el-tag>
|
<span>{{ $t("mv1") }}</span>
|
</div>
|
<div class="market-value">{{ positionData.inMarketValue }} INR</div>
|
</div>
|
<div class="market-row">
|
<div class="market-label">
|
<el-tag type="success" size="small" style="margin-right: 8px"
|
>IN</el-tag
|
>
|
<span>{{ $t("upl1") }}</span>
|
</div>
|
<div
|
class="market-value flex-center"
|
:class="`${positionData.inPositionEarnings < 0 ? 'r_c' : ''} ${
|
positionData.inPositionEarnings > 0 ? 'lc_c' : ''
|
}`"
|
>
|
<img
|
src="@/assets/images/up.png"
|
alt=""
|
v-if="positionData.inPositionEarnings > 0"
|
/>
|
<img
|
src="@/assets/images/down.png"
|
alt=""
|
v-else-if="positionData.inPositionEarnings < 0"
|
/>
|
{{ positionData.inPositionEarnings }}
|
({{ positionData.inPositionEarningsParent }})
|
</div>
|
</div>
|
<div class="market-footer">
|
<div class="position-btn sc_c" @click="positionOpen('IN')">
|
{{ $t("hj2") }}
|
</div>
|
<div class="trade-log-btn lc_c" @click="tradeLogOpen('IN')">
|
{{ $t("hj121") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 账户变更详情 -->
|
<div class="account-details page-w a_card">
|
<div class="account-details-left">
|
<div
|
class="nav_item"
|
:class="`${nav == 1 ? 'active' : ''}`"
|
@click="navChange(1)"
|
>
|
{{ $t("账户变动记录") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 2 ? 'active' : ''}`"
|
@click="navChange(2)"
|
>
|
{{ $t("dawr") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 3 ? 'active' : ''}`"
|
@click="navChange(3)"
|
>
|
{{ $t("aqt1") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 4 ? 'active' : ''}`"
|
@click="navChange(4)"
|
>
|
{{ $t("大宗交易订单") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 5 ? 'active' : ''}`"
|
@click="navChange(5)"
|
>
|
{{ $t("io1") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 6 ? 'active' : ''}`"
|
@click="navChange(6)"
|
>
|
{{ $t("基金订单") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 7 ? 'active' : ''}`"
|
@click="navChange(7)"
|
>
|
{{ $t("fnv") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 8 ? 'active' : ''}`"
|
@click="navChange(8)"
|
>
|
{{ $t("bc") }}
|
</div>
|
<div
|
class="nav_item"
|
:class="`${nav == 9 ? 'active' : ''}`"
|
@click="navChange(9)"
|
>
|
{{ $t("hj10") }}
|
</div>
|
</div>
|
<div class="account-details-right">
|
<acd v-if="nav == 1"></acd>
|
<dawr v-else-if="nav == 2"></dawr>
|
<aqt v-else-if="nav == 3"></aqt>
|
<bto v-else-if="nav == 4"></bto>
|
<io v-else-if="nav == 5"></io>
|
<fo v-else-if="nav == 6"></fo>
|
<fnv v-else-if="nav == 7"></fnv>
|
<bc v-else-if="nav == 8"></bc>
|
<lp v-else-if="nav == 9"></lp>
|
</div>
|
</div>
|
|
<!-- 划转弹窗 -->
|
<Trasferire
|
:dialogVisible.sync="trasferireVisible"
|
v-if="trasferireVisible"
|
@onClose="getMoney"
|
:moneyData="moneyData"
|
></Trasferire>
|
<!-- 充值弹窗 -->
|
<Deposit
|
:dialogVisible.sync="depositDialogVisible"
|
v-if="depositDialogVisible"
|
@onClose="getMoney"
|
></Deposit>
|
|
<!-- 提现弹窗 -->
|
<Withdraw
|
:dialogVisible.sync="withdrawVisible"
|
v-if="withdrawVisible"
|
@onClose="getMoney"
|
:moneyData="moneyData"
|
></Withdraw>
|
|
<!-- 贷款申请弹窗 -->
|
<loan-application
|
:dialogVisible.sync="applicationVisible"
|
v-if="applicationVisible"
|
></loan-application>
|
|
<!-- 贷款记录弹窗 -->
|
<loan-records
|
:dialogVisible.sync="recordsVisible"
|
v-if="recordsVisible"
|
></loan-records>
|
|
<!-- 交易列表弹窗(包括us和mx的) -->
|
<Position
|
:dialogVisible.sync="positionVisible"
|
v-if="positionVisible"
|
:type="positionType"
|
></Position>
|
|
<!-- 交易记录弹窗(包括us和mx的) -->
|
<trade-log
|
:dialogVisible.sync="tradelogVisible"
|
v-if="tradelogVisible"
|
:type="positionType"
|
></trade-log>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import dawr from "./components/dawr.vue";
|
import acd from "./components/acd.vue";
|
import aqt from "./components/aqt.vue";
|
import bto from "./components/bto.vue";
|
import io from "./components/io.vue";
|
import fo from "./components/fo.vue";
|
import fnv from "./components/fnv.vue";
|
import bc from "./components/bc.vue";
|
import lp from "./components/lp.vue";
|
import Deposit from "./components/Deposit.vue";
|
import Withdraw from "./components/Withdraw.vue";
|
import Trasferire from "./components/Trasferire.vue";
|
import LoanApplication from "./components/LoanApplication.vue";
|
import LoanRecords from "./components/LoanRecords.vue";
|
import Position from "./components/Position.vue";
|
import TradeLog from "./components/TradeLog.vue";
|
export default {
|
name: "Account",
|
components: {
|
acd,
|
dawr,
|
aqt,
|
io,
|
fo,
|
fnv,
|
bc,
|
lp,
|
bto,
|
Deposit,
|
Trasferire,
|
Withdraw,
|
LoanApplication,
|
LoanRecords,
|
Position,
|
TradeLog,
|
},
|
data() {
|
return {
|
nav: 1,
|
moneyData: [], // 账户金额
|
userInfo: {}, // 用户信息
|
positionData: {}, // 账户持仓数据
|
depositAmount: "", // 存款金额
|
depositMethod: "Bank Transfer", // 存款方式
|
depositDialogVisible: false, // 存款弹窗显示状态
|
trasferireVisible: false, // 存款弹窗显示状态
|
withdrawVisible: false, // 存款弹窗显示状态
|
applicationVisible: false, // 申请贷款弹窗显示状态
|
recordsVisible: false, // 贷款记录弹窗显示状态
|
positionVisible: false, // 交易列表弹窗显示状态
|
tradelogVisible: false, // 交易记录弹窗显示状态
|
positionType: null, // 交易列表弹窗类型
|
};
|
},
|
created() {
|
// console.log(this.$route.query);
|
let query = this.$route.query;
|
if (query && query.nav) {
|
this.nav = query.nav;
|
}
|
|
this.init();
|
},
|
methods: {
|
// 初始化
|
init() {
|
this.getMoney();
|
this.getInfo();
|
this.getMyPositionProfitAndLose();
|
},
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
this.moneyData = data.data;
|
}
|
},
|
// 获取用户信息
|
async getInfo() {
|
let data = await api.getUserInfo();
|
this.userInfo = data.data;
|
},
|
// 获取账户持仓数据
|
async getMyPositionProfitAndLose() {
|
let data = await api.getMyPositionProfitAndLose();
|
if (data.data) {
|
this.positionData = data.data;
|
}
|
},
|
// 交易列表弹窗打开
|
positionOpen(type) {
|
this.positionVisible = true;
|
this.positionType = type;
|
},
|
// 交易记录弹窗打开
|
tradeLogOpen(type) {
|
this.tradelogVisible = true;
|
this.positionType = type;
|
},
|
// nav切换
|
navChange(val) {
|
if (this.$store.state.userInfo.id) {
|
this.nav = val;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
$s_c: #c4d600;
|
$l_c: #07c160;
|
// .account-container {}
|
::v-deep .el-drawer__header > :first-child {
|
font-size: 18px;
|
font-weight: 700;
|
color: #333;
|
}
|
|
.el-tag.el-tag--success {
|
color: $l_c;
|
border-color: rgba($color: $l_c, $alpha: 0.3);
|
background-color: #e6f9ef;
|
}
|
|
/* 账户概览样式 */
|
.account-overview {
|
background-color: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
padding: 20px;
|
}
|
|
.a_card {
|
padding: 32px;
|
}
|
|
.overview-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10px;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
font-size: 24px;
|
font-weight: bold;
|
}
|
|
.title img {
|
width: 32px;
|
margin-right: 3px;
|
}
|
|
.overview-content {
|
display: flex;
|
justify-content: space-between;
|
// margin-bottom: 20px;
|
padding: 15px 20px 0;
|
}
|
|
.overview-item {
|
flex: 1;
|
}
|
|
.item-label {
|
color: #666;
|
font-size: 14px;
|
margin-bottom: 10px;
|
}
|
|
.item-value {
|
font-size: 20px;
|
font-weight: bold;
|
color: #333;
|
}
|
|
.action-buttons {
|
display: flex;
|
justify-content: flex-start;
|
margin-bottom: 20px;
|
width: 50%;
|
|
img {
|
width: 24px;
|
margin-right: 8px;
|
}
|
}
|
|
.deposit-btn {
|
background-color: $l_c !important;
|
border-color: $l_c !important;
|
margin-right: 10px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
|
.withdraw-btn {
|
background-color: $s_c !important;
|
border-color: $s_c !important;
|
color: #fff !important;
|
height: 40px;
|
padding: 0 20px;
|
}
|
|
.deposit-btn:hover,
|
.withdraw-btn:hover {
|
opacity: 0.5;
|
}
|
|
.loan-info {
|
border-top: 1px solid #e5e5e5;
|
padding-top: 20px;
|
}
|
|
.loan-item {
|
flex: 1;
|
min-width: 33.33%;
|
margin-bottom: 15px;
|
}
|
|
.loan-label {
|
color: #777;
|
font-size: 12px;
|
margin-bottom: 5px;
|
}
|
|
.loan-value {
|
font-size: 16px;
|
color: #666;
|
font-weight: 700;
|
}
|
|
.loan-buttons {
|
width: 50%;
|
display: flex;
|
margin-left: auto;
|
}
|
|
.loan-btn {
|
color: $l_c;
|
border: 1px solid $l_c;
|
border-radius: 4px;
|
margin-left: 10px;
|
padding: 7px 15px;
|
background-color: #e6f9ef;
|
}
|
|
.loan-btn:hover {
|
color: #fff;
|
background-color: $l_c;
|
}
|
|
.loan-btn2 {
|
color: #606266;
|
border: 1px solid #606266;
|
border-radius: 4px;
|
margin-left: 10px;
|
padding: 7px 15px;
|
}
|
|
.loan-btn2:hover {
|
color: $s_c;
|
border-color: $s_c;
|
}
|
|
/* 市场数据样式 */
|
.market-data {
|
display: flex;
|
justify-content: space-between;
|
gap: 20px;
|
}
|
|
.market-section {
|
flex: 1;
|
background-color: #fff;
|
border-radius: 16px;
|
overflow: hidden;
|
border: 1px solid #e1e1e1;
|
}
|
|
.market-header {
|
padding: 15px 20px 0;
|
}
|
|
.market-header h3 {
|
margin: 0;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.market-content {
|
padding: 15px 20px 0;
|
}
|
|
.market-row {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
|
.market-label {
|
display: flex;
|
align-items: center;
|
color: #777;
|
}
|
|
::v-deep .market-tag {
|
display: inline-block;
|
padding: 2px 9px;
|
background-color: #f9fbe6;
|
border-radius: 4px;
|
font-size: 12px;
|
margin-right: 8px;
|
}
|
|
.us-tag {
|
background-color: #e6f7f1;
|
color: $l_c;
|
border: 1px solid $l_c;
|
}
|
|
.market-value {
|
font-weight: bold;
|
|
img {
|
width: 16px;
|
margin-right: 8px;
|
}
|
}
|
|
.market-footer {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 20px;
|
border-top: 1px solid #eee;
|
}
|
|
.position-btn,
|
.trade-log-btn {
|
flex: 1;
|
padding: 10px 0;
|
text-align: center;
|
cursor: pointer;
|
font-size: 16px;
|
color: #666;
|
}
|
|
.position-btn {
|
border-right: 1px solid #eee;
|
}
|
|
/* 账户变更详情样式 */
|
.account-details {
|
background-color: #fff;
|
border-radius: 8px;
|
display: flex;
|
gap: 24px;
|
padding: 32px;
|
border-top: 1px solid #f5f5f5;
|
|
.account-details-right {
|
flex: 3;
|
width: 0;
|
}
|
|
.account-details-left {
|
min-width: 250px;
|
padding-right: 24px;
|
flex: 1;
|
border-right: 1px solid #f5f5f5;
|
|
.nav_item {
|
padding: 10px 0;
|
font-size: 18px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: right;
|
cursor: pointer;
|
margin: 8px 0;
|
font-weight: 700;
|
}
|
|
.nav_item:hover {
|
color: $s_c;
|
}
|
|
.nav_item.active {
|
color: $s_c;
|
}
|
}
|
}
|
|
.details-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.details-header h3 {
|
margin: 0;
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.tabs {
|
display: flex;
|
}
|
|
.tab {
|
padding: 6px 15px;
|
cursor: pointer;
|
border-bottom: 2px solid transparent;
|
color: #666;
|
}
|
|
.tab.active {
|
border-bottom-color: #f7d14c;
|
color: #f7d14c;
|
font-weight: bold;
|
}
|
|
.action-tag {
|
display: inline-block;
|
padding: 2px 8px;
|
border-radius: 4px;
|
font-size: 12px;
|
margin-bottom: 5px;
|
}
|
|
.income {
|
background-color: #e6f7f1;
|
color: $l_c;
|
}
|
|
.expense {
|
background-color: #ffeeee;
|
color: #ff6b6b;
|
}
|
|
.action-desc {
|
font-size: 12px;
|
color: #666;
|
}
|
|
/* 覆盖Element UI的分页样式 */
|
.el-pagination.is-background .el-pager li.active {
|
background-color: #f7d14c !important;
|
color: white !important;
|
}
|
|
/* 覆盖Element UI的表格样式 */
|
.el-table {
|
margin-bottom: 20px;
|
}
|
|
.el-table th {
|
background-color: #fff !important;
|
font-weight: bold;
|
color: #333;
|
padding: 10px 0;
|
}
|
|
.el-table td {
|
padding: 15px 0;
|
}
|
|
.el-table--border::after,
|
.el-table--group::after,
|
.el-table::before {
|
background-color: transparent;
|
}
|
|
.el-table__row {
|
border-bottom: 1px solid #ebeef5;
|
}
|
</style>
|
