jingcai/pages/index/pledge.vue

<template>
	<view class="all">
		<view class="top">
			<text>{{$t('homepledge.m0')}}</text>
		</view>
		<image class="img" src="../../static/img/zhiya2.png" mode="scaleToFill" style=""></image>
		<view @click="navigator" class="my flex">
			<view class="flex">
				<image class="titleTip margin-r-10" src="../../static/img/zhiya3.png" mode=""></image>
				<view>
				{{$t('homepledge.m1')}}
				</view>
			</view>
			<image class="right" src="../../static/img/zhiya1.png" style="" mode=""></image>
		</view>
		<view class="buttom flex" v-for="(item,ind) in navList">
			<view class="le" @click="nav">
				<view class="le1 title ">
					{{ind}}
				</view>
				<view class="le1 ">
					20U{{$t('homepledge.m2')}} | 1{{$t('homepledge.m3')}}
				</view>
				<view class="le1 ">
					{{$t('homepledge.total')}}：1234534.3456U
				</view>
				<view class="le2 flex font-color-gray">
					<view class="line margin-r-10">
						<view class="line-action" :style="{'margin-left': (-100+42.94)+'%'}">
							
						</view>
					</view>
					<view>42.94%</view>
				</view>
			</view>
			<view class="ri">
				<view class="r1 margin-b-20"> 1.00% </view>
				<view class="r2 margin-b-30 font-color-gray"> {{$t('homepledge.a4')}} </view>
				<view class="add-buttom">
					{{$t('homepledge.a5')}}
				</view>
			</view>
		</view>
		<taber tab='pledge'></taber>
	</view>
</template>

<script>
	import taber from "@/components/footer/footer.vue";
	import {lock} from "@/api/mypledge.js"
	export default {
		components: {
			taber
		},
		data() {
			return {
				navList: {}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			navigator() {
				uni.navigateTo({
					url: '/pages/myPledge/myPledge'
				})
			},
			nav() {
				uni.navigateTo({
					url: '/pages/myPledge/zyXingqing'
				})
			},
			loadData(source) {
				//这里是将订单挂载到tab列表下
				const that = this;
				lock({})
					.then(({
						data
					}) => {
						console.log('1111',data );
						that.navList = data.prices
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		height: 100%;
		background-color: #000000;
		padding-top: var(--status-bar-height);
	}

	.top {
		padding-top: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
	}

	.img {
		width: 690rpx;
		height: 250rpx;
		margin: 20rpx 30rpx;
	}

	.my {
		background-color: #191a1f;
		margin: 0 30rpx;
		display: flex;
		color: #FFF;
		padding: 20rpx 30rpx;
		border-radius: 18rpx;

		.titleTip {
			width: 40rpx;
			height: 40rpx;
		}

		.right {
			width: 16rpx;
			height: 26rpx;
		}
	}

	.buttom {
		background-color: #191a1f;
		border-radius: 18rpx;
		margin: 30rpx;
		padding: 30rpx;
		line-height: 1;

		.le {
			font-size: 20rpx;

			.le1 {
				font-weight: 800;
				color: #feb041;
				margin-bottom: 20rpx;

				&.title {
					font-size: 33rpx;
					color: #ffffff;
				}
			}

			.le2 {
				.line {
					width: 308rpx;
					height: 16rpx;
					background-color: rgba(235, 235, 235, 0.38);
					border-radius: 99rpx;
					overflow: hidden;
					.line-action{
						height: 100%;
						width: 100%;
						border-radius: 99rpx;
						background-color:#FEB041 ;
					}
				}
			}
		}

		.r1 {
			font-size: 47rpx;
			font-weight: 800;
			color: #FF0102;
		}

		.r2 {
			font-size: 21rpx;
			font-weight: 500;
			color: #999999;
		}

		.add-buttom {
			background: #feb041;
			border-radius: 6rpx;
			font-size: 21rpx;
			font-weight: 800;
			color: #191a1f;
			padding:10rpx 20rpx ;
			text-align: center;
		}
	}
</style>