Accueil Explorer Aide
S'inscrire Connexion
yujiahui
/
yujiahui-kaiti
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

fix: spce warp

yujiahui il y a 10 mois
commit
a2566977ea
6 fichiers modifiés avec 2305 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 591 0
      APP/home1.html
  2. 544 0
      APP/homepage.html
  3. 0 0
      APP/hpme2.html
  4. 441 0
      APP/message.html
  5. 478 0
      APP/mypage.html
  6. 251 0
      REDAME.md

+ 591 - 0
APP/home1.html
Voir le fichier 

@@ -0,0 +1,591 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <title>AI客服</title>
 
+    <!-- 使用国内CDN的Bootstrap Icons -->
 
+    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f5f5;
 
+            color: #333;
 
+            font-size: 14px;
 
+            line-height: 1.5;
 
+            max-width: 100vw;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        .container {
 
+            width: 100%;
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+            background-color: #fff;
 
+            min-height: 100vh;
 
+            position: relative;
 
+            padding-bottom: 60px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        /* 状态栏 */
 
+        .status-bar {
 
+            height: 44px;
 
+            background-color: #fff;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            position: relative;
 
+            border-bottom: 1px solid #eee;
 
+            flex-shrink: 0;
 
+        }
 
+        
+        .status-bar .title {
 
+            font-size: 17px;
 
+            font-weight: 600;
 
+            color: #000;
 
+        }
 
+        
+        .status-bar .action {
 
+            position: absolute;
 
+            right: 15px;
 
+            color: #3478f6;
 
+            font-size: 15px;
 
+        }
 
+        
+        /* AI客服主内容区 */
 
+        .ai-chat-container {
 
+            flex: 1;
 
+            display: flex;
 
+            flex-direction: column;
 
+            overflow: hidden;
 
+            position: relative;
 
+        }
 
+        
+        /* 聊天记录区域 */
 
+        .chat-messages {
 
+            flex: 1;
 
+            overflow-y: auto;
 
+            padding: 15px;
 
+            background-color: #f9f9f9;
 
+            -webkit-overflow-scrolling: touch;
 
+        }
 
+        
+        /* 消息气泡 */
 
+        .message {
 
+            max-width: 80%;
 
+            margin-bottom: 15px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        .message-ai {
 
+            align-self: flex-start;
 
+        }
 
+        
+        .message-user {
 
+            align-self: flex-end;
 
+        }
 
+        
+        .message-bubble {
 
+            padding: 12px 15px;
 
+            border-radius: 18px;
 
+            position: relative;
 
+            word-break: break-word;
 
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .message-ai .message-bubble {
 
+            background-color: #fff;
 
+            border-bottom-left-radius: 4px;
 
+            color: #333;
 
+            margin-left: 10px;
 
+        }
 
+        
+        .message-user .message-bubble {
 
+            background-color: #3478f6;
 
+            border-bottom-right-radius: 4px;
 
+            color: #fff;
 
+            margin-right: 10px;
 
+        }
 
+        
+        .message-time {
 
+            font-size: 11px;
 
+            color: #999;
 
+            margin-top: 5px;
 
+            text-align: center;
 
+        }
 
+        
+        .message-avatar {
 
+            width: 32px;
 
+            height: 32px;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background-color: #f0f0f0;
 
+            color: #999;
 
+            font-size: 16px;
 
+            flex-shrink: 0;
 
+        }
 
+        
+        .message-ai .message-content {
 
+            display: flex;
 
+            align-items: flex-start;
 
+        }
 
+        
+        .message-user .message-content {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: flex-end;
 
+        }
 
+        
+        /* 输入区域 */
 
+        .input-area {
 
+            padding: 10px 15px;
 
+            background-color: #fff;
 
+            border-top: 1px solid #eee;
 
+            display: flex;
 
+            align-items: center;
 
+            flex-shrink: 0;
 
+        }
 
+        
+        .input-box {
 
+            flex: 1;
 
+            border: 1px solid #ddd;
 
+            border-radius: 20px;
 
+            padding: 8px 15px;
 
+            font-size: 14px;
 
+            outline: none;
 
+            resize: none;
 
+            max-height: 100px;
 
+            line-height: 1.4;
 
+        }
 
+        
+        .send-btn {
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 50%;
 
+            background-color: #3478f6;
 
+            color: #fff;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-left: 10px;
 
+            border: none;
 
+            outline: none;
 
+        }
 
+        
+        /* 快捷问题 */
 
+        .quick-questions {
 
+            padding: 10px 15px;
 
+            background-color: #fff;
 
+            border-top: 1px solid #eee;
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            flex-shrink: 0;
 
+        }
 
+        
+        .quick-question {
 
+            padding: 8px 12px;
 
+            background-color: #f5f5f5;
 
+            border-radius: 15px;
 
+            margin: 5px;
 
+            font-size: 13px;
 
+            color: #333;
 
+        }
 
+        
+        /* AI客服欢迎卡片 */
 
+        .ai-welcome-card {
 
+            background-color: #fff;
 
+            border-radius: 12px;
 
+            padding: 15px;
 
+            margin-bottom: 15px;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .ai-welcome-header {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        .ai-avatar {
 
+            width: 44px;
 
+            height: 44px;
 
+            border-radius: 50%;
 
+            background-color: #e3f2fd;
 
+            color: #1976d2;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 20px;
 
+            margin-right: 10px;
 
+        }
 
+        
+        .ai-name {
 
+            font-weight: 600;
 
+            font-size: 16px;
 
+        }
 
+        
+        .ai-status {
 
+            font-size: 12px;
 
+            color: #4caf50;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .ai-status-dot {
 
+            width: 8px;
 
+            height: 8px;
 
+            border-radius: 50%;
 
+            background-color: #4caf50;
 
+            margin-right: 5px;
 
+        }
 
+        
+        .ai-welcome-text {
 
+            color: #666;
 
+            line-height: 1.5;
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        /* 底部导航栏 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: white;
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 8px 0;
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+            z-index: 100;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            color: #666;
 
+            text-decoration: none;
 
+            font-size: 12px;
 
+            position: relative;
 
+        }
 
+        
+        .nav-icon {
 
+            font-size: 22px;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .nav-item.active {
 
+            color: #1971c2;
 
+        }
 
+        
+        /* 加载动画 */
 
+        .typing-indicator {
 
+            display: flex;
 
+            padding: 10px 15px;
 
+            background-color: #fff;
 
+            border-radius: 18px;
 
+            margin-left: 10px;
 
+            align-self: flex-start;
 
+        }
 
+        
+        .typing-dot {
 
+            width: 8px;
 
+            height: 8px;
 
+            background-color: #ccc;
 
+            border-radius: 50%;
 
+            margin: 0 2px;
 
+            animation: typingAnimation 1.4s infinite ease-in-out;
 
+        }
 
+        
+        .typing-dot:nth-child(1) {
 
+            animation-delay: 0s;
 
+        }
 
+        
+        .typing-dot:nth-child(2) {
 
+            animation-delay: 0.2s;
 
+        }
 
+        
+        .typing-dot:nth-child(3) {
 
+            animation-delay: 0.4s;
 
+        }
 
+        
+        @keyframes typingAnimation {
 
+            0%, 60%, 100% {
 
+                transform: translateY(0);
 
+            }
 
+            30% {
 
+                transform: translateY(-5px);
 
+            }
 
+        }
 
+        
+        /* 时间分隔线 */
 
+        .time-divider {
 
+            display: flex;
 
+            align-items: center;
 
+            margin: 15px 0;
 
+            color: #999;
 
+            font-size: 12px;
 
+        }
 
+        
+        .time-divider::before,
 
+        .time-divider::after {
 
+            content: "";
 
+            flex: 1;
 
+            height: 1px;
 
+            background-color: #eee;
 
+            margin: 0 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 状态栏 -->
 
+        <div class="status-bar">
 
+            <div class="title">AI客服</div>
 
+            <div class="action"><i class="bi bi-headset"></i></div>
 
+        </div>
 
+        
+        <!-- AI客服主内容区 -->
 
+        <div class="ai-chat-container">
 
+            <div class="chat-messages">
 
+                <!-- AI欢迎卡片 -->
 
+                <div class="ai-welcome-card">
 
+                    <div class="ai-welcome-header">
 
+                        <div class="ai-avatar">
 
+                            <i class="bi bi-robot"></i>
 
+                        </div>
 
+                        <div>
 
+                            <div class="ai-name">旅行AI助手</div>
 
+                            <div class="ai-status">
 
+                                <span class="ai-status-dot"></span>
 
+                                在线
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="ai-welcome-text">
 
+                        您好！我是您的旅行AI助手，可以为您解答旅行相关问题，包括景点推荐、行程规划、酒店预订等。请问有什么可以帮您的吗？
 
+                    </div>
 
+                </div>
 
+                
+                <!-- 时间分隔线 -->
 
+                <div class="time-divider">
 
+                    今天
 
+                </div>
 
+                
+                <!-- AI消息 -->
 
+                <div class="message message-ai">
 
+                    <div class="message-content">
 
+                        <div class="message-avatar">
 
+                            <i class="bi bi-robot"></i>
 
+                        </div>
 
+                        <div class="message-bubble">
 
+                            您好！为了更好的帮助您，请告诉我您计划去哪里旅行？
 
+                        </div>
 
+                    </div>
 
+                    <div class="message-time">10:30</div>
 
+                </div>
 
+                
+                <!-- 用户消息 -->
 
+                <div class="message message-user">
 
+                    <div class="message-content">
 
+                        <div class="message-bubble">
 
+                            我想去北京玩3天，有什么推荐吗？
 
+                        </div>
 
+                    </div>
 
+                    <div class="message-time">10:32</div>
 
+                </div>
 
+                
+                <!-- AI回复 -->
 
+                <div class="message message-ai">
 
+                    <div class="message-content">
 
+                        <div class="message-avatar">
 
+                            <i class="bi bi-robot"></i>
 
+                        </div>
 
+                        <div class="message-bubble">
 
+                            北京3日游推荐行程：<br><br>
 
+                            <strong>第一天</strong>：天安门广场 → 故宫 → 景山公园<br>
 
+                            <strong>第二天</strong>：颐和园 → 圆明园<br>
 
+                            <strong>第三天</strong>：八达岭长城 → 798艺术区<br><br>
 
+                            需要我为您详细介绍某个景点或预订门票吗？
 
+                        </div>
 
+                    </div>
 
+                    <div class="message-time">10:33</div>
 
+                </div>
 
+                
+                <!-- AI正在输入指示器 -->
 
+                <div class="message message-ai">
 
+                    <div class="message-content">
 
+                        <div class="message-avatar">
 
+                            <i class="bi bi-robot"></i>
 
+                        </div>
 
+                        <div class="typing-indicator">
 
+                            <div class="typing-dot"></div>
 
+                            <div class="typing-dot"></div>
 
+                            <div class="typing-dot"></div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 快捷问题 -->
 
+            <div class="quick-questions">
 
+                <div class="quick-question">北京必去景点</div>
 
+                <div class="quick-question">3天行程推荐</div>
 
+                <div class="quick-question">特色美食推荐</div>
 
+                <div class="quick-question">交通指南</div>
 
+            </div>
 
+            
+            <!-- 输入区域 -->
 
+            <div class="input-area">
 
+                <textarea class="input-box" placeholder="输入您的问题..." rows="1"></textarea>
 
+                <button class="send-btn">
 
+                    <i class="bi bi-send-fill"></i>
 
+                </button>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 底部导航栏 -->
 
+        <div class="bottom-nav">
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-house-door nav-icon"></i>
 
+                <span>首页</span>
 
+            </a>
 
+            <a href="#" class="nav-item active">
 
+                <i class="bi bi-robot nav-icon"></i>
 
+                <span>客服</span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-chat-dots nav-icon"></i>
 
+                <span>消息</span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-person nav-icon"></i>
 
+                <span>我的</span>
 
+            </a>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            const inputBox = document.querySelector('.input-box');
 
+            const sendBtn = document.querySelector('.send-btn');
 
+            const chatMessages = document.querySelector('.chat-messages');
 
+            const quickQuestions = document.querySelectorAll('.quick-question');
 
+            
+            // 自动调整输入框高度
 
+            inputBox.addEventListener('input', function() {
 
+                this.style.height = 'auto';
 
+                this.style.height = (this.scrollHeight) + 'px';
 
+            });
 
+            
+            // 发送消息
 
+            function sendMessage() {
 
+                const messageText = inputBox.value.trim();
 
+                if (messageText === '') return;
 
+                
+                // 添加用户消息
 
+                const now = new Date();
 
+                const timeString = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes();
 
+                
+                const userMessage = document.createElement('div');
 
+                userMessage.className = 'message message-user';
 
+                userMessage.innerHTML = `
 
+                    <div class="message-content">
 
+                        <div class="message-bubble">${messageText}</div>
 
+                    </div>
 
+                    <div class="message-time">${timeString}</div>
 
+                `;
 
+                
+                chatMessages.appendChild(userMessage);
 
+                inputBox.value = '';
 
+                inputBox.style.height = 'auto';
 
+                
+                // 滚动到底部
 
+                chatMessages.scrollTop = chatMessages.scrollHeight;
 
+                
+                // 模拟AI回复
 
+                setTimeout(() => {
 
+                    const typingIndicator = document.querySelector('.typing-indicator');
 
+                    if (typingIndicator) typingIndicator.remove();
 
+                    
+                    const aiResponses = [
 
+                        "我明白了，您对北京3日游感兴趣。需要我为您预订酒店吗？",
 
+                        "北京的美食推荐：全聚德烤鸭、东来顺涮肉、炸酱面、豆汁儿等。",
 
+                        "您可以选择地铁出行，北京地铁覆盖主要景点，非常方便。",
 
+                        "需要我为您规划更详细的行程安排吗？"
 
+                    ];
 
+                    
+                    const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
 
+                    
+                    const aiMessage = document.createElement('div');
 
+                    aiMessage.className = 'message message-ai';
 
+                    aiMessage.innerHTML = `
 
+                        <div class="message-content">
 
+                            <div class="message-avatar">
 
+                                <i class="bi bi-robot"></i>
 
+                            </div>
 
+                            <div class="message-bubble">${randomResponse}</div>
 
+                        </div>
 
+                        <div class="message-time">${timeString}</div>
 
+                    `;
 
+                    
+                    chatMessages.appendChild(aiMessage);
 
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
 
+                    
+                    // 添加正在输入指示器
 
+                    setTimeout(() => {
 
+                        const typingIndicator = document.createElement('div');
 
+                        typingIndicator.className = 'message message-ai';
 
+                        typingIndicator.innerHTML = `
 
+                            <div class="message-content">
 
+                                <div class="message-avatar">
 
+                                    <i class="bi bi-robot"></i>
 
+                                </div>
 
+                                <div class="typing-indicator">
 
+                                    <div class="typing-dot"></div>
 
+                                    <div class="typing-dot"></div>
 
+                                    <div class="typing-dot"></div>
 
+                                </div>
 
+                            </div>
 
+                        `;
 
+                        chatMessages.appendChild(typingIndicator);
 
+                        chatMessages.scrollTop = chatMessages.scrollHeight;
 
+                    }, 1000);
 
+                }, 1000);
 
+            }
 
+            
+            // 点击发送按钮
 
+            sendBtn.addEventListener('click', sendMessage);
 
+            
+            // 按Enter键发送
 
+            inputBox.addEventListener('keypress', function(e) {
 
+                if (e.key === 'Enter' && !e.shiftKey) {
 
+                    e.preventDefault();
 
+                    sendMessage();
 
+                }
 
+            });
 
+            
+            // 快捷问题点击
 
+            quickQuestions.forEach(question => {
 
+                question.addEventListener('click', function() {
 
+                    inputBox.value = this.textContent;
 
+                    inputBox.focus();
 
+                });
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 544 - 0
APP/homepage.html
Voir le fichier 

@@ -0,0 +1,544 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <title>旅行指南 - 发现美好旅程</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
 
+    <style>
 
+        /* 全局样式重置 */
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f5f5;
 
+            color: #333;
 
+            font-size: 14px;
 
+            line-height: 1.5;
 
+            -webkit-font-smoothing: antialiased;
 
+            max-width: 100vw;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        /* 布局容器 */
 
+        .container {
 
+            width: 100%;
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+            background-color: #fff;
 
+            min-height: 100vh;
 
+            position: relative;
 
+            padding-bottom: 60px;
 
+        }
 
+        
+        /* 顶部搜索栏 */
 
+        .search-bar {
 
+            position: sticky;
 
+            top: 0;
 
+            z-index: 100;
 
+            background-color: #fff;
 
+            padding: 10px 15px;
 
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            align-items: center;
 
+            background-color: #f7f7f7;
 
+            border-radius: 20px;
 
+            padding: 8px 15px;
 
+        }
 
+        
+        .search-icon {
 
+            color: #999;
 
+            margin-right: 8px;
 
+            font-size: 16px;
 
+        }
 
+        
+        .search-input {
 
+            flex: 1;
 
+            border: none;
 
+            background: transparent;
 
+            font-size: 14px;
 
+            color: #333;
 
+            outline: none;
 
+        }
 
+        
+        .search-input::placeholder {
 
+            color: #999;
 
+        }
 
+        
+        /* 热门搜索标签 */
 
+        .search-tags {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            margin-top: 10px;
 
+        }
 
+        
+        .search-tag {
 
+            background-color: #f7f7f7;
 
+            border-radius: 15px;
 
+            padding: 5px 12px;
 
+            margin-right: 8px;
 
+            margin-bottom: 8px;
 
+            font-size: 12px;
 
+            color: #666;
 
+        }
 
+        
+        .search-tag.highlight {
 
+            color: #3478F6;
 
+        }
 
+        
+        /* 分类入口 */
 
+        .category-section {
 
+            padding: 15px;
 
+        }
 
+        
+        .section-title {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .section-title h2 {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .section-title .more {
 
+            font-size: 12px;
 
+            color: #999;
 
+        }
 
+        
+        .category-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(4, 1fr);
 
+            gap: 10px;
 
+        }
 
+        
+        .category-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+        }
 
+        
+        .category-icon {
 
+            width: 40px;
 
+            height: 40px;
 
+            background-color: #f7f7f7;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-bottom: 8px;
 
+            color: #495057;
 
+            font-size: 18px;
 
+        }
 
+        
+        .category-name {
 
+            font-size: 12px;
 
+            color: #333;
 
+            text-align: center;
 
+        }
 
+        
+        /* 轮播图 */
 
+        .banner-container {
 
+            padding: 0 15px;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .banner {
 
+            width: 100%;
 
+            height: 120px;
 
+            border-radius: 8px;
 
+            overflow: hidden;
 
+            background-color: #eee;
 
+            position: relative;
 
+        }
 
+        
+        .banner img {
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+        
+        .banner-dots {
 
+            position: absolute;
 
+            bottom: 10px;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            display: flex;
 
+        }
 
+        
+        .banner-dot {
 
+            width: 6px;
 
+            height: 6px;
 
+            border-radius: 50%;
 
+            background-color: rgba(255, 255, 255, 0.5);
 
+            margin: 0 3px;
 
+        }
 
+        
+        .banner-dot.active {
 
+            background-color: #fff;
 
+        }
 
+        
+        /* 推荐内容 */
 
+        .recommend-section {
 
+            padding: 0 15px;
 
+        }
 
+        
+        .recommend-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .recommend-title {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .recommend-subtitle {
 
+            font-size: 12px;
 
+            color: #3478F6;
 
+        }
 
+        
+        .recommend-grid {
 
+            display: grid;
 
+            grid-template-columns: 1fr 1fr;
 
+            gap: 10px;
 
+        }
 
+        
+        .recommend-item {
 
+            background-color: #fff;
 
+            border-radius: 8px;
 
+            overflow: hidden;
 
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .recommend-image {
 
+            width: 100%;
 
+            height: 120px;
 
+            position: relative;
 
+        }
 
+        
+        .recommend-image img {
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+        
+        .video-tag {
 
+            position: absolute;
 
+            top: 8px;
 
+            right: 8px;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            color: #fff;
 
+            border-radius: 10px;
 
+            padding: 2px 6px;
 
+            font-size: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .video-tag i {
 
+            margin-right: 2px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .recommend-content {
 
+            padding: 10px;
 
+        }
 
+        
+        .recommend-title {
 
+            font-size: 14px;
 
+            font-weight: normal;
 
+            margin-bottom: 8px;
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 2;
 
+            -webkit-box-orient: vertical;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            height: 40px;
 
+        }
 
+        
+        .recommend-footer {
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 12px;
 
+            color: #999;
 
+        }
 
+        
+        .user-avatar {
 
+            width: 20px;
 
+            height: 20px;
 
+            border-radius: 50%;
 
+            margin-right: 5px;
 
+        }
 
+        
+        .user-name {
 
+            margin-right: auto;
 
+        }
 
+        
+        .like-count {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .like-count i {
 
+            margin-right: 2px;
 
+        }
 
+        
+        /* 登录提示 */
 
+        .login-prompt {
 
+            margin: 20px 15px;
 
+            padding: 15px;
 
+            background-color: #f7f7f7;
 
+            border-radius: 8px;
 
+            text-align: center;
 
+            color: #666;
 
+        }
 
+        
+        .login-btn {
 
+            display: inline-block;
 
+            margin-top: 10px;
 
+            padding: 8px 20px;
 
+            background-color: #3478F6;
 
+            color: #fff;
 
+            border-radius: 20px;
 
+            font-size: 14px;
 
+            text-decoration: none;
 
+        }
 
+        
+        /* 底部导航栏 - 使用"我的"页面样式 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: white;
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 8px 0;
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            color: #666;
 
+            text-decoration: none;
 
+            font-size: 12px;
 
+            position: relative;
 
+        }
 
+        
+        .nav-icon {
 
+            font-size: 22px;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .nav-item.active {
 
+            color: #1971c2;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 顶部搜索栏 -->
 
+        <div class="search-bar">
 
+            <div class="search-box">
 
+                <i class="bi bi-search search-icon"></i>
 
+                <input type="text" class="search-input" placeholder="搜索目的地/景点">
 
+            </div>
 
+            <div class="search-tags">
 
+                <span class="search-tag">北京</span>
 
+                <span class="search-tag">故宫</span>
 
+                <span class="search-tag highlight">景山公园</span>
 
+                <span class="search-tag">天安门</span>
 
+                <span class="search-tag">温泉</span>
 
+                <span class="search-tag">世界杯</span>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 分类入口 -->
 
+        <div class="category-section">
 
+            <div class="section-title">
 
+                <h2>热门分类</h2>
 
+                <span class="more">全部</span>
 
+            </div>
 
+            <div class="category-grid">
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-people-fill"></i>
 
+                    </div>
 
+                    <span class="category-name">亲子游</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-book-half"></i>
 
+                    </div>
 
+                    <span class="category-name">文化游</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-thermometer-sun"></i>
 
+                    </div>
 
+                    <span class="category-name">温泉游</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-geo-alt"></i>
 
+                    </div>
 
+                    <span class="category-name">周边游</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-map"></i>
 
+                    </div>
 
+                    <span class="category-name">旅游地图</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-building"></i>
 
+                    </div>
 
+                    <span class="category-name">酒店民宿</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-bus-front"></i>
 
+                    </div>
 
+                    <span class="category-name">汽车票</span>
 
+                </div>
 
+                <div class="category-item">
 
+                    <div class="category-icon">
 
+                        <i class="bi bi-airplane"></i>
 
+                    </div>
 
+                    <span class="category-name">飞机票</span>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 轮播图 -->
 
+        <div class="banner-container">
 
+            <div class="banner">
 
+                <img src="https://p1-q.mafengwo.net/s13/M00/3E/1E/wKgEaVyLc8eAe0V5AAJViQxQH1o45.jpeg" alt="旅游推荐">
 
+                <div class="banner-dots">
 
+                    <div class="banner-dot active"></div>
 
+                    <div class="banner-dot"></div>
 
+                    <div class="banner-dot"></div>
 
+                    <div class="banner-dot"></div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 推荐内容 -->
 
+        <div class="recommend-section">
 
+            <div class="recommend-header">
 
+                <h2 class="recommend-title">为你推荐</h2>
 
+                <span class="recommend-subtitle">带你玩遍 <span style="color: #3478F6;">北京市</span></span>
 
+            </div>
 
+            <div class="recommend-grid">
 
+                <div class="recommend-item">
 
+                    <div class="recommend-image">
 
+                        <img src="https://p1-q.mafengwo.net/s13/M00/3E/1E/wKgEaVyLc8eAe0V5AAJViQxQH1o45.jpeg" alt="推荐内容">
 
+                    </div>
 
+                    <div class="recommend-content">
 
+                        <h3 class="recommend-title">和家人果断在北京续住3天的神仙小院</h3>
 
+                        <div class="recommend-footer">
 
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" class="user-avatar">
 
+                            <span class="user-name">晚风心里吹</span>
 
+                            <span class="like-count">
 
+                                <i class="bi bi-heart-fill"></i> 1.9万
 
+                            </span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="recommend-item">
 
+                    <div class="recommend-image">
 
+                        <img src="https://p1-q.mafengwo.net/s13/M00/3E/1E/wKgEaVyLc8eAe0V5AAJViQxQH1o45.jpeg" alt="推荐内容">
 
+                        <div class="video-tag">
 
+                            <i class="bi bi-play-fill"></i> 视频
 
+                        </div>
 
+                    </div>
 
+                    <div class="recommend-content">
 
+                        <h3 class="recommend-title">北京海拔2000米的木栈道帝都最高观景平台</h3>
 
+                        <div class="recommend-footer">
 
+                            <img src="https://randomuser.me/api/portraits/women/22.jpg" class="user-avatar">
 
+                            <span class="user-name">美腻的猫</span>
 
+                            <span class="like-count">
 
+                                <i class="bi bi-heart-fill"></i> 2.1万
 
+                            </span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="recommend-item">
 
+                    <div class="recommend-image">
 
+                        <img src="https://p1-q.mafengwo.net/s13/M00/3E/1E/wKgEaVyLc8eAe0V5AAJViQxQH1o45.jpeg" alt="推荐内容">
 
+                    </div>
 
+                    <div class="recommend-content">
 
+                        <h3 class="recommend-title">北京郊区大自然山景私汤山酒店</h3>
 
+                        <div class="recommend-footer">
 
+                            <img src="https://randomuser.me/api/portraits/women/33.jpg" class="user-avatar">
 
+                            <span class="user-name">美美在旅行</span>
 
+                            <span class="like-count">
 
+                                <i class="bi bi-heart-fill"></i> 1.1万
 
+                            </span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="recommend-item">
 
+                    <div class="recommend-image">
 
+                        <img src="https://p1-q.mafengwo.net/s13/M00/3E/1E/wKgEaVyLc8eAe0V5AAJViQxQH1o45.jpeg" alt="推荐内容">
 
+                    </div>
 
+                    <div class="recommend-content">
 
+                        <h3 class="recommend-title">北京周末去哪，找到了人少景美的仙境了！</h3>
 
+                        <div class="recommend-footer">
 
+                            <img src="https://randomuser.me/api/portraits/women/44.jpg" class="user-avatar">
 
+                            <span class="user-name">晚风心里吹</span>
 
+                            <span class="like-count">
 
+                                <i class="bi bi-heart-fill"></i> 2.1万
 
+                            </span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 登录提示 -->
 
+        <div class="login-prompt">
 
+            <p>登录查看更多精彩内容</p>
 
+            <a href="#" class="login-btn">立即登录</a>
 
+        </div>
 
+        
+        <!-- 底部导航栏 - 使用"我的"页面样式 -->
 
+        <div class="bottom-nav">
 
+            <a href="#" class="nav-item active" >
 
+                <i class="bi bi-house-door nav-icon"></i>
 
+                <span>首页</span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-robot nav-icon"></i>
 
+                <span>客服</span>
 
+            </a>
 
+            <a href="#" class="nav-item ">
 
+                <i class="bi bi-chat-dots nav-icon"></i>
 
+                <span>消息</span>
 
+                <span style="position: absolute; top: 2px; right: 20px; background-color: red; width: 8px; height: 8px; border-radius: 50%;"></span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-person nav-icon"></i>
 
+                <span>我的</span>
 
+            </a>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 0 - 0
APP/hpme2.html
Voir le fichier


+ 441 - 0
APP/message.html
Voir le fichier 

@@ -0,0 +1,441 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <title>消息</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f5f5;
 
+            color: #333;
 
+            font-size: 14px;
 
+            line-height: 1.5;
 
+            max-width: 100vw;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        .container {
 
+            width: 100%;
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+            background-color: #fff;
 
+            min-height: 100vh;
 
+            position: relative;
 
+            padding-bottom: 60px;
 
+        }
 
+        
+        /* 状态栏 */
 
+        .status-bar {
 
+            height: 44px;
 
+            background-color: #fff;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            position: relative;
 
+            border-bottom: 1px solid #eee;
 
+        }
 
+        
+        .status-bar .title {
 
+            font-size: 17px;
 
+            font-weight: 600;
 
+            color: #000;
 
+        }
 
+        
+        .status-bar .action {
 
+            position: absolute;
 
+            right: 15px;
 
+            color: #3478f6;
 
+            font-size: 15px;
 
+        }
 
+        
+        /* 消息列表 */
 
+        .message-list {
 
+            flex: 1;
 
+            overflow-y: auto;
 
+            -webkit-overflow-scrolling: touch;
 
+            padding-bottom: 60px;
 
+        }
 
+        
+        .message-item {
 
+            display: flex;
 
+            padding: 12px 15px;
 
+            background-color: #fff;
 
+            border-bottom: 1px solid #f0f0f0;
 
+            position: relative;
 
+        }
 
+        
+        .message-item.unread {
 
+            background-color: #f9f9f9;
 
+        }
 
+        
+        .message-avatar {
 
+            width: 44px;
 
+            height: 44px;
 
+            border-radius: 6px;
 
+            margin-right: 12px;
 
+            flex-shrink: 0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background-color: #f0f0f0;
 
+            color: #999;
 
+            font-size: 20px;
 
+        }
 
+        
+        .message-content {
 
+            flex: 1;
 
+            min-width: 0;
 
+        }
 
+        
+        .message-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .message-sender {
 
+            font-weight: 600;
 
+            font-size: 16px;
 
+            color: #333;
 
+            white-space: nowrap;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            max-width: 60%;
 
+        }
 
+        
+        .message-time {
 
+            font-size: 12px;
 
+            color: #999;
 
+        }
 
+        
+        .message-preview {
 
+            font-size: 14px;
 
+            color: #666;
 
+            white-space: nowrap;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+        }
 
+        
+        .unread-badge {
 
+            position: absolute;
 
+            right: 15px;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            width: 8px;
 
+            height: 8px;
 
+            border-radius: 50%;
 
+            background-color: #f44336;
 
+        }
 
+        
+        .official-tag {
 
+            display: inline-block;
 
+            padding: 1px 4px;
 
+            background-color: #3478f6;
 
+            color: #fff;
 
+            border-radius: 2px;
 
+            font-size: 10px;
 
+            margin-left: 4px;
 
+            transform: translateY(-1px);
 
+        }
 
+        
+        /* 底部导航栏 - 使用"我的"页面样式 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: white;
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 8px 0;
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            color: #666;
 
+            text-decoration: none;
 
+            font-size: 12px;
 
+        }
 
+        
+        .nav-icon {
 
+            font-size: 22px;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .nav-item.active {
 
+            color: #1971c2;
 
+        }
 
+        
+        /* 弹窗 */
 
+        .modal {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 1000;
 
+            display: none;
 
+        }
 
+        
+        .modal-content {
 
+            background-color: #fff;
 
+            width: 80%;
 
+            max-width: 300px;
 
+            border-radius: 12px;
 
+            overflow: hidden;
 
+            animation: modalFadeIn 0.3s;
 
+        }
 
+        
+        .modal-body {
 
+            padding: 20px;
 
+            text-align: center;
 
+            font-size: 16px;
 
+            line-height: 1.4;
 
+        }
 
+        
+        .modal-footer {
 
+            display: flex;
 
+            border-top: 1px solid #eee;
 
+        }
 
+        
+        .modal-button {
 
+            flex: 1;
 
+            padding: 12px;
 
+            text-align: center;
 
+            color: #666;
 
+            font-size: 16px;
 
+        }
 
+        
+        .modal-button.primary {
 
+            color: #3478f6;
 
+            font-weight: 600;
 
+            border-left: 1px solid #eee;
 
+        }
 
+        
+        @keyframes modalFadeIn {
 
+            from {
 
+                opacity: 0;
 
+                transform: translateY(20px);
 
+            }
 
+            to {
 
+                opacity: 1;
 
+                transform: translateY(0);
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 状态栏 -->
 
+        <div class="status-bar">
 
+            <div class="title">消息</div>
 
+            <div class="action" id="markAllRead">全部已读</div>
 
+        </div>
 
+        
+        <!-- 消息列表 -->
 
+        <div class="message-list">
 
+            <!-- 订单消息 -->
 
+            <div class="message-item unread" data-id="1">
 
+                <div class="message-avatar">
 
+                    <i class="bi bi-receipt"></i>
 
+                </div>
 
+                <div class="message-content">
 
+                    <div class="message-header">
 
+                        <div class="message-sender">订单消息</div>
 
+                        <div class="message-time">3分钟前</div>
 
+                    </div>
 
+                    <div class="message-preview">你的订单已完结</div>
 
+                </div>
 
+                <div class="unread-badge"></div>
 
+            </div>
 
+            
+            <!-- 互动消息 -->
 
+            <div class="message-item unread" data-id="2">
 
+                <div class="message-avatar">
 
+                    <i class="bi bi-chat-left-text"></i>
 
+                </div>
 
+                <div class="message-content">
 
+                    <div class="message-header">
 
+                        <div class="message-sender">互动消息</div>
 
+                        <div class="message-time">5小时前</div>
 
+                    </div>
 
+                    <div class="message-preview">@用户1008600评论了你的内容</div>
 
+                </div>
 
+                <div class="unread-badge"></div>
 
+            </div>
 
+            
+            <!-- 系统消息 -->
 
+            <div class="message-item unread" data-id="3">
 
+                <div class="message-avatar">
 
+                    <i class="bi bi-gear"></i>
 
+                </div>
 
+                <div class="message-content">
 
+                    <div class="message-header">
 
+                        <div class="message-sender">系统消息 <span class="official-tag">官方</span></div>
 
+                        <div class="message-time">23小时前</div>
 
+                    </div>
 
+                    <div class="message-preview">你提交的个人信息审核通过</div>
 
+                </div>
 
+                <div class="unread-badge"></div>
 
+            </div>
 
+            
+            <!-- 用户消息1 -->
 
+            <div class="message-item unread" data-id="4">
 
+                <div class="message-avatar">
 
+                    <i class="bi bi-person"></i>
 
+                </div>
 
+                <div class="message-content">
 
+                    <div class="message-header">
 
+                        <div class="message-sender">果汁分你一半</div>
 
+                        <div class="message-time">2天前</div>
 
+                    </div>
 
+                    <div class="message-preview">[游记消息]</div>
 
+                </div>
 
+                <div class="unread-badge"></div>
 
+            </div>
 
+            
+            <!-- 用户消息2 -->
 
+            <div class="message-item" data-id="5">
 
+                <div class="message-avatar">
 
+                    <i class="bi bi-person"></i>
 
+                </div>
 
+                <div class="message-content">
 
+                    <div class="message-header">
 
+                        <div class="message-sender">飞来飞去</div>
 
+                        <div class="message-time">1周前</div>
 
+                    </div>
 
+                    <div class="message-preview">老炮来北京玩啊~</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 底部导航栏 - 使用"我的"页面样式 -->
 
+        <div class="bottom-nav">
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-house-door nav-icon"></i>
 
+                <span>首页</span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-robot nav-icon"></i>
 
+                <span>客服</span>
 
+            </a>
 
+            <a href="#" class="nav-item active">
 
+                <i class="bi bi-chat-dots nav-icon"></i>
 
+                <span>消息</span>
 
+                <span style="position: absolute; top: 2px; right: 20px; background-color: red; width: 8px; height: 8px; border-radius: 50%;"></span>
 
+            </a>
 
+            <a href="#" class="nav-item">
 
+                <i class="bi bi-person nav-icon"></i>
 
+                <span>我的</span>
 
+            </a>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 全部已读弹窗 -->
 
+    <div class="modal" id="confirmModal">
 
+        <div class="modal-content">
 
+            <div class="modal-body">
 
+                标记所有消息为已读？
 
+            </div>
 
+            <div class="modal-footer">
 
+                <div class="modal-button" id="cancelBtn">取消</div>
 
+                <div class="modal-button primary" id="confirmBtn">确定</div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 点击消息项
 
+            const messageItems = document.querySelectorAll('.message-item');
 
+            messageItems.forEach(item => {
 
+                item.addEventListener('click', function() {
 
+                    if (this.classList.contains('unread')) {
 
+                        this.classList.remove('unread');
 
+                        const badge = this.querySelector('.unread-badge');
 
+                        if (badge) badge.remove();
 
+                        
+                        // 检查是否还有未读消息
 
+                        updateUnreadStatus();
 
+                    }
 
+                    // 这里可以添加跳转到具体消息详情的逻辑
 
+                });
 
+            });
 
+            
+            // 全部已读按钮
 
+            const markAllReadBtn = document.getElementById('markAllRead');
 
+            const confirmModal = document.getElementById('confirmModal');
 
+            const cancelBtn = document.getElementById('cancelBtn');
 
+            const confirmBtn = document.getElementById('confirmBtn');
 
+            
+            markAllReadBtn.addEventListener('click', function() {
 
+                confirmModal.style.display = 'flex';
 
+            });
 
+            
+            cancelBtn.addEventListener('click', function() {
 
+                confirmModal.style.display = 'none';
 
+            });
 
+            
+            confirmBtn.addEventListener('click', function() {
 
+                // 移除所有未读标记
 
+                document.querySelectorAll('.message-item.unread').forEach(item => {
 
+                    item.classList.remove('unread');
 
+                    const badge = item.querySelector('.unread-badge');
 
+                    if (badge) badge.remove();
 
+                });
 
+                
+                // 更新未读状态
 
+                updateUnreadStatus();
 
+                
+                confirmModal.style.display = 'none';
 
+            });
 
+            
+            // 点击模态框外部关闭
 
+            confirmModal.addEventListener('click', function(e) {
 
+                if (e.target === this) {
 
+                    this.style.display = 'none';
 
+                }
 
+            });
 
+            
+            // 更新未读状态
 
+            function updateUnreadStatus() {
 
+                const unreadCount = document.querySelectorAll('.message-item.unread').length;
 
+                const navBadge = document.querySelector('.nav-item.active span[style]');
 
+                
+                if (unreadCount === 0 && navBadge) {
 
+                    navBadge.remove();
 
+                } else if (unreadCount > 0 && !navBadge) {
 
+                    // 如果还有未读消息但底部导航没有红点，则添加红点
 
+                    const navMessage = document.querySelector('.nav-item.active');
 
+                    const badge = document.createElement('span');
 
+                    badge.style.position = 'absolute';
 
+                    badge.style.top = '2px';
 
+                    badge.style.right = '20px';
 
+                    badge.style.backgroundColor = 'red';
 
+                    badge.style.width = '8px';
 
+                    badge.style.height = '8px';
 
+                    badge.style.borderRadius = '50%';
 
+                    navMessage.appendChild(badge);
 
+                }
 
+            }
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 478 - 0
APP/mypage.html
Voir le fichier 

@@ -0,0 +1,478 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+    <title>我的 - 已登录</title>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f5f5;
 
+            color: #333;
 
+            font-size: 14px;
 
+            line-height: 1.5;
 
+            max-width: 100vw;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        .container {
 
+            width: 100%;
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+            background-color: #fff;
 
+            min-height: 100vh;
 
+            position: relative;
 
+            padding-bottom: 60px;
 
+        }
 
+        
+        /* 顶部用户信息区域 */
 
+        .user-header {
 
+            background: linear-gradient(135deg, #6e8efb, #a777e3);
 
+            color: white;
 
+            padding: 20px 15px;
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+        
+        .user-info {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .avatar {
 
+            width: 70px;
 
+            height: 70px;
 
+            border-radius: 50%;
 
+            border: 3px solid rgba(255, 255, 255, 0.3);
 
+            overflow: hidden;
 
+            margin-right: 15px;
 
+        }
 
+        
+        .avatar img {
 
+            width: 100%;
 
+            height: 100%;
 
+            object-fit: cover;
 
+        }
 
+        
+        .user-name {
 
+            font-size: 18px;
 
+            font-weight: 500;
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .user-level {
 
+            display: inline-block;
 
+            background-color: rgba(255, 255, 255, 0.2);
 
+            padding: 2px 8px;
 
+            border-radius: 10px;
 
+            font-size: 12px;
 
+            margin-left: 5px;
 
+        }
 
+        
+        .user-gender {
 
+            display: inline-block;
 
+            background-color: rgba(255, 255, 255, 0.2);
 
+            padding: 2px 8px;
 
+            border-radius: 10px;
 
+            font-size: 12px;
 
+            margin-left: 5px;
 
+        }
 
+        
+        .user-stats {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-top: 15px;
 
+        }
 
+        
+        .stat-item {
 
+            text-align: center;
 
+            flex: 1;
 
+        }
 
+        
+        .stat-value {
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .stat-label {
 
+            font-size: 12px;
 
+            opacity: 0.9;
 
+        }
 
+        
+        .profile-btn {
 
+            position: absolute;
 
+            top: 20px;
 
+            right: 15px;
 
+            background-color: rgba(255, 255, 255, 0.2);
 
+            padding: 5px 10px;
 
+            border-radius: 15px;
 
+            font-size: 12px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .profile-btn i {
 
+            margin-left: 3px;
 
+            font-size: 10px;
 
+        }
 
+        
+        /* 优惠券和金币区域 */
 
+        .assets-section {
 
+            display: flex;
 
+            background-color: white;
 
+            margin: 10px 15px;
 
+            border-radius: 10px;
 
+            padding: 15px 0;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .asset-item {
 
+            flex: 1;
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            justify-content: center;
 
+            position: relative;
 
+        }
 
+        
+        .asset-item:first-child::after {
 
+            content: "";
 
+            position: absolute;
 
+            right: 0;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            height: 30px;
 
+            width: 1px;
 
+            background-color: #eee;
 
+        }
 
+        
+        .asset-icon {
 
+            font-size: 24px;
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .coupon-icon {
 
+            color: #ff6b6b;
 
+        }
 
+        
+        .coin-icon {
 
+            color: #ffc107;
 
+        }
 
+        
+        .asset-text {
 
+            font-size: 14px;
 
+        }
 
+        
+        /* 门票订单区域 */
 
+        .ticket-section {
 
+            background-color: white;
 
+            margin: 15px;
 
+            border-radius: 10px;
 
+            padding: 15px;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .section-title {
 
+            font-size: 16px;
 
+            font-weight: 500;
 
+            margin-bottom: 15px;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .section-title i {
 
+            color: #999;
 
+            font-size: 14px;
 
+        }
 
+        
+        .ticket-status {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            text-align: center;
 
+        }
 
+        
+        .status-item {
 
+            flex: 1;
 
+            padding: 5px 0;
 
+        }
 
+        
+        .status-icon {
 
+            font-size: 22px;
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .status-text {
 
+            font-size: 13px;
 
+        }
 
+        
+        .wait-pay {
 
+            color: #ff6b6b;
 
+        }
 
+        
+        .wait-use {
 
+            color: #4dabf7;
 
+        }
 
+        
+        .wait-comment {
 
+            color: #51cf66;
 
+        }
 
+        
+        .all-orders {
 
+            color: #868e96;
 
+        }
 
+        
+        /* 基础服务区域 */
 
+        .service-section {
 
+            background-color: white;
 
+            margin: 15px;
 
+            border-radius: 10px;
 
+            padding: 15px;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        .service-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(4, 1fr);
 
+            gap: 15px;
 
+            margin-top: 10px;
 
+        }
 
+        
+        .service-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+        }
 
+        
+        .service-icon {
 
+            width: 40px;
 
+            height: 40px;
 
+            background-color: #f8f9fa;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-bottom: 8px;
 
+            color: #495057;
 
+            font-size: 18px;
 
+        }
 
+        
+        .service-text {
 
+            font-size: 12px;
 
+            text-align: center;
 
+        }
 
+        
+        /* 底部导航栏 */
 
+        .bottom-nav {
 
+            position: fixed;
 
+            bottom: 0;
 
+            left: 0;
 
+            right: 0;
 
+            background-color: white;
 
+            display: flex;
 
+            justify-content: space-around;
 
+            padding: 8px 0;
 
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
 
+            max-width: 375px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .nav-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+            color: #666;
 
+            text-decoration: none;
 
+            font-size: 12px;
 
+        }
 
+        
+        .nav-icon {
 
+            font-size: 22px;
 
+            margin-bottom: 3px;
 
+        }
 
+        
+        .nav-item.active {
 
+            color: #1971c2;
 
+        }
 
+        
+        /* 其他样式 */
 
+        .divider {
 
+            height: 1px;
 
+            background-color: #f1f3f5;
 
+            margin: 15px 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 顶部用户信息区域 -->
 
+        <div class="user-header">
 
+            <div class="user-info">
 
+                <div class="avatar">
 
+                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像">
 
+                </div>
 
+                <div>
 
+                    <div class="user-name">
 
+                        晚风心里吹
 
+                        <span class="user-level">Lv.1</span>
 
+                        <span class="user-gender">男</span>
 
+                    </div>
 
+                    <div style="font-size: 13px; opacity: 0.9;">ID: 123456789</div>
 
+                </div>
 
+            </div>
 
+            
+            <a href="#" class="profile-btn">
 
+                个人主页 <i class="bi bi-chevron-right"></i>
 
+            </a>
 
+            
+            <div class="user-stats">
 
+                <div class="stat-item">
 
+                    <div class="stat-value">104</div>
 
+                    <div class="stat-label">关注</div>
 
+                </div>
 
+                <div class="stat-item">
 
+                    <div class="stat-value">6,152</div>
 
+                    <div class="stat-label">粉丝</div>
 
+                </div>
 
+                <div class="stat-item">
 
+                    <div class="stat-value">6.1万</div>
 
+                    <div class="stat-label">获赞</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 优惠券和金币区域 -->
 
+        <div class="assets-section">
 
+            <div class="asset-item">
 
+                <i class="bi bi-ticket-perforated asset-icon coupon-icon"></i>
 
+                <div class="asset-text">优惠券: 3张</div>
 
+            </div>
 
+            <div class="asset-item">
 
+                <i class="bi bi-coin asset-icon coin-icon"></i>
 
+                <div class="asset-text">金币: 30,000个</div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 门票订单区域 -->
 
+        <div class="ticket-section">
 
+            <div class="section-title">
 
+                <span>我的门票</span>
 
+                <i class="bi bi-chevron-right"></i>
 
+            </div>
 
+            
+            <div class="ticket-status">
 
+                <div class="status-item">
 
+                    <div class="status-icon wait-pay">
 
+                        <i class="bi bi-wallet2"></i>
 
+                    </div>
 
+                    <div class="status-text">待付款</div>
 
+                </div>
 
+                <div class="status-item">
 
+                    <div class="status-icon wait-use">
 
+                        <i class="bi bi-ticket-perforated"></i>
 
+                    </div>
 
+                    <div class="status-text">未使用</div>
 
+                </div>
 
+                <div class="status-item">
 
+                    <div class="status-icon wait-comment">
 
+                        <i class="bi bi-chat-square-text"></i>
 
+                    </div>
 
+                    <div class="status-text">待评价</div>
 
+                </div>
 
+                <div class="status-item">
 
+                    <div class="status-icon all-orders">
 
+                        <i class="bi bi-list-ul"></i>
 
+                    </div>
 
+                    <div class="status-text">全部门票</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 基础服务区域 -->
 
+        <div class="service-section">
 
+            <div class="section-title">基础服务</div>
 
+            
+            <div class="service-grid">
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-plus-square"></i>
 
+                    </div>
 
+                    <div class="service-text">我要发布</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-building"></i>
 
+                    </div>
 
+                    <div class="service-text">酒店订单</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-airplane"></i>
 
+                    </div>
 
+                    <div class="service-text">我的机票</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-train-front"></i>
 
+                    </div>
 
+                    <div class="service-text">我的车票</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-coin"></i>
 
+                    </div>
 
+                    <div class="service-text">我的金币</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-bookmark"></i>
 
+                    </div>
 
+                    <div class="service-text">我的收藏</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-headset"></i>
 
+                    </div>
 
+                    <div class="service-text">联系客服</div>
 
+                </div>
 
+                <div class="service-item">
 
+                    <div class="service-icon">
 
+                        <i class="bi bi-chat-left-text"></i>
 
+                    </div>
 
+                    <div class="service-text">意见反馈</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+    <!-- 底部导航栏 - 使用"我的"页面样式 -->
 
+    <div class="bottom-nav">
 
+        <a href="#" class="nav-item">
 
+            <i class="bi bi-house-door nav-icon"></i>
 
+            <span>首页</span>
 
+        </a>
 
+        <a href="#" class="nav-item">
 
+            <i class="bi bi-robot nav-icon"></i>
 
+            <span>客服</span>
 
+        </a>
 
+        <a href="#" class="nav-item ">
 
+            <i class="bi bi-chat-dots nav-icon"></i>
 
+            <span>消息</span>
 
+            <span style="position: absolute; top: 2px; right: 20px; background-color: red; width: 8px; height: 8px; border-radius: 50%;"></span>
 
+        </a>
 
+        <a href="#" class="nav-item  active">
 
+            <i class="bi bi-person nav-icon"></i>
 
+            <span>我的</span>
 
+        </a>
 
+    </div>
 
+    </div>
 
+</body>
 
+</html>

+ 251 - 0
REDAME.md
Voir le fichier 

@@ -0,0 +1,251 @@
 
+### 项目名称
 
+
 
+    #智旅
 
+
 
+### 项目描述
 
+
 
+    ##AI赋能的智能旅游服务平台，在传统旅游App的行程规划、景点推荐、酒店预订等功能基础上，创新引入AI智能客服系统，实现24小时多语言AI导游，随时解答行程疑问，讲述景点背后的历史典故。还可以提供旅游建议和各种帮助，打造“有温度的智慧旅行”。
 
+
 
+
 
+### 项目标语
 
+
 
+    ## "智旅无涯，惠风随行"
 
+
 
+### 政策调研
 
+
 
+### 《"十四五"旅游业发展规划》（国发〔2021〕32号）与智旅项目契合点分析
 
+
 
+### 一、核心适用条款
 
+
 
+#### 1. 原文条款
 
+
 
+> **政策原文**：  
+> ""推进智慧旅游发展...运用人工智能等新技术，开发沉浸式旅游体验产品，提升旅游服务的智能化、个性化、品质化水平"
 
+
 
+**项目契合点**：
 
+
 
+智旅的AI导游系统直接对应"人工智能提升服务智能化"要求
 
+
 
+历史典故讲解功能符合"沉浸式体验产品"定义
 
+
 
+多语言服务实现"品质化"国际标准
 
+
 
+#### 2. 《新一代人工智能产业创新重点任务揭榜工作方案》（工信厅科〔2023〕25号）
 
+
 
+> **政策原文**：
 
+
 
+>"重点支持智能交互系统在文旅等领域的应用...突破多语言实时互译、场景化知识图谱构建等技术"
 
+
 
+**项目契合点**：
 
+AI客服的24小时多语言交互属于"智能交互系统"
 
+
 
+景点历史典故模块依赖"场景化知识图谱"技术
 
+
 
+可申报"智能旅游服务系统"揭榜单位
 
+
 
+
 
+### 行业趋势调研
 
+
 
+### 行业层级定位图谱
 
+
 
+#### 国民经济门类
 
+数字文化服务业
 
+
 
+对应《国民经济行业分类》(GB/T 4754-2017)
 
+
 
+核心代码：I65 信息传输、软件和信息技术服务业
 
+
 
+关联代码：R90 文化艺术业（文化讲解模块）
 
+
 
+#### 产业赛道层
 
+智慧旅游产业
 
+
 
+国家统计局《数字经济及其核心产业统计分类》中
 
+
 
+04-0203 智慧旅游服务
 
+
 
+04-0105 人工智能平台服务
 
+
 
+#### 市场细分层
 
+AI+文旅解决方案市场
 
+
 
+细分为三大垂直领域：
 
+
 
+智能导览服务（核心业务）
 
+
 
+旅游知识图谱（技术壁垒）
 
+
 
+文旅数字人经济（未来扩展）
 
+
 
+
 
+#### 产品形态层
 
+旅游智能操作系统
 
+
 
+按服务深度划分：
 
+
 
+L1 基础工具层：行程规划引擎
 
+
 
+L2 交互服务层：多模态AI导游
 
+
 
+L3 生态平台层：文旅开发者API
 
+
 
+
 
+#### 技术实现层
 
+
 
+旅游行业大模型应用
 
+
 
+关键技术栈定位：
 
+
 
+领域模型：Tourism-LLM（旅游专用大语言模型）
 
+
 
+支撑技术：空间计算+知识图谱（景点关系网络）
 
+
 
+交互界面：CUI（Conversational User Interface）
 
+
 
+
 
+### 行业潜力分析
 
+
 
+#### 智旅项目行业分析报告：AI赋能智慧旅游的变革者
 
+
 
+---
 
+
 
+#### ** 一、行业背景**
 
+
 
+#### 1. 旅游行业发展趋势
 
+- **数字化转型加速**：全球智慧旅游市场规模预计2027年突破1.5万亿美元（CAGR 18.3%），中国“十四五”规划明确要求4A级以上景区全面智慧化。
 
+
 
+传统OTA（在线旅游平台）面临同质化竞争，用户需求从“功能型”向“体验型”转变。
 
+
 
+- **文化体验需求爆发**：中国文旅部数据显示，73%的游客希望获得更深度的文化讲解，而非简单打卡。
 
+
 
+国际游客对多语言、无障碍服务的需求增长迅猛（2023年入境游预订量恢复至疫情前65%）
 
+
 
+- **AI技术驱动行业重构**：生成式AI在旅游业的渗透率从2022年的12%升至2024年的39%，AI导游、智能行程规划成为资本关注焦点。
 
+
 
+政策支持明确：国务院《“十四五”旅游业发展规划》要求“推进人工智能在旅游服务中的创新应用”。
 
+
 
+
 
+#### 2. 行业痛点与市场空白
 
+- **攻略信息过载**：AI实时生成个性化行程，过滤噪音信息
 
+- **文化讲解浅显**：基于大模型的深度典故解读
 
+- **语言障碍**：支持20+语种实时翻译
 
+- **应急响应滞后**：7×24小时AI客服自动处理突发问题
 
+
 
+
 
+### **二、行业价值分析**
 
+
 
+**对产业生态的革新**
 
+    - **技术层面**：填补“AI+文旅”垂直领域大模型空白（现有AI如ChatGPT缺乏旅游专业知识）。
 
+推动行业从“信息聚合”转向“智能服务生成”（如自动生成《苏轼主题杭州游》）。
 
+    -**商业层面**:为景区/酒店提供“AI员工”解决方案，降低人力成本30%以上（1个AI客服替代5名人工）。
 
+
 
+开辟文化增值服务变现模式（如付费解锁“故宫文物背后的秘密”专题讲解）。
 
+    -**社会层面**:促进文化传承：AI将《诗经》《史记》等内容转化为游客可理解的现代语言。
 
+
 
+    提升旅游普惠性：视障语音导航、方言翻译等功能服务弱势群体。
 
+
 
+
 
+
 
+
 
+#### **三、未来潜力与挑战**
 
+
 
+**短期（1-3年）**
 
+    - **核心目标：成为智慧景区标配服务商**
 
+合作模式：
 
+
 
+与5A景区共建“AI数字导游”（如“AI杜甫”解说成都草堂）。
 
+
 
+为地方政府提供“城市文旅大脑”（整合交通、餐饮等实时数据）。
 
+    - **技术突破**
 
+研发Tourism-LLM（旅游领域专用大模型），准确率提升至95%+。
 
+
 
+上线AR实景导航（手机摄像头识别古建筑自动弹出典故）。
 
+    - **中期（3-5年**
 
+生态扩展：
 
+
 
+B端：输出AI能力至酒店、航空公司（如AI前台、智能改签）。
 
+
 
+C端：推出“旅行数字人”订阅服务，陪伴用户全球旅行。
 
+
 
+数据壁垒：
 
+
 
+积累500万+景点知识节点，构建全球最大旅游知识图谱。
 
+
 
+   - **长期（5-10年）**
 
+元宇宙融合：
 
+
 
+开发“数字旅行遗产”，用户可通过AI与历史人物对话（如“向马可·波罗提问”）。
 
+
 
+政策引领：
 
+
 
+参与制定AI旅游服务国际标准，抢占行业话语权。
 
+
 
+**风险与应对**
 
+    - **技术同质化**
 
+持续迭代领域大模型，申请专利保护
 
+    - **文化内容争议-**
 
+建立专家审核委员会，定期校准AI输出
 
+    - **数据安全**
 
+通过ISO27001认证，采用联邦学习技术
 
+
 
+
 
+#### **三、流程性痛点（多角色共同问题）**
 
+
 
+1. **自由行背包客（18-35岁）**
 
+
 
+    **痛点1：行程规划耗时**
 
+- "看了3天攻略还是不知道去哪家餐厅"	信息过载，决策疲劳
 
+
 
+    **痛点2：突发状况无助**
 
+    - "半夜到机场发现民宿取消订单"	应急服务缺位
 
+
 
+    **痛点3：文化体验浅层化**
 
+    - 文化体验浅层化
 
+
 
+
 
+2. **2. 亲子家庭游客（30-45岁）**
 
+
 
+    **痛点1：儿童兴趣维持**
 
+    - "孩子逛博物馆10分钟就吵着要走"适龄内容供给不足
 
+
 
+    **痛点2：教育价值缺失**
 
+    - "希望孩子能学到知识，但导游讲得太枯燥"
 
+    
+    **痛点3：预算有限**
 
+    - 具体表现：中小企业难以承担高昂的法律服务费用，导致合同审查工作被忽视或简化。
 
+    - 案例：某中小企业因预算有限，选择自行审查合同，结果因合同漏洞遭受重大损失。
 
+
 
+3. **3. 银发旅游群体（55-75岁）**
 
+
 
+    **痛点1：数字鸿沟**
 
+    - "APP字太小，操作复杂"	适老化设计不足
 
+
 
+    **痛点2：体力限制**
 
+    - "行程太满走不动"	个性化体力评估缺失
 
+
 
+    **痛点3：医疗应急**
 
+    - "突然头晕找不到救助点"	健康关怀系统缺位
 
+
 
+
 
+4. **商务差旅人士（25-50岁）**
 
+
 
+    **痛点1：报销繁琐**
 
+    - "整理发票花了2小时"
 
+
 
+    **痛点2：孤独感**
 
+    - "连续出差半个月，连说话的人都没有"
 
+    - 情感陪伴需求未被满足
 
+
 
+
 
+#### **四、「智旅解决方案映射表
 
+
 
+1. **对企业法务人员**
 
+用户类型	核心痛点	智旅AI功能	价值增量
 
+自由行背包客	行程决策困难	基于兴趣标签的智能路线生成	节省87%规划时间
 
+亲子家庭	儿童参与度低	互动式AR寻宝游戏+卡通历史人物讲解	儿童停留时间延长2.3倍
 
+银发群体	操作障碍	语音控制+大字体模式+一键SOS	使用门槛降低70%
 
+商务人士	报销低效	自动识别票据生成报销单	财务处理效率提升90%
 
+国际游客	语言不通	实时视觉翻译（菜单/路牌）+文化禁忌提醒	差评率下降65%
 
+
 
+
 
+## 竞品图片