更新初级版本

This commit is contained in:
Your Name
2026-03-06 17:30:37 +08:00
parent 52bb80e2f1
commit 7b76671988
19 changed files with 1656 additions and 370 deletions
-320
View File
@@ -1,320 +0,0 @@
<template>
<view class="container">
<view class="counter-warp">
<view class="header-content">
<image :src="avatarUrl" class="icon-box" v-if="avatarUrl"/>
<view class="text-header">用户登录</view>
</view>
<view class="box">
<view class="list-item">
<label class="list-item-label">用户ID</label>
<input
class="input-box"
type="text"
v-model="userID"
placeholder="请输入用户ID"
placeholder-style="color:#BBBBBB;"
/>
</view>
<view class="login"
><button class="loginBtn" @click="loginHandler">登录</button></view
>
</view>
</view>
</view>
</template>
<script setup>
import { ref,onMounted,getCurrentInstance } from "vue";
// 2. 获取组件实例,通过 proxy 访问全局属性
const { proxy } = getCurrentInstance()
import * as GenerateTestUserSig from "../../debug/GenerateTestUserSig-es.js";
import { CallManager } from "../../TUICallKit/src/TUICallService/serve/callManager";
let userID = ref("4");
let avatarUrl = ref(""); // 声明为响应式变量
uni.CallManager = new CallManager();
onMounted(() => {
uni.login({
provider: 'weixin',
success: function (loginRes) {
console.log('xx');
console.log(loginRes.code);
wxcode(loginRes.code)
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
withCredentials:true,
success: function (infoRes) {
avatarUrl.value = infoRes.userInfo.avatarUrl; // 使用 .value 赋值
console.log('头像URL:', avatarUrl.value);
console.log(infoRes.userInfo);
}
});
}
});
console.log('---------进入onMounted')
})
const wxcode = async (code) => {
try {
// 通过 proxy 调用全局的 apiUrl
const res = await proxy.apiUrl({
url: '/api/login/mnpLogin',
method: 'POST',
data: {
code: code
},
}, false) // 不显示加载中
} catch (err) {
uni.showToast({ title: '请求失败', icon: 'none' })
console.error(err)
}
}
const loginHandler = async () => {
// 从后端获取签名
const signatureData = await getSignatureFromServer(patientId.value);
console.log('获取签名成功:', signatureData);
const {userId } = signatureData;
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
userID: userId.value,
});
console.warn('--- ', SDKAppID);
getApp().globalData.userID = userId.value;
getApp().globalData.userSig = userSig;
getApp().globalData.SDKAppID = SDKAppID;
await uni.CallManager.init({
sdkAppID: SDKAppID, // 替换为用户自己的 sdkAppID
userID: userId.value, // 替换为用户自己的 userID
userSig: userSig, // 替换为用户自己的 userSig
globalCallPagePath: "TUICallKit/src/Components/TUICallKit", // 替换为步骤一里注册的全局监听页面
});
uni.navigateTo({
url: "./index",
});
};
// 从后端获取签名
const getSignatureFromServer = async (patientId) => {
return new Promise((resolve, reject) => {
uni.request({
url: 'https://api.zzzhengyangtang.cn/api/tcm/getPatientSignature', // 后端接口地址 // 替换为你的后端地址
method: 'GET',
data: {
patient_id: patientId
},
success: (res) => {
if (res.data && res.data.code === 1) {
resolve(res.data.data);
} else {
reject(new Error(res.data.msg || '获取签名失败'));
}
},
fail: (err) => {
reject(err);
}
});
});
};
</script>
<style scoped>
.container {
width: 100vw;
height: 100vh;
background-color: #f4f5f9;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.counter-warp {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.background-image {
width: 100%;
}
.header-content {
display: flex;
width: 100vw;
padding: 50px 20px 10px;
box-sizing: border-box;
top: 100rpx;
background-color: #000;
align-items: center;
}
.icon-box {
width: 56px;
height: 56px;
}
.text-header {
height: 72rpx;
font-size: 48rpx;
line-height: 72rpx;
color: #ffffff;
margin: 40px auto;
}
.text-content {
height: 36rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #ffffff;
}
.box {
width: 80%;
height: 50vh;
position: relative;
background: #ffffff;
border-radius: 4px;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: left;
padding: 30px 20px;
}
.input-box {
flex: 1;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
letter-spacing: 0;
}
.login {
display: flex;
box-sizing: border-box;
margin-top: 15px;
width: 100%;
}
.login button {
background: rgba(0, 110, 255, 1);
border-radius: 30px;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
/* text-align: center; */
font-weight: 500;
}
.loginBtn {
margin-top: 64px;
background-color: white;
border-radius: 24px;
border-radius: 24px;
/* display: flex;
justify-content: center; */
width: 100% !important;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
}
.list-item {
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #eef0f3;
}
.input-container {
width: 90%;
margin: 50px auto 0;
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #eef0f3;
}
/* .input-box {
height: 20px;
padding: 5px;
width: 100%;
border: 1px solid #999999;;
} */
.list-item .list-item-label {
font-weight: 500;
padding: 10px 0;
}
.guide-box {
width: 100vw;
box-sizing: border-box;
padding: 16px;
display: flex;
flex-direction: column;
}
.single-box {
flex: 1;
border-radius: 10px;
background-color: #ffffff;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.icon {
display: block;
width: 180px;
height: 144px;
}
.single-content {
padding: 36px 30px 36px 20px;
color: #333333;
}
.label {
display: block;
font-size: 18px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.desc {
display: block;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.logo-box {
position: absolute;
width: 100vw;
bottom: 36rpx;
text-align: center;
}
</style>
+578
View File
@@ -0,0 +1,578 @@
<template>
<view class="container">
<!-- 等待视频通话页面 - 老年人友好版 -->
<view class="waiting-container">
<view class="waiting-content">
<!-- 大号医生图标动画 -->
<view class="waiting-animation">
<view class="pulse-ring"></view>
<view class="pulse-ring delay-1"></view>
<view class="pulse-ring delay-2"></view>
<view class="doctor-icon">
<text class="icon-text">👨</text>
</view>
</view>
<!-- 超大标题 -->
<view class="waiting-title">正在等待医生</view>
<view class="waiting-subtitle">视频通话即将开始</view>
<!-- 简化的状态显示 -->
<!-- <view class="status-card">
<view class="status-icon"></view>
<view class="status-main-text">系统已准备好</view>
<view class="status-sub-text">请耐心等待医生接入</view>
</view> -->
<!-- 大字号提示卡片 -->
<view class="tips-card">
<view class="tips-header">
<text class="tips-icon">💡</text>
<text class="tips-header-text">温馨提示</text>
</view>
<view class="tips-list">
<view class="tips-item">
<text class="tips-number">1</text>
<text class="tips-text">请保持手机摄像头清洁</text>
</view>
<view class="tips-item">
<text class="tips-number">2</text>
<text class="tips-text">选择光线明亮的位置</text>
</view>
<view class="tips-item">
<text class="tips-number">3</text>
<text class="tips-text">保持环境安静</text>
</view>
</view>
</view>
<!-- 大号帮助按钮 -->
<view class="help-button">
<text class="help-text">需要帮助点击这里</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref,onMounted,getCurrentInstance} from "vue";
// 2. 获取组件实例,通过 proxy 访问全局属性
const { proxy } = getCurrentInstance()
import * as GenerateTestUserSig from "@/debug/GenerateTestUserSig-es.js";
import { CallManager } from "@/TUICallKit/src/TUICallService/serve/callManager";
let userID = ref("4");
let avatarUrl = ref(""); // 声明为响应式变量
uni.CallManager = new CallManager();
onMounted(() => {
uni.login({
provider: 'weixin',
success: function (loginRes) {
wxcode(loginRes.code)
// 获取用户信息
}
});
console.log('---------进入onMounted')
})
onShareAppMessage((res) =>{
// res.from 可判断分享触发方式:button(按钮触发)、menu(右上角菜单触发)
const shareSource = res.from;
// 自定义分享内容
return {
title: '视频问诊通话邀请', // 分享标题(必填)
path: '/pages/index/video', // 分享路径(必填,以 / 开头,可带参数)
imageUrl: '/static/share-img.png', // 分享图片(可选,建议尺寸 5:4,支持本地/网络图片)
desc: '自定义分享描述', // 小程序分享描述(仅在某些场景显示)
success() {
// 分享成功回调
uni.showToast({ title: '分享成功', icon: 'success' });
},
fail(err) {
// 分享失败回调
console.log('分享失败:', err);
uni.showToast({ title: '分享失败', icon: 'none' });
}
}
});
const wxcode = async (code) => {
try {
// 通过 proxy 调用全局的 apiUrl
const res = await proxy.apiUrl({
url: '/api/login/mnpLogin',
method: 'POST',
data: {
code: code
},
}, false) // 不显示加载中
loginHandler(res.data.diagnosis.patient_id)
} catch (err) {
uni.showToast({ title: '请求失败', icon: 'none' })
console.error(err)
}
}
const loginHandler = async (patient_id) => {
// 从后端获取签名
//const signatureData = await getSignatureFromServer(patient_id);
const res = await proxy.apiUrl({
url: '/api/tcm/getPatientSignature',
method: 'GET',
data: {
patient_id: patient_id ||patient
},
}, false)
const {userId } = res.data;
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
userID:userId,
});
console.log('获取签名成功:',userSig);
getApp().globalData.userID = userId.value;
getApp().globalData.userSig = userSig;
getApp().globalData.SDKAppID = SDKAppID;
await uni.CallManager.init({
sdkAppID: SDKAppID, // 替换为用户自己的 sdkAppID
userID: userId, // 替换为用户自己的 userID
userSig: userSig, // 替换为用户自己的 userSig
globalCallPagePath: "TUICallKit/src/Components/TUICallKit", // 替换为步骤一里注册的全局监听页面
});
// uni.navigateTo({
// url: "./index",
// });
};
</script>
<style scoped>
.container {
width: 100vw;
height: 100vh;
background-color: #f4f5f9;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.counter-warp {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.background-image {
width: 100%;
}
.header-content {
display: flex;
width: 100vw;
padding: 50px 20px 10px;
box-sizing: border-box;
top: 100rpx;
background-color: #000;
align-items: center;
}
.icon-box {
width: 56px;
height: 56px;
}
.text-header {
height: 72rpx;
font-size: 48rpx;
line-height: 72rpx;
color: #ffffff;
margin: 40px auto;
}
.text-content {
height: 36rpx;
font-size: 24rpx;
line-height: 36rpx;
color: #ffffff;
}
.box {
width: 80%;
height: 50vh;
position: relative;
background: #ffffff;
border-radius: 4px;
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: left;
padding: 30px 20px;
}
.input-box {
flex: 1;
display: flex;
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(0, 0, 0, 0.8);
letter-spacing: 0;
}
.login {
display: flex;
box-sizing: border-box;
margin-top: 15px;
width: 100%;
}
.login button {
background: rgba(0, 110, 255, 1);
border-radius: 30px;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
/* text-align: center; */
font-weight: 500;
}
.loginBtn {
margin-top: 64px;
background-color: white;
border-radius: 24px;
border-radius: 24px;
/* display: flex;
justify-content: center; */
width: 100% !important;
font-family: PingFangSC-Regular;
font-size: 16px;
color: #ffffff;
letter-spacing: 0;
}
.list-item {
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #eef0f3;
}
.input-container {
width: 90%;
margin: 50px auto 0;
display: flex;
flex-direction: column;
font-family: PingFangSC-Medium;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #eef0f3;
}
/* .input-box {
height: 20px;
padding: 5px;
width: 100%;
border: 1px solid #999999;;
} */
.list-item .list-item-label {
font-weight: 500;
padding: 10px 0;
}
.guide-box {
width: 100vw;
box-sizing: border-box;
padding: 16px;
display: flex;
flex-direction: column;
}
.single-box {
flex: 1;
border-radius: 10px;
background-color: #ffffff;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.icon {
display: block;
width: 180px;
height: 144px;
}
.single-content {
padding: 36px 30px 36px 20px;
color: #333333;
}
.label {
display: block;
font-size: 18px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.desc {
display: block;
font-size: 14px;
color: #333333;
letter-spacing: 0;
font-weight: 500;
}
.logo-box {
position: absolute;
width: 100vw;
bottom: 36rpx;
text-align: center;
}
/* ========== 老年人友好等待界面样式 ========== */
.waiting-container {
width: 100vw;
min-height: 100vh;
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
box-sizing: border-box;
}
.waiting-content {
width: 100%;
max-width: 700rpx;
display: flex;
flex-direction: column;
align-items: center;
}
/* 动画区域 - 更大更明显 */
.waiting-animation {
position: relative;
width: 280rpx;
height: 280rpx;
margin-bottom: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.pulse-ring {
position: absolute;
width: 100%;
height: 100%;
border: 6rpx solid #1890ff;
border-radius: 50%;
animation: pulse 2s ease-out infinite;
opacity: 0;
}
.pulse-ring.delay-1 {
animation-delay: 0.6s;
}
.pulse-ring.delay-2 {
animation-delay: 1.2s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
.doctor-icon {
width: 180rpx;
height: 180rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
z-index: 1;
}
.icon-text {
font-size: 100rpx;
line-height: 1;
}
/* 超大标题 - 老年人易读 */
.waiting-title {
font-size: 56rpx;
font-weight: bold;
color: #1890ff;
margin-bottom: 20rpx;
text-align: center;
line-height: 1.4;
}
.waiting-subtitle {
font-size: 40rpx;
color: #333333;
margin-bottom: 60rpx;
text-align: center;
line-height: 1.5;
}
/* 状态卡片 - 简洁明了 */
.status-card {
width: 100%;
background: #ffffff;
border-radius: 24rpx;
padding: 50rpx 40rpx;
margin-bottom: 40rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
border: 3rpx solid #52c41a;
}
.status-icon {
width: 80rpx;
height: 80rpx;
background: #52c41a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 50rpx;
color: #ffffff;
margin-bottom: 30rpx;
font-weight: bold;
}
.status-main-text {
font-size: 44rpx;
font-weight: bold;
color: #52c41a;
margin-bottom: 20rpx;
text-align: center;
}
.status-sub-text {
font-size: 36rpx;
color: #666666;
text-align: center;
line-height: 1.6;
}
/* 提示卡片 - 大字号清晰 */
.tips-card {
width: 100%;
background: #fffbe6;
border-radius: 24rpx;
padding: 40rpx;
margin-bottom: 40rpx;
border: 3rpx solid #fadb14;
}
.tips-header {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 20rpx;
border-bottom: 2rpx solid #ffd666;
}
.tips-icon {
font-size: 48rpx;
margin-right: 16rpx;
}
.tips-header-text {
font-size: 40rpx;
font-weight: bold;
color: #d48806;
}
.tips-list {
display: flex;
flex-direction: column;
gap: 30rpx;
}
.tips-item {
display: flex;
align-items: center;
padding: 24rpx;
background: #ffffff;
border-radius: 16rpx;
}
.tips-number {
width: 60rpx;
height: 60rpx;
background: #faad14;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: bold;
margin-right: 24rpx;
flex-shrink: 0;
}
.tips-text {
font-size: 36rpx;
color: #333333;
line-height: 1.6;
font-weight: 500;
}
/* 帮助按钮 - 大号易点击 */
.help-button {
width: 100%;
height: 100rpx;
background: #ffffff;
border: 3rpx solid #1890ff;
border-radius: 50rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.15);
margin-top: 20rpx;
}
.help-text {
font-size: 38rpx;
color: #1890ff;
font-weight: bold;
}
</style>
+181 -36
View File
@@ -1,6 +1,16 @@
<template>
<view class="container">
<view class="form-wrapper">
<view class="container">
<view v-if="!dingdan_ok">
<!-- 确认成功页面 -->
<view v-if="showSuccessPage" class="success-page">
<view class="success-icon"></view>
<view class="success-title">确认成功</view>
<view class="success-desc">诊单已确认感谢您的配合</view>
<button class="back-btn" @click="goBack">返回</button>
</view>
<!-- 诊单详情表单 -->
<view v-else class="form-wrapper">
<!-- 基本信息 -->
<view class="section">
<view class="section-title">基本信息</view>
@@ -189,6 +199,21 @@
<button class="confirm-btn" @click="handleConfirm">确认诊单</button>
</view>
</view>
<view v-else class="success-container">
<view class="success-content">
<view class="success-icon-wrapper">
<view class="success-icon-circle">
<text class="success-icon-check"></text>
</view>
</view>
<view class="success-title">确认成功</view>
<view class="success-message">诊单已确认感谢您的配合</view>
</view>
</view>
</view>
</template>
<script setup>
@@ -224,7 +249,7 @@ const formData = ref({
prescription: '',
doctor_advice: ''
});
let dingdan_ok=ref(false)
// 字典选项
const diagnosisTypeOptions = ref([]);
const syndromeTypeOptions = ref([]);
@@ -307,27 +332,52 @@ const getDictData = async (type) => {
}
};
// 解析页面参数(支持普通参数和scene参数)
const parsePageParams = (options) => {
const params = {};
// 如果有scene参数(扫码进入),解析scene
if (options.scene) {
try {
// URL解码scene参数
const decodedScene = decodeURIComponent(options.scene);
// 解析键值对:id=4&share_user=1
decodedScene.split('&').forEach(item => {
const [key, value] = item.split('=');
if (key && value) {
params[key] = value;
}
});
} catch (error) {
console.error('解析scene参数失败:', error);
}
}
// 合并普通参数(普通跳转进入)
Object.keys(options).forEach(key => {
if (key !== 'scene' && options[key]) {
params[key] = options[key];
}
});
// 获取当前登录用户ID(从本地存储或全局状态获取)
// TODO: 根据你的项目实际情况获取用户ID
// 例如: const userInfo = uni.getStorageSync('userInfo');
// params.user_id = userInfo?.id || 0;
return params;
};
// 加载诊单详情
const loadDiagnosisDetail = async () => {
// 从页面参数获取诊单ID
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
// 假设你的对象是 ai
const scene = currentPage.options.scene;
const params = parsePageParams(currentPage.options);
dingdan_ok.value=uni.getStorageSync('dingdan_ok');
const diagnosisId = params.id;
console.log('页面参数:', params, '诊单ID:', diagnosisId);
// 1. 先对 scene 进行 URL 解码
const decodedScene = decodeURIComponent(scene) ||currentPage.options;
// 得到 "id=4&share_user=1"
// 2. 解析成键值对对象
const params = {};
decodedScene.split('&').forEach(item => {
const [key, value] = item.split('=');
params[key] = value;
});
const diagnosisId = currentPage.options.id ||params.id|| 4;
console.log('nihhhhhh',pages,params,diagnosisId)
if (!diagnosisId) {
uni.showToast({ title: '缺少诊单ID', icon: 'none' });
return;
@@ -341,7 +391,9 @@ const loadDiagnosisDetail = async () => {
url: '/api/tcm/diagnosisDetail',
method: 'GET',
data: {
id: diagnosisId
id: diagnosisId,
user_id: params.user_id || 0,
share_user_id: params.share_user || 0
},
}, false); // 不显示加载中
@@ -469,25 +521,12 @@ const handleConfirm = () => {
// 提交确认诊单
const confirmDiagnosis = async () => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
// 假设你的对象是 ai
const scene = currentPage.options.scene;
const params = parsePageParams(currentPage.options);
// 1. 先对 scene 进行 URL 解码
const decodedScene = decodeURIComponent(scene);
// 得到 "id=4&share_user=1"
console.log('确认诊单参数:', params);
// 2. 解析成键值对对象
const params = {};
decodedScene.split('&').forEach(item => {
const [key, value] = item.split('=');
params[key] = value;
});
const diagnosisId = currentPage.options.id ||params.id|| 4;
console.log('nihhhhhh',pages,params,diagnosisId)
if (!params.id) {
uni.showToast({ title: '缺少诊单ID', icon: 'none' });
return;
@@ -503,16 +542,19 @@ const confirmDiagnosis = async () => {
method: 'POST',
data: {
id: params.id,
share_user: params.share_user
user_id: params.user_id || 0,
share_user: params.share_user || 0
}
}, false);
if (res.code === 1) {
uni.showToast({
title: '确认成功',
icon: 'success',
icon: 'none',
duration: 2000
});
uni.setStorageSync('dingdan_ok', true);
dingdan_ok.value=true;
setTimeout(() => {
uni.navigateBack();
}, 2000);
@@ -636,4 +678,107 @@ const confirmDiagnosis = async () => {
border: none;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}
/* 确认成功页面样式 */
.success-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40rpx;
}
.success-content {
width: 100%;
max-width: 600rpx;
background: #fff;
border-radius: 32rpx;
padding: 80rpx 40rpx 60rpx;
text-align: center;
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
animation: successFadeIn 0.5s ease-out;
}
@keyframes successFadeIn {
from {
opacity: 0;
transform: translateY(-40rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-icon-wrapper {
margin-bottom: 40rpx;
}
.success-icon-circle {
width: 160rpx;
height: 160rpx;
margin: 0 auto;
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12rpx 40rpx rgba(82, 196, 26, 0.3);
animation: successScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes successScale {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.success-icon-check {
font-size: 100rpx;
color: #fff;
font-weight: bold;
line-height: 1;
}
.success-title {
font-size: 48rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
animation: successSlideIn 0.6s ease-out 0.2s both;
}
@keyframes successSlideIn {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-message {
font-size: 28rpx;
color: #666;
line-height: 1.6;
margin-bottom: 16rpx;
animation: successSlideIn 0.6s ease-out 0.3s both;
}
.success-tips {
font-size: 24rpx;
color: #999;
animation: successSlideIn 0.6s ease-out 0.4s both;
}
</style>