exam_mp/pages/success/error.vue

<template>
  <Container
    class="body-content"
    title="支付失败"
    bgColor="#F8F8F8"
    :onBack="onBack"
  >
    <view class="info-area">
      <image
        class="success-icon"
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/3vShBotzJZS3S9dogDOAf1P8J6CvXW2EzE24tXq6.png"
        mode="aspectFill"
      ></image>
    </view>
    <view class="button-group">
      <view type="default" class="btn" @click="back">返回首页</view>
    </view>
  </Container>
</template>

<script setup>
import Container from "../../components/Container/Container.vue";
import { router } from "../../utils/router";
const onBack = () => new Promise((resolve) => resolve("/pages/user/index"));
const back = () => {
  router.switchTab("/pages/user/index");
};
</script>

<style scoped lang="scss">
.success-icon {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 80rpx;
  margin-top: 50rpx;
}

/* 中间说明区域 */
.info-area {
  flex: 2;
  text-align: center;
  margin: 0 20rpx;
}

.info-text {
  font-size: 28rpx;
  color: #666;
}

/* 底部按钮组 */
.button-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.btn {
  border-radius: 40rpx;
  font-size: 32rpx;
  line-height: 84rpx;
  display: block;
  border: 1rpx solid green;
  text-align: center;
  width: 94%;
  margin: auto;
}
</style>