financial_analysis/index.html at main · Bruce-sudo143/financial_analysis · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竞争对手财报分析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: rgb(231, 0, 18);
            --primary-light: rgba(231, 0, 18, 0.1);
            --primary-dark: rgb(180, 0, 14);
        }

        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            transition: all 0.3s ease;
        }

        .serif {
            font-family: 'Noto Serif SC', serif;
        }

        .dark {
            background-color: #111827;
            color: #f3f4f6;
        }

        .dark .card {
            background-color: #1f2937;
            border-color: #374151;
        }

        .dark .hero-bg {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .hero-bg {
            background-color: rgba(255, 255, 255, 0.85);
        }

        .card {
            transition: all 0.3s ease;
            border: 1px solid #e5e7eb;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .dark .card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
        }

        .btn-primary {
            background-color: var(--primary);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .text-primary {
            color: var(--primary);
        }

        .bg-primary-light {
            background-color: var(--primary-light);
        }

        .border-primary {
            border-color: var(--primary);
        }

        .stats-item {
            border-left: 3px solid var(--primary);
        }

        .dark .stats-item {
            border-left-color: var(--primary);
        }

        .toggle-checkbox:checked {
            right: 0;
            background-color: var(--primary);
        }

        .toggle-checkbox:checked + .toggle-label {
            background-color: var(--primary);
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .fade-in {
            animation: fadeIn 1s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900">
    <!-- 主题切换按钮 -->
    <div class="fixed bottom-6 right-6 z-50">
        <div class="relative inline-block w-12 mr-2 align-middle select-none">
            <input type="checkbox" name="toggle" id="theme-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
            <label for="theme-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
        </div>
        <span class="text-gray-700 dark:text-gray-300 text-sm font-medium">
            <i class="fas fa-moon dark:hidden"></i>
            <i class="fas fa-sun hidden dark:inline-block"></i>
        </span>
    </div>

    <!-- 导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 sticky top-0 z-40">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <div class="text-2xl font-bold serif text-primary">
                <span class="text-gray-900 dark:text-white">财报</span>
                <span class="text-primary">分析</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#reports" class="text-gray-700 dark:text-gray-300 hover:text-primary transition">财报分析</a>
            </div>
            <button class="md:hidden text-gray-700 dark:text-gray-300">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center"></div>
        <div class="hero-bg absolute inset-0"></div>
        <div class="container mx-auto px-6 relative z-10 text-center fade-in">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 serif text-gray-900 dark:text-white">
                全球电气巨头<span class="text-primary">财报解密</span>
            </h1>
            <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto text-gray-700 dark:text-gray-300">
                深入分析四大电气行业领导者的财务表现与战略动向，洞察行业发展趋势
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#reports" class="btn-primary text-white px-8 py-3 rounded-full font-medium text-lg hover:shadow-lg transition">
                    查看分析 <i class="fas fa-arrow-down ml-2"></i>
                </a>
            </div>
        </div>
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
            <a href="#reports" class="text-gray-700 dark:text-gray-300">
                <i class="fas fa-chevron-down text-2xl"></i>
            </a>
        </div>
    </section>

    <!-- 财报分析卡片 -->
    <section id="reports" class="py-20 bg-gray-50 dark:bg-gray-900">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4 serif text-gray-900 dark:text-white">
                    2024年度<span class="text-primary">财报分析</span>
                </h2>
                <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                    精选全球四大电气行业领导者的财务报告，为您提供深度解读与专业分析
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- 施耐德 -->
                <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl">
                    <div class="h-48 bg-gradient-to-r from-red-600 to-red-800 flex items-center justify-center">
                        <i class="fas fa-bolt text-white text-6xl animate-float"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                <i class="fas fa-industry text-primary"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">施耐德电气</h3>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 mb-6">
                            全球能效管理与自动化数字化转型的领导者，2024年财报显示其在可持续能源解决方案领域持续领先。
                        </p>
                        <a href="Schneider_report.html" class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium inline-block hover:shadow-md transition">
                            查看分析 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 维谛 -->
                <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl">
                    <div class="h-48 bg-gradient-to-r from-blue-600 to-blue-800 flex items-center justify-center">
                        <i class="fas fa-server text-white text-6xl animate-float"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                <i class="fas fa-database text-blue-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">维谛技术</h3>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 mb-6">
                            关键基础设施技术解决方案的全球领导者，2024年财报显示其数据中心业务增长显著。
                        </p>
                        <a href="Vertiv_report.html" class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium inline-block hover:shadow-md transition">
                            查看分析 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 伊顿 -->
                <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl">
                    <div class="h-48 bg-gradient-to-r from-yellow-600 to-yellow-800 flex items-center justify-center">
                        <i class="fas fa-cogs text-white text-6xl animate-float"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                <i class="fas fa-tools text-yellow-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">伊顿公司</h3>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 mb-6">
                            全球动力管理公司，2024年财报显示其在电气系统和航空航天领域的双轨发展策略成效显著。
                        </p>
                        <a href="Eaton_report.html" class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium inline-block hover:shadow-md transition">
                            查看分析 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>

                <!-- 罗格朗 -->
                <div class="card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl">
                    <div class="h-48 bg-gradient-to-r from-green-600 to-green-800 flex items-center justify-center">
                        <i class="fas fa-home text-white text-6xl animate-float"></i>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                <i class="fas fa-plug text-green-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">罗格朗</h3>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 mb-6">
                            全球电气与智能建筑基础设施专家，2024年财报显示其智能家居解决方案市场占有率持续提升。
                        </p>
                        <a href="Legrand_report.html" class="btn-primary text-white px-6 py-2 rounded-full text-sm font-medium inline-block hover:shadow-md transition">
                            查看分析 <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-white dark:bg-gray-800 py-12 border-t border-gray-200 dark:border-gray-700">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="text-2xl font-bold serif text-primary mb-2">
                        <span class="text-gray-900 dark:text-white">竞对</span>
                        <span class="text-primary">分析</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">
                        市场发展处电气行业财报分析与战略洞察
                    </p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition">
                        <i class="fab fa-linkedin-in text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition">
                        <i class="fas fa-envelope text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 md:mb-0">
                    © 2024 市场发展处. 保留所有权利.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition text-sm">隐私政策</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition text-sm">使用条款</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary transition text-sm">联系我们</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const html = document.documentElement;

        // 检查本地存储或系统偏好
        if (localStorage.getItem('theme') === 'dark' ||
            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            html.classList.add('dark');
            themeToggle.checked = true;
        }
        // 切换主题
        themeToggle.addEventListener('change', function() {
            if (this.checked) {
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            } else {
                html.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    // 更新URL哈希
                    if (history.pushState) {
                        history.pushState(null, null, targetId);
                    } else {
                        location.hash = targetId;
                    }
                }
            });
        });

        // 滚动动画
        const fadeElements = document.querySelectorAll('.card, .stats-item');

        const fadeInOnScroll = function() {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('fade-in');
                }
            });
        };

        window.addEventListener('scroll', fadeInOnScroll);
        fadeInOnScroll(); // 初始化检查
    </script>
</body>
</html>