web/pages/mine/pay_back.vue

<template>
  <div class="page">
    <div class="form" :class="{ 'mobile-form': !pcShow }">
      <div class="title">支付成功</div>
      <p>请前往个人中心 我的订单 模块查看订单信息</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
const pcShow = ref(true);
onMounted(() => {
  pcShow.value = !isMobile();
});
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;

  .title {
    text-align: center;
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: bold;
    color: #1a1a1a;
  }

  .form {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 550px;
    padding: 50px 70px;
    text-align: center;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 0 8px 8px #e1e1e1;

    .login-btn {
      display: block;
      width: 50%;
      height: 50px;
      color: #fff;
      font-size: 18px;
      border-radius: 8px;
      margin: 0 auto;

      :deep(.n-button__content) {
        display: block;
      }
    }
  }

  .mobile-form {
    width: 85%;
    padding: 20px 30px;
  }
}
</style>