Onlife/pages/smarttrading/myassetdetails.vue

<template>
	<view class="container">
		<!-- 餘額 -->
		<view class="balance">
			<view class="b_bal">
				<view class="balleft">
					<view class="mybal">
						我的餘額
					</view>
					<view class="money">
						$19,322.25
					</view>
				</view>
				<view class="balright">
					<view class="tit">
						USD
					</view>
					<u-icon v-if="donval" name="arrow-down" color="#fff" size="12" @click="donval = !donval"></u-icon>
					<u-icon v-else name="arrow-up" color="#fff" size="12" @click="donval = !donval"></u-icon>
				</view>
			</view>
			<!-- 收益 -->
			<view class="mybal">
				今日收益
			</view>
			<view class="dayincome">
				<view class="dayleft">
					$322,25
				</view>
				<view class="dayright">
					<u-icon name="arrow-up-fill" color="#1ABA84" size="12"></u-icon>
					<view class="percentage">
						+1.52%
					</view>
				</view>
			</view>
		</view>
		<!-- 明細 -->
		<view class="popular">
			<view class="all_top">
				<view class="title">
					全部賬號
				</view>
				<view class="filter" @click="show = true">
					<view class="filterig">
						<view class="">
							篩選
						</view>
						<u-icon name="bag" color="#A4A4A4" size="16"></u-icon>
					</view>
				</view>
			</view>
			<!-- 明細內容 -->
			<scroll-view scroll-y="true" style="height: 700rpx;">
				<view class="accountsitem" v-for="(item,index) in 5" :key="index" @click="">
					<view class="buy">
						買入
					</view>
					<view class="item_le">
						<image src="/static/wallet7.png" mode="heightFix"></image>
					</view>
					<view class="item_ri">
						<view class="name">
							<view class="">
								Binance
							</view>
							<view style="margin-top: 12rpx; font-size: 25rpx;">
								<text style="color: #908baf;">2025-03-15 16:54:23</text>
							</view>
						</view>
						<view class="number">
							<view class="" style="font-weight: 600; font-size: 26rpx;">
								1060.45$
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- p[opu[]] -->
		<u-popup :show="show" mode="bottom" @close="close" round="10" :closeable="true">
			<view style="height: 330rpx; padding: 30rpx;">
				<view class="" v-for="(item,index) in 2" :key="index">
					<view class="accounts">按風險類型篩選</view>
					<view class="type">
						<view class="titem">
							全部
						</view>
						<view class="titem">
							全部
						</view>
						<view class="titem">
							全部
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				donval: true
			};
		},
		methods: {
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
	.container {
		border-top: 1px solid dimgrey;
		width: 100vw;
		min-height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #000033, #51599b);

		image {
			width: 100%;
			height: 100%;
		}

		.balance {
			padding: 30rpx;
			background-color: #fff;
			width: 100%;
			box-sizing: border-box;
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.b_bal {
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E7E7E7;
				margin-bottom: 20rpx;

				.balleft {

					.money {
						font-weight: 600;
						font-size: 40rpx;
					}
				}

				.balright {
					display: flex;
					align-items: center;
					width: 120rpx;
					background-color: #4f5ad8;
					justify-content: center;
					color: #fff;
					border-radius: 30rpx;
					height: 60rpx;

					.tit {
						font-size: 24rpx;
						margin-right: 12rpx;
					}
				}
			}

			.dayincome {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.dayleft {
					font-weight: 600;
					font-size: 32rpx;
				}

				.dayright {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #1ABA84;
					width: 150rpx;
					height: 60rpx;
					background-color: #d7f9ee;
					border-radius: 30rpx;

					.percentage {
						font-size: 24rpx;
					}
				}

			}
		}

		.popular {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			color: black;
			width: 100%;
			box-sizing: border-box;

			.all_top {
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #E7E7E7;
				margin-bottom: 30rpx;
			}

			.title {

				margin-bottom: 20rpx;
			}

			.filter {
				font-size: 22rpx;
				color: #A4A4A4;

				.filterig {
					display: flex;
					align-items: center;
				}
			}

			// 明細內
			.accountsitem {
				display: flex;
				justify-content: space-between;
				margin-bottom: 50rpx;
				align-items: center;
				border-bottom: 2rpx solid #f6f6f6;
				padding-bottom: 20rpx;

				.buy {
					color: #4F5AD7;
					width: 90rpx;
					margin-right: 20rpx;
					font-weight: 600;
				}

				.item_le {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.item_ri {
					width: 590rpx;
					height: 75rpx;
					display: flex;
					justify-content: space-between;

					.name {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.number {
						display: flex;
						flex-direction: column;
						align-items: end;
						margin-top: 25rpx;
					}
				}

			}
		}

		.accounts {
			width: 100%;
			font-size: 34rpx;
			border-bottom: 2rpx solid #f6f6f6;
			padding-bottom: 15rpx;
		}

		.type {
			display: flex;
			justify-content: space-around;
			margin-bottom: 40rpx;

			.titem {
				width: 200rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #4f5ad8;
				color: #fff;
				border-radius: 30rpx;
			}
		}
	}
</style>