Liuyi
2024-11-12 0ed8e370659ad4e0582301ae31cfa155da114590
pages/success/index.vue
@@ -1,104 +1,64 @@
<script  setup>
   import { ref } from 'vue'
   import { onShow } from '@dcloudio/uni-app';
   const title = ref(1)
   const back = () => {
      uni.navigateBack()
   }
   const toIndex = () => {
      uni.navigateTo({
         url:"/pages/index/index"
      })
   }
   // const toRecord = () => {
   //    uni.navigateTo({
   //       url:"/pages/function/paymentRecord/index"
   //    })
   // }
</script>
<template>
   <view :class="title == 1?'contbox':'contbox2'">
      <navbar title ='新增地址'></navbar>
      <view class="main-box">
         <view class="success-img">
            <img src="../../static/images/other/success.svg" alt=""/>
   <view class="container">
      <navbar title =''></navbar>
      <view class="content">
         <view class="img-box">
            <image class="img" src="../../static/images/other/success.png" alt=""></image>
            <view class="text text1">支付成功~</view>
         </view>
         <view class="txt1">缴费成功</view>
         <view class="txt2">
            缴费成功,您可去
            <text class="txt-hl" @click="toRecord()">缴费记录</text>
            中查看充值详情
         </view>
         <view class="button-box">
            <button class="button1" @click="back()">继续缴费</button>
            <button class="button2" @click="toIndex()">返回首页</button>
         </view>
         <view class="back" @click="navTo()">返回首页</view>
      </view>
   </view>
</template>
<script setup>
   function navTo(){
      uni.navigateTo({
         url:'/pages/index/index'
      })
   }
</script>
<style lang="scss" scoped>
   .h-cl-777 {
      color: #777777;
   }
   .contbox {
      width: 750rpx;
      height: 1624rpx;
      // background: linear-gradient(1deg, #FFFFFF 0%, #E8F9FF 100%);
      margin: 0 auto;
      box-sizing: border-box;
   }
   .contbox2 {
      width: 750rpx;
      height: 1624rpx;
      // background: linear-gradient(1deg, #FFFFFF 0%, #F5F5F5 100%);
      margin: 0 auto;
      box-sizing: border-box;
   }
   .main-box {
      text-align: center;
   }
   .success-img {
      width: 150rpx;
      margin: 130rpx auto 20rpx;
      img {
<style lang="scss">
   .container{
      width: 100%;
      height: 100vh;
      .content{
         width: 100%;
         height:calc(100vh - 176rpx);
         background:linear-gradient(to top,#FFFFFF,#E8EFFF);
         box-sizing: border-box;
         display: flex;
         padding:200rpx 0 600rpx;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         .img-box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
         }
          .img{
             width:580rpx;
             height: 385rpx;
          }
          .text{
             font-weight: 300;
             font-size: 32rpx;
             color: #548AFF;
          }
          .back{
             width: 300rpx;
             height: 80rpx;
             background: #FFFFFF;
             border:1rpx solid rgba(95, 117, 244, 0.6);
             color: #548AFF;
             border-radius:40rpx;
             line-height:80rpx;
             text-align: center;
          }
      }
   }
   .txt1 {
      font-size: 36rpx;
      margin-bottom: 20rpx;
   }
   .txt2 {
      font-size: 28rpx;
   }
   .txt-hl {
      color: #5CBCE6;
      margin: 0 5rpx;
      text-decoration: underline;
   }
   .button-box {
      display: flex;
      justify-content: center;
      margin-top: 130rpx;
      button {
         width: 300rpx;
         height: 85rpx;
         line-height: 85rpx;
         margin: 10rpx;
      }
      .button1 {
         background-color: #5CBCE6;
         color: #ffffff;
      }
      .button2 {
         background-color: #ffffff;
         color: #5CBCE6;
         border: 1px solid #5CBCE6;
      }
   }
</style>