438e17f093
- 移除 CustomTabBar 组件的 userRoleVO 属性，从全局状态获取用户角色信息 - 添加 roleSlug 状态管理用户角色切换逻辑 - 在页面底部添加微信小程序码展示和下载功能 - 增加快捷入口链接包括官网和管理后台 - 添加备案信息展示和底部版权信息 - 实现二维码和小程序码的下载及复制链接功能 - 更新应用版本号从 v0.0.58 到 v0.0.59 - 移除采购模块中多余的按钮样式类名 - 优化页面响应式布局和移动端适配样式
1243 lines
28 KiB
HTML
1243 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>新发雷盛西瓜管理系统</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
background: #f5f5f5;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
background: white;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0 0 10px 0;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.header p {
|
||
margin: 0;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.content-wrapper {
|
||
display: flex;
|
||
padding: 20px;
|
||
gap: 30px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
/* 左侧设备选择器 */
|
||
.device-selector {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
flex-shrink: 0;
|
||
width: 140px;
|
||
height: fit-content;
|
||
position: sticky;
|
||
top: 20px;
|
||
}
|
||
|
||
.device-selector-label {
|
||
font-weight: 600;
|
||
color: #495057;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #dee2e6;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.device-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.device-btn {
|
||
padding: 10px 12px;
|
||
border: 2px solid #dee2e6;
|
||
background: white;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #495057;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
text-align: center;
|
||
}
|
||
|
||
.device-btn:hover {
|
||
border-color: #667eea;
|
||
color: #667eea;
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
.device-btn.active {
|
||
background: #667eea;
|
||
border-color: #667eea;
|
||
color: white;
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.device-btn .device-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.device-btn span:last-child {
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 快捷入口样式 */
|
||
.quick-links {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
display: flex;
|
||
gap: 10px;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.quick-links-label {
|
||
display: none;
|
||
}
|
||
|
||
.link-btn {
|
||
padding: 10px 16px;
|
||
border: 2px solid;
|
||
background: white;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #495057;
|
||
transition: all 0.2s;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.link-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.link-btn svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.link-btn.admin {
|
||
border-color: #ffa940;
|
||
color: #d46b08;
|
||
}
|
||
|
||
.link-btn.admin:hover {
|
||
border-color: #fa8c16;
|
||
color: #fa8c16;
|
||
background: #fff7e6;
|
||
}
|
||
|
||
.link-btn.website {
|
||
border-color: #52c41a;
|
||
color: #389e0d;
|
||
}
|
||
|
||
.link-btn.website:hover {
|
||
border-color: #73d13d;
|
||
color: #52c41a;
|
||
background: #f6ffed;
|
||
}
|
||
|
||
/* 右侧内容区 */
|
||
.main-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 40px;
|
||
justify-content: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.frame-section {
|
||
flex: 1;
|
||
min-width: 400px;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.qrcode-section {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.qrcode-cards {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 通用设备框架样式 */
|
||
.frame-wrapper {
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: white;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||
margin: 0 auto;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* iPhone X */
|
||
.frame-wrapper.iphone-x {
|
||
width: 375px;
|
||
height: 812px;
|
||
border: 12px solid #333;
|
||
border-radius: 40px;
|
||
}
|
||
|
||
.frame-wrapper.iphone-x:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60%;
|
||
height: 25px;
|
||
background: #333;
|
||
border-bottom-left-radius: 15px;
|
||
border-bottom-right-radius: 15px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.frame-wrapper.iphone-x:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 134px;
|
||
height: 5px;
|
||
background: #333;
|
||
border-radius: 3px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* iPhone 14 Pro Max */
|
||
.frame-wrapper.iphone-14-pro {
|
||
width: 430px;
|
||
height: 932px;
|
||
border: 8px solid #1c1c1e;
|
||
border-radius: 55px;
|
||
}
|
||
|
||
.frame-wrapper.iphone-14-pro:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 140px;
|
||
height: 35px;
|
||
background: #1c1c1e;
|
||
border-radius: 20px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.frame-wrapper.iphone-14-pro:after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 134px;
|
||
height: 5px;
|
||
background: #333;
|
||
border-radius: 3px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* Samsung Galaxy S21 */
|
||
.frame-wrapper.galaxy-s21 {
|
||
width: 384px;
|
||
height: 854px;
|
||
border: 10px solid #1a1a1a;
|
||
border-radius: 32px;
|
||
}
|
||
|
||
.frame-wrapper.galaxy-s21:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #1a1a1a;
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* iPad */
|
||
.frame-wrapper.ipad {
|
||
width: 768px;
|
||
height: 1024px;
|
||
border: 18px solid #b4b4b4;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.frame-wrapper.ipad:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #333;
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* iPad Pro 11 */
|
||
.frame-wrapper.ipad-pro {
|
||
width: 834px;
|
||
height: 1194px;
|
||
border: 14px solid #b4b4b4;
|
||
border-radius: 18px;
|
||
}
|
||
|
||
/* Android 通用 */
|
||
.frame-wrapper.android {
|
||
width: 360px;
|
||
height: 760px;
|
||
border: 10px solid #2c2c2c;
|
||
border-radius: 24px;
|
||
}
|
||
|
||
.frame-wrapper.android:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 60px;
|
||
height: 8px;
|
||
background: #2c2c2c;
|
||
border-radius: 4px;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 屏幕容器 */
|
||
.frame-wrapper .screen-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
|
||
.frame-wrapper.iphone-x .screen-container,
|
||
.frame-wrapper.iphone-14-pro .screen-container,
|
||
.frame-wrapper.galaxy-s21 .screen-container,
|
||
.frame-wrapper.android .screen-container {
|
||
border-radius: 28px;
|
||
}
|
||
|
||
.frame-wrapper.ipad .screen-container,
|
||
.frame-wrapper.ipad-pro .screen-container {
|
||
border-radius: 12px;
|
||
}
|
||
|
||
iframe {
|
||
width: 100%;
|
||
height: calc(100% - 84px); /* 减去TabBar高度 */
|
||
border: none;
|
||
}
|
||
|
||
/* 顶部TabBar */
|
||
.tabbar {
|
||
height: 50px;
|
||
background: rgba(248, 248, 248, 0.95);
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
z-index: 20;
|
||
}
|
||
|
||
.tabbar-time {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #000;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.tabbar-icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: #000;
|
||
}
|
||
|
||
/* 底部安全区域占位 */
|
||
.safe-area-bottom {
|
||
height: 34px;
|
||
background: transparent;
|
||
z-index: 5;
|
||
}
|
||
|
||
.qrcode-container {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
/* 微信小程序码容器 */
|
||
.miniprogram-container {
|
||
background: white;
|
||
padding: 25px;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.miniprogram-qrcode {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 15px auto;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #f8f9fa;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.miniprogram-qrcode img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.miniprogram-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.miniprogram-wechat-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
background: #07c160;
|
||
border-radius: 4px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.miniprogram-wechat-icon svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: white;
|
||
}
|
||
|
||
.miniprogram-desc {
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.miniprogram-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
color: #07c160;
|
||
font-size: 13px;
|
||
background: #f0fdf4;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.miniprogram-tips svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
fill: #07c160;
|
||
}
|
||
|
||
#qrcode {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: 15px auto;
|
||
padding: 10px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.qrcode-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.qrcode-desc {
|
||
color: #666;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
margin-bottom: 20px;
|
||
max-width: 300px;
|
||
}
|
||
|
||
.url-display {
|
||
background: #f8f9fa;
|
||
padding: 12px 15px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: #555;
|
||
word-break: break-all;
|
||
margin-top: 15px;
|
||
border: 1px solid #e9ecef;
|
||
max-width: 300px;
|
||
position: relative;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.action-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
background: #667eea;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: #5568d3;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.action-btn:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.action-btn svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.action-btn.secondary {
|
||
background: #07c160;
|
||
box-shadow: 0 2px 4px rgba(7, 193, 96, 0.2);
|
||
}
|
||
|
||
.action-btn.secondary:hover {
|
||
background: #06ad56;
|
||
box-shadow: 0 4px 8px rgba(7, 193, 96, 0.3);
|
||
}
|
||
|
||
.mobile-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mobile-tips svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
fill: #667eea;
|
||
}
|
||
|
||
.tips {
|
||
padding: 20px;
|
||
text-align: center;
|
||
color: #666;
|
||
font-size: 14px;
|
||
background: #f8f9fa;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.content-wrapper {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.device-selector {
|
||
width: 100%;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
position: static;
|
||
}
|
||
|
||
.device-buttons {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.device-btn {
|
||
flex-direction: row;
|
||
padding: 8px 16px;
|
||
}
|
||
|
||
.device-btn:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.device-btn.active {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.device-btn .device-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.device-btn span:last-child {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.main-content {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.frame-section, .qrcode-section {
|
||
min-width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.qrcode-section {
|
||
order: -1;
|
||
}
|
||
|
||
.qrcode-cards {
|
||
gap: 15px;
|
||
}
|
||
|
||
.qrcode-cards {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.quick-links {
|
||
top: 10px;
|
||
right: 10px;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.link-btn {
|
||
padding: 8px 12px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.link-btn svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.icp-info {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.icp-link {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.icp-divider {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* 设备信息提示 */
|
||
.device-info {
|
||
text-align: center;
|
||
padding: 10px;
|
||
color: #666;
|
||
font-size: 13px;
|
||
background: #f8f9fa;
|
||
border-radius: 6px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.device-info .device-size {
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
/* 备案信息样式 */
|
||
.footer-icp {
|
||
background: white;
|
||
border-top: 1px solid #e9ecef;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.icp-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.icp-link {
|
||
color: #666;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.icp-link:hover {
|
||
color: #667eea;
|
||
}
|
||
|
||
.icp-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
fill: currentColor;
|
||
}
|
||
|
||
.icp-divider {
|
||
color: #ddd;
|
||
margin: 0 10px;
|
||
}
|
||
</style>
|
||
<script src="qrcode.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<!-- 快捷入口 - 右上角固定 -->
|
||
<div class="quick-links">
|
||
<a href="https://www.qilincloud168.com" target="_blank" class="link-btn website">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
||
</svg>
|
||
<span>官网</span>
|
||
</a>
|
||
<a href="https://operation.erp.qilincloud168.com" target="_blank" class="link-btn admin">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||
</svg>
|
||
<span>管理后台</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="content-wrapper">
|
||
<!-- 左侧设备选择器 -->
|
||
<div class="device-selector">
|
||
<span class="device-selector-label">📱 设备</span>
|
||
<div class="device-buttons">
|
||
<button class="device-btn active" data-device="iphone-x">
|
||
<span class="device-icon">📱</span>
|
||
<span>iPhone X</span>
|
||
</button>
|
||
<button class="device-btn" data-device="iphone-14-pro">
|
||
<span class="device-icon">📲</span>
|
||
<span>iPhone 14 Pro</span>
|
||
</button>
|
||
<button class="device-btn" data-device="galaxy-s21">
|
||
<span class="device-icon">🤖</span>
|
||
<span>Galaxy S21</span>
|
||
</button>
|
||
<button class="device-btn" data-device="android">
|
||
<span class="device-icon">📱</span>
|
||
<span>Android</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容区 -->
|
||
<div class="main-content">
|
||
<div class="frame-section">
|
||
<div class="frame-wrapper iphone-x" id="device-frame">
|
||
<div class="screen-container">
|
||
<!-- 顶部TabBar -->
|
||
<div class="tabbar">
|
||
<div class="tabbar-time" id="current-time">9:41
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- iframe内容区域 -->
|
||
<iframe id="mobile-frame" src="/"
|
||
title="移动端页面"></iframe>
|
||
|
||
<!-- 底部安全区域占位 -->
|
||
<div class="safe-area-bottom"></div>
|
||
</div>
|
||
</div>
|
||
<div class="device-info">
|
||
当前设备: <span class="device-size" id="device-name">iPhone X (375×812)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="qrcode-section">
|
||
<div class="qrcode-cards">
|
||
<!-- 页面预览二维码 -->
|
||
<div class="qrcode-container">
|
||
<div class="qrcode-title">手机扫码预览</div>
|
||
<div class="qrcode-desc">
|
||
使用手机扫描下方二维码,可直接在手机上访问此页面,获得真实的移动端体验
|
||
</div>
|
||
|
||
<div id="qrcode"></div>
|
||
|
||
<div class="action-buttons">
|
||
<button class="action-btn"
|
||
onclick="downloadQRCode()">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||
</svg>
|
||
下载二维码
|
||
</button>
|
||
|
||
<button class="action-btn copy-btn1"
|
||
onclick="copyURL('.copy-btn1', window.location.href)">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||
</svg>
|
||
复制链接
|
||
</button>
|
||
</div>
|
||
|
||
<div class="url-display" id="current-url">
|
||
</div>
|
||
|
||
<div class="mobile-tips">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/>
|
||
</svg>
|
||
<span>建议使用手机扫描体验最佳效果</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 微信小程序码 -->
|
||
<div class="miniprogram-container">
|
||
<div class="miniprogram-title">
|
||
<div class="miniprogram-wechat-icon">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z"/>
|
||
</svg>
|
||
</div>
|
||
微信小程序
|
||
</div>
|
||
<div class="miniprogram-desc">
|
||
扫描下方二维码,在微信中打开小程序体验完整功能
|
||
</div>
|
||
|
||
<div class="miniprogram-qrcode">
|
||
<img id="miniprogram-img"
|
||
src="/miniprogram-qrcode.png"
|
||
alt="微信小程序码"
|
||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 200 200\'%3E%3Crect fill=\'%23f0f0f0\' width=\'200\' height=\'200\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'16\' fill=\'%23999\'%3E小程序码%3C/text%3E%3C/svg%3E'">
|
||
</div>
|
||
|
||
<div class="action-buttons">
|
||
<button class="action-btn secondary"
|
||
onclick="downloadMiniprogramQRCode()">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
||
</svg>
|
||
下载小程序码
|
||
</button>
|
||
|
||
<button class="action-btn secondary copy-btn2"
|
||
onclick="copyURL('.copy-btn2', '#小程序://新发雷盛西瓜系统/p8R1aNG62GyAwwB')">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||
</svg>
|
||
复制链接
|
||
</button>
|
||
</div>
|
||
|
||
<div class="url-display">
|
||
#小程序://新发雷盛西瓜系统/p8R1aNG62GyAwwB
|
||
</div>
|
||
|
||
<div class="miniprogram-tips">
|
||
<svg viewBox="0 0 24 24">
|
||
<path
|
||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||
</svg>
|
||
<span>推荐在微信中使用小程序</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部备案信息 -->
|
||
<footer class="footer-icp">
|
||
<div class="icp-info">
|
||
<div>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">
|
||
<svg class="icp-icon" viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
|
||
</svg>
|
||
京ICP备2025148100号
|
||
</a>
|
||
<span class="icp-divider">|</span>
|
||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010602201978" target="_blank" class="icp-link">
|
||
<svg class="icp-icon" viewBox="0 0 24 24">
|
||
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
|
||
</svg>
|
||
京公网安备11010602201978号
|
||
</a>
|
||
</div>
|
||
<div style="font-size: 12px; color: #999;">
|
||
© 2025 新发雷盛西瓜管理系统 版权所有
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
// 设备配置信息
|
||
const deviceConfigs = {
|
||
'iphone-x': {
|
||
name: 'iPhone X',
|
||
size: '375×812',
|
||
className: 'iphone-x'
|
||
},
|
||
'iphone-14-pro': {
|
||
name: 'iPhone 14 Pro Max',
|
||
size: '430×932',
|
||
className: 'iphone-14-pro'
|
||
},
|
||
'galaxy-s21': {
|
||
name: 'Samsung Galaxy S21',
|
||
size: '384×854',
|
||
className: 'galaxy-s21'
|
||
},
|
||
'android': {
|
||
name: 'Android (通用)',
|
||
size: '360×760',
|
||
className: 'android'
|
||
},
|
||
};
|
||
|
||
// 当前选择的设备
|
||
let currentDevice = 'iphone-x';
|
||
|
||
// 切换设备
|
||
function switchDevice(deviceId) {
|
||
const frame = document.getElementById('device-frame');
|
||
const deviceName = document.getElementById('device-name');
|
||
const config = deviceConfigs[deviceId];
|
||
|
||
// 移除所有设备类名
|
||
frame.className = 'frame-wrapper';
|
||
|
||
// 添加新设备类名
|
||
frame.classList.add(config.className);
|
||
|
||
// 更新设备信息显示
|
||
deviceName.textContent = `${config.name} (${config.size})`;
|
||
|
||
// 保存到localStorage
|
||
localStorage.setItem('previewDevice', deviceId);
|
||
|
||
// 更新按钮状态
|
||
document.querySelectorAll('.device-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
if (btn.dataset.device === deviceId) {
|
||
btn.classList.add('active');
|
||
}
|
||
});
|
||
|
||
currentDevice = deviceId;
|
||
}
|
||
|
||
// 初始化设备选择器
|
||
function initDeviceSelector() {
|
||
// 从localStorage读取上次选择的设备
|
||
const savedDevice = localStorage.getItem('previewDevice');
|
||
if (savedDevice && deviceConfigs[savedDevice]) {
|
||
switchDevice(savedDevice);
|
||
}
|
||
|
||
// 绑定按钮点击事件
|
||
document.querySelectorAll('.device-btn').forEach(btn => {
|
||
btn.addEventListener('click', function () {
|
||
const deviceId = this.dataset.device;
|
||
switchDevice(deviceId);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 更新当前时间
|
||
function updateCurrentTime() {
|
||
const now = new Date();
|
||
const hours = now.getHours().toString().padStart(2, '0');
|
||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||
document.getElementById('current-time').textContent = `${hours}:${minutes}`;
|
||
}
|
||
|
||
// 获取当前页面URL
|
||
function getCurrentUrl() {
|
||
// 如果 $request_uri 是占位符，则使用实际URL
|
||
let iframeSrc = document.getElementById('mobile-frame').src;
|
||
if (iframeSrc.includes('$request_uri')) {
|
||
// 使用当前页面URL（去掉预览页面的路径）
|
||
let currentUrl = window.location.href;
|
||
// 移除预览页面的查询参数或路径
|
||
return currentUrl.split('?')[0].replace(/\/preview\/?$/, '');
|
||
}
|
||
return iframeSrc;
|
||
}
|
||
|
||
// 生成二维码
|
||
function generateQRCode() {
|
||
const url = getCurrentUrl();
|
||
const qrcodeElement = document.getElementById('qrcode');
|
||
const urlDisplay = document.getElementById('current-url');
|
||
|
||
// 显示URL
|
||
urlDisplay.textContent = url.length > 50 ? url.substring(0, 50) + '...' : url;
|
||
|
||
// 清空之前的二维码
|
||
qrcodeElement.innerHTML = '';
|
||
|
||
// 生成当前页面的二维码
|
||
new QRCode(document.getElementById('qrcode'), {
|
||
text: window.location.href,
|
||
width: 200,
|
||
height: 200,
|
||
margin: 1,
|
||
color: {
|
||
dark: '#333333',
|
||
light: '#ffffff'
|
||
}
|
||
});
|
||
}
|
||
|
||
// 处理iframe内部链接
|
||
var iframe = document.getElementById("mobile-frame");
|
||
iframe.onload = function () {
|
||
try {
|
||
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||
var links = iframeDoc.querySelectorAll("a");
|
||
links.forEach(function (link) {
|
||
link.onclick = function (e) {
|
||
e.preventDefault();
|
||
var href = this.getAttribute("href");
|
||
if (href && !href.match(/^(http|https|#|javascript:)/)) {
|
||
iframe.src = href;
|
||
// 更新二维码
|
||
setTimeout(generateQRCode, 100);
|
||
}
|
||
};
|
||
});
|
||
} catch (e) {
|
||
// 跨域限制
|
||
}
|
||
|
||
// 每次iframe加载后更新二维码
|
||
generateQRCode();
|
||
};
|
||
|
||
// 页面加载时初始化
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 初始化设备选择器
|
||
initDeviceSelector();
|
||
|
||
// 更新时间
|
||
updateCurrentTime();
|
||
setInterval(updateCurrentTime, 60000); // 每分钟更新一次
|
||
|
||
// 生成二维码
|
||
generateQRCode();
|
||
});
|
||
|
||
// 监听URL变化（如果使用History API）
|
||
window.addEventListener('popstate', generateQRCode);
|
||
|
||
// 复制URL功能
|
||
function copyURL(className, url) {
|
||
const copyBtn = document.querySelector(className);
|
||
|
||
// 使用 Clipboard API
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(url).then(function () {
|
||
// 复制成功
|
||
showCopySuccess(copyBtn);
|
||
}).catch(function () {
|
||
// 如果失败，使用备用方法
|
||
fallbackCopyTextToClipboard(url, copyBtn);
|
||
});
|
||
} else {
|
||
// 使用备用方法
|
||
fallbackCopyTextToClipboard(url, copyBtn);
|
||
}
|
||
}
|
||
|
||
// 备用复制方法
|
||
function fallbackCopyTextToClipboard(text, button) {
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = text;
|
||
textArea.style.position = 'fixed';
|
||
textArea.style.top = '0';
|
||
textArea.style.left = '0';
|
||
textArea.style.width = '2em';
|
||
textArea.style.height = '2em';
|
||
textArea.style.padding = '0';
|
||
textArea.style.border = 'none';
|
||
textArea.style.outline = 'none';
|
||
textArea.style.boxShadow = 'none';
|
||
textArea.style.background = 'transparent';
|
||
document.body.appendChild(textArea);
|
||
textArea.focus();
|
||
textArea.select();
|
||
|
||
try {
|
||
const successful = document.execCommand('copy');
|
||
if (successful) {
|
||
showCopySuccess(button);
|
||
}
|
||
} catch (err) {
|
||
console.error('复制失败:', err);
|
||
}
|
||
|
||
document.body.removeChild(textArea);
|
||
}
|
||
|
||
// 显示复制成功状态
|
||
function showCopySuccess(button) {
|
||
const originalHTML = button.innerHTML;
|
||
button.classList.add('copied');
|
||
button.innerHTML = '<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg><span>已复制</span>';
|
||
|
||
setTimeout(function () {
|
||
button.classList.remove('copied');
|
||
button.innerHTML = originalHTML;
|
||
}, 2000);
|
||
}
|
||
|
||
// 下载二维码功能
|
||
function downloadQRCode() {
|
||
const qrcodeElement = document.getElementById('qrcode');
|
||
const canvas = qrcodeElement.querySelector('canvas');
|
||
|
||
if (canvas) {
|
||
// 将canvas转换为图片
|
||
const imageURL = canvas.toDataURL('image/png');
|
||
|
||
// 创建下载链接
|
||
const link = document.createElement('a');
|
||
link.href = imageURL;
|
||
link.download = 'qrcode-' + Date.now() + '.png';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
} else {
|
||
// 如果没有canvas，查找img元素
|
||
const img = qrcodeElement.querySelector('img');
|
||
if (img && img.src) {
|
||
const link = document.createElement('a');
|
||
link.href = img.src;
|
||
link.download = 'qrcode-' + Date.now() + '.png';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
} else {
|
||
alert('二维码生成中，请稍后再试');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 下载小程序码功能
|
||
function downloadMiniprogramQRCode() {
|
||
const miniprogramImg = document.getElementById('miniprogram-img');
|
||
|
||
if (miniprogramImg && miniprogramImg.src) {
|
||
// 创建下载链接
|
||
const link = document.createElement('a');
|
||
link.href = miniprogramImg.src;
|
||
link.download = 'miniprogram-qrcode.png';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
} else {
|
||
alert('小程序码加载中，请稍后再试');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|