cai
/
cai-MindMate


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!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">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>测试界面</title>
    <style>
        /* 自定义滚动分类样式 */
        .scrollable-categories {
            display: flex;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap;
            padding: 10px 0;
            gap: 10px;
        }
        .scrollable-categories::-webkit-scrollbar {
            display: none;
        }
        .scrollable-categories span {
            background-color: #e0e0e0;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .scrollable-categories span:hover,
        .scrollable-categories span.active {
            background-color: #007BFF;
            color: white;
        }
    </style>
</head>

<body class="font-inter pb-16 bg-gray-50">
    <!-- 顶部风景图片部分 -->
    <div class="relative h-48 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/300');">
        <div class="absolute inset-0 bg-black opacity-30"></div>
        <div class="absolute inset-0 flex flex-col justify-center items-center text-white p-5">
            <h2 class="text-2xl font-bold mb-2">别害怕困难，它是成长的阶梯</h2>
            <p class="text-sm text-center">每一次挑战都是自我提升的机会，勇敢面对，你会变得更强大。</p>
        </div>
    </div>

    <!-- 分类标签 - 修改为与首页一致的滚动样式 -->
    <div class="px-4">
        <div class="scrollable-categories">
            <span class="active">全部</span>
            <span>情感分析</span>
            <span>婚姻家庭</span>
            <span>情绪压力</span>
            <span>儿童心理</span>
            <span>青少年心理</span>
            <span>人际关系</span>
            <span>个人成长</span>
            <span>职场发展</span>
            <span>心理健康</span>
        </div>
    </div>

    <!-- 测试卡片 -->
    <div class="grid grid-cols-2 gap-4 px-5 mt-2">
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=1" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">抑郁测试</p>
                <p class="text-sm text-gray-500 mb-1">抑郁自评量表SDS</p>
                <p class="text-xs text-gray-400">1485人已测</p>
            </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=2" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">产后抑郁测试</p>
                <p class="text-sm text-gray-500 mb-1">爱丁堡产后抑郁测试EPDS</p>
                <p class="text-xs text-gray-400">517人已测</p>
            </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=3" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">自尊水平测试</p>
                <p class="text-sm text-gray-500 mb-1">自尊量表SSS</p>
                <p class="text-xs text-gray-400">1169人已测</p>
            </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=4" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">社会适应能力测试</p>
                <p class="text-sm text-gray-500 mb-1">帮助你评估社会适应能力</p>
                <p class="text-xs text-gray-400">528人已测</p>
            </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=5" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">焦虑测试</p>
                <p class="text-sm text-gray-500 mb-1">焦虑自评量表SAS</p>
                <p class="text-xs text-gray-400">892人已测</p>
            </div>
        </div>
        <div class="bg-white rounded-lg overflow-hidden shadow-md hover:scale-102 transition-transform">
            <img src="https://picsum.photos/300/200?random=6" alt="测试图片" class="w-full h-32 object-cover">
            <div class="p-3">
                <p class="text-base font-bold mb-1">睡眠质量测试</p>
                <p class="text-sm text-gray-500 mb-1">匹兹堡睡眠质量指数</p>
                <p class="text-xs text-gray-400">763人已测</p>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100">
        <div class="max-w-2xl mx-auto flex justify-around p-2">
            <a href="#" class="p-2 text-gray-400 hover:text-blue-500 transition-colors">
                <i class="fas fa-home text-lg block text-center"></i>
                <span class="text-xs block text-center">首页</span>
            </a>
            <a href="#" class="p-2 text-blue-500">
                <i class="fas fa-vial text-lg block text-center"></i>
                <span class="text-xs block text-center">测试</span>
            </a>
            <a href="#" class="p-2 text-gray-400 hover:text-blue-500 transition-colors">
                <i class="fas fa-robot text-lg block text-center"></i>
                <span class="text-xs block text-center">AI 聊天</span>
            </a>
            <a href="#" class="p-2 text-gray-400 hover:text-blue-500 transition-colors">
                <div class="relative">
                    <i class="fas fa-comments text-lg block text-center"></i>
                    <span class="absolute -top-1 -right-2 bg-red-500 text-white rounded-full px-1 text-xs">3</span>
                </div>
                <span class="text-xs block text-center">交流</span>
            </a>
            <a href="#" class="p-2 text-gray-400 hover:text-blue-500 transition-colors">
                <i class="fas fa-user text-lg block text-center"></i>
                <span class="text-xs block text-center">我的</span>
            </a>
        </div>
    </footer>
</body>

</html>