pet-front/otherPages/myOrdersManage/detail/index.vue

<template>
	<!-- <div>保证金退还</div> -->
	<view class="container">
		<view class="top" :style="{ borderRadius: '8rpx' }">
			<view class="level account">
				<view class="">
					账户总览
				</view>
				<view class="level text2">
					<view>
						资金明细
					</view>
					<view class="line">
						申请退还
					</view>
				</view>
			</view>
			<view class="level Recharge">
				<view class="money level">
					<text>¥</text>
					<input type="text" />
				</view>
				<view class="text3" :style="{ borderRadius: '23.5rpx' }">
					去充值
				</view>
			</view>
		</view>
		<view class="center">
			<view class="text">
				退还前提
			</view>
			<p>账户中无未完成/未结算的服务订单，无待提现的余额退还规则</p>
			<view class="text">
				余额退还规则
			</view>
			<p>1.履约保证金退还即注销喂养师身份;</p>
			<p>2.退还过程产生的手续费由平台承担;</p>
			<p>3.只可全额退还账户中履约保证金余额，不可分批退还;</p>
			<p>4.如果认证成功后未成功接单，认证费全额退款;</p>
			<p>5.成功接单并赚取酬劳后，认证费正式收取，收取后不予退款;</p>
			<p>6.成为喂养员后无违规行为且没有未完成的任务;退还缴纳的全部履约保证金;</p>
			<p>7.成为喂养员后有违规行为或仍有未完成的任务;退还账户中剩余履约保证金;</p>
		</view>
		<view class="level text1">
			有关履约保证金的其他规则，详见
			<view class="text4">
				《履约保证金&认证费协议》
			</view>
		</view>
		<view class="buttom level" :style="{ borderRadius: '41rpx' }">
			<text>退还并注销伴宠师</text>
		</view>
		<!-- <up-popup :show="show" mode="top" @close="close" @open="open">
			<view>
				<text>人生若只如初见，何事秋风悲画扇</text>
			</view>
		</up-popup> -->
	</view>
</template>

<script setup>
	// import {
	// 	ref
	// } from 'vue';

	// // 创建响应式数据  
	// const show = ref(false);

	// // 定义方法  
	// function open() {
	// 	// 打开逻辑，比如设置 show 为 true  
	// 	show.value = true;
	// 	// console.log('open');  
	// }

	// function close() {
	// 	// 关闭逻辑，设置 show 为 false  
	// 	show.value = false;
	// 	// console.log('close');  
	// }
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 150rpx;
		padding: 7% 3% 0 4%;
		box-sizing: border-box;
		background-image: linear-gradient(to bottom, #FFBF60, #F2F2F2);
	}

	.top {
		width: 702rpx;
		height: 227rpx;
		background-color: #FFFFFF;
		padding: 3% 6% 0 6%;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.level {
		display: flex;
	}

	.account {
		justify-content: space-between;
		color: #000000;
		font-size: 30rpx;
	}

	.Recharge {
		width: auto;
		height: 71rpx;
		justify-content: space-between;
		margin: 30rpx 0 0 30rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		align-items: center;
	}

	.text2 {
		color: #BDBDBD;
		font-size: 22rpx;
	}

	.line {
		position: relative;
		padding: 0 0 0 20rpx;

		&::before {
			position: absolute;
			top: 7rpx;
			left: 10rpx;
			content: "";
			width: 3rpx;
			height: 26rpx;
			border-radius: 9rpx;
			background-color: #BDBDBD;
		}
	}

	.money {
		width: 450rpx;
		height: 71rpx;
		/* background-color: #FFBF60; */
		color: #FFBF60 !important;
		font-size: 54rpx !important;
	}

	.money input {
		margin-left: 5%;
		font-size: 61rpx;
		height: 71rpx;
	}

	.text3 {
		width: 131rpx;
		height: 47rpx;
		background-color: #FFBF60;
		line-height: 47rpx;
		display: flex;
		justify-content: center;
	}

	.center {
		width: 100%;
		height: 800rpx;
		padding: 3% 4%;
		box-sizing: border-box;
		color: #707070;
		font-size: 28rpx;
		line-height: 45rpx;
	}

	.text {
		color: black;
		font-size: 30rpx;
		font-weight: 700;
		margin: 3% 0;
	}

	.text1 {
		color: #BDBDBD;
		font-size: 22rpx;
		padding: 0 4%;
		box-sizing: border-box;
	}

	.text4 {
		color: #FFBF60;
	}

	.buttom {
		width: 594rpx;
		height: 94rpx;
		background-color: #FFBF60;
		margin: 25% 3% 0 7%;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
	}
</style>