cai
/
cai-MindMate


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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>
        /* 隐藏滚动条 */
        body::-webkit-scrollbar {
            display: none;
        }

        body {
            -ms-overflow-style: none;
            scrollbar-width: none;
            font-family: 'Inter', sans-serif;
            padding-bottom: 64px; /* 为底部导航栏留出空间 */
        }

        /* 优化按钮点击效果 */
        button:active {
            transform: scale(0.95);
        }
    </style>
</head>

<body class="font-inter pb-16 bg-gray-100">
    <!-- 头部部分 -->
    <div class="bg-blue-500 text-white p-4">
        <div class="text-right mb-2">
            <a href="#" class="text-white mx-2 hover:text-gray-300 transition-colors"><i class="fas fa-share"></i></a>
            <a href="#" class="text-white mx-2 hover:text-gray-300 transition-colors"><i class="fas fa-cog"></i></a>
        </div>
        <div class="flex items-center relative mb-2">
            <img src="https://picsum.photos/40/40" class="rounded-full w-10 h-10 mr-2 bg-gray-100" alt="用户头像"
                loading="lazy">
            <div>
                <p class="font-bold text-gray-800 text-white">敬老慈幼的柳璇</p>
                <p class="text-xs text-gray-500 text-white ml-1">这是我们相识的第2.0天</p>
            </div>
            <a href="#"
                class="absolute right-0 bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-xs hover:bg-opacity-30 transition-colors flex items-center gap-1">
                <i class="fas fa-external-link-alt"></i>
                个人主页
            </a>
        </div>
        <div class="flex justify-center gap-4 text-center text-xs">
            <div>
                <p>1</p>
                <p>关注</p>
            </div>
            <div>
                <p>0</p>
                <p>心声</p>
            </div>
            <div>
                <p>0</p>
                <p>问答</p>
            </div>
            <div>
                <p>0</p>
                <p>评论</p>
            </div>
            <div>
                <p>0</p>
                <p>收藏</p>
            </div>
        </div>
    </div>

    <!-- 功能按钮 -->
    <div class="grid grid-cols-4 gap-4 p-4">
        <div class="text-center">
            <i class="fas fa-calendar text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">咨询订单</p>
        </div>
        <div class="text-center">
            <i class="fas fa-comments text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">倾诉记录</p>
        </div>
        <div class="text-center">
            <i class="fas fa-book text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">课程记录</p>
        </div>
        <div class="text-center">
            <i class="fas fa-heart text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">测评记录</p>
        </div>
        <div class="text-center">
            <i class="fas fa-pray text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">冥想</p>
        </div>
        <div class="text-center">
            <i class="fas fa-file text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">我的档案</p>
        </div>
        <div class="text-center">
            <i class="fas fa-wallet text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">账户余额</p>
        </div>
        <div class="text-center">
            <i class="fas fa-ticket-alt text-2xl text-blue-300 mb-1"></i>
            <p class="text-xs">红包卡券</p>
        </div>
    </div>

    <!-- 会员中心 -->
    <div class="bg-yellow-200 p-4 m-4 rounded-lg">
        <span class="font-bold text-lg">会员中心</span>
        <span class="bg-orange-500 text-white px-2 py-1 rounded text-xs ml-2">VIP</span>
        <a href="#"
            class="float-right bg-orange-400 text-white px-4 py-1 rounded-full text-xs hover:bg-orange-300 transition-colors">开通会员
            ></a>
        <p class="text-xs text-gray-600 mt-2">您当前不是会员，开通立享会员特权</p>
    </div>

    <!-- 列表部分 -->
    <div class="p-4">
        <a href="#"
            class="block border-b border-gray-200 py-2 flex items-center text-gray-800 hover:bg-gray-50 transition-colors">
            <i class="fas fa-book-open text-green-400 mr-2 text-sm"></i>
            <p class="text-xs">心理百科</p>
        </a>
        <a href="#"
            class="block border-b border-gray-200 py-2 flex items-center text-gray-800 hover:bg-gray-50 transition-colors">
            <i class="fas fa-question-circle text-purple-400 mr-2 text-sm"></i>
            <p class="text-xs">帮助中心</p>
        </a>
        <a href="#"
            class="block border-b border-gray-200 py-2 flex items-center text-gray-800 hover:bg-gray-50 transition-colors">
            <i class="fas fa-envelope text-pink-400 mr-2 text-sm"></i>
            <p class="text-xs">建议反馈</p>
        </a>
        <a href="#"
            class="block border-b border-gray-200 py-2 flex items-center text-gray-800 hover:bg-gray-50 transition-colors">
            <i class="fas fa-shield-alt text-yellow-400 mr-2 text-sm"></i>
            <p class="text-xs">隐私安全</p>
            <span class="ml-auto text-gray-400 text-xs">设置手势密码，保障隐私安全</span>
        </a>
    </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-gray-400 hover:text-blue-500 transition-colors">
                <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-blue-500">
                <i class="fas fa-user text-lg block text-center"></i>
                <span class="text-xs block text-center">我的</span>
            </a>
        </div>
    </footer>
</body>

</html>