FXB/pages/index/property.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/index')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">{{$t("property.我的资产")}}</view>
			</view>
			<view class="moneyBox">
				<view class="moneyTpl">
					<view class="moneyName">{{$t("property.我的资产")}}</view>
					<view class="moneyText">≈<text class="money">{{userInfo.usdt * 1}}U</text></view>
				</view>
				<view class="noneyNav flex">
					<view class="moneyTip flex_item" @click="navTo('/pages/index/withdrawal')">
						<image src="/static/img/img18.png" style="width: 30rpx;height: 29rpx;"></image>
						<view class="moneyTitle">{{$t("property.提现")}}</view>
					</view>
					<view class="partition"></view>
					<view class="moneyTip flex_item" @click="navTo('/pages/index/transfer')">
						<image src="/static/img/img19.png" style="width: 31rpx;height: 30rpx;"></image>
						<view class="moneyTitle">{{$t("property.转账")}}</view>
					</view>
					<view class="partition"></view>
					<view class="moneyTip flex_item" @click="navTo('/pages/index/recharge')">
						<image src="/static/img/img19.png" style="width: 31rpx;height: 30rpx;"></image>
						<view class="moneyTitle">{{$t("property.充值")}}</view>
					</view>
				</view>
			</view>
			<view class="titleProp">{{$t("property.我的资产")}}</view>
			<view class="propBox flex" @click="navTo('/pages/index/propDetails?type=1')">
				<view class="flex_item propTpl">
					<image src="../../static/img/img15.png" style="width: 81rpx;height: 81rpx;"></image>
					<view class="name">USDT</view>
				</view>
				<view class="flex_item rightTip">
					<view class="tipTpl">
						<view class="num">{{userInfo.USDT * 1}}</view>
						<!-- <view class="num1">≈0.00RMB</view> -->
					</view>
					<view><u-icon name="arrow-right" color="#fff" size="18"></u-icon></view>
				</view>
			</view>
			<view class="propBox flex" @click="navTo('/pages/index/propDetails?type=2')">
				<view class="flex_item propTpl">
					<image src="../../static/img/img16.png" style="width: 81rpx;height: 81rpx;"></image>
					<view class="name">NUSD</view>
				</view>
				<view class="flex_item rightTip">
					<view class="tipTpl">
						<view class="num">{{userInfo.NUSD*1 + userInfo.NUSD_OLY*1}}</view>
						<!-- <view class="num1">≈0.00RMB</view> -->
					</view>
					<view><u-icon name="arrow-right" color="#fff" size="18"></u-icon></view>
				</view>
			</view>
			<view class="propBox flex" @click="navTo('/pages/index/propDetails?type=3')">
				<view class="flex_item propTpl">
					<image src="../../static/img/img16.png" style="width: 81rpx;height: 81rpx;"></image>
					<view class="name">NICE</view>
				</view>
				<view class="flex_item rightTip">
					<view class="tipTpl">
						<view class="num">{{userInfo.NICE * 1}}</view>
						<!-- <view class="num1">≈0.00RMB</view> -->
					</view>
					<view><u-icon name="arrow-right" color="#fff" size="18"></u-icon></view>
				</view>
			</view>
			<view class="propBox flex" @click="navTo('/pages/index/propDetails?type=4')">
				<view class="flex_item propTpl">
					<image src="../../static/img/img16.png" style="width: 81rpx;height: 81rpx;"></image>
					<view class="name">XNUSD</view>
				</view>
				<view class="flex_item rightTip">
					<view class="tipTpl">
						<view class="num">{{userInfo.NUSD_OLY * 1}}</view>
						<!-- <view class="num1">≈0.00RMB</view> -->
					</view>
					<view><u-icon name="arrow-right" color="#fff" size="18"></u-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import {mapState,mapActions,mapMutations} from "vuex";
	export default {
		components: {
			topView
		},
		data () {
			return {}
		},
		onLoad () {},
		onShow () {},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.infoBox{
		padding: 0rpx 37rpx;
	}
	.moneyBox{
		background: #1A1A17;
		border-radius: 25rpx;
		.moneyTpl{
			background: url('../../static/img/img17.png') no-repeat;
			width: 100%;
			height: 199rpx;
			background-size: 100% 100%;
			padding: 50rpx 45rpx;
			.moneyName{
				font-weight: bold;
				font-size: 29rpx;
				color: #31190B;
			}
			.moneyText{
				color: #31190B;
				font-size: 30rpx;
				padding-top: 15rpx;
				.money{
					font-weight: bold;
					font-size: 33rpx;
					color: #31190B;
					padding-left: 10rpx;
				}
			}
		}
		.noneyNav{
			padding: 30rpx 0rpx;
			color: #fff;
			.moneyTip{
				width: 30%;
				justify-content: center;
				.moneyTitle{
					padding-left: 25rpx;
				}
			}
			.partition{
				width: 1rpx;
				height: 43rpx;
				background: #FFFFFF;
				opacity: 0.51;
			}
		}
	}
	.titleProp{
		padding: 55rpx 0rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.propBox{
		color: #fff;
		margin-bottom: 70rpx;
		.propTpl{
			.name{
				padding-left: 31rpx;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
		.rightTip{
			.tipTpl{
				padding-right: 20rpx;
				text-align: right;
				.num{
					
				}
				.num1{
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					padding-top: 15rpx;
				}
			}
		}
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
</style>