<template>
|
<view class="success-page">
|
<!-- 背景装饰层：与登录/注册页同一视觉基调（置于内容之下，不拦截点击） -->
|
<view class="deco-cross deco-cross--tr"></view>
|
<view class="deco-cross deco-cross--ml"></view>
|
<view class="deco-cross deco-cross--bl"></view>
|
<view class="deco-dots deco-dots--lt"></view>
|
<view class="deco-dots deco-dots--rt"></view>
|
<view class="deco-dots deco-dots--rb"></view>
|
|
<!-- 结果区：绿色圆形对勾 + 结果文案，整块在剩余空间内居中 -->
|
<view class="content">
|
<view class="success-icon"></view>
|
<text class="success-title">注册成功</text>
|
<text class="success-desc">您的账号已成功注册，返回登录开启健康之旅吧</text>
|
</view>
|
|
<!-- 底部操作区：返回登录按钮 + Home 条 -->
|
<view class="bottom-area">
|
<view class="submit-btn" @tap="_handleBackLogin">返回登录</view>
|
<view class="home-indicator"></view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
// ======================== 方法定义区域 ========================
|
|
/** 返回登录页：清空页面栈，重新进入登录页 */
|
const _handleBackLogin = () => {
|
uni.reLaunch({ url: '/pages/login/index' })
|
}
|
</script>
|
|
<style scoped lang="scss">
|
/* ==================== 页面底板 ==================== */
|
|
/* 页面最外层：浅蓝品牌渐变底（165°，0.8 透明），与登录/注册页一致 */
|
.success-page {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
min-height: 100vh;
|
box-sizing: border-box;
|
overflow: hidden;
|
background-color: #ffffff;
|
background-image: linear-gradient(
|
165deg,
|
rgba(211, 228, 248, 0.8) 0%,
|
rgba(188, 214, 244, 0.8) 50%,
|
rgba(171, 204, 236, 0.8) 100%
|
);
|
}
|
|
/* ==================== 背景装饰层 ==================== */
|
|
/* 微透十字：容器尺寸按设计稿，竖条(::before)/横条(::after)等宽居中交叉 */
|
.deco-cross {
|
position: absolute;
|
z-index: 0;
|
pointer-events: none;
|
|
&::before,
|
&::after {
|
content: '';
|
position: absolute;
|
background-color: var(--cross-color);
|
border-radius: calc(var(--bar) / 2);
|
}
|
|
/* 竖条：水平居中 */
|
&::before {
|
left: var(--offset);
|
top: 0;
|
width: var(--bar);
|
height: 100%;
|
}
|
|
/* 横条：垂直居中 */
|
&::after {
|
left: 0;
|
top: var(--offset);
|
width: 100%;
|
height: var(--bar);
|
}
|
}
|
|
/* 右上十字 */
|
.deco-cross--tr {
|
top: 20rpx;
|
right: 10rpx;
|
width: 160rpx;
|
height: 160rpx;
|
--bar: 44rpx;
|
--offset: 58rpx;
|
--cross-color: rgba(255, 255, 255, 0.208);
|
}
|
|
/* 中左十字 */
|
.deco-cross--ml {
|
top: 57.9%;
|
left: -48rpx;
|
width: 136rpx;
|
height: 136rpx;
|
--bar: 36rpx;
|
--offset: 50rpx;
|
--cross-color: rgba(255, 255, 255, 0.188);
|
}
|
|
/* 左下十字 */
|
.deco-cross--bl {
|
bottom: 4rpx;
|
left: -20rpx;
|
width: 200rpx;
|
height: 200rpx;
|
--bar: 56rpx;
|
--offset: 72rpx;
|
--cross-color: rgba(255, 255, 255, 0.208);
|
}
|
|
/* 白色微点阵：微点 3×3pt(6rpx)，平铺步距 26rpx */
|
.deco-dots {
|
position: absolute;
|
z-index: 0;
|
pointer-events: none;
|
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.333) 3rpx, transparent 3rpx);
|
background-size: 26rpx 26rpx;
|
}
|
|
/* 左上点阵 */
|
.deco-dots--lt {
|
top: 24.6%;
|
left: 20rpx;
|
width: 110rpx;
|
height: 84rpx;
|
}
|
|
/* 右上点阵 */
|
.deco-dots--rt {
|
top: 16%;
|
right: 72rpx;
|
width: 58rpx;
|
height: 136rpx;
|
}
|
|
/* 右下点阵 */
|
.deco-dots--rb {
|
bottom: 62rpx;
|
right: 212rpx;
|
width: 58rpx;
|
height: 58rpx;
|
}
|
|
/* ==================== 结果区 ==================== */
|
|
/* 结果区：占据剩余空间并整体居中 */
|
.content {
|
position: relative;
|
z-index: 1;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 0 56rpx;
|
box-sizing: border-box;
|
}
|
|
/* 成功圆形底 + 白色对勾（对勾由两条边框旋转 45° 拼成） */
|
.success-icon {
|
position: relative;
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 50%;
|
background-image: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
box-shadow: 0 12rpx 32rpx rgba(16, 185, 129, 0.25);
|
}
|
|
.success-icon::after {
|
content: '';
|
position: absolute;
|
left: 54rpx;
|
top: 30rpx;
|
width: 40rpx;
|
height: 72rpx;
|
border-right: 8rpx solid #ffffff;
|
border-bottom: 8rpx solid #ffffff;
|
transform: rotate(45deg);
|
}
|
|
/* 结果主标题 */
|
.success-title {
|
margin-top: 44rpx;
|
font-size: 40rpx;
|
font-weight: 600;
|
color: #0f172a;
|
}
|
|
/* 结果说明文案 */
|
.success-desc {
|
margin-top: 20rpx;
|
font-size: 26rpx;
|
line-height: 40rpx;
|
text-align: center;
|
color: #64748b;
|
}
|
|
/* ==================== 底部操作区 ==================== */
|
|
/* 底部操作区：左右与内容区同边距，底部叠加安全区 */
|
.bottom-area {
|
position: relative;
|
z-index: 1;
|
padding: 0 56rpx;
|
padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
}
|
|
/* 返回登录按钮：品牌主行动渐变，PILL R24 → 48rpx */
|
.submit-btn {
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 48rpx;
|
background-image: linear-gradient(90deg, #1e5ebc 0%, #003e7e 100%);
|
color: #ffffff;
|
font-size: 30rpx;
|
font-weight: 600;
|
box-shadow: 0 12rpx 28rpx rgba(0, 62, 126, 0.2);
|
}
|
|
/* 底部 Home 条：270×10rpx，R5rpx，#0F172A25 */
|
.home-indicator {
|
width: 270rpx;
|
height: 10rpx;
|
margin: 24rpx auto 0;
|
border-radius: 5rpx;
|
background-color: rgba(15, 23, 42, 0.145);
|
}
|
</style>
|
