<template>
|
<div class="user_page">
|
<div class="content">
|
<div class="top_icon">
|
<div class="right_icon">
|
<div>
|
<img src="../../assets/img/dun.png" alt />
|
</div>
|
<div>
|
<img src="../../assets/img/kefu.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="users">
|
<div class="left_tou">
|
<div class="left_tx">
|
<div></div>
|
</div>
|
<div class="right_name">
|
<span>{{ name }}</span>
|
</div>
|
</div>
|
<div class="right_go">
|
<img src="../../assets/img/youjiantou.png" alt />
|
</div>
|
</div>
|
<div class="center_card">
|
<div class="keyon">
|
<span>{{ '总资产' }}</span>
|
</div>
|
<div class="num_price">
|
<p
|
v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
|
class="account"
|
>
|
¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userIndexAmt).toFixed(2)
|
}}
|
</p>
|
<p
|
v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
|
class="account"
|
>
|
¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
|
$store.state.userInfo.userFuturesAmt).toFixed(2)
|
}}
|
</p>
|
<p
|
v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
|
class="account"
|
>¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p>
|
</div>
|
<div class="yk es">
|
<div>
|
<span>{{ '盈亏' }}</span>
|
</div>
|
<div>
|
<span>{{ '可用余额(¥)' }}</span>
|
</div>
|
</div>
|
<div class="yk as">
|
<div>
|
<span v-if="selectUserFlag">
|
<span
|
:class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''"
|
>{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose }}</span>
|
</span>
|
<span v-else>
|
<span
|
:class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''"
|
>{{ '¥ ' + $store.state.userInfo.allProfitAndLose }}</span>
|
</span>
|
</div>
|
<div>
|
<span class="bzz" v-if="selectUserFlag">
|
{{ '¥ ' + $store.state.userInfo.userIndexAmt }}
|
</span>
|
<span class="bzz" v-else>
|
{{ '¥ ' + $store.state.userInfo.userAmt }}
|
</span>
|
</div>
|
</div>
|
<div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
|
<span>{{ selectUserFlag ? '切换沪深账户' : '切换指数账户' }}</span>
|
</div>
|
</div>
|
<div class="jy">
|
<div class="left_gn">
|
<div class="l_icon">
|
<img src="../../assets/img/shezhi.png" alt />
|
</div>
|
<div class="r_title">
|
<span>{{ '设置' }}</span>
|
</div>
|
</div>
|
<div class="right_gos">
|
<img src="../../assets/img/youjiantou.png" alt />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
|
export default {
|
name: "newUser",
|
data() {
|
return {
|
name: "大狗子",
|
selectUserFlag: true
|
};
|
},
|
created() {
|
this.userInfo();
|
},
|
methods: {
|
handleZh() {
|
this.selectUserFlag = !this.selectUserFlag;
|
},
|
userInfo() {
|
api.getUserInfo().then(res => {
|
console.log(res);
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.user_page {
|
width: 100%;
|
height: calc(100% - 1.3rem);
|
.content {
|
width: 100%;
|
height: 100%;
|
padding: 0 0.3rem;
|
.top_icon {
|
width: 100%;
|
height: 1.5rem;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
.right_icon {
|
width: 25%;
|
height: 50%;
|
display: flex;
|
> div {
|
width: 50%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
img {
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
}
|
}
|
.users {
|
width: 100%;
|
height: 1.7949rem;
|
background: #fff;
|
border-radius: 0.15rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.left_tou {
|
width: 80%;
|
height: 70%;
|
display: flex;
|
.left_tx {
|
width: 20%;
|
height: 100%;
|
margin-left: 0.3rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
> div {
|
width: 1rem;
|
height: 1rem;
|
border-radius: 50%;
|
overflow: hidden;
|
background: rgb(211, 211, 211);
|
}
|
}
|
.right_name {
|
width: 80%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-size: 0.4415rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
.right_go {
|
width: 20%;
|
height: 70%;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
padding-right: 0.2rem;
|
img {
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
}
|
.center_card {
|
width: 100%;
|
height: 5.3846rem;
|
background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
|
// background-image: linear-gradient(to right, #ffffff , #dfedfc);
|
margin-top: 0.5rem;
|
border-radius: 0.15rem;
|
padding: 0.5rem 0.4rem;
|
.keyon {
|
width: 100%;
|
height: 0.5128rem;
|
font-size: 0.359rem;
|
display: flex;
|
align-items: center;
|
color: #3d4144;
|
span {
|
font-weight: 600;
|
}
|
}
|
.num_price {
|
width: 100%;
|
height: 0.6667rem;
|
margin-top: 0.1rem;
|
display: flex;
|
align-items: center;
|
font-size: 0.5528rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.yk {
|
width: 100%;
|
height: 0.5rem;
|
display: flex;
|
align-items: center;
|
> div {
|
width: 50%;
|
height: 100%;
|
color: #97989d;
|
display: flex;
|
align-items: center;
|
}
|
}
|
.yk.es {
|
margin-top: 0.3rem;
|
}
|
.yk.as {
|
font-size: 0.4033rem;
|
margin-top: 0.1rem;
|
span {
|
color: #000;
|
font-weight: 600;
|
}
|
.bzz {
|
color: #4ea364;
|
}
|
}
|
.btns {
|
width: 100%;
|
height: 1.2821rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 0.25rem;
|
background: #2d6ae9;
|
font-size: 0.4015rem;
|
color: #fff;
|
margin-top: 0.35rem;
|
span {
|
font-weight: 600;
|
}
|
}
|
.active {
|
background: #4ea364;
|
}
|
}
|
.jy {
|
width: 100%;
|
height: 1.5rem;
|
border-radius: 0.2rem;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 0.3rem;
|
margin-top: 0.3rem;
|
.left_gn {
|
width: 40%;
|
height: 60%;
|
display: flex;
|
.l_icon {
|
width: 30%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
img {
|
width: 0.5041rem;
|
height: 0.5041rem;
|
}
|
}
|
.r_title {
|
width: 70%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-size: 0.4046rem;
|
color: #404040;
|
span {
|
font-weight: 600;
|
}
|
}
|
}
|
.right_gos {
|
width: 20%;
|
height: 60%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
img {
|
width: 0.6rem;
|
height: 0.6rem;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
