0225244
/
myapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金色时光App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #ffd700;
            color: #333;
            text-align: center;
            padding: 20px 0;
        }

        nav {
            background-color: #ffd700;
            padding: 10px;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        li {
            margin: 10px;
            position: relative;
            width: calc(25% - 20px); /* 均匀分布八个模块 */
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #333;
            font-size: 1.2rem;
            transition: color 0.3s, font-size 0.3s;
            display: block;
            padding: 15px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        a:hover {
            color: #ff4500;
            font-size: 1.3rem;
        }

        .dropdown {
            display: none;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 10px;
            border-radius: 8px;
            margin-top: 10px;
        }

        li:hover .dropdown {
            display: block;
        }
    </style>
</head>

<body>
    <header>
        <h1>金色时光App</h1>
    </header>
    <nav>
        <ul>
            <li>
                <a href="#">用户界面设计</a>
                <div class="dropdown">
                    <p>界面简洁、清晰，字体大，易于阅读。</p>
                    <p>颜色对比度高，以适应老年人视力下降的情况。</p>
                    <p>交互简单直观，减少复杂操作，提供语音和触控操作支持。</p>
                </div>
            </li>
            <li>
                <a href="#">个人资料管理</a>
                <div class="dropdown">
                    <p>用户可以创建个人资料，包括姓名、年龄、兴趣爱好、健康状况等基本信息。</p>
                    <p>提供照片上传功能，方便用户展示自己。</p>
                    <p>个人隐私设置，用户可以控制自己的信息是否公开。</p>
                </div>
            </li>
            <li>
                <a href="#">社交互动</a>
                <div class="dropdown">
                    <p>即时通讯：提供文字、语音、视频聊天功能，方便老年人与家人、朋友保持联系。</p>
                    <p>朋友圈：类似微信朋友圈的功能，用户可以发布动态、照片、视频，分享生活点滴。</p>
                    <p>兴趣小组：根据用户的兴趣爱好，创建不同的小组，如摄影、园艺、旅游等，方便老年人找到志同道合的朋友。</p>
                </div>
            </li>
            <li>
                <a href="#">健康与安全</a>
                <div class="dropdown">
                    <p>健康监测：集成健康监测功能，如心率、血压监测，提醒用户按时服药等。</p>
                    <p>紧急求助：一键SOS功能，遇到紧急情况时，用户可以快速联系家人或紧急服务。</p>
                    <p>安全提醒：提供天气预报、防诈骗提醒等安全信息。</p>
                </div>
            </li>
            <li>
                <a href="#">学习与娱乐</a>
                <div class="dropdown">
                    <p>在线课程：提供各种在线课程，如书法、绘画、音乐、舞蹈等，丰富老年人的精神生活。</p>
                    <p>游戏娱乐：设计一些适合老年人的益智游戏，如拼图、象棋、麻将等，提供娱乐的同时锻炼大脑。</p>
                    <p>阅读材料：提供电子书、有声书、新闻资讯等阅读材料，满足老年人的阅读需求。</p>
                </div>
            </li>
            <li>
                <a href="#">家庭互动</a>
                <div class="dropdown">
                    <p>家庭相册：允许用户与家人共享照片，创建家庭相册，增进家庭成员间的联系。</p>
                    <p>家庭日程：共享家庭日程，方便家人安排聚会、节日庆祝等。</p>
                </div>
            </li>
            <li>
                <a href="#">社区服务</a>
                <div class="dropdown">
                    <p>生活助手：提供家政服务、医疗咨询、法律咨询等服务信息。</p>
                    <p>活动组织：组织线下活动，如旅游、讲座、健康讲座等，鼓励老年人走出家门，参与社交。</p>
                </div>
            </li>
            <li>
                <a href="#">用户反馈与支持</a>
                <div class="dropdown">
                    <p>提供客服支持，解答用户使用中的疑问。</p>
                    <p>收集用户反馈，不断优化产品功能，提升用户体验。</p>
                </div>
            </li>
        </ul>
    </nav>
    <script>
        const dropdowns = document.querySelectorAll('.dropdown');

        dropdowns.forEach(dropdown => {
            dropdown.addEventListener('click', function (e) {
                e.stopPropagation();
                // 在这里添加点击下拉项的相应功能
                console.log('点击了下拉项：', e.target.textContent);
            });
        });
    </script>
</body>

</html>