|
|
@@ -0,0 +1,279 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <script src="https://cdn.tailwindcss.com"></script>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>AI 心理咨询 APP 界面</title>
|
|
|
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ /* 基础字体调整 */
|
|
|
+ body {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 导航高亮样式 */
|
|
|
+ .nav-active {
|
|
|
+ color: #007BFF !important;
|
|
|
+ }
|
|
|
+ .nav-active i {
|
|
|
+ color: #007BFF !important;
|
|
|
+ }
|
|
|
+ .nav-active span {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分类图标样式 */
|
|
|
+ .category-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .category-label {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .scrollable-categories span:hover {
|
|
|
+ background-color: #007BFF;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ background-color: #007BFF;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-left: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ min-width: 60px;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-container {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: white;
|
|
|
+ padding: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ .card img {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .card .text-container p,
|
|
|
+ .card .text-container span {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .card div[style*="FF5733"] span {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 功能模块调整 */
|
|
|
+ .feature-module {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .feature-module img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding-bottom: 60px;">
|
|
|
+ <!-- 顶部搜索栏 -->
|
|
|
+ <div style="display: flex; justify-content: space-between; align-items: center; background-color: white; padding: 10px 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
|
|
|
+ <div style="display: flex; align-items: center; background-color: #f0f0f0; padding: 5px 10px; border-radius: 5px; width: 75%;">
|
|
|
+ <i class="fas fa-search" style="margin-right: 5px; font-size: 14px;"></i>
|
|
|
+ <input type="text" placeholder="与 AI 聊焦虑问题" style="border: none; background-color: transparent; outline: none; width: 100%; font-size: 14px;">
|
|
|
+ <button class="search-btn">搜索</button>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; align-items: center;">
|
|
|
+ <i class="fas fa-headset" style="margin-right: 5px; font-size: 14px;"></i>
|
|
|
+ <span style="font-size: 14px;">客服</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <div style="position: relative; height: 120px; overflow: hidden; margin: 10px;">
|
|
|
+ <img src="https://picsum.photos/600/300" alt="AI 助力心理咨询" style="width: 100%; height: 100%; object-fit: cover;">
|
|
|
+ <div style="position: absolute; bottom: 10px; left: 10px; color: white; font-size: 16px; font-weight: bold;">AI 智能陪伴，开启心灵之旅</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分类图标 -->
|
|
|
+ <div style="display: flex; flex-wrap: wrap; justify-content: space-around; padding: 5px 10px;">
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-robot category-icon"></i>
|
|
|
+ <span class="category-label">AI 情感分析</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-users category-icon"></i>
|
|
|
+ <span class="category-label">婚姻家庭</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-frown category-icon"></i>
|
|
|
+ <span class="category-label">情绪压力</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-baby category-icon"></i>
|
|
|
+ <span class="category-label">儿童心理</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-book category-icon"></i>
|
|
|
+ <span class="category-label">青少年心理</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-comments category-icon"></i>
|
|
|
+ <span class="category-label">人际关系</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-leaf category-icon"></i>
|
|
|
+ <span class="category-label">个人成长</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-briefcase category-icon"></i>
|
|
|
+ <span class="category-label">职场发展</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-heartbeat category-icon"></i>
|
|
|
+ <span class="category-label">心理健康</span>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; flex-direction: column; align-items: center; width: 20%; margin-bottom: 10px;">
|
|
|
+ <i class="fas fa-th category-icon"></i>
|
|
|
+ <span class="category-label">全部</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 功能模块 -->
|
|
|
+ <div style="display: flex; justify-content: space-around; padding: 10px 5px;">
|
|
|
+ <div class="feature-module">
|
|
|
+ <img src="https://picsum.photos/50/50" alt="AI 心理咨询">
|
|
|
+ <div>AI 心理咨询<br>智能陪伴解答</div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-module">
|
|
|
+ <img src="https://picsum.photos/50/50" alt="AI 心理测试">
|
|
|
+ <div>AI 心理测试<br>精准剖析自我</div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-module">
|
|
|
+ <img src="https://picsum.photos/50/50" alt="AI 心理课程">
|
|
|
+ <div>AI 心理课程<br>定制成长计划</div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-module" style="position: relative;">
|
|
|
+
|
|
|
+ <img src="https://picsum.photos/50/50" alt="AI 倾诉热线">
|
|
|
+ <div>AI 倾诉热线<br>随时倾听陪伴</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 咨询探索部分 -->
|
|
|
+ <div class="info-container">
|
|
|
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
|
+ <h2 style="border-bottom: 3px solid #007BFF; display: inline-block; padding-bottom: 3px;">AI 咨询·探索</h2>
|
|
|
+ <a href="#" style="color: #007BFF; text-decoration: none; font-size: 14px;">更多></a>
|
|
|
+ </div>
|
|
|
+ <div class="scrollable-categories">
|
|
|
+ <span>亲子教育</span>
|
|
|
+ <span>情绪压力</span>
|
|
|
+ <span>恋爱情感</span>
|
|
|
+ <span>婚姻家庭</span>
|
|
|
+ <span>职业规划</span>
|
|
|
+ <span>社交恐惧</span>
|
|
|
+ <span>睡眠问题</span>
|
|
|
+ <span>考前焦虑</span>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <img src="https://picsum.photos/80/80" alt="AI 咨询师">
|
|
|
+ <div class="text-container">
|
|
|
+ <h3>AI 咨询师</h3>
|
|
|
+ <span>在线实时咨询</span>
|
|
|
+ <p>基于大数据与 AI 算法，精准分析您的心理状况...</p>
|
|
|
+ <p>无限次沟通 快速响应 专业建议</p>
|
|
|
+ <span>亲子教育 失恋心理危机 结婚恐惧</span>
|
|
|
+ <span style="color: red;">新用户首单 8 折</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: right; color: #FF5733;">
|
|
|
+ <span>¥100/次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <img src="https://picsum.photos/80/80" alt="AI 助手">
|
|
|
+ <div class="text-container">
|
|
|
+ <h3>AI 助手</h3>
|
|
|
+ <span>随时陪伴解答</span>
|
|
|
+ <p>24 小时在线，为您提供贴心的心理支持...</p>
|
|
|
+ <span style="background-color: #007BFF; color: white; padding: 2px 5px; border-radius: 3px; font-size: 12px;">免费试用</span>
|
|
|
+ </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-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">
|
|
|
+ <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>
|
