0225186
/
zhengyuhao-0225186


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心语AI - 发现</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@icon/ionicons@5.5.1/dist/ionicons/ionicons.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: #f8f9fa;
            color: #333;
            padding-bottom: 60px;
        }
        
        /* 顶部标题栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #4a90e2;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .header-title {
            font-size: 18px;
            font-weight: 500;
        }
        
        .header-actions {
            position: absolute;
            right: 15px;
            display: flex;
            gap: 15px;
        }
        
        .header-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
        }
        
        /* 内容区域 */
        .content {
            margin-top: 60px;
            padding: 15px;
            margin-bottom: 60px;
        }
        
        /* 搜索条 */
        .search-bar {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 25px;
            padding: 10px 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            padding: 5px 10px;
            font-size: 14px;
        }
        
        /* 分类筛选 */
        .category-filter {
            display: flex;
            overflow-x: auto;
            gap: 10px;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .category-filter::-webkit-scrollbar {
            display: none;
        }
        
        .category-btn {
            flex-shrink: 0;
            padding: 8px 15px;
            background-color: white;
            border-radius: 20px;
            font-size: 13px;
            border: 1px solid #e0e0e0;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .category-btn:hover, .category-btn.active {
            background-color: #4a90e2;
            color: white;
            border-color: #4a90e2;
        }
        
        /* 咨询室列表 */
        .room-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .room-card {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s;
        }
        
        .room-card:hover {
            transform: translateY(-3px);
        }
        
        .room-cover {
            height: 150px;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        
        .room-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        
        .room-info {
            padding: 15px;
        }
        
        .room-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }
        
        .room-price {
            color: #ff6b6b;
            font-weight: bold;
        }
        
        .room-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .room-meta {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .room-meta ion-icon {
            margin-right: 3px;
        }
        
        .room-meta span {
            margin-right: 10px;
            display: flex;
            align-items: center;
        }
        
        .room-host {
            display: flex;
            align-items: center;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #eee;
        }
        
        .host-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e0e0e0;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }
        
        .host-info {
            flex: 1;
        }
        
        .host-name {
            font-size: 13px;
            font-weight: 500;
        }
        
        .host-title {
            font-size: 11px;
            color: #666;
        }
        
        .join-btn {
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 15px;
            padding: 5px 12px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 底部Tab栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            border: none;
            background: none;
            cursor: pointer;
            color: #666;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 3px;
        }
        
        .tab-item.active {
            color: #4a90e2;
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            margin-top: 20px;
        }
        
        .load-more-btn {
            background: none;
            border: 1px solid #4a90e2;
            color: #4a90e2;
            padding: 8px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="header">
        <div class="header-title">发现咨询室</div>
        <div class="header-actions">
            <button class="header-btn">
                <ion-icon name="search"></ion-icon>
            </button>
            <button class="header-btn">
                <ion-icon name="filter"></ion-icon>
            </button>
        </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        <!-- 搜索条 -->
        <div class="search-bar">
            <ion-icon name="search" style="font-size: 18px; color: #999;"></ion-icon>
            <input type="text" class="search-input" placeholder="搜索咨询室或话题">
        </div>
        
        <!-- 分类筛选 -->
        <div class="category-filter">
            <button class="category-btn active">全部</button>
            <button class="category-btn">情绪管理</button>
            <button class="category-btn">亲密关系</button>
            <button class="category-btn">职场发展</button>
            <button class="category-btn">亲子教育</button>
            <button class="category-btn">自我成长</button>
            <button class="category-btn">心理健康</button>
        </div>
        
        <!-- 咨询室列表 -->
        <div class="room-list">
            <!-- 咨询室1 -->
            <div class="room-card">
                <div class="room-cover" style="background-image: url('https://placeholder.pics/svg/300x150/DEDEDE/555555/情绪管理小组')">
                    <span class="room-tag">进行中</span>
                </div>
                <div class="room-info">
                    <div class="room-title">
                        <span>情绪管理互助小组</span>
                        <span class="room-price">¥29.9/次</span>
                    </div>
                    <div class="room-desc">
                        这是一个专注于情绪管理的互助小组，我们将一起学习如何识别、表达和管理情绪，每周分享实用技巧。
                    </div>
                    <div class="room-meta">
                        <span><ion-icon name="people"></ion-icon> 12人参与</span>
                        <span><ion-icon name="time"></ion-icon> 每周三 20:00</span>
                        <span><ion-icon name="star"></ion-icon> 4.8</span>
                    </div>
                    <div class="room-host">
                        <div class="host-avatar">李</div>
                        <div class="host-info">
                            <div class="host-name">李心理咨询师</div>
                            <div class="host-title">国家二级心理咨询师</div>
                        </div>
                        <button class="join-btn">加入</button>
                    </div>
                </div>
            </div>
            
            <!-- 咨询室2 -->
            <div class="room-card">
                <div class="room-cover" style="background-image: url('https://placeholder.pics/svg/300x150/DEDEDE/555555/亲密关系工作坊')">
                    <span class="room-tag">即将开始</span>
                </div>
                <div class="room-info">
                    <div class="room-title">
                        <span>亲密关系工作坊</span>
                        <span class="room-price">¥49.9/次</span>
                    </div>
                    <div class="room-desc">
                        探索亲密关系中的沟通模式，学习建立健康关系的技巧，适合夫妻或情侣共同参与。
                    </div>
                    <div class="room-meta">
                        <span><ion-icon name="people"></ion-icon> 8人参与</span>
                        <span><ion-icon name="time"></ion-icon> 每周五 19:30</span>
                        <span><ion-icon name="star"></ion-icon> 4.9</span>
                    </div>
                    <div class="room-host">
                        <div class="host-avatar">王</div>
                        <div class="host-info">
                            <div class="host-name">王心理咨询师</div>
                            <div class="host-title">婚姻家庭咨询师</div>
                        </div>
                        <button class="join-btn">预约</button>
                    </div>
                </div>
            </div>
            
            <!-- 咨询室3 -->
            <div class="room-card">
                <div class="room-cover" style="background-image: url('https://placeholder.pics/svg/300x150/DEDEDE/555555/职场减压')">
                    <span class="room-tag">进行中</span>
                </div>
                <div class="room-info">
                    <div class="room-title">
                        <span>职场减压与情绪调节</span>
                        <span class="room-price">¥39.9/次</span>
                    </div>
                    <div class="room-desc">
                        针对职场人士设计的减压小组，分享实用减压技巧，帮助你在工作中保持良好心态。
                    </div>
                    <div class="room-meta">
                        <span><ion-icon name="people"></ion-icon> 15人参与</span>
                        <span><ion-icon name="time"></ion-icon> 每周二 20:30</span>
                        <span><ion-icon name="star"></ion-icon> 4.7</span>
                    </div>
                    <div class="room-host">
                        <div class="host-avatar">张</div>
                        <div class="host-info">
                            <div class="host-name">张心理咨询师</div>
                            <div class="host-title">职业发展咨询师</div>
                        </div>
                        <button class="join-btn">加入</button>
                    </div>
                </div>
            </div>
            
            <!-- 咨询室4 -->
            <div class="room-card">
                <div class="room-cover" style="background-image: url('https://placeholder.pics/svg/300x150/DEDEDE/555555/亲子沟通')">
                    <span class="room-tag">新上线</span>
                </div>
                <div class="room-info">
                    <div class="room-title">
                        <span>亲子沟通艺术</span>
                        <span class="room-price">¥59.9/次</span>
                    </div>
                    <div class="room-desc">
                        学习如何与孩子有效沟通，解决亲子冲突，建立和谐的亲子关系，适合3-12岁孩子的家长。
                    </div>
                    <div class="room-meta">
                        <span><ion-icon name="people"></ion-icon> 6人参与</span>
                        <span><ion-icon name="time"></ion-icon> 每周六 10:00</span>
                        <span><ion-icon name="star"></ion-icon> 4.9</span>
                    </div>
                    <div class="room-host">
                        <div class="host-avatar">赵</div>
                        <div class="host-info">
                            <div class="host-name">赵心理咨询师</div>
                            <div class="host-title">儿童心理专家</div>
                        </div>
                        <button class="join-btn">预约</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more">
            <button class="load-more-btn">加载更多咨询室</button>
        </div>
    </div>
    
    <!-- 底部Tab栏 -->
    <div class="tab-bar">
        <button class="tab-item">
            <ion-icon name="home" class="tab-icon"></ion-icon>
            <div class="tab-text">首页</div>
        </button>
        <button class="tab-item active">
            <ion-icon name="compass" class="tab-icon"></ion-icon>
            <div class="tab-text">发现</div>
        </button>
        <button class="tab-item">
            <ion-icon name="chatbubbles" class="tab-icon"></ion-icon>
            <div class="tab-text">消息</div>
        </button>
        <button class="tab-item">
            <ion-icon name="person" class="tab-icon"></ion-icon>
            <div class="tab-text">我的</div>
        </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@icon/ionicons@5.5.1/dist/ionicons/ionicons.esm.js" type="module"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@icon/ionicons@5.5.1/dist/ionicons/ionicons.js"></script>
    <script>
        // 分类筛选按钮交互
        document.addEventListener('DOMContentLoaded', function() {
            const categoryBtns = document.querySelectorAll('.category-btn');
            
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    console.log('选择了分类:', this.textContent);
                });
            });
            
            // 加入/预约按钮交互
            const joinBtns = document.querySelectorAll('.join-btn');
            joinBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const roomTitle = this.closest('.room-card').querySelector('.room-title span').textContent;
                    console.log('加入咨询室:', roomTitle);
                    alert(`您已申请加入 "${roomTitle}" 咨询室`);
                });
            });
            
            // 加载更多按钮
            const loadMoreBtn = document.querySelector('.load-more-btn');
            loadMoreBtn.addEventListener('click', function() {
                console.log('加载更多咨询室');
                // 这里可以添加加载更多数据的逻辑
                this.textContent = '正在加载...';
                setTimeout(() => {
                    this.textContent = '没有更多了';
                    this.disabled = true;
                }, 1000);
            });
        });
    </script>
</body>
</html>