CY
/
mcwl-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(mcwl-admin): 绑定页面的移动设备适配

master
yang 2025-03-07 18:51:43 +08:00
parent a5c21b391b
commit 864002567b
2 changed files with 92 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
mcwl-admin/src/main/resources/templates/binding-fail.html
View File

@ -2,10 +2,56 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- 添加视口元标签，确保在移动设备上正确缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>绑定失败</title> <title>绑定失败</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
/* 防止在小屏幕上出现水平滚动条 */
overflow-x: hidden;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 400px;
/* 为小屏幕设备减少内边距 */
box-sizing: border-box;
}
h1 {
color: #ff6b6b;
font-size: clamp(20px, 5vw, 24px);
/* 使用 clamp 函数动态调整字体大小 */
margin-bottom: 10px;
}
p {
color: #555;
font-size: clamp(14px, 4vw, 16px);
/* 使用 clamp 函数动态调整字体大小 */
margin-top: 0;
}
/* 当屏幕宽度小于 320px 时进一步调整样式 */
@media (max-width: 320px) {
.container {
padding: 15px;
}
}
</style>
</head> </head>
<body> <body>
<h1>支付宝账号绑定失败！</h1> <div class="container">
<p>请检查您的网络或稍后重试。</p> <h1>支付宝账号绑定失败！</h1>
<p>请检查您的网络或稍后重试。</p>
</div>
</body> </body>
</html> </html>

46
mcwl-admin/src/main/resources/templates/binding-success.html
View File

@ -2,10 +2,52 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- 确保页面在移动设备上正确缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定成功</title> <title>绑定成功</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow-x: hidden;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 90%;
max-width: 400px;
box-sizing: border-box;
}
h1 {
color: #28a745;
font-size: clamp(20px, 5vw, 24px);
margin-bottom: 10px;
}
p {
color: #555;
font-size: clamp(14px, 4vw, 16px);
margin-top: 0;
}
/* 小屏幕适配 */
@media (max-width: 320px) {
.container {
padding: 15px;
}
}
</style>
</head> </head>
<body> <body>
<h1>支付宝账号绑定成功！</h1> <div class="container">
<p>您可以返回用户中心继续操作。</p> <h1>支付宝账号绑定成功！</h1>
<p>您可以返回用户中心继续操作。</p>
</div>
</body> </body>
</html> </html>