0225186
/
zhengyuhao-0225186


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749
							<!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: #f5f5f5;
            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;
        }
        
        /* 轮播展示区 */
        .carousel-container {
            margin-bottom: 20px;
        }
        
        .carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 10px;
            border-radius: 15px;
        }
        
        .carousel::-webkit-scrollbar {
            display: none;
        }
        
        .carousel-item {
            scroll-snap-align: start;
            flex-shrink: 0;
            width: 100%;
            background-color: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        
        .carousel-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }
        
        .carousel-indicator.active {
            background-color: #4a90e2;
        }
        
        /* 咨询必读卡片 */
        .read-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .read-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            width: 100%;
        }
        
        .read-card-img {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            background-color: #4a90e2;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }
        
        .read-card-title {
            font-weight: 500;
            flex: 1;
            text-align: left;
        }
        
        .question-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 100%;
        }
        
        .question-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px 5px;
            background-color: #f0f7ff;
            border-radius: 8px;
            font-size: 12px;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .question-btn:hover {
            background-color: #d8e9ff;
        }
        
        /* 金刚区 */
        .diamond-area {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            background-color: white;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .diamond-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            border: none;
            background: none;
            cursor: pointer;
            padding: 5px;
        }
        
        .diamond-icon {
            width: 40px;
            height: 40px;
            background-color: #f0f7ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5px;
            color: #4a90e2;
            transition: all 0.2s;
        }
        
        .diamond-item:hover .diamond-icon {
            background-color: #d8e9ff;
        }
        
        /* 筛选区域 */
        .filter-area {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .filter-item {
            position: relative;
            flex: 1;
            min-width: 0;
        }
        
        .filter-select {
            width: 100%;
            padding: 8px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 15px;
            background-color: white;
            appearance: none;
            font-size: 12px;
            cursor: pointer;
        }
        
        .filter-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        
        /* 标签区域 */
        .tag-area {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        
        .tag-btn {
            padding: 5px 10px;
            background-color: #e0f0ff;
            color: #333;
            border-radius: 15px;
            font-size: 12px;
            white-space: nowrap;
            border: none;
            outline: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tag-btn:hover {
            background-color: #cce0ff;
        }
        
        .tag-btn.active {
            background-color: #4a90e2;
            color: white;
        }
        
        /* 咨询师列表 */
        .counselor-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .counselor-card {
            background-color: white;
            border-radius: 15px;
            padding: 15px;
            display: flex;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .counselor-card:hover {
            transform: translateY(-2px);
        }
        
        .counselor-avatar {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            background-color: #e0e0e0;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }
        
        .counselor-info {
            flex: 1;
        }
        
        .counselor-name {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .counselor-name-container {
            display: flex;
            align-items: center;
        }
        
        .counselor-name-text {
            font-weight: 500;
            margin-right: 5px;
        }
        
        .counselor-level {
            font-size: 10px;
            color: white;
            background-color: #ff9500;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .counselor-price {
            font-size: 14px;
            color: #4a90e2;
            font-weight: 500;
        }
        
        .counselor-desc {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .counselor-specialty {
            font-size: 12px;
            color: #4a90e2;
            margin-bottom: 5px;
        }
        
        .counselor-stats {
            font-size: 11px;
            color: #999;
            margin-bottom: 5px;
        }
        
        .counselor-review {
            font-size: 12px;
            color: #666;
            padding-top: 5px;
            border-top: 1px dashed #eee;
        }
        
        /* 底部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;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 3px;
            color: #666;
        }
        
        .tab-item.active .tab-icon {
            color: #4a90e2;
        }
        
        .tab-item.active .tab-text {
            color: #4a90e2;
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="header">
        <div class="header-title">心语AI</div>
        <div class="header-actions">
            <button class="header-btn">
                <ion-icon name="ellipsis-horizontal"></ion-icon>
            </button>
            <button class="header-btn">
                <ion-icon name="close"></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="carousel-container">
            <div class="carousel">
                <div class="carousel-item">
                    <div style="text-align: center; padding: 20px 0;">
                        <div style="font-size: 16px; font-weight: 500; margin-bottom: 10px;">优秀的行业大咖展示</div>
                        <div style="font-size: 12px; color: #666;">专业心理咨询师为您服务</div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="read-card">
                        <div class="read-card-header">
                            <div class="read-card-img">
                                <ion-icon name="help-circle" style="font-size: 14px;"></ion-icon>
                            </div>
                            <div class="read-card-title">咨询必读问题</div>
                        </div>
                        <div class="question-grid">
                            <button class="question-btn">
                                <ion-icon name="help-circle" style="margin-right: 5px;"></ion-icon>
                                为什么选择心语AI？
                            </button>
                            <button class="question-btn">
                                <ion-icon name="help-circle" style="margin-right: 5px;"></ion-icon>
                                我需要心理咨询吗？
                            </button>
                            <button class="question-btn">
                                <ion-icon name="help-circle" style="margin-right: 5px;"></ion-icon>
                                如何选择合适的咨询师？
                            </button>
                            <button class="question-btn">
                                <ion-icon name="help-circle" style="margin-right: 5px;"></ion-icon>
                                心理咨询的过程是怎样的？
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-indicators">
                <button class="carousel-indicator active"></button>
                <button class="carousel-indicator"></button>
            </div>
        </div>
        
        <!-- 金刚区 - 改为按钮 -->
        <div class="diamond-area">
            <button class="diamond-item">
                <div class="diamond-icon">
                    <ion-icon name="nervous"></ion-icon>
                </div>
                <div>焦虑情绪</div>
            </button>
            <button class="diamond-item">
                <div class="diamond-icon">
                    <ion-icon name="sad"></ion-icon>
                </div>
                <div>抑郁情绪</div>
            </button>
            <button class="diamond-item">
                <div class="diamond-icon">
                    <ion-icon name="heart-dislike"></ion-icon>
                </div>
                <div>离异/分手</div>
            </button>
            <button class="diamond-item">
                <div class="diamond-icon">
                    <ion-icon name="person"></ion-icon>
                </div>
                <div>成长探索</div>
            </button>
            <button class="diamond-item">
                <div class="diamond-icon">
                    <ion-icon name="home"></ion-icon>
                </div>
                <div>原生家庭</div>
            </button>
        </div>
        
        <!-- 心理咨询师列表区域 -->
        <div style="background-color: white; border-radius: 15px; padding: 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);">
            <!-- 筛选区域 -->
            <div class="filter-area">
                <div class="filter-item">
                    <select class="filter-select">
                        <option>城市</option>
                    </select>
                    <ion-icon name="chevron-down" class="filter-icon"></ion-icon>
                </div>
                <div class="filter-item">
                    <select class="filter-select">
                        <option>困扰</option>
                    </select>
                    <ion-icon name="chevron-down" class="filter-icon"></ion-icon>
                </div>
                <div class="filter-item">
                    <select class="filter-select">
                        <option>价格</option>
                    </select>
                    <ion-icon name="chevron-down" class="filter-icon"></ion-icon>
                </div>
                <div class="filter-item">
                    <select class="filter-select">
                        <option>更多</option>
                    </select>
                    <ion-icon name="chevron-down" class="filter-icon"></ion-icon>
                </div>
                <div class="filter-item">
                    <select class="filter-select">
                        <option>排序</option>
                    </select>
                    <ion-icon name="chevron-down" class="filter-icon"></ion-icon>
                </div>
            </div>
            
            <!-- 标签按钮区域 -->
            <div class="tag-area">
                <button class="tag-btn">焦虑抑郁</button>
                <button class="tag-btn">成长迷茫</button>
                <button class="tag-btn">情感破裂</button>
                <button class="tag-btn">好评最多</button>
                <button class="tag-btn">LGBTQ</button>
            </div>
            
            <!-- 咨询师列表 -->
        <div class="counselor-list">
            <!-- 咨询师卡片1 -->
            <button class="counselor-card">
                <div class="counselor-avatar">头像</div>
                <div class="counselor-info">
                    <div class="counselor-name">
                        <div class="counselor-name-container">
                            <div class="counselor-name-text">心理咨询师1</div>
                            <div class="counselor-level">资深</div>
                        </div>
                        <div class="counselor-price"></div>
                    </div>
                    <div class="counselor-desc">国家二级心理咨询师水准</div>
                    <div class="counselor-specialty">擅长: 个人成长/亲子冲突/恋爱心理</div>
                    <div class="counselor-stats">咨询人次: 1245 | 服务时长: 8年</div>
                    <div class="counselor-review">来访评价: 很有耐心，分析问题很透彻</div>
                </div>
            </button>
            
            <!-- 咨询师卡片2 -->
            <button class="counselor-card">
                <div class="counselor-avatar">头像</div>
                <div class="counselor-info">
                    <div class="counselor-name">
                        <div class="counselor-name-container">
                            <div class="counselor-name-text">心理咨询师2</div>
                            <div class="counselor-level">专家</div>
                        </div>
                        <div class="counselor-price"></div>
                    </div>
                    <div class="counselor-desc">国家一级心理咨询师水准</div>
                    <div class="counselor-specialty">擅长: 抑郁情绪/焦虑情绪/职场压力</div>
                    <div class="counselor-stats">咨询人次: 2356 | 服务时长: 12年</div>
                    <div class="counselor-review">来访评价: 咨询后感觉轻松了很多，找到了方向</div>
                </div>
            </button>
            
            <!-- 咨询师卡片3 -->
            <button class="counselor-card">
                <div class="counselor-avatar">头像</div>
                <div class="counselor-info">
                    <div class="counselor-name">
                        <div class="counselor-name-container">
                            <div class="counselor-name-text">心理咨询师3</div>
                            <div class="counselor-level">高级</div>
                        </div>
                        <div class="counselor-price"></div>
                    </div>
                    <div class="counselor-desc">国家二级心理咨询师水准</div>
                    <div class="counselor-specialty">擅长: 原生家庭/婚姻关系/亲子教育</div>
                    <div class="counselor-stats">咨询人次: 987 | 服务时长: 6年</div>
                    <div class="counselor-review">来访评价: 很专业，给出了很多实用建议</div>
                </div>
            </button>

            <!-- 咨询师卡片4 -->
            <button class="counselor-card">
                <div class="counselor-avatar">头像</div>
                <div class="counselor-info">
                    <div class="counselor-name">
                        <div class="counselor-name-container">
                            <div class="counselor-name-text">心理咨询师4</div>
                            <div class="counselor-level">资深</div>
                        </div>
                        <div class="counselor-price"></div>
                    </div>
                    <div class="counselor-desc">国家二级心理咨询师水准</div>
                    <div class="counselor-specialty">擅长: 青少年心理/学习压力/网络成瘾</div>
                    <div class="counselor-stats">咨询人次: 1568 | 服务时长: 9年</div>
                    <div class="counselor-review">来访评价: 孩子很喜欢和其交流，效果明显</div>
                </div>
            </button>

            <!-- 咨询师卡片5 -->
            <button class="counselor-card">
                <div class="counselor-avatar">头像</div>
                <div class="counselor-info">
                    <div class="counselor-name">
                        <div class="counselor-name-container">
                            <div class="counselor-name-text">心理咨询师5</div>
                            <div class="counselor-level">专家</div>
                        </div>
                        <div class="counselor-price"></div>
                    </div>
                    <div class="counselor-desc">国家一级心理咨询师水准</div>
                    <div class="counselor-specialty">擅长: 创伤修复/危机干预/情绪管理</div>
                    <div class="counselor-stats">咨询人次: 3120 | 服务时长: 15年</div>
                    <div class="counselor-review">来访评价: 经验丰富，帮助我度过了人生低谷</div>
                </div>
            </button>
        </div>
    </div>
</div>
    
    <!-- 底部Tab栏 -->
    <div class="tab-bar">
        <button class="tab-item active">
            <ion-icon name="home" class="tab-icon"></ion-icon>
            <div class="tab-text">首页</div>
        </button>
        <button class="tab-item">
            <ion-icon name="search" 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 carousel = document.querySelector('.carousel');
            const indicators = document.querySelectorAll('.carousel-indicator');
            
            carousel.addEventListener('scroll', function() {
                const scrollPosition = carousel.scrollLeft;
                const itemWidth = carousel.clientWidth;
                const activeIndex = Math.round(scrollPosition / itemWidth);
                
                indicators.forEach((indicator, index) => {
                    if (index === activeIndex) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            });
            
            // 点击指示器滑动到对应卡片
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', function() {
                    carousel.scrollTo({
                        left: carousel.clientWidth * index,
                        behavior: 'smooth'
                    });
                });
            });
            
            // 金刚区按钮点击事件
            const diamondItems = document.querySelectorAll('.diamond-item');
            diamondItems.forEach(item => {
                item.addEventListener('click', function() {
                    console.log('点击了:', this.querySelector('div:last-child').textContent);
                });
            });
            
            // 标签按钮点击事件
            const tagBtns = document.querySelectorAll('.tag-btn');
            tagBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    tagBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    console.log('选择了:', this.textContent);
                });
            });
            
            // 顶部按钮点击事件
            const headerBtns = document.querySelectorAll('.header-btn');
            headerBtns[0].addEventListener('click', function() {
                console.log('点击了更多按钮');
            });
            headerBtns[1].addEventListener('click', function() {
                console.log('点击了关闭按钮');
            });
        });
    </script>
</body>
</html>