jingcai/pages/index/pledge.vue

<template>
	<view class="all">
		<view class="top">
			<text>互娛共享</text>
		</view>
		<view class="img">
			<image
				src="../../static/img/zhiya2.png"
				mode=""
				style="width: 696rpx; height: 254rpx"></image>
		</view>
		<view @click="navigator"
			class="my"
			flex>
			<image
				src="../../static/img/zhiya3.png"
				mode=""
				style="
					width: 40rpx;
					height: 40rpx;
					margin-left: 50rpx;
					margin-top: 23rpx;
					margin-bottom: 22rpx;
				"></image>
			<view>我的質押</view>
			<image
				class="right"
				src="../../static/img/zhiya1.png"
				style="width: 16rpx; height: 26rpx"
				mode=""></image>
		</view>
		<view class="buttom" flex v-for="item in 12">
			<view class="le" @click="nav">
				<view
					class="le1"
					style="
						height: 32rpx;
						font-size: 33rpx;
						font-weight: 800;
						color: #ffffff;
						line-height: 43rpx;
					">
					質押投資一
				</view>
				<view
					class="le1"
					style="
						height: 19rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #feb041;
						line-height: 43rpx;
					">
					20U起投 | 1天
				</view>
				<view
					class="le1"
					style="
						height: 19rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #feb041;
						line-height: 43rpx;
					">
					總額：1234534.3456U
				</view>
				<view class="le2">
					<button
						style="
							width: 308rpx;
							height: 16rpx;
							background: #ebebeb;
							opacity: 0.38;
							border-radius: 8rpx;
							margin-top: 50rpx;
						"></button>
					<p style="">42.94%</p>
				</view>
			</view>
			<view class="ri">
				<view class="r1"> 1.00% </view>
				<view class="r2"> 日均收益率 </view>
				<view class="r3">
					<view style="background: #feb041; border-radius: 6rpx; width: 139rpx; height: 44rpx;">
						<text
							style="
							padding-top: 23rpx;
							margin-left: 20rpx;
							    text-align: center;
								width: 82rpx;
								height: 20rpx;
								font-size: 21rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #191a1f;
							"
							>立即加入</text>
						</view>
				</view>
			</view>
		</view>
		<view class="aa">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			navigator() {
				uni.navigateTo({
					url: '/pages/myPledge/myPledge'
				})
			},
			nav() {
				uni.navigateTo({
					url: '/pages/zyXingqing/zyXingqing'
				})
			}
		}
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 100%;
		background-color: #000000;
	}
	.top {
		// margin-top: 77rpx;
		padding-top: 40rpx;
		margin-left: 305rpx;
		height: 34rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 55rpx;
	}

	.img {
		margin-left: 27rpx;
		margin-top: 58rpx;
	}
	.my {
		margin-top: 23rpx;
		background-color: #191a1f;
		display: flex;

		view {
			flex-grow: 1;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			padding-left: 20rpx;
			padding-top: 20rpx;
		}

		.right {
			width: 16rpx;
			height: 26rpx;
			margin-top: 26rpx;
		}
	}

	.buttom {
		display: flex;
		justify-content: space-between;
		width: 696rpx;
		height: 252rpx;
		background: #191a1f;
		border-radius: 18rpx;
		margin-left: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 8rpx;
	}
	.le1 {
		margin-left: 28rpx;
		margin-top: 24rpx;
	}
	.le2 {
		margin-left: 25rpx;

		p {
			height: 17rpx;
			font-size: 21rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 43rpx;
		}
	}
	
	.r1 {
		margin-top: 35rpx;
		height: 36rpx;
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FF0102;
		line-height: 43rpx;
	}
	.r2 {
		margin-top: 25rpx;
		height: 20rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 43rpx;
	}
	
	.r3{
		margin-top: 50rpx;
	}
	.aa {
		width: 750rpx;
		height: 20rpx;
		background-color: #000000;
	}
</style>