crm-app-vue3/pages/bindSuccess/index.vue

<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="check-mark"></view>
    </view>
    <!-- 成功提示文字 -->
    <view class="success-text">
      <view class="title">绑定成功</view>
      <view class="desc">您的账号已完成绑定，可正常使用相关功能</view>
    </view>
    <!-- 操作按钮 -->
<!--    <view class="btn-group">
      <button class="btn home-btn" @click="handleClose">关闭</button>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 前往首页（可替换为你的首页地址）
    handleClose() {
		window.close();
    }
  }
};
</script>

<style lang="scss" scoped>
/* 页面容器：全屏居中 */
.success-container {
  width: 100vw;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

/* 成功图标：绿色圆形+对勾 */
.success-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e6f4ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;

  .check-mark {
    width: 16px;
    height: 30px;
    border-right: 4px solid #38a169;
    border-bottom: 4px solid #38a169;
    transform: rotate(45deg);
  }
}

/* 文字区域：标题粗体+描述浅灰 */
.success-text {
  text-align: center;
  margin-bottom: 40px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 10px;
  }

  .desc {
    font-size: 16px;
    color: #718096;
    max-width: 300px;
    margin: 0 auto;
  }
}

/* 按钮组：横向排列+间距 */
.btn-group {
  width: 100%;
  max-width: 320px;
  display: flex;
  gap: 15px;
}

/* 按钮样式：绿色主按钮+白色次按钮 */
.btn {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.9;
}

/* 次要按钮（返回）：白色边框+浅灰文字 */
.back-btn {
  background-color: #fff;
  color: #2d3748;
  border: 1px solid #e2e8f0;
}

/* 主要按钮（首页）：绿色背景+白色文字 */
.home-btn {
  background-color: #38a169;
  color: #fff;
}
</style>