|
|
@@ -1,31 +1,232 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
+<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
<meta name="viewport"
|
|
|
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
- <title>app下载</title>
|
|
|
+ <title>花宝APP下载中心</title>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 40px 30px;
|
|
|
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
|
+ max-width: 500px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header h1 {
|
|
|
+ color: #333;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header p {
|
|
|
+ color: #666;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-item {
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 25px 15px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 2px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-item:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
|
+ border-color: #3385FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: #3385FF;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 0 auto 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn {
|
|
|
+ display: inline-block;
|
|
|
+ background: #3385FF;
|
|
|
+ color: white;
|
|
|
+ text-decoration: none;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 25px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn:hover {
|
|
|
+ background: #2a6bcc;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-btn:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ margin-top: 30px;
|
|
|
+ padding-top: 20px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer p {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .container {
|
|
|
+ padding: 30px 20px;
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-grid {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<div style="text-align:center;margin-top:100px;">
|
|
|
- <a style="margin:0 auto;display:inline-block;border:none;padding:8px 15px;border-radius:16px;color:white;background-color:#3385FF;text-decoration:none"
|
|
|
- >销花宝APP</a>
|
|
|
-</div>
|
|
|
-
|
|
|
-<div style="text-align:center;margin-top:30px;">
|
|
|
- <a style="margin:0 auto;display:inline-block;border:none;padding:8px 15px;border-radius:16px;color:white;background-color:#3385FF;text-decoration:none"
|
|
|
- >花掌柜APP</a>
|
|
|
-</div>
|
|
|
-<div style="text-align:center;margin-top:30px;">
|
|
|
- <a style="margin:0 auto;display:inline-block;border:none;padding:8px 15px;border-radius:16px;color:white;background-color:#3385FF;text-decoration:none"
|
|
|
-
|
|
|
- >花掌柜收银</a>
|
|
|
-</div>
|
|
|
-<div style="text-align:center;margin-top:30px;">
|
|
|
- <a style="margin:0 auto;display:inline-block;border:none;padding:8px 15px;border-radius:16px;color:white;background-color:#3385FF;text-decoration:none"
|
|
|
-
|
|
|
- >销花宝收银</a>
|
|
|
-</div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="header">
|
|
|
+ <h1>花宝APP下载中心</h1>
|
|
|
+ <p>选择适合您的应用，开启花艺经营之旅</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-grid">
|
|
|
+ <div class="app-item">
|
|
|
+ <div class="app-icon">销</div>
|
|
|
+ <div class="app-name">销花宝APP</div>
|
|
|
+ <div class="app-desc">批发端供货商系统</div>
|
|
|
+ <a href="#" class="download-btn" onclick="downloadApp('xiaohuabao')">立即下载</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-item">
|
|
|
+ <div class="app-icon">花</div>
|
|
|
+ <div class="app-name">花掌柜APP</div>
|
|
|
+ <div class="app-desc">零售端花店系统</div>
|
|
|
+ <a href="#" class="download-btn" onclick="downloadApp('huazhanggui')">立即下载</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-item">
|
|
|
+ <div class="app-icon">收</div>
|
|
|
+ <div class="app-name">花掌柜收银</div>
|
|
|
+ <div class="app-desc">花店收银管理</div>
|
|
|
+ <a href="#" class="download-btn" onclick="downloadApp('huazhanggui_cashier')">立即下载</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="app-item">
|
|
|
+ <div class="app-icon">银</div>
|
|
|
+ <div class="app-name">销花宝收银</div>
|
|
|
+ <div class="app-desc">批发收银管理</div>
|
|
|
+ <a href="#" class="download-btn" onclick="downloadApp('xiaohuabao_cashier')">立即下载</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer">
|
|
|
+ <p>如有问题，请联系客服：400-xxx-xxxx</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ function downloadApp(appType) {
|
|
|
+ // 这里可以根据appType跳转到对应的下载链接
|
|
|
+ const downloadUrls = {
|
|
|
+ 'xiaohuabao': '#', // 销花宝APP下载链接
|
|
|
+ 'huazhanggui': '#', // 花掌柜APP下载链接
|
|
|
+ 'huazhanggui_cashier': '#', // 花掌柜收银下载链接
|
|
|
+ 'xiaohuabao_cashier': '#' // 销花宝收银下载链接
|
|
|
+ };
|
|
|
+
|
|
|
+ const url = downloadUrls[appType];
|
|
|
+ if (url && url !== '#') {
|
|
|
+ window.open(url, '_blank');
|
|
|
+ } else {
|
|
|
+ alert('下载链接暂未配置，请联系管理员');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检测设备类型，提供相应的下载建议
|
|
|
+ function detectDevice() {
|
|
|
+ const userAgent = navigator.userAgent;
|
|
|
+ const isIOS = /iPad|iPhone|iPod/.test(userAgent);
|
|
|
+ const isAndroid = /Android/.test(userAgent);
|
|
|
+
|
|
|
+ if (isIOS) {
|
|
|
+ console.log('检测到iOS设备，建议从App Store下载');
|
|
|
+ } else if (isAndroid) {
|
|
|
+ console.log('检测到Android设备，建议从应用商店或官网下载');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 页面加载完成后执行
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
+ detectDevice();
|
|
|
+ });
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
