vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
public/htmls/华为Mate70手表.html Normal file
View File

@@ -0,0 +1,468 @@
<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为Mate70手表 | 深度概念解析</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color: hsl(193, 95%, 68%); /* A cool cyan/blue for the glow */
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Space Grotesk', sans-serif;
background-color: #010411;
background-image:
radial-gradient(ellipse 20% 40% at 20% 20%, hsla(217, 96%, 57%, 0.15), transparent),
radial-gradient(ellipse 20% 40% at 80% 80%, hsla(289, 94%, 55%, 0.15), transparent);
color: #e0e0e0;
overflow-x: hidden;
}
.glass-card {
background: rgba(20, 25, 40, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(var(--glow-color), 0.5);
box-shadow: 0 0 20px rgba(var(--glow-color), 0.2);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-auto-rows: minmax(180px, auto);
}
@media (min-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(4, 1fr);
}
.bento-span-2 {
grid-column: span 2;
}
.bento-span-3 {
grid-column: span 3;
}
.bento-span-4 {
grid-column: span 4;
}
.bento-row-span-2 {
grid-row: span 2;
}
}
.glow-text {
color: var(--glow-color);
text-shadow: 0 0 8px rgba(var(--glow-color), 0.8);
}
.section-title {
font-size: 2.25rem;
font-weight: 600;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 2rem;
display: flex;
align-items: center;
}
.section-title::before {
content: '▞';
margin-right: 1rem;
color: var(--glow-color);
font-size: 1.5rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.table th, .table td {
border-color: rgba(255, 255, 255, 0.15);
}
.table th {
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8 lg:p-12">
<div class="max-w-screen-xl mx-auto">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl lg:text-6xl font-bold mb-4 tracking-wider">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-500">
华为Mate70手表
</span>
<span class="text-white">| 深度概念解析</span>
</h1>
<p class="text-sm text-gray-400 max-w-3xl mx-auto">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。
</p>
</header>
<!-- Bento Grid Layout -->
<main class="bento-grid">
<!-- Card 1: Core Viewpoint -->
<div class="glass-card rounded-3xl p-6 lg:p-8 lg:bento-span-2 lg:bento-row-span-2">
<h2 class="text-2xl font-bold mb-4 glow-text">核心观点摘要</h2>
<p class="text-gray-300 leading-relaxed">
“华为Mate70手表”概念正处在从事件驱动的预期发酵，向基本面验证过渡的关键节点。其核心驱动力源于
<strong class="text-cyan-300">“HarmonyOS NEXT生态落地”</strong>与<strong class="text-cyan-300">“健康监测技术革新（玄玑感知系统）”</strong>的双轮驱动。
该产品的成功发布不仅有望重塑高端智能手表市场格局，更将成为检验华为自主生态闭环能力和催化国内高端可穿戴设备产业链升级的试金石。
</p>
<div class="divider my-6 border-white/10"></div>
<h3 class="text-xl font-semibold mb-3 text-white">三大核心驱动力</h3>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<span class="text-cyan-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">生态驱动 (HarmonyOS NEXT):</strong> 首批预装，具备独立运行能力和多设备深度协同，标志着华为全场景生态战略大规模商业落地。</div>
</li>
<li class="flex items-start">
<span class="text-cyan-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">技术驱动 (玄玑感知系统):</strong> 硬件层面核心突破，从运动监测向专业健康管理演进，抢占大健康高价值场景。</div>
</li>
<li class="flex items-start">
<span class="text-cyan-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">国产化驱动 (供应链自主):</strong> 核心芯片(恒玄/海思)、屏幕(京东方)等关键环节由国内主导，为产业链带来明确增量。</div>
</li>
</ul>
</div>
<!-- Card 2: Technical Highlights -->
<div class="glass-card rounded-3xl p-6 lg:p-8">
<h2 class="text-2xl font-bold mb-4 glow-text">技术亮点 & 规格预测</h2>
<ul class="space-y-2 text-gray-300">
<li><strong>产品型号:</strong> 华为手表 <strong class="text-white">GT5</strong> (或为其中一款)</li>
<li><strong>核心系统:</strong> 首批预装 <strong class="text-white">HarmonyOS NEXT</strong></li>
<li><strong>健康监测:</strong> 首发 <strong class="text-white">玄玑感知系统</strong> (心率/血氧/呼吸率/情绪)</li>
<li><strong>核心芯片:</strong> <strong class="text-white">恒玄科技</strong> (SoC), <strong class="text-white">海思</strong> (自研低功耗连接芯片)</li>
<li><strong>屏幕规格:</strong> 预计采用 <strong class="text-white">1.8英寸OLED</strong> 显示屏 (京东方)</li>
<li><strong>竞争定位:</strong> 对标Apple Watch与三星Galaxy Watch</li>
</ul>
</div>
<!-- Card 3: Market Expectations -->
<div class="glass-card rounded-3xl p-6 lg:p-8">
<h2 class="text-2xl font-bold mb-4 glow-text">市场预期与催化剂</h2>
<div class="flex items-center justify-around text-center h-full">
<div>
<div class="text-4xl font-bold text-cyan-300">30%</div>
<div class="text-sm text-gray-400 mt-1">预计占华为手表出货量</div>
</div>
<div class="divider divider-horizontal border-white/10"></div>
<div>
<div class="text-4xl font-bold text-cyan-300">20%</div>
<div class="text-sm text-gray-400 mt-1">推动整体出货量增长</div>
</div>
</div>
</div>
<!-- Card 4: Timeline Chart -->
<div class="glass-card rounded-3xl p-6 lg:p-8 lg:bento-span-4">
<h2 class="text-2xl font-bold mb-4 glow-text">关键时间轴</h2>
<div id="timeline-chart" style="width: 100%; height: 200px;"></div>
</div>
<!-- Card 5: Potential Risks -->
<div class="glass-card rounded-3xl p-6 lg:p-8 lg:bento-span-2">
<h2 class="text-2xl font-bold mb-4 glow-text">潜在风险与挑战</h2>
<ul class="space-y-3 text-gray-300">
<li class="flex items-start">
<span class="text-amber-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">技术风险:</strong> HarmonyOS NEXT Beta版稳定性不足可能影响初期用户体验；“玄玑感知系统”的实际监测精度有待市场验证。</div>
</li>
<li class="flex items-start">
<span class="text-amber-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">商业化风险:</strong> 旗舰定位下的高定价在当前消费环境下接受度存疑；应用生态的建设需要时间和开发者支持。</div>
</li>
<li class="flex items-start">
<span class="text-amber-400 mr-3 mt-1">●</span>
<div><strong class="text-gray-100">信息交叉验证风险:</strong> 部分研报存在信息矛盾（如误提"Galaxy AI"），需审慎对待，聚焦交叉验证的核心信息。</div>
</li>
</ul>
</div>
<!-- Card 6: Expectation Gap -->
<div class="glass-card rounded-3xl p-6 lg:p-8 lg:bento-span-2">
<h2 class="text-2xl font-bold mb-4 glow-text">预期差分析</h2>
<p class="text-gray-300 mb-4">市场普遍认知之外，可能存在以下预期差，构成潜在的超预期机会点：</p>
<ul class="space-y-2 list-decimal list-inside text-gray-300">
<li><strong class="text-gray-100">“玄玑感知系统”认知不足:</strong> 可能非简单传感器升级，而是系统级健康解决方案，精度和广度或远超预期。</li>
<li><strong class="text-gray-100">恒玄科技角色低估:</strong> 路演暗示其“未来或切入主控芯片”，若成真，其在供应链中地位将发生质变，价值需重估。</li>
<li><strong class="text-gray-100">生态价值量化模糊:</strong> 市场对HarmonyOS NEXT带来的用户粘性和付费转化率可能缺乏具体评估，手表作为高频交互节点，长期生态价值巨大。</li>
</ul>
</div>
</main>
<!-- Stock Tables Section -->
<section id="stock-section" class="mt-16" x-data="{ tab: 'core' }">
<h2 class="section-title">产业链与核心公司深度剖析</h2>
<div class="tabs tabs-boxed bg-black/20 mb-6">
<a class="tab tab-lg" :class="{ 'tab-active bg-cyan-500/80 !text-white': tab === 'core' }" @click.prevent="tab = 'core'">核心供应商 (多方验证)</a>
<a class="tab tab-lg" :class="{ 'tab-active bg-cyan-500/80 !text-white': tab === 'eco' }" @click.prevent="tab = 'eco'">鸿蒙生态伙伴</a>
<a class="tab tab-lg" :class="{ 'tab-active bg-cyan-500/80 !text-white': tab === 'potential' }" @click.prevent="tab = 'potential'">潜在供应链 (手表相关)</a>
</div>
<div class="overflow-x-auto glass-card rounded-2xl p-4">
<!-- Core Suppliers Table -->
<div x-show="tab === 'core'">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>公司名称</th>
<th>股票代码</th>
<th>核心逻辑 / 供应环节</th>
<th>信息来源</th>
</tr>
</thead>
<tbody>
<tr>
<td>恒玄科技</td>
<td><a href="https://valuefrontier.cn/company?scode=688608" target="_blank" class="text-cyan-400 hover:underline">688608</a></td>
<td>SoC主控芯片，路演揭示其未来或切入主控芯片替代海外厂商，逻辑最纯粹。</td>
<td>路演</td>
</tr>
<tr>
<td>利和兴</td>
<td><a href="https://valuefrontier.cn/company?scode=301013" target="_blank" class="text-cyan-400 hover:underline">301013</a></td>
<td>为手表等创新产品提供配套检测设备，业绩与新品发布强关联。</td>
<td>路演</td>
</tr>
<tr>
<td>京东方A</td>
<td><a href="https://valuefrontier.cn/company?scode=000725" target="_blank" class="text-cyan-400 hover:underline">000725</a></td>
<td>OLED屏幕核心供应商，直接受益于旗舰手表放量。</td>
<td>研报</td>
</tr>
<tr>
<td>立讯精密</td>
<td><a href="https://valuefrontier.cn/company?scode=002475" target="_blank" class="text-cyan-400 hover:underline">002475</a></td>
<td>核心代工厂商，直接受益于产品销量提升。</td>
<td>研报</td>
</tr>
<tr>
<td>蓝思科技</td>
<td><a href="https://valuefrontier.cn/company?scode=300433" target="_blank" class="text-cyan-400 hover:underline">300433</a></td>
<td>玻璃盖板核心供应商，深度绑定华为多条产品线。</td>
<td>研报, 股票数据</td>
</tr>
<tr>
<td>光弘科技</td>
<td><a href="https://valuefrontier.cn/company?scode=300735" target="_blank" class="text-cyan-400 hover:underline">300735</a></td>
<td>华为手表代工。</td>
<td>股票数据</td>
</tr>
<tr>
<td>卓翼科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002369" target="_blank" class="text-cyan-400 hover:underline">002369</a></td>
<td>华为手表代工。</td>
<td>股票数据</td>
</tr>
</tbody>
</table>
</div>
<!-- Ecosystem Table -->
<div x-show="tab === 'eco'" style="display: none;">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>公司名称</th>
<th>股票代码</th>
<th>核心逻辑 / 业务关联</th>
</tr>
</thead>
<tbody>
<tr>
<td>润和软件</td>
<td><a href="https://valuefrontier.cn/company?scode=300339" target="_blank" class="text-cyan-400 hover:underline">300339</a></td>
<td>华为鸿蒙操作系统的重要合作伙伴，深度参与生态建设。</td>
</tr>
<tr>
<td>软通动力</td>
<td><a href="https://valuefrontier.cn/company?scode=301236" target="_blank" class="text-cyan-400 hover:underline">301236</a></td>
<td>鸿蒙智联生态的解决方案商，助力应用适配与开发。</td>
</tr>
<tr>
<td>诚迈科技</td>
<td><a href="https://valuefrontier.cn/company?scode=300598" target="_blank" class="text-cyan-400 hover:underline">300598</a></td>
<td>应用系统 (鸿蒙)，与华为在操作系统领域有深度合作。</td>
</tr>
<tr>
<td>拓维信息</td>
<td><a href="https://valuefrontier.cn/company?scode=002261" target="_blank" class="text-cyan-400 hover:underline">002261</a></td>
<td>与华为“鲲鹏/昇腾+大模型/云+鸿蒙”全方位战略合作。</td>
</tr>
</tbody>
</table>
</div>
<!-- Potential Suppliers Table -->
<div x-show="tab === 'potential'" style="display: none;">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>公司名称</th>
<th>股票代码</th>
<th>供应环节 / 业务</th>
<th>关联性</th>
</tr>
</thead>
<tbody>
<tr><td>欣旺达</td><td><a href="https://valuefrontier.cn/company?scode=300207" target="_blank" class="text-cyan-400 hover:underline">300207</a></td><td>锂电池</td><td>可穿戴设备核心组件</td></tr>
<tr><td>德赛电池</td><td><a href="https://valuefrontier.cn/company?scode=000049" target="_blank" class="text-cyan-400 hover:underline">000049</a></td><td>锂电池</td><td>可穿戴设备核心组件</td></tr>
<tr><td>圣邦股份</td><td><a href="https://valuefrontier.cn/company?scode=300661" target="_blank" class="text-cyan-400 hover:underline">300661</a></td><td>模拟芯片 (PMIC/无线充电)</td><td>电源管理与充电</td></tr>
<tr><td>南芯科技</td><td><a href="https://valuefrontier.cn/company?scode=688484" target="_blank" class="text-cyan-400 hover:underline">688484</a></td><td>充电芯片</td><td>电源管理</td></tr>
<tr><td>长信科技</td><td><a href="https://valuefrontier.cn/company?scode=300088" target="_blank" class="text-cyan-400 hover:underline">300088</a></td><td>屏幕模组</td><td>显示系统</td></tr>
<tr><td>领益智造</td><td><a href="https://valuefrontier.cn/company?scode=002600" target="_blank" class="text-cyan-400 hover:underline">002600</a></td><td>结构件</td><td>设备外壳与内部结构</td></tr>
<tr><td>长盈精密</td><td><a href="https://valuefrontier.cn/company?scode=300115" target="_blank" class="text-cyan-400 hover:underline">300115</a></td><td>结构件 / 连接器</td><td>设备外壳与内部结构</td></tr>
<tr><td>深南电路</td><td><a href="https://valuefrontier.cn/company?scode=002916" target="_blank" class="text-cyan-400 hover:underline">002916</a></td><td>PCB/IC载板</td><td>电路基础</td></tr>
<tr><td>兴森科技</td><td><a href="https://valuefrontier.cn/company?scode=002436" target="_blank" class="text-cyan-400 hover:underline">002436</a></td><td>PCB/IC载板</td><td>电路基础</td></tr>
<tr><td>信维通信</td><td><a href="https://valuefrontier.cn/company?scode=300136" target="_blank" class="text-cyan-400 hover:underline">300136</a></td><td>射频天线</td><td>通信连接</td></tr>
<tr><td>硕贝德</td><td><a href="https://valuefrontier.cn/company?scode=300322" target="_blank" class="text-cyan-400 hover:underline">300322</a></td><td>射频天线 / 散热</td><td>通信连接与散热</td></tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom);
var option;
const data = [
{ name: '供应商路演\n明确手表为增长驱动', value: [1, 0], date: '2024-04-24' },
{ name: '研报集中披露\n预装鸿蒙NEXT', value: [2, 0], date: '2024-06-23' },
{ name: '路演披露\n海思连接芯片', value: [3, 0], date: '2024-07-26' },
{ name: '路演揭示\n或为GT5, 首发玄玑感知', value: [4, 0], date: '2024-10-23' },
{ name: '新闻预测\n将发布两款手表', value: [5, 0], date: '2024-11月' },
{ name: 'Mate品牌盛典\n产品正式发布', value: [6, 0], date: '2024-11-26' }
];
option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].data.name + '<br/>日期: ' + params[0].data.date;
},
backgroundColor: 'rgba(20, 25, 40, 0.8)',
borderColor: 'rgba(255, 255, 255, 0.2)',
textStyle: {
color: '#E0E0E0'
}
},
grid: {
left: '5%',
right: '5%',
top: '25%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
min: 0,
max: 7
},
yAxis: {
type: 'value',
show: false
},
series: [{
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 50,
label: {
show: true,
position: 'bottom',
formatter: function(params) {
return params.data.name.split('\n').join('\n');
},
color: '#b0b0b0',
fontSize: 12,
align: 'center'
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
data: data,
links: [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 },
{ source: 4, target: 5 }
],
lineStyle: {
color: 'rgba(0, 255, 255, 0.5)',
width: 2,
},
itemStyle: {
color: '#00ffff',
borderColor: '#fff',
borderWidth: 1,
shadowBlur: 10,
shadowColor: 'rgba(0, 255, 255, 0.6)'
},
emphasis: {
scale: true,
itemStyle: {
borderColor: '#00ffff',
shadowColor: 'rgba(0, 255, 255, 1)'
}
}
}, {
type: 'lines',
coordinateSystem: 'cartesian2d',
z: 1,
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
color: '#fff',
symbolSize: 8
},
lineStyle: {
width: 0,
curveness: 0
},
data: [
[{coord: [0.5,0]},{coord: [6.5,0]}]
]
}]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>