'提现模块'

2021-09-25 11:59:49 +08:00
parent 3a48656538
commit ed4c0492fb
21 changed files with 2756 additions and 8 deletions
--- a/pages/wallet/index.vue
+++ b/pages/wallet/index.vue
@@ -0,0 +1,144 @@
+<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="#009b69"></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>