<template>
	<view class="animate__animated animate__fadeInRight">
		<!-- 数字资产 -->
		<view class="property">
			<view class="title">总资产(元)</view>
			<view class="number">0.00</view>
		</view>
		<!-- 资产列表 -->
		<view class="lists">
			<view class="lists-header">
				资产列表
				<uni-icons type="plus" size="24" color="#aa55ff"></uni-icons>
			</view>
			<view class="item" v-for="(item, index) in 2" :key="index" @click="propertyInfo(item)">
				<view class="cost">
					<image class="logo" src="" mode="" />
					<view class="title ellipsis">OC COIN</view>
					<view class="text ellipsis">≈￥0.21</view>
				</view>
				<view class="balance">
					<view class="title ellipsis">120,330.00</view>
					<view class="text ellipsis">￥25269.3000</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			propertyInfo(e){
				console.log(e)
				uni.navigateTo({
					url: './property'
				})
			}
		}
	}
</script>

<style scoped>
	
</style>

<style lang="scss" scoped>
	// 数字资产
	.property{
		overflow: hidden;
		position: relative;
		margin-top: $margin;
		margin-left: $margin + ($margin / 2);
		background-color: $mian-color;
		border-radius: $radius 0 0 $radius;
		padding: ($padding * 3) ($padding * 3) ($padding * 3) ($padding * 2);
		color: white;
		font-weight: bold;
		&::before,&::after{
			background-color: rgba($color: $red-color, $alpha: .03);
			border-radius: 50%;
			content: " ";
			position: absolute;
		}
		&::before{
			top: -300rpx;
			left: 40%;
			height: 400rpx;
			width: 400rpx;
		}
		&::after{
			bottom: -200rpx;
			left: -100rpx;
			height: 300rpx;
			width: 300rpx;
		}
		.title{
			font-size: $title-size;
		}
		.number{
			font-size: $title-size + 18;
		}
	}
	// 资产列表
	.lists{
		padding: $margin + ($margin / 2);
		.lists-header{
			display: flex;
			font-size: $title-size + 2;
			color: $text-color;
			font-weight: bold;
			padding: $padding 0 ($padding/2) 0;
			justify-content: space-between;
			justify-items: center;
			align-items: center;
		}
		.item{
			background-color: white;
			border-radius: $radius;
			box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
			margin-top: $margin;
			padding: $padding * 2;
			display: flex;
			&:first-child{
				margin-top: 0;
			}
			.cost{
				position: relative;
				margin-right: $margin;
				padding-left: 108rpx;
				width: 50%;
				box-sizing: border-box;
				.logo{
					position: absolute;
					left: 0;
					top: 0;
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					background-color: $border-color;
					margin-right: $margin;
				}
			}
			.balance{
				padding-left: $padding;
				width: 50%;
				text-align: right;
				box-sizing: border-box;
			}
			.title{
				font-weight: bold;
				font-size: $title-size;
			}
			.text{
				font-size: $title-size-m;
				color: $text-gray;
			}
		}
	}
</style>
