猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

203 lines
4.1 KiB

<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>