Add Font Awesome v4 compatibility WOFF2 file
This commit is contained in:
杨水淼
+6496
File diff suppressed because it is too large
Load Diff
+45
-13
@@ -210,15 +210,24 @@
|
||||
$researchDir = __DIR__ . '/research';
|
||||
$htmlFiles = glob($researchDir . '/*.html');
|
||||
|
||||
if (!empty($htmlFiles)) {
|
||||
foreach ($htmlFiles as $file) {
|
||||
$fileName = basename($file);
|
||||
$filePath = 'research/' . $fileName;
|
||||
// 新增：扫描子目录中的index.html文件
|
||||
$subDirs = glob($researchDir . '/*', GLOB_ONLYDIR);
|
||||
foreach ($subDirs as $dir) {
|
||||
$indexFile = $dir . '/index.html';
|
||||
if (file_exists($indexFile)) {
|
||||
$htmlFiles[] = $indexFile;
|
||||
}
|
||||
}
|
||||
|
||||
// 读取文件内容
|
||||
$content = file_get_contents($file);
|
||||
if (!empty($htmlFiles)) {
|
||||
foreach ($htmlFiles as $file) {
|
||||
$fileName = basename($file);
|
||||
$filePath = str_replace(__DIR__ . '/', '', $file);
|
||||
|
||||
// 提取title标签内容
|
||||
// 读取文件内容
|
||||
$content = file_get_contents($file);
|
||||
|
||||
// 提取title标签内容
|
||||
preg_match('/<title>(.*?)<\/title>/i', $content, $matches);
|
||||
$title = !empty($matches[1]) ? $matches[1] : $fileName;
|
||||
|
||||
@@ -229,12 +238,7 @@
|
||||
<span>' . htmlspecialchars($title) . '</span>
|
||||
</a>';
|
||||
}
|
||||
// 输出链接
|
||||
echo '<a href="https://echart.doorcome.cn/research/xwlb25_01_25_10/ " target="_blank"
|
||||
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
|
||||
<i class="fa-solid fa-file-pdf text-red-500 w-6"></i>
|
||||
<span>新闻联播深度分析报告 2025年1-10月</span>
|
||||
</a>';
|
||||
|
||||
} else {
|
||||
echo '<div class="p-3 border border-gray-200 rounded-lg text-gray-500">
|
||||
<i class="fa-solid fa-info-circle mr-2"></i>暂无研究报告
|
||||
@@ -243,6 +247,34 @@
|
||||
?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md p-6 card-hover">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
|
||||
<i class="fa-solid fa-file-text text-indigo-600"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold">PDF报告</h3>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 text-gray-600">
|
||||
<p>以下是最新的市场研究报告，点击可查看详情。</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
|
||||
<a href="/research/ai_industry_report_kimi.pdf" target="_blank"
|
||||
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
|
||||
<i class="fa-solid fa-file-pdf text-red-500 w-6"></i>
|
||||
<span>中国AI产业链深度研究报告</span>
|
||||
</a>'
|
||||
<a href="/research/ai_supply_chain_companys.pdf" target="_blank"
|
||||
class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-all">
|
||||
<i class="fa-solid fa-file-pdf text-red-500 w-6"></i>
|
||||
<span>AI产业链上市公司护城河深度分析</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Vendored
+8
File diff suppressed because one or more lines are too long
Vendored
+7913
File diff suppressed because it is too large
Load Diff
Vendored
+9
File diff suppressed because one or more lines are too long
Vendored
+1609
File diff suppressed because it is too large
Load Diff
Vendored
+6
File diff suppressed because one or more lines are too long
Vendored
+6243
File diff suppressed because it is too large
Load Diff
+9
File diff suppressed because one or more lines are too long
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
|
||||
.far,
|
||||
.fa-regular {
|
||||
font-weight: 400; }
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
|
||||
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-style-family-classic: 'Font Awesome 6 Free';
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
.fas,
|
||||
.fa-solid {
|
||||
font-weight: 900; }
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
Vendored
+461
@@ -0,0 +1,461 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:root, :host {
|
||||
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
|
||||
--fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free';
|
||||
--fa-font-light: normal 300 1em/1 'Font Awesome 6 Pro';
|
||||
--fa-font-thin: normal 100 1em/1 'Font Awesome 6 Pro';
|
||||
--fa-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-duotone-regular: normal 400 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-duotone-light: normal 300 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-duotone-thin: normal 100 1em/1 'Font Awesome 6 Duotone';
|
||||
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
|
||||
--fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-light: normal 300 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 6 Sharp';
|
||||
--fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
--fa-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
--fa-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 6 Sharp Duotone';
|
||||
--fa-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 6 Sharp Duotone'; }
|
||||
|
||||
svg.svg-inline--fa:not(:root), svg.svg-inline--fa:not(:host) {
|
||||
overflow: visible;
|
||||
box-sizing: content-box; }
|
||||
|
||||
.svg-inline--fa {
|
||||
display: var(--fa-display, inline-block);
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
vertical-align: -.125em; }
|
||||
.svg-inline--fa.fa-2xs {
|
||||
vertical-align: 0.1em; }
|
||||
.svg-inline--fa.fa-xs {
|
||||
vertical-align: 0em; }
|
||||
.svg-inline--fa.fa-sm {
|
||||
vertical-align: -0.07143em; }
|
||||
.svg-inline--fa.fa-lg {
|
||||
vertical-align: -0.2em; }
|
||||
.svg-inline--fa.fa-xl {
|
||||
vertical-align: -0.25em; }
|
||||
.svg-inline--fa.fa-2xl {
|
||||
vertical-align: -0.3125em; }
|
||||
.svg-inline--fa.fa-pull-left {
|
||||
margin-right: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-pull-right {
|
||||
margin-left: var(--fa-pull-margin, 0.3em);
|
||||
width: auto; }
|
||||
.svg-inline--fa.fa-li {
|
||||
width: var(--fa-li-width, 2em);
|
||||
top: 0.25em; }
|
||||
.svg-inline--fa.fa-fw {
|
||||
width: var(--fa-fw-width, 1.25em); }
|
||||
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; }
|
||||
|
||||
.fa-layers-counter, .fa-layers-text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
|
||||
.fa-layers {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: -.125em;
|
||||
width: 1em; }
|
||||
.fa-layers svg.svg-inline--fa {
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-text {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: center center; }
|
||||
|
||||
.fa-layers-counter {
|
||||
background-color: var(--fa-counter-background-color, #ff253a);
|
||||
border-radius: var(--fa-counter-border-radius, 1em);
|
||||
box-sizing: border-box;
|
||||
color: var(--fa-inverse, #fff);
|
||||
line-height: var(--fa-counter-line-height, 1);
|
||||
max-width: var(--fa-counter-max-width, 5em);
|
||||
min-width: var(--fa-counter-min-width, 1.5em);
|
||||
overflow: hidden;
|
||||
padding: var(--fa-counter-padding, 0.25em 0.5em);
|
||||
right: var(--fa-right, 0);
|
||||
text-overflow: ellipsis;
|
||||
top: var(--fa-top, 0);
|
||||
transform: scale(var(--fa-counter-scale, 0.25));
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-bottom-right {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
right: var(--fa-right, 0);
|
||||
top: auto;
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform-origin: bottom right; }
|
||||
|
||||
.fa-layers-bottom-left {
|
||||
bottom: var(--fa-bottom, 0);
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: auto;
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform-origin: bottom left; }
|
||||
|
||||
.fa-layers-top-right {
|
||||
top: var(--fa-top, 0);
|
||||
right: var(--fa-right, 0);
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform-origin: top right; }
|
||||
|
||||
.fa-layers-top-left {
|
||||
left: var(--fa-left, 0);
|
||||
right: auto;
|
||||
top: var(--fa-top, 0);
|
||||
transform: scale(var(--fa-layers-scale, 0.25));
|
||||
transform-origin: top left; }
|
||||
|
||||
.fa-1x {
|
||||
font-size: 1em; }
|
||||
|
||||
.fa-2x {
|
||||
font-size: 2em; }
|
||||
|
||||
.fa-3x {
|
||||
font-size: 3em; }
|
||||
|
||||
.fa-4x {
|
||||
font-size: 4em; }
|
||||
|
||||
.fa-5x {
|
||||
font-size: 5em; }
|
||||
|
||||
.fa-6x {
|
||||
font-size: 6em; }
|
||||
|
||||
.fa-7x {
|
||||
font-size: 7em; }
|
||||
|
||||
.fa-8x {
|
||||
font-size: 8em; }
|
||||
|
||||
.fa-9x {
|
||||
font-size: 9em; }
|
||||
|
||||
.fa-10x {
|
||||
font-size: 10em; }
|
||||
|
||||
.fa-2xs {
|
||||
font-size: 0.625em;
|
||||
line-height: 0.1em;
|
||||
vertical-align: 0.225em; }
|
||||
|
||||
.fa-xs {
|
||||
font-size: 0.75em;
|
||||
line-height: 0.08333em;
|
||||
vertical-align: 0.125em; }
|
||||
|
||||
.fa-sm {
|
||||
font-size: 0.875em;
|
||||
line-height: 0.07143em;
|
||||
vertical-align: 0.05357em; }
|
||||
|
||||
.fa-lg {
|
||||
font-size: 1.25em;
|
||||
line-height: 0.05em;
|
||||
vertical-align: -0.075em; }
|
||||
|
||||
.fa-xl {
|
||||
font-size: 1.5em;
|
||||
line-height: 0.04167em;
|
||||
vertical-align: -0.125em; }
|
||||
|
||||
.fa-2xl {
|
||||
font-size: 2em;
|
||||
line-height: 0.03125em;
|
||||
vertical-align: -0.1875em; }
|
||||
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em; }
|
||||
|
||||
.fa-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--fa-li-margin, 2.5em);
|
||||
padding-left: 0; }
|
||||
.fa-ul > li {
|
||||
position: relative; }
|
||||
|
||||
.fa-li {
|
||||
left: calc(-1 * var(--fa-li-width, 2em));
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--fa-li-width, 2em);
|
||||
line-height: inherit; }
|
||||
|
||||
.fa-border {
|
||||
border-color: var(--fa-border-color, #eee);
|
||||
border-radius: var(--fa-border-radius, 0.1em);
|
||||
border-style: var(--fa-border-style, solid);
|
||||
border-width: var(--fa-border-width, 0.08em);
|
||||
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
|
||||
|
||||
.fa-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--fa-pull-margin, 0.3em); }
|
||||
|
||||
.fa-beat {
|
||||
animation-name: fa-beat;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-bounce {
|
||||
animation-name: fa-bounce;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
|
||||
|
||||
.fa-fade {
|
||||
animation-name: fa-fade;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-beat-fade {
|
||||
animation-name: fa-beat-fade;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
|
||||
|
||||
.fa-flip {
|
||||
animation-name: fa-flip;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, ease-in-out); }
|
||||
|
||||
.fa-shake {
|
||||
animation-name: fa-shake;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin {
|
||||
animation-name: fa-spin;
|
||||
animation-delay: var(--fa-animation-delay, 0s);
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 2s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, linear); }
|
||||
|
||||
.fa-spin-reverse {
|
||||
--fa-animation-direction: reverse; }
|
||||
|
||||
.fa-pulse,
|
||||
.fa-spin-pulse {
|
||||
animation-name: fa-spin;
|
||||
animation-direction: var(--fa-animation-direction, normal);
|
||||
animation-duration: var(--fa-animation-duration, 1s);
|
||||
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--fa-animation-timing, steps(8)); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fa-beat,
|
||||
.fa-bounce,
|
||||
.fa-fade,
|
||||
.fa-beat-fade,
|
||||
.fa-flip,
|
||||
.fa-pulse,
|
||||
.fa-shake,
|
||||
.fa-spin,
|
||||
.fa-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s; } }
|
||||
|
||||
@keyframes fa-beat {
|
||||
0%, 90% {
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
transform: scale(var(--fa-beat-scale, 1.25)); } }
|
||||
|
||||
@keyframes fa-bounce {
|
||||
0% {
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
10% {
|
||||
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% {
|
||||
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
|
||||
50% {
|
||||
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% {
|
||||
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
|
||||
64% {
|
||||
transform: scale(1, 1) translateY(0); }
|
||||
100% {
|
||||
transform: scale(1, 1) translateY(0); } }
|
||||
|
||||
@keyframes fa-fade {
|
||||
50% {
|
||||
opacity: var(--fa-fade-opacity, 0.4); } }
|
||||
|
||||
@keyframes fa-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--fa-beat-fade-opacity, 0.4);
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
|
||||
|
||||
@keyframes fa-flip {
|
||||
50% {
|
||||
transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
|
||||
|
||||
@keyframes fa-shake {
|
||||
0% {
|
||||
transform: rotate(-15deg); }
|
||||
4% {
|
||||
transform: rotate(15deg); }
|
||||
8%, 24% {
|
||||
transform: rotate(-18deg); }
|
||||
12%, 28% {
|
||||
transform: rotate(18deg); }
|
||||
16% {
|
||||
transform: rotate(-22deg); }
|
||||
20% {
|
||||
transform: rotate(22deg); }
|
||||
32% {
|
||||
transform: rotate(-12deg); }
|
||||
36% {
|
||||
transform: rotate(12deg); }
|
||||
40%, 100% {
|
||||
transform: rotate(0deg); } }
|
||||
|
||||
@keyframes fa-spin {
|
||||
0% {
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
|
||||
.fa-rotate-90 {
|
||||
transform: rotate(90deg); }
|
||||
|
||||
.fa-rotate-180 {
|
||||
transform: rotate(180deg); }
|
||||
|
||||
.fa-rotate-270 {
|
||||
transform: rotate(270deg); }
|
||||
|
||||
.fa-flip-horizontal {
|
||||
transform: scale(-1, 1); }
|
||||
|
||||
.fa-flip-vertical {
|
||||
transform: scale(1, -1); }
|
||||
|
||||
.fa-flip-both,
|
||||
.fa-flip-horizontal.fa-flip-vertical {
|
||||
transform: scale(-1, -1); }
|
||||
|
||||
.fa-rotate-by {
|
||||
transform: rotate(var(--fa-rotate-angle, 0)); }
|
||||
|
||||
.fa-stack {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-stack-1x,
|
||||
.fa-stack-2x {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: var(--fa-stack-z-index, auto); }
|
||||
|
||||
.svg-inline--fa.fa-stack-1x {
|
||||
height: 1em;
|
||||
width: 1.25em; }
|
||||
|
||||
.svg-inline--fa.fa-stack-2x {
|
||||
height: 2em;
|
||||
width: 2.5em; }
|
||||
|
||||
.fa-inverse {
|
||||
color: var(--fa-inverse, #fff); }
|
||||
|
||||
.sr-only,
|
||||
.fa-sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.sr-only-focusable:not(:focus),
|
||||
.fa-sr-only-focusable:not(:focus) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0; }
|
||||
|
||||
.svg-inline--fa .fa-primary {
|
||||
fill: var(--fa-primary-color, currentColor);
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa .fa-secondary {
|
||||
fill: var(--fa-secondary-color, currentColor);
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-primary {
|
||||
opacity: var(--fa-secondary-opacity, 0.4); }
|
||||
|
||||
.svg-inline--fa.fa-swap-opacity .fa-secondary {
|
||||
opacity: var(--fa-primary-opacity, 1); }
|
||||
|
||||
.svg-inline--fa mask .fa-primary,
|
||||
.svg-inline--fa mask .fa-secondary {
|
||||
fill: black; }
|
||||
+6
File diff suppressed because one or more lines are too long
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
|
||||
unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-display: block;
|
||||
src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
|
||||
unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a}
|
||||
Vendored
+2194
File diff suppressed because it is too large
Load Diff
Vendored
+6
File diff suppressed because one or more lines are too long
Vendored
+22
@@ -0,0 +1,22 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Brands';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-display: block;
|
||||
font-weight: 900;
|
||||
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-display: block;
|
||||
font-weight: 400;
|
||||
src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>牧原股份（002714.SZ）深度经营分析报告</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/research/js/all.min.css">
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>晶盛机电（300316）投资价值深度研究报告</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="h/research/js/all.min.css" rel="stylesheet">
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>容百科技（688005）投资价值深度研究报告</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="/research/js/all.min.css">
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>芯联集成（688469.SH）投资价值深度研究报告</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<link href="/research/js/all.min.css" rel="stylesheet">
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,907 @@
|
||||
<!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>
|
||||
<script src="/libai/anime.min.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/libai/shader-park-core.esm.js" type="module"></script>
|
||||
<link href="/libai/googlecss2.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-bg: #1a1d29;
|
||||
--secondary-bg: #2563eb;
|
||||
--accent-color: #0891b2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cbd5e1;
|
||||
--card-bg: rgba(30, 41, 59, 0.8);
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-bg) 0%, #0f172a 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('./resources/neural-network-bg.png') center/cover;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 29, 41, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.company-header {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(8, 145, 178, 0.1));
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 400px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
.swot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.swot-item {
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.swot-strengths {
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
border-color: #059669;
|
||||
}
|
||||
|
||||
.swot-weaknesses {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.swot-opportunities {
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
.swot-threats {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.swot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.company-logo-large {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Background -->
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 nav-blur">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="index.html" class="text-gray-300 hover:text-white transition-colors">首页</a>
|
||||
<a href="#overview" class="text-gray-300 hover:text-white transition-colors">概览</a>
|
||||
<a href="#analysis" class="text-gray-300 hover:text-white transition-colors">深度分析</a>
|
||||
<a href="#financial" class="text-gray-300 hover:text-white transition-colors">财务数据</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Company Header Section -->
|
||||
<section class="pt-24 pb-12">
|
||||
<div class="container">
|
||||
<div class="company-header fade-in">
|
||||
<div class="company-logo-large" id="companyLogo">寒</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4" id="companyName">寒武纪</h1>
|
||||
<p class="text-xl text-gray-300 mb-6" id="companySlogan">国产AI芯片的技术先锋</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<span class="px-4 py-2 bg-blue-500 bg-opacity-20 text-blue-400 rounded-full text-sm" id="companyCategory">上游 - AI芯片</span>
|
||||
<span class="px-4 py-2 bg-green-500 bg-opacity-20 text-green-400 rounded-full text-sm">护城河评分: <span id="moatScore">9.2</span>/10</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-blue-400" id="marketShare">15%</div>
|
||||
<div class="metric-label">市场份额</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-green-400" id="patents">2700+</div>
|
||||
<div class="metric-label">专利数量</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-purple-400" id="revenue">2.3亿</div>
|
||||
<div class="metric-label">营收规模</div>
|
||||
</div>
|
||||
<div class="card metric-card fade-in">
|
||||
<div class="metric-value text-cyan-400" id="growth">+65%</div>
|
||||
<div class="metric-label">同比增长</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="section">
|
||||
<div class="container">
|
||||
<div class="grid lg:grid-cols-3 gap-8">
|
||||
<!-- Company Overview -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">公司概览</h2>
|
||||
<div class="prose prose-invert max-w-none">
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
寒武纪作为中国AI芯片领域的领军企业，其护城河主要建立在<strong>深厚的技术积累、前瞻性的市场布局以及日益完善的生态系统</strong>之上。公司专注于人工智能芯片产品的研发与技术创新，致力于打造人工智能领域的核心处理器芯片。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed mb-4">
|
||||
在技术层面，寒武纪的核心竞争力源于其自主研发的<strong>Cambricon指令集</strong>和创新的<strong>存算一体架构</strong>。这一指令集是专为人工智能计算设计的，能够高效地处理复杂的神经网络算法，从而在AI推理任务中实现卓越的性能和能效比。
|
||||
</p>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
在市场表现方面，寒武纪凭借其技术优势，迅速在国内云端AI芯片市场占据了一席之地。根据2025年上半年的数据显示，寒武纪的AI芯片营收实现了<strong>65%的同比增长</strong>，市场份额达到了约<strong>15%</strong>，在国内厂商中仅次于华为昇腾，稳居第二。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="space-y-6">
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">关键数据</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">成立时间</span>
|
||||
<span>2016年</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">员工规模</span>
|
||||
<span>800+人</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">研发投入</span>
|
||||
<span class="text-green-400">85%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-400">上市时间</span>
|
||||
<span>2020年</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h3 class="text-lg font-semibold mb-4">产品矩阵</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
<span class="text-sm">终端智能处理器IP</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span class="text-sm">云端智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-purple-500 rounded-full"></div>
|
||||
<span class="text-sm">边缘智能芯片</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-3 h-3 bg-cyan-500 rounded-full"></div>
|
||||
<span class="text-sm">基础系统软件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">护城河深度分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8 mb-12">
|
||||
<!-- Technology Barrier -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">技术壁垒分析</h3>
|
||||
<div id="techRadarChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Market Performance -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">市场表现趋势</h3>
|
||||
<div id="performanceChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SWOT Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">SWOT分析</h3>
|
||||
<div class="swot-grid">
|
||||
<div class="swot-item swot-strengths">
|
||||
<h4 class="font-semibold mb-3 text-green-400">优势 (Strengths)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 自主研发的Cambricon指令集</li>
|
||||
<li>• 存算一体架构创新</li>
|
||||
<li>• 强大的研发团队（硕博80%+）</li>
|
||||
<li>• 丰富的专利组合（2700+项）</li>
|
||||
<li>• 国产替代政策支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-weaknesses">
|
||||
<h4 class="font-semibold mb-3 text-red-400">劣势 (Weaknesses)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 规模相对较小</li>
|
||||
<li>• 生态系统建设初期</li>
|
||||
<li>• 客户集中度较高</li>
|
||||
<li>• 盈利能力待提升</li>
|
||||
<li>• 国际竞争力有限</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-opportunities">
|
||||
<h4 class="font-semibold mb-3 text-blue-400">机会 (Opportunities)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 国产替代加速推进</li>
|
||||
<li>• AI应用场景快速扩展</li>
|
||||
<li>• 政策支持力度加大</li>
|
||||
<li>• 边缘计算市场兴起</li>
|
||||
<li>• 车规级芯片需求增长</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="swot-item swot-threats">
|
||||
<h4 class="font-semibold mb-3 text-yellow-400">威胁 (Threats)</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li>• 英伟达等巨头技术领先</li>
|
||||
<li>• 华为等国内厂商竞争</li>
|
||||
<li>• 技术迭代速度加快</li>
|
||||
<li>• 地缘政治风险</li>
|
||||
<li>• 供应链安全挑战</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Financial Section -->
|
||||
<section id="financial" class="section">
|
||||
<div class="container">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 fade-in">财务数据分析</h2>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-8">
|
||||
<!-- Revenue Chart -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">营收趋势</h3>
|
||||
<div id="revenueChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Profit Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-xl font-bold mb-6">盈利能力分析</h3>
|
||||
<div id="profitChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Financial Metrics -->
|
||||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-blue-400">盈利能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">毛利率</span>
|
||||
<span class="text-green-400">65.2%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利率</span>
|
||||
<span class="text-red-400">-15.3%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">ROE</span>
|
||||
<span class="text-yellow-400">-8.7%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-purple-400">运营效率</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">总资产周转率</span>
|
||||
<span class="text-blue-400">0.32</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">存货周转天数</span>
|
||||
<span class="text-cyan-400">156天</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">应收账款周转</span>
|
||||
<span class="text-purple-400">89天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 fade-in">
|
||||
<h4 class="font-semibold mb-4 text-cyan-400">成长能力</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">营收增长率</span>
|
||||
<span class="text-green-400">+65%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">净利润增长</span>
|
||||
<span class="text-red-400">-23%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-400">研发投入比</span>
|
||||
<span class="text-yellow-400">85%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Future Outlook -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="card p-8 fade-in">
|
||||
<h2 class="text-2xl font-bold mb-6">未来展望</h2>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-blue-400">发展战略</h3>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>持续推进存算一体架构技术迭代</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>扩大边缘AI和车载AI市场布局</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>加强生态系统建设和开发者支持</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span>探索新的商业模式和合作机会</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4 text-purple-400">投资建议</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-blue-500 bg-opacity-10 border border-blue-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-blue-400 font-semibold">长期投资</span>
|
||||
<span class="text-green-400 text-sm">推荐</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
技术壁垒深厚，受益于国产替代趋势，长期发展前景良好
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-yellow-500 bg-opacity-10 border border-yellow-500 border-opacity-30 rounded-lg">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-yellow-400 font-semibold">风险提示</span>
|
||||
<span class="text-red-400 text-sm">谨慎</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-300">
|
||||
短期内仍面临盈利压力，需关注技术迭代和市场竞争
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container text-center">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析平台</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 AI产业链护城河深度分析. 专业数据驱动的商业洞察
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// 公司详情页JavaScript
|
||||
let techRadarChart, performanceChart, revenueChart, profitChart;
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAnimations();
|
||||
initializeCharts();
|
||||
loadCompanyData();
|
||||
});
|
||||
|
||||
// 初始化动画
|
||||
function initializeAnimations() {
|
||||
anime({
|
||||
targets: '.fade-in',
|
||||
opacity: [0, 1],
|
||||
translateY: [30, 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuart'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initializeCharts() {
|
||||
// 技术壁垒雷达图
|
||||
const techRadarDom = document.getElementById('techRadarChart');
|
||||
techRadarChart = echarts.init(techRadarDom);
|
||||
|
||||
const techRadarOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '技术能力评估',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '技术创新', max: 10 },
|
||||
{ name: '专利保护', max: 10 },
|
||||
{ name: '产品性能', max: 10 },
|
||||
{ name: '生态建设', max: 10 },
|
||||
{ name: '市场地位', max: 10 },
|
||||
{ name: '成本优势', max: 10 }
|
||||
],
|
||||
axisName: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } },
|
||||
splitArea: { show: false }
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
data: [{
|
||||
value: [9.5, 9.2, 8.8, 7.5, 8.0, 7.2],
|
||||
name: '寒武纪',
|
||||
itemStyle: { color: '#2563eb' },
|
||||
areaStyle: { color: 'rgba(37, 99, 235, 0.2)' }
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
techRadarChart.setOption(techRadarOption);
|
||||
|
||||
// 市场表现趋势图
|
||||
const performanceDom = document.getElementById('performanceChart');
|
||||
performanceChart = echarts.init(performanceDom);
|
||||
|
||||
const performanceOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '股价与市值趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['股价', '市值'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '股价(元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '市值(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '股价',
|
||||
type: 'line',
|
||||
data: [68, 95, 45, 78, 125, 98],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '市值',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [270, 380, 180, 310, 500, 390],
|
||||
lineStyle: { color: '#059669', width: 3 },
|
||||
itemStyle: { color: '#059669' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
performanceChart.setOption(performanceOption);
|
||||
|
||||
// 营收趋势图
|
||||
const revenueDom = document.getElementById('revenueChart');
|
||||
revenueChart = echarts.init(revenueDom);
|
||||
|
||||
const revenueOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '营收增长趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025H1'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '营收(亿元)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [1.0, 4.4, 4.6, 5.3, 7.2, 9.1, 11.8, 7.1],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#2563eb' },
|
||||
{ offset: 1, color: '#0891b2' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
revenueChart.setOption(revenueOption);
|
||||
|
||||
// 盈利能力分析图
|
||||
const profitDom = document.getElementById('profitChart');
|
||||
profitChart = echarts.init(profitDom);
|
||||
|
||||
const profitOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '盈利能力指标',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['毛利率', '净利率', 'ROE'],
|
||||
textStyle: { color: '#94a3b8' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2018', '2019', '2020', '2021', '2022', '2023', '2024'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '百分比(%)',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '毛利率',
|
||||
type: 'line',
|
||||
data: [78.5, 82.3, 79.8, 75.2, 71.6, 68.9, 65.2],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
itemStyle: { color: '#2563eb' }
|
||||
},
|
||||
{
|
||||
name: '净利率',
|
||||
type: 'line',
|
||||
data: [-45.2, -38.7, -28.9, -22.1, -18.5, -16.8, -15.3],
|
||||
lineStyle: { color: '#dc2626', width: 3 },
|
||||
itemStyle: { color: '#dc2626' }
|
||||
},
|
||||
{
|
||||
name: 'ROE',
|
||||
type: 'line',
|
||||
data: [-12.8, -9.5, -6.2, -4.8, -6.1, -7.3, -8.7],
|
||||
lineStyle: { color: '#f59e0b', width: 3 },
|
||||
itemStyle: { color: '#f59e0b' }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
profitChart.setOption(profitOption);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
techRadarChart.resize();
|
||||
performanceChart.resize();
|
||||
revenueChart.resize();
|
||||
profitChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 加载公司数据
|
||||
function loadCompanyData() {
|
||||
// 从URL参数获取公司ID
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const companyId = urlParams.get('company') || 'cambricon';
|
||||
|
||||
// 根据不同公司加载不同数据
|
||||
const companyData = {
|
||||
cambricon: {
|
||||
name: '寒武纪',
|
||||
logo: '寒',
|
||||
slogan: '国产AI芯片的技术先锋',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.2,
|
||||
marketShare: '15%',
|
||||
patents: '2700+',
|
||||
revenue: '2.3亿',
|
||||
growth: '+65%'
|
||||
},
|
||||
huawei: {
|
||||
name: '华为昇腾',
|
||||
logo: '华',
|
||||
slogan: '自主可控的AI算力基石',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.5,
|
||||
marketShare: '25%',
|
||||
patents: '5000+',
|
||||
revenue: '8.5亿',
|
||||
growth: '+45%'
|
||||
},
|
||||
nvidia: {
|
||||
name: '英伟达',
|
||||
logo: '英',
|
||||
slogan: '全球AI芯片的领导者',
|
||||
category: '上游 - AI芯片',
|
||||
moatScore: 9.9,
|
||||
marketShare: '90%',
|
||||
patents: '8000+',
|
||||
revenue: '60.9亿',
|
||||
growth: '+122%'
|
||||
}
|
||||
};
|
||||
|
||||
const data = companyData[companyId] || companyData.cambricon;
|
||||
|
||||
// 更新页面内容
|
||||
document.getElementById('companyName').textContent = data.name;
|
||||
document.getElementById('companyLogo').textContent = data.logo;
|
||||
document.getElementById('companySlogan').textContent = data.slogan;
|
||||
document.getElementById('companyCategory').textContent = data.category;
|
||||
document.getElementById('moatScore').textContent = data.moatScore;
|
||||
document.getElementById('marketShare').textContent = data.marketShare;
|
||||
document.getElementById('patents').textContent = data.patents;
|
||||
document.getElementById('revenue').textContent = data.revenue;
|
||||
document.getElementById('growth').textContent = data.growth;
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
const target = document.getElementById(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,166 @@
|
||||
# AI产业链分析平台 - 设计风格
|
||||
|
||||
## 设计理念
|
||||
|
||||
### 核心概念
|
||||
**"数字时代的商业智慧"** - 将复杂的AI产业链分析转化为直观、专业的数字体验
|
||||
|
||||
### 设计原则
|
||||
1. **专业权威**: 体现深度分析的专业性和可信度
|
||||
2. **科技前沿**: 展现AI产业的创新性和未来感
|
||||
3. **数据驱动**: 突出数据可视化的重要性
|
||||
4. **简洁优雅**: 避免过度设计，保持内容聚焦
|
||||
|
||||
## 视觉语言
|
||||
|
||||
### 色彩系统
|
||||
**主色调**: 深蓝灰 (#1a1d29) - 专业、稳重、科技感
|
||||
**辅助色**:
|
||||
- 青蓝色 (#2563eb) - 科技、创新
|
||||
- 深青色 (#0891b2) - 数据、智能
|
||||
- 暖灰色 (#6b7280) - 中性、平衡
|
||||
|
||||
**功能色彩**:
|
||||
- 成功绿 (#059669) - 正向数据
|
||||
- 警告橙 (#d97706) - 中性数据
|
||||
- 错误红 (#dc2626) - 负向数据
|
||||
|
||||
**背景色**: 渐变从深蓝到黑色，营造深度感
|
||||
|
||||
### 字体系统
|
||||
**标题字体**: Noto Sans SC (粗体)
|
||||
- 现代、简洁、具有科技感
|
||||
- 用于主标题、导航、按钮
|
||||
|
||||
**正文字体**: Noto Serif SC (常规)
|
||||
- 优雅、易读、专业感
|
||||
- 用于正文内容、数据标签
|
||||
|
||||
**数据字体**: JetBrains Mono
|
||||
- 等宽字体，用于代码和数据展示
|
||||
|
||||
### 布局系统
|
||||
**网格系统**: 12列响应式网格
|
||||
**间距系统**: 基于8px的间距单位
|
||||
**圆角**: 8px统一圆角，体现现代感
|
||||
**阴影**: 微妙的投影，增加层次感
|
||||
|
||||
## 视觉效果
|
||||
|
||||
### 背景效果
|
||||
**主背景**: 使用shader-park创建的动态粒子场
|
||||
- 深蓝色基调
|
||||
- 缓慢移动的粒子
|
||||
- 微妙的连接线条
|
||||
- 响应鼠标移动的交互
|
||||
|
||||
### 数据可视化风格
|
||||
**图表配色**: 使用低饱和度的蓝色系渐变
|
||||
**动画效果**:
|
||||
- 数据加载动画
|
||||
- 悬停高亮效果
|
||||
- 平滑的过渡动画
|
||||
|
||||
### 交互效果
|
||||
**悬停效果**:
|
||||
- 卡片轻微上浮 (translateY: -4px)
|
||||
- 阴影加深
|
||||
- 颜色微妙变化
|
||||
|
||||
**点击效果**:
|
||||
- 微妙的缩放动画
|
||||
- 涟漪效果
|
||||
- 状态变化反馈
|
||||
|
||||
### 滚动动画
|
||||
**触发机制**: 元素进入视口上半部分时触发
|
||||
**动画效果**:
|
||||
- 淡入效果 (opacity: 0 → 1)
|
||||
- 上移效果 (translateY: 20px → 0)
|
||||
- 交错延迟 (stagger: 100ms)
|
||||
|
||||
## 组件设计
|
||||
|
||||
### 公司卡片
|
||||
**设计特点**:
|
||||
- 圆角矩形设计
|
||||
- 微妙的边框和阴影
|
||||
- 公司logo和关键信息
|
||||
- 护城河评分可视化
|
||||
|
||||
**交互状态**:
|
||||
- 默认: 轻微阴影
|
||||
- 悬停: 上浮 + 阴影加深
|
||||
- 选中: 边框高亮
|
||||
|
||||
### 数据图表
|
||||
**设计原则**:
|
||||
- 简洁的配色方案
|
||||
- 清晰的标签和图例
|
||||
- 响应式设计
|
||||
- 交互式提示框
|
||||
|
||||
### 导航组件
|
||||
**设计风格**:
|
||||
- 顶部固定导航栏
|
||||
- 半透明背景
|
||||
- 清晰的层级结构
|
||||
- 当前页面高亮
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 断点设置
|
||||
- 移动端: 320px - 767px
|
||||
- 平板端: 768px - 1199px
|
||||
- 桌面端: 1200px+
|
||||
|
||||
### 适配策略
|
||||
**移动端**:
|
||||
- 单列布局
|
||||
- 大尺寸触摸目标
|
||||
- 简化的导航
|
||||
|
||||
**平板端**:
|
||||
- 两列布局
|
||||
- 可折叠侧边栏
|
||||
- 触摸优化
|
||||
|
||||
**桌面端**:
|
||||
- 多列布局
|
||||
- 丰富的悬停效果
|
||||
- 完整的交互功能
|
||||
|
||||
## 品牌元素
|
||||
|
||||
### Logo设计概念
|
||||
**设计思路**: 抽象的神经网络节点连接图案
|
||||
**颜色**: 青蓝色渐变
|
||||
**寓意**: AI产业的连接性和智能化
|
||||
|
||||
### 图标系统
|
||||
**风格**: 线性图标
|
||||
**粗细**: 2px统一粗细
|
||||
**颜色**: 继承文本颜色
|
||||
**大小**: 16px, 20px, 24px标准尺寸
|
||||
|
||||
### 插图风格
|
||||
**风格**: 扁平化几何插图
|
||||
**配色**: 品牌色彩系统
|
||||
**主题**: AI、数据、科技元素
|
||||
|
||||
## 可访问性设计
|
||||
|
||||
### 颜色对比度
|
||||
- 所有文本与背景对比度 ≥ 4.5:1
|
||||
- 大文本对比度 ≥ 3:1
|
||||
- 使用工具验证对比度
|
||||
|
||||
### 交互反馈
|
||||
- 清晰的焦点指示器
|
||||
- 足够的点击目标大小 (44px+)
|
||||
- 明确的加载状态
|
||||
|
||||
### 内容结构
|
||||
- 语义化HTML结构
|
||||
- 清晰的标题层级
|
||||
- 有意义的链接文本
|
||||
@@ -0,0 +1,665 @@
|
||||
<!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>
|
||||
<script src="/research/js/3.4.16.js"></script>
|
||||
<script src="/libai/anime.min.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/libai/shader-park-core.esm.js" type="module"></script>
|
||||
<link href="/libai/googlecss2.css" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--primary-bg: #1a1d29;
|
||||
--secondary-bg: #2563eb;
|
||||
--accent-color: #0891b2;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cbd5e1;
|
||||
--card-bg: rgba(30, 41, 59, 0.8);
|
||||
--border-color: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background: linear-gradient(135deg, var(--primary-bg) 0%, #0f172a 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url('./resources/hero-ai-chain.png') center/cover;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 29, 41, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav-blur {
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 8px 16px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn:hover, .filter-btn.active {
|
||||
background: var(--secondary-bg);
|
||||
color: white;
|
||||
border-color: var(--secondary-bg);
|
||||
}
|
||||
|
||||
.company-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.company-card {
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--secondary-bg), var(--accent-color));
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.moat-indicator {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 400px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 80px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.company-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Background -->
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 w-full z-50 nav-blur">
|
||||
<div class="container">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-8">
|
||||
<a href="#overview" class="text-gray-300 hover:text-white transition-colors">概览</a>
|
||||
<a href="#companies" class="text-gray-300 hover:text-white transition-colors">公司矩阵</a>
|
||||
<a href="#analysis" class="text-gray-300 hover:text-white transition-colors">深度分析</a>
|
||||
<a href="company.html" class="text-gray-300 hover:text-white transition-colors">公司详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex items-center justify-center pt-16">
|
||||
<div class="container text-center">
|
||||
<h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">
|
||||
<span class="gradient-text">AI产业链</span><br>
|
||||
<span class="text-white">护城河深度分析</span>
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto fade-in">
|
||||
深入解析中国AI上市公司的技术壁垒、市场地位与竞争优势
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center fade-in">
|
||||
<button class="btn-primary" onclick="scrollToSection('companies')">
|
||||
探索公司矩阵
|
||||
</button>
|
||||
<button class="border border-gray-500 px-6 py-3 rounded-lg text-gray-300 hover:border-blue-500 hover:text-white transition-colors" onclick="scrollToSection('analysis')">
|
||||
查看分析报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">产业链全景</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
AI产业链分为上、中、下游三个层次，每个层次都有其独特的技术壁垒和市场特征
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
<!-- Upstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">🔬</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">上游：基础层</h3>
|
||||
<p class="text-gray-400">AI芯片、算力、数据、算法</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">技术壁垒</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-4/5 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">资本密集度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-red-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">市场集中度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/4 h-full bg-yellow-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">⚙️</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">中游：技术层</h3>
|
||||
<p class="text-gray-400">AI开发框架、模型、平台</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">技术壁垒</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/4 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">生态重要性</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-blue-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">标准化程度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-2/3 h-full bg-purple-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Downstream -->
|
||||
<div class="card p-8 fade-in">
|
||||
<div class="text-center mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-2xl">🚀</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">下游：应用层</h3>
|
||||
<p class="text-gray-400">行业解决方案、产品服务</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">市场成熟度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-3/5 h-full bg-green-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">应用场景</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-5/6 h-full bg-orange-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">商业化程度</span>
|
||||
<div class="w-20 h-2 bg-gray-700 rounded">
|
||||
<div class="w-4/5 h-full bg-red-500 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Market Data Chart -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6 text-center">AI产业市场规模分析</h3>
|
||||
<div id="marketChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Companies Section -->
|
||||
<section id="companies" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">公司矩阵</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
深度分析AI产业链各环节的核心企业及其护城河优势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Filter Buttons -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-12 fade-in">
|
||||
<button class="filter-btn active" data-filter="all">全部</button>
|
||||
<button class="filter-btn" data-filter="upstream">上游</button>
|
||||
<button class="filter-btn" data-filter="midstream">中游</button>
|
||||
<button class="filter-btn" data-filter="downstream">下游</button>
|
||||
<button class="filter-btn" data-filter="chips">AI芯片</button>
|
||||
<button class="filter-btn" data-filter="algorithm">算法</button>
|
||||
<button class="filter-btn" data-filter="application">应用</button>
|
||||
</div>
|
||||
|
||||
<!-- Company Grid -->
|
||||
<div class="company-grid" id="companyGrid">
|
||||
<!-- Upstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="cambricon">
|
||||
<div class="company-logo">寒</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">寒武纪</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">国产AI芯片技术先锋</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.2/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-blue-400">15%</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>专利数量</span>
|
||||
<span class="text-purple-400">2700+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：Cambricon指令集、存算一体架构
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="huawei">
|
||||
<div class="company-logo">华</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">华为昇腾</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">自主可控AI算力基石</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.5/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态完整性</span>
|
||||
<span class="text-blue-400">9.8/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场地位</span>
|
||||
<span class="text-purple-400">领导者</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：达芬奇架构、MindSpore框架
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream chips" data-company="nvidia">
|
||||
<div class="company-logo">英</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">英伟达</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">全球AI芯片领导者</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术壁垒</span>
|
||||
<span class="text-green-400">9.9/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-blue-400">90%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态规模</span>
|
||||
<span class="text-purple-400">400万+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：CUDA生态系统、GPU性能
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="upstream data" data-company="iflytek">
|
||||
<div class="company-logo">科</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">科大讯飞</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">垂直行业数据壁垒</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>数据壁垒</span>
|
||||
<span class="text-green-400">9.3/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术领先性</span>
|
||||
<span class="text-blue-400">9.1/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>应用场景</span>
|
||||
<span class="text-purple-400">教育/医疗</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：垂直行业数据、语音识别技术
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="midstream framework" data-company="baidu">
|
||||
<div class="company-logo">百</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">百度飞桨</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">深度学习框架生态</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>开发者数量</span>
|
||||
<span class="text-green-400">2333万</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>生态成熟度</span>
|
||||
<span class="text-blue-400">9.0/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>硬件适配</span>
|
||||
<span class="text-purple-400">40+芯片</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：庞大开发者生态、本土化优势
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="midstream framework" data-company="huawei-mindspore">
|
||||
<div class="company-logo">华</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">华为MindSpore</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">自主可控AI框架</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>自主可控</span>
|
||||
<span class="text-green-400">9.8/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>全场景支持</span>
|
||||
<span class="text-blue-400">9.5/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>硬件协同</span>
|
||||
<span class="text-purple-400">昇腾优化</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：软硬件一体化、自主可控
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Downstream Companies -->
|
||||
<div class="company-card card fade-in" data-category="downstream application" data-company="hikvision">
|
||||
<div class="company-logo">海</div>
|
||||
<div class="moat-indicator" style="background: #059669;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">海康威视</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">智能安防领导者</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场份额</span>
|
||||
<span class="text-green-400">全球第一</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>技术融合</span>
|
||||
<span class="text-blue-400">AI+IoT</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>准确率</span>
|
||||
<span class="text-purple-400">99%+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：物联感知+AI深度融合
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="company-card card fade-in" data-category="downstream application" data-company="dahua">
|
||||
<div class="company-logo">大</div>
|
||||
<div class="moat-indicator" style="background: #d97706;"></div>
|
||||
<h3 class="text-xl font-bold mb-2">大华股份</h3>
|
||||
<p class="text-gray-400 text-sm mb-4">智慧物联解决方案</p>
|
||||
<div class="space-y-2 mb-4">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>市场地位</span>
|
||||
<span class="text-green-400">全球第二</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>国内份额</span>
|
||||
<span class="text-blue-400">12%+</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>转型进度</span>
|
||||
<span class="text-purple-400">AIoT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
核心竞争力：全面产品线、规模效应
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-16 fade-in">
|
||||
<h2 class="text-4xl font-bold mb-6">深度分析</h2>
|
||||
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
|
||||
基于多维度数据分析，洞察AI产业竞争格局与发展趋势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 gap-8 mb-16">
|
||||
<!-- Technology Barrier Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">技术壁垒分析</h3>
|
||||
<div id="techBarrierChart" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- Market Share Analysis -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">市场份额分布</h3>
|
||||
<div id="marketShareChart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Insights -->
|
||||
<div class="card p-8 fade-in">
|
||||
<h3 class="text-2xl font-bold mb-6">核心洞察</h3>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-4 text-blue-400">护城河特征</h4>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>技术壁垒：</strong>核心技术专利和持续创新能力</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>数据壁垒：</strong>垂直行业高质量数据积累</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>生态壁垒：</strong>开发者社区和合作伙伴网络</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-green-500 mt-1">•</span>
|
||||
<span><strong>规模壁垒：</strong>市场份额和成本优势</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-4 text-purple-400">发展趋势</h4>
|
||||
<ul class="space-y-3 text-gray-300">
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>国产替代：</strong>自主可控成为关键驱动力</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>软硬一体：</strong>软硬件协同优化趋势明显</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>垂直深耕：</strong>行业应用深度决定价值</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-3">
|
||||
<span class="text-cyan-500 mt-1">•</span>
|
||||
<span><strong>生态竞争：</strong>平台化服务能力成为关键</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-800">
|
||||
<div class="container text-center">
|
||||
<div class="flex items-center justify-center space-x-2 mb-4">
|
||||
<div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm">AI</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">产业链分析平台</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">
|
||||
© 2025 AI产业链护城河深度分析. 专业数据驱动的商业洞察
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
# AI产业链分析平台 - 交互设计
|
||||
|
||||
## 核心交互功能
|
||||
|
||||
### 1. 智能筛选系统
|
||||
**功能描述**: 用户可以通过多个维度筛选AI公司
|
||||
**交互方式**:
|
||||
- 产业链层级筛选 (上游/中游/下游)
|
||||
- 技术领域筛选 (芯片/算法/数据/应用)
|
||||
- 市值规模筛选 (大型/中型/初创)
|
||||
- 地理位置筛选 (北京/上海/深圳等)
|
||||
|
||||
**交互流程**:
|
||||
1. 用户点击筛选器按钮
|
||||
2. 展开多选下拉菜单
|
||||
3. 选择筛选条件
|
||||
4. 实时更新公司网格显示
|
||||
5. 显示筛选结果数量
|
||||
|
||||
### 2. 公司对比工具
|
||||
**功能描述**: 用户可以选择多家公司进行深度对比
|
||||
**交互方式**:
|
||||
- 在公司卡片上点击"添加对比"
|
||||
- 最多选择4家公司进行对比
|
||||
- 打开对比面板显示关键指标
|
||||
|
||||
**对比维度**:
|
||||
- 市值和财务数据
|
||||
- 技术专利数量
|
||||
- 市场份额
|
||||
- 护城河深度评分
|
||||
- 产品线对比
|
||||
|
||||
### 3. 交互式数据可视化
|
||||
**功能描述**: 丰富的图表支持用户交互探索
|
||||
**图表类型**:
|
||||
- **产业链地图**: 点击节点查看公司详情
|
||||
- **市场份额饼图**: 悬停显示具体数值
|
||||
- **技术壁垒雷达图**: 多维度对比
|
||||
- **发展趋势折线图**: 时间轴交互
|
||||
- **地理分布热力图**: 区域集中度分析
|
||||
|
||||
**交互行为**:
|
||||
- 悬停显示详细数据
|
||||
- 点击钻取到具体数据
|
||||
- 拖拽时间轴查看历史数据
|
||||
- 缩放和平移地图视图
|
||||
|
||||
### 4. 深度分析导航
|
||||
**功能描述**: 引导用户深入了解护城河分析
|
||||
**导航结构**:
|
||||
- 技术壁垒分析
|
||||
- 数据资源分析
|
||||
- 生态系统分析
|
||||
- 市场表现分析
|
||||
- 未来趋势预测
|
||||
|
||||
**交互方式**:
|
||||
- 侧边栏导航菜单
|
||||
- 面包屑导航
|
||||
- 相关推荐链接
|
||||
- 返回顶部按钮
|
||||
|
||||
## 用户体验流程
|
||||
|
||||
### 首次访问流程
|
||||
1. **Landing**: 用户进入主页，看到震撼的hero区域
|
||||
2. **概览**: 快速了解AI产业链全景
|
||||
3. **探索**: 通过筛选器找到感兴趣的公司
|
||||
4. **深入**: 点击公司卡片查看详细分析
|
||||
5. **对比**: 使用对比工具进行多公司分析
|
||||
|
||||
### 深度分析流程
|
||||
1. **选择关注点**: 用户选择特定的产业链环节
|
||||
2. **查看分析**: 阅读深度的护城河分析
|
||||
3. **数据验证**: 通过图表验证分析结论
|
||||
4. **扩展探索**: 查看相关公司和技术
|
||||
5. **形成洞察**: 获得完整的市场认知
|
||||
|
||||
## 响应式设计考虑
|
||||
|
||||
### 桌面端 (1200px+)
|
||||
- 三栏布局: 侧边栏 + 主内容 + 信息面板
|
||||
- 大尺寸图表和详细数据表格
|
||||
- 鼠标悬停效果和右键菜单
|
||||
|
||||
### 平板端 (768px-1199px)
|
||||
- 两栏布局: 可折叠侧边栏 + 主内容
|
||||
- 触摸友好的图表交互
|
||||
- 简化的对比功能
|
||||
|
||||
### 移动端 (320px-767px)
|
||||
- 单栏布局: 全屏内容展示
|
||||
- 底部导航栏
|
||||
- 手势操作支持
|
||||
- 简化的筛选和对比功能
|
||||
|
||||
## 可访问性设计
|
||||
|
||||
### 键盘导航
|
||||
- Tab键顺序优化
|
||||
- 快捷键支持 (Ctrl+K 快速搜索)
|
||||
- 焦点指示器清晰可见
|
||||
|
||||
### 屏幕阅读器支持
|
||||
- 语义化HTML结构
|
||||
- ARIA标签和角色定义
|
||||
- 图表的文字描述替代
|
||||
|
||||
### 视觉设计
|
||||
- 高对比度颜色方案
|
||||
- 可调节的字体大小
|
||||
- 色盲友好的配色
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 加载策略
|
||||
- 关键内容优先加载
|
||||
- 图片懒加载
|
||||
- 图表按需渲染
|
||||
- 预加载关键资源
|
||||
|
||||
### 交互优化
|
||||
- 防抖和节流处理
|
||||
- 虚拟滚动长列表
|
||||
- 缓存筛选结果
|
||||
- 渐进式数据加载
|
||||
@@ -0,0 +1,637 @@
|
||||
// AI产业链分析平台 - 主要JavaScript文件
|
||||
|
||||
// 全局变量
|
||||
let currentFilter = 'all';
|
||||
let marketChart, techBarrierChart, marketShareChart;
|
||||
|
||||
// 公司数据
|
||||
const companiesData = {
|
||||
cambricon: {
|
||||
name: '寒武纪',
|
||||
category: 'upstream',
|
||||
moatScore: 9.2,
|
||||
marketShare: 15,
|
||||
patents: 2700,
|
||||
revenue: 2.3,
|
||||
growth: 65
|
||||
},
|
||||
huawei: {
|
||||
name: '华为昇腾',
|
||||
category: 'upstream',
|
||||
moatScore: 9.5,
|
||||
marketShare: 25,
|
||||
patents: 5000,
|
||||
revenue: 8.5,
|
||||
growth: 45
|
||||
},
|
||||
nvidia: {
|
||||
name: '英伟达',
|
||||
category: 'upstream',
|
||||
moatScore: 9.9,
|
||||
marketShare: 90,
|
||||
patents: 8000,
|
||||
revenue: 60.9,
|
||||
growth: 122
|
||||
},
|
||||
iflytek: {
|
||||
name: '科大讯飞',
|
||||
category: 'upstream',
|
||||
moatScore: 9.1,
|
||||
marketShare: 18,
|
||||
patents: 3200,
|
||||
revenue: 18.3,
|
||||
growth: 25
|
||||
},
|
||||
baidu: {
|
||||
name: '百度飞桨',
|
||||
category: 'midstream',
|
||||
moatScore: 9.0,
|
||||
marketShare: 35,
|
||||
developers: 2333,
|
||||
models: 110,
|
||||
growth: 40
|
||||
},
|
||||
hikvision: {
|
||||
name: '海康威视',
|
||||
category: 'downstream',
|
||||
moatScore: 8.8,
|
||||
marketShare: 28,
|
||||
revenue: 81.2,
|
||||
accuracy: 99,
|
||||
growth: 12
|
||||
}
|
||||
};
|
||||
|
||||
// DOM加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAnimations();
|
||||
initializeCharts();
|
||||
initializeFilters();
|
||||
initializeScrollEffects();
|
||||
});
|
||||
|
||||
// 初始化滚动动画
|
||||
function initializeAnimations() {
|
||||
// 页面加载动画
|
||||
anime({
|
||||
targets: '.fade-in',
|
||||
opacity: [0, 1],
|
||||
translateY: [30, 0],
|
||||
delay: anime.stagger(200),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuart'
|
||||
});
|
||||
|
||||
// 公司卡片动画
|
||||
anime({
|
||||
targets: '.company-card',
|
||||
scale: [0.9, 1],
|
||||
opacity: [0, 1],
|
||||
delay: anime.stagger(100, {start: 500}),
|
||||
duration: 600,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
function initializeCharts() {
|
||||
// 市场规模分析图表
|
||||
const marketChartDom = document.getElementById('marketChart');
|
||||
marketChart = echarts.init(marketChartDom);
|
||||
|
||||
const marketOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: 'AI产业市场规模趋势',
|
||||
textStyle: { color: '#ffffff', fontSize: 18 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
data: ['中国AI市场', '全球AI市场', 'AI芯片市场'],
|
||||
textStyle: { color: '#cbd5e1' },
|
||||
bottom: 10
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '中国AI市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [150, 220, 320, 450, 620, 850],
|
||||
lineStyle: { color: '#2563eb', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(37, 99, 235, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(37, 99, 235, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '全球AI市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [1200, 1650, 2200, 2900, 3800, 4900],
|
||||
lineStyle: { color: '#0891b2', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(8, 145, 178, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(8, 145, 178, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'AI芯片市场',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [180, 280, 420, 650, 950, 1400],
|
||||
lineStyle: { color: '#059669', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(5, 150, 105, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(5, 150, 105, 0.05)' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
marketChart.setOption(marketOption);
|
||||
|
||||
// 技术壁垒分析图表
|
||||
const techChartDom = document.getElementById('techBarrierChart');
|
||||
techBarrierChart = echarts.init(techChartDom);
|
||||
|
||||
const techOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '各公司技术壁垒评分',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['寒武纪', '华为昇腾', '英伟达', '科大讯飞', '百度飞桨', '海康威视'],
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8', rotate: 45 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 10,
|
||||
axisLine: { lineStyle: { color: '#475569' } },
|
||||
axisLabel: { color: '#94a3b8' },
|
||||
splitLine: { lineStyle: { color: 'rgba(71, 85, 105, 0.3)' } }
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [9.2, 9.5, 9.9, 9.1, 9.0, 8.8],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#2563eb' },
|
||||
{ offset: 1, color: '#0891b2' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: { color: '#059669' }
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
techBarrierChart.setOption(techOption);
|
||||
|
||||
// 市场份额分析图表
|
||||
const shareChartDom = document.getElementById('marketShareChart');
|
||||
marketShareChart = echarts.init(shareChartDom);
|
||||
|
||||
const shareOption = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: 'AI芯片市场份额',
|
||||
textStyle: { color: '#ffffff', fontSize: 16 },
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.9)',
|
||||
borderColor: 'rgba(148, 163, 184, 0.2)',
|
||||
textStyle: { color: '#ffffff' }
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: '0%',
|
||||
textStyle: { color: '#94a3b8' }
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['50%', '45%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: 90, name: '英伟达', itemStyle: { color: '#2563eb' } },
|
||||
{ value: 25, name: '华为昇腾', itemStyle: { color: '#0891b2' } },
|
||||
{ value: 15, name: '寒武纪', itemStyle: { color: '#059669' } },
|
||||
{ value: 8, name: '其他', itemStyle: { color: '#6b7280' } }
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
marketShareChart.setOption(shareOption);
|
||||
|
||||
// 响应式处理
|
||||
window.addEventListener('resize', function() {
|
||||
marketChart.resize();
|
||||
techBarrierChart.resize();
|
||||
marketShareChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化筛选功能
|
||||
function initializeFilters() {
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
const companyCards = document.querySelectorAll('.company-card');
|
||||
|
||||
filterButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
// 更新按钮状态
|
||||
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
|
||||
const filter = this.getAttribute('data-filter');
|
||||
currentFilter = filter;
|
||||
|
||||
// 筛选公司卡片
|
||||
companyCards.forEach(card => {
|
||||
const categories = card.getAttribute('data-category');
|
||||
|
||||
if (filter === 'all' || categories.includes(filter)) {
|
||||
card.style.display = 'block';
|
||||
anime({
|
||||
targets: card,
|
||||
opacity: [0, 1],
|
||||
scale: [0.8, 1],
|
||||
duration: 400,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
} else {
|
||||
anime({
|
||||
targets: card,
|
||||
opacity: [1, 0],
|
||||
scale: [1, 0.8],
|
||||
duration: 300,
|
||||
easing: 'easeInBack',
|
||||
complete: function() {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 公司卡片点击事件
|
||||
companyCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
const companyId = this.getAttribute('data-company');
|
||||
if (companyId) {
|
||||
showCompanyDetails(companyId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 显示公司详情
|
||||
function showCompanyDetails(companyId) {
|
||||
const company = companiesData[companyId];
|
||||
if (!company) return;
|
||||
|
||||
// 创建模态框显示公司详情
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||||
modal.innerHTML = `
|
||||
<div class="bg-gray-900 rounded-lg p-8 max-w-2xl w-full mx-4 max-h-96 overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-2xl font-bold">${company.name} - 详细分析</h3>
|
||||
<button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-400 hover:text-white">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-3 text-blue-400">基本指标</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between">
|
||||
<span>护城河评分:</span>
|
||||
<span class="text-green-400">${company.moatScore}/10</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span>市场份额:</span>
|
||||
<span class="text-blue-400">${company.marketShare}%</span>
|
||||
</div>
|
||||
${company.patents ? `<div class="flex justify-between"><span>专利数量:</span><span class="text-purple-400">${company.patents}+</span></div>` : ''}
|
||||
${company.developers ? `<div class="flex justify-between"><span>开发者数:</span><span class="text-cyan-400">${company.developers}万</span></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold mb-3 text-purple-400">财务表现</h4>
|
||||
<div class="space-y-2">
|
||||
${company.revenue ? `<div class="flex justify-between"><span>营收规模:</span><span class="text-yellow-400">${company.revenue}亿元</span></div>` : ''}
|
||||
${company.growth ? `<div class="flex justify-between"><span>同比增长:</span><span class="text-green-400">+${company.growth}%</span></div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<button onclick="window.location.href='company.html?company=${companyId}'" class="btn-primary">
|
||||
查看完整分析报告
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// 添加动画
|
||||
anime({
|
||||
targets: modal.querySelector('div'),
|
||||
scale: [0.8, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 300,
|
||||
easing: 'easeOutBack'
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化滚动效果
|
||||
function initializeScrollEffects() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
|
||||
// 为图表添加动画
|
||||
if (entry.target.querySelector('.chart-container')) {
|
||||
animateChart(entry.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
document.querySelectorAll('.fade-in').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 图表动画
|
||||
function animateChart(container) {
|
||||
const chartContainer = container.querySelector('.chart-container');
|
||||
if (!chartContainer) return;
|
||||
|
||||
const chartId = chartContainer.id;
|
||||
|
||||
// 根据图表类型添加不同的动画
|
||||
switch(chartId) {
|
||||
case 'marketChart':
|
||||
animateMarketChart();
|
||||
break;
|
||||
case 'techBarrierChart':
|
||||
animateTechBarrierChart();
|
||||
break;
|
||||
case 'marketShareChart':
|
||||
animateMarketShareChart();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 市场规模图表动画
|
||||
function animateMarketChart() {
|
||||
if (!marketChart) return;
|
||||
|
||||
const option = marketChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series.forEach(series => {
|
||||
series.data = series.data.map(() => 0);
|
||||
});
|
||||
|
||||
marketChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
marketChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 技术壁垒图表动画
|
||||
function animateTechBarrierChart() {
|
||||
if (!techBarrierChart) return;
|
||||
|
||||
const option = techBarrierChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series[0].data = newOption.series[0].data.map(() => 0);
|
||||
|
||||
techBarrierChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
techBarrierChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 市场份额图表动画
|
||||
function animateMarketShareChart() {
|
||||
if (!marketShareChart) return;
|
||||
|
||||
const option = marketShareChart.getOption();
|
||||
const newOption = { ...option };
|
||||
|
||||
// 重置数据为0
|
||||
newOption.series[0].data.forEach(item => {
|
||||
item.value = 0;
|
||||
});
|
||||
|
||||
marketShareChart.setOption(newOption);
|
||||
|
||||
// 动画显示数据
|
||||
setTimeout(() => {
|
||||
marketShareChart.setOption(option);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 滚动到指定区域
|
||||
function scrollToSection(sectionId) {
|
||||
const section = document.getElementById(sectionId);
|
||||
if (section) {
|
||||
section.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href').substring(1);
|
||||
scrollToSection(targetId);
|
||||
});
|
||||
});
|
||||
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', function() {
|
||||
const nav = document.querySelector('nav');
|
||||
if (window.scrollY > 100) {
|
||||
nav.style.background = 'rgba(30, 41, 59, 0.95)';
|
||||
} else {
|
||||
nav.style.background = 'rgba(30, 41, 59, 0.8)';
|
||||
}
|
||||
});
|
||||
|
||||
// 添加鼠标移动视差效果
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
const mouseX = e.clientX / window.innerWidth;
|
||||
const mouseY = e.clientY / window.innerHeight;
|
||||
|
||||
// 为hero背景添加微妙的视差效果
|
||||
const heroBg = document.querySelector('.hero-bg');
|
||||
if (heroBg) {
|
||||
const moveX = (mouseX - 0.5) * 20;
|
||||
const moveY = (mouseY - 0.5) * 20;
|
||||
heroBg.style.transform = `translate(${moveX}px, ${moveY}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// 键盘快捷键支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// Ctrl/Cmd + K 快速搜索
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
// 这里可以添加搜索功能
|
||||
console.log('快速搜索功能');
|
||||
}
|
||||
|
||||
// ESC 关闭模态框
|
||||
if (e.key === 'Escape') {
|
||||
const modal = document.querySelector('.fixed.inset-0');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 性能优化：防抖和节流
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
function throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function() {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => inThrottle = false, limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 使用防抖优化窗口大小改变事件
|
||||
const debouncedResize = debounce(function() {
|
||||
if (marketChart) marketChart.resize();
|
||||
if (techBarrierChart) techBarrierChart.resize();
|
||||
if (marketShareChart) marketShareChart.resize();
|
||||
}, 250);
|
||||
|
||||
window.addEventListener('resize', debouncedResize);
|
||||
|
||||
// 使用节流优化滚动事件
|
||||
const throttledScroll = throttle(function() {
|
||||
// 滚动相关的处理
|
||||
}, 16);
|
||||
|
||||
window.addEventListener('scroll', throttledScroll);
|
||||
@@ -0,0 +1,71 @@
|
||||
# AI产业链上市公司护城河深度分析 - 项目大纲
|
||||
|
||||
## 项目概述
|
||||
创建一个专业的AI产业链分析网站，展示中国AI上市公司的护城河深度分析，包含丰富的数据可视化和交互元素。
|
||||
|
||||
## 网站结构
|
||||
|
||||
### 1. 主页面 (index.html)
|
||||
- **Hero区域**: 动态背景效果 + 主标题
|
||||
- **产业链概览**: 上游、中游、下游的可视化展示
|
||||
- **公司矩阵**: 交互式公司卡片网格
|
||||
- **关键数据**: 市场数据可视化图表
|
||||
- **分析洞察**: 护城河深度分析摘要
|
||||
|
||||
### 2. 公司详情页 (company.html)
|
||||
- **公司概览**: 基本信息和核心业务
|
||||
- **护城河分析**: 深度技术分析
|
||||
- **市场表现**: 财务数据和市场份额
|
||||
- **竞争优势**: SWOT分析可视化
|
||||
- **未来发展**: 战略展望
|
||||
|
||||
### 3. 产业链分析页 (analysis.html)
|
||||
- **产业链全景**: 三层结构详细分析
|
||||
- **技术壁垒**: 核心技术对比
|
||||
- **市场格局**: 竞争态势分析
|
||||
- **发展趋势**: 未来预测
|
||||
|
||||
### 4. 数据看板页 (dashboard.html)
|
||||
- **实时数据**: 市场表现监控
|
||||
- **对比分析**: 多公司数据对比
|
||||
- **趋势预测**: 数据驱动的洞察
|
||||
- **交互图表**: 可筛选的数据可视化
|
||||
|
||||
## 核心功能
|
||||
|
||||
### 交互元素
|
||||
1. **公司筛选器**: 按产业链位置、市值、技术领域筛选
|
||||
2. **数据对比工具**: 多公司数据对比功能
|
||||
3. **交互式图表**: 可点击、悬停的数据可视化
|
||||
4. **搜索功能**: 公司和技术的快速搜索
|
||||
|
||||
### 视觉效果
|
||||
1. **动态背景**: 使用shader-park创建科技感的背景
|
||||
2. **数据动画**: 使用ECharts实现数据动画效果
|
||||
3. **滚动动画**: 使用Anime.js创建滚动触发动画
|
||||
4. **悬停效果**: 卡片和按钮的3D悬停效果
|
||||
|
||||
### 内容结构
|
||||
1. **上游**: AI芯片、算力、数据、算法
|
||||
2. **中游**: AI开发框架、模型、平台
|
||||
3. **下游**: 行业解决方案、产品服务
|
||||
|
||||
## 技术栈
|
||||
- **前端框架**: 纯HTML/CSS/JavaScript
|
||||
- **样式**: Tailwind CSS
|
||||
- **动画**: Anime.js
|
||||
- **图表**: ECharts.js
|
||||
- **特效**: shader-park, p5.js
|
||||
- **字体**: Noto Sans SC (标题), Noto Serif SC (正文)
|
||||
|
||||
## 设计原则
|
||||
- **专业权威**: 体现深度分析的专业性
|
||||
- **现代科技**: 展现AI产业的科技属性
|
||||
- **数据驱动**: 突出数据可视化的重要性
|
||||
- **交互友好**: 提供良好的用户体验
|
||||
|
||||
## 内容重点
|
||||
- 深度分析各公司的技术护城河
|
||||
- 展示市场数据和竞争格局
|
||||
- 提供交互式的数据探索体验
|
||||
- 突出中国AI产业的发展特色
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 970 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
Binary file not shown.
@@ -4,8 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>天岳先进（688234.SH）深度研究报告</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<script src="/research//js/chart.js"></script>
|
||||
<link href="/research/js/all.min.css" rel="stylesheet">
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #2c3e50;
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>中国稀土行业深度研究报告</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="/research/js/chart.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #1a202c;
|
||||
|
||||
Reference in New Issue
Block a user