cc-website/research.html at main · ChatChatTech/cc-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行业研究 - 查特查特科技</title>
    <meta name="description" content="查特查特科技行业研究中心 - 数据要素、隐私计算、数据安全与人工智能领域的深度研究报告">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="favicon.svg">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/research.css">
</head>
<body>
    <!-- 顶部导航 -->
    <header class="header" id="header">
        <div class="container header-inner">
            <a href="index.html" class="logo">
                <span class="logo-icon"><img src="chatchat-icon.svg" alt="ChatChat"></span>
                <span class="logo-text">查特查特科技</span>
            </a>
            <nav class="nav" id="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="index.html#products" class="nav-link">核心产品</a>
                <a href="index.html#components" class="nav-link">技术组件</a>
                <a href="index.html#advantages" class="nav-link">技术优势</a>
                <a href="research.html" class="nav-link active">行业研究</a>
                <a href="index.html#about" class="nav-link">关于我们</a>
            </nav>
            <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="菜单">
                <span></span><span></span><span></span>
            </button>
        </div>
    </header>

    <!-- Hero：渐隐渐显背景轮播 -->
    <section class="research-hero" id="researchHero">
        <div class="hero-slides" id="heroSlides">
            <div class="hero-slide active" style="background-image:url('research/images/hero-data-01.jpg')"></div>
            <div class="hero-slide" style="background-image:url('research/images/hero-security-01.jpg')"></div>
            <div class="hero-slide" style="background-image:url('research/images/hero-ai-01.jpg')"></div>
            <div class="hero-slide" style="background-image:url('research/images/hero-circuit-01.jpg')"></div>
            <div class="hero-slide" style="background-image:url('research/images/hero-code-01.jpg')"></div>
        </div>
        <div class="hero-overlay"></div>
        <div class="hero-content">
            <p class="hero-eyebrow">Chatchat Technology Research</p>
            <h1 class="hero-title">行业研究</h1>
            <p class="hero-desc">聚焦数据要素、隐私计算、数据安全与人工智能前沿<br>为产业发展提供深度洞察与决策参考</p>
        </div>
    </section>

    <!-- 推荐文章 -->
    <section class="featured-section" id="featuredSection">
        <div class="container">
            <div class="featured-card" id="featuredCard">
                <!-- JS 动态填充 -->
            </div>
        </div>
    </section>

    <!-- 筛选 -->
    <section class="research-filters" id="filtersBar">
        <div class="container">
            <div class="filter-bar">
                <div class="filter-tabs" id="domainFilters">
                    <button class="filter-tab active" data-domain="all">全部</button>
                    <button class="filter-tab" data-domain="数据要素">数据要素</button>
                    <button class="filter-tab" data-domain="隐私计算">隐私计算</button>
                    <button class="filter-tab" data-domain="数据安全">数据安全</button>
                    <button class="filter-tab" data-domain="人工智能">人工智能</button>
                </div>
                <div class="filter-right">
                    <input type="text" class="filter-input" id="searchInput" placeholder="搜索...">
                </div>
            </div>
        </div>
    </section>

    <!-- 文章列表 -->
    <section class="research-list">
        <div class="container">
            <div class="articles-grid" id="articlesGrid"></div>
            <div class="articles-empty" id="articlesEmpty" style="display:none;">
                <p>未找到符合条件的研究报告</p>
            </div>
            <div class="pagination" id="pagination"></div>
        </div>
    </section>

    <!-- Three.js 知识图谱 -->
    <section class="research-viz" id="researchViz">
        <div class="container">
            <p class="viz-eyebrow">Knowledge Graph</p>
            <h2 class="viz-title">研究领域知识图谱</h2>
            <p class="viz-desc">基于关键词关联的研究方向可视化</p>
            <div class="viz-container" id="vizContainer"></div>
        </div>
    </section>

    <!-- 页脚 -->
    <style>
.article-card-image{position:relative;overflow:hidden}
.article-card-image::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,93,255,.55),rgba(22,93,255,.25));z-index:1;transition:opacity .3s;pointer-events:none}
.article-card-image::after{background:linear-gradient(to bottom,transparent 40%,rgba(22,93,255,.15))!important;z-index:2;transition:all .3s}
.article-card:hover .article-card-image::before{opacity:0}
.article-card:hover .article-card-image::after{background:radial-gradient(circle 2px,rgba(22,93,255,.3) 1px,transparent 1px)!important;background-size:12px 12px!important;transform:rotate(-15deg) scale(1.4);opacity:1}
</style>
<footer class="footer">
        <div class="container">
            <div class="footer-inner">
                <div class="footer-brand">
                    <div class="logo">
                        <span class="logo-icon"><img src="chatchat-icon.svg" alt="ChatChat"></span>
                        <span class="logo-text">查特查特科技</span>
                    </div>
                    <p class="footer-desc">专注于隐私计算与数据安全领域的技术研究与产业赋能</p>
                </div>
                <div class="footer-links">
                    <a href="index.html">首页</a>
                    <a href="index.html#products">核心产品</a>
                    <a href="index.html#components">技术组件</a>
                    <a href="research.html">行业研究</a>
                    <a href="index.html#about">关于我们</a>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024-2026 Chatchat Technology (HK) Limited. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="js/three.min.js"></script>
    <script src="js/dotmatrix.js"></script>
    <script src="js/research.js"></script>
</body>
</html>