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

480
public/htmls/车路云一体化.html Normal file
View File

@@ -0,0 +1,480 @@
好的，遵照您的要求，以下是为“车路云一体化”概念生成的深度研究报告HTML页面。
本页面采用 **Tailwind CSS**, **DaisyUI**, **Alpine.js**, 和 **ECharts** 构建，设计灵感源于科幻未来主义界面（FUI）和光影艺术，呈现为一个漂浮在深空中的半透明玻璃态数据终端。
<!DOCTYPE html>
<html lang="zh-CN" data-theme="mytheme">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车路云一体化 | 深度研究报告</title>
<!-- Tailwind & DaisyUI via CDN -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js via CDN -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- ECharts via CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<!-- Google Fonts: Poppins -->
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #080618;
color: #e0e0e0;
overflow-x: hidden;
}
.animated-gradient {
background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #0f0c29);
background-size: 400% 400%;
animation: gradient 25s ease infinite;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.glass {
background: rgba(31, 41, 55, 0.2); /* bg-gray-800 with transparency */
backdrop-filter: blur(24px) saturate(150%);
-webkit-backdrop-filter: blur(24px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 0 80px rgba(0, 246, 255, 0.05);
}
.glow-border {
border-image-source: linear-gradient(to right, #00f6ff, #ff00e5);
border-image-slice: 1;
border-width: 1px;
border-style: solid;
}
.section-title {
text-shadow: 0 0 15px rgba(0, 246, 255, 0.5);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1.5rem;
}
.bento-item {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 0 100px rgba(0, 246, 255, 0.15);
}
.bento-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento-item:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.bento-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.bento-item:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.bento-item:nth-child(5) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1024px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.bento-item:nth-child(n) { grid-column: span 2; grid-row: span 1; }
.bento-item:nth-child(1) { grid-row: span 2; }
.bento-item:nth-child(4) { grid-row: span 2; }
.bento-item:nth-child(5) { grid-row: span 2; }
}
@media (max-width: 768px) {
.bento-grid { grid-template-columns: 1fr; }
.bento-item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
.bento-item:nth-child(1) { grid-row: span 2; }
.bento-item:nth-child(4) { grid-row: span 2; }
.bento-item:nth-child(5) { grid-row: span 2; }
}
.table thead th, .table tbody td {
background-color: transparent !important;
border-bottom-width: 1px;
border-color: rgba(255, 255, 255, 0.1) !important;
}
</style>
</head>
<body>
<div class="animated-gradient"></div>
<main class="container mx-auto p-4 md:p-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary section-title">
车路云一体化
</h1>
<p class="mt-4 text-xl md:text-2xl text-gray-300">新质生产力核心赛道 | 国家战略驱动的万亿级新基建浪潮</p>
<div class="mt-4 text-xs text-gray-500 glass rounded-full inline-block px-4 py-2">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现 | 本报告为AI合成数据，投资需谨慎
</div>
</header>
<!-- Insight Bento Grid -->
<section class="mb-16">
<div class="bento-grid">
<!-- Core Viewpoint -->
<div class="bento-item glass rounded-3xl p-6 flex flex-col">
<h2 class="text-2xl font-bold text-primary mb-4">核心观点摘要</h2>
<p class="text-gray-300 leading-relaxed flex-grow">
“车路云一体化”是国家顶层设计驱动下的新质生产力核心赛道，当前正处于从政策发布到<strong>大规模基础设施建设启动</strong>的“0到1”关键阶段。其核心驱动力是<strong>国家战略意志下的巨额财政投入（超长期国债/专项债）</strong>，旨在解决单车智能的技术瓶颈，构建中国特色的自动驾驶“高速公路”。短期内，设备供应商将最先受益于基建红利，但长期商业模式的清晰化和数据价值的实现将是决定其万亿级产业潜力能否兑现的关键。
</p>
</div>
<!-- Core Logic -->
<div class="bento-item glass rounded-3xl p-6">
<h2 class="text-2xl font-bold text-primary mb-4">核心驱动力：政策强推新基建</h2>
<ul class="space-y-3 text-gray-300 list-disc list-inside">
<li><strong>顶层设计定调:</strong> 五部委试点通知明确“城市级全域覆盖”模式，提供最高级别政策确定性。</li>
<li><strong>财政资金兜底:</strong> 国家专项债/超长期国债提供主要资金来源（占比~70%），确保百亿级项目（北京~100亿，武汉~170亿）快速启动。</li>
<li><strong>技术路线选择:</strong> “车路协同+单车智能”路线，利用基建优势“换道超车”，为L3以上自动驾驶提供基础设施保障。</li>
</ul>
</div>
<!-- Catalysts -->
<div class="bento-item glass rounded-3xl p-6">
<h2 class="text-2xl font-bold text-primary mb-4">关键催化剂</h2>
<ul class="space-y-3 text-gray-300 list-disc list-inside">
<li><strong>近期 (3-6月):</strong> 国家级标准与路线图发布（预计年底）；首批试点项目大规模招标与中标公告；强制装配C-V2X终端政策预期。</li>
<li><strong>长期发展路径:</strong>
<ul class="ml-4 space-y-1">
<li><strong>'24-'26:</strong> 基础设施建设期 (政府投资驱动)</li>
<li><strong>'26-'28:</strong> 应用渗透期 (B端商业应用落地)</li>
<li><strong>'28-'30:</strong> 生态构建期 (C端订阅与数据商业化成熟)</li>
</ul>
</li>
</ul>
</div>
<!-- Market Size Chart -->
<div class="bento-item glass rounded-3xl p-6 flex flex-col">
<h2 class="text-2xl font-bold text-primary mb-4">市场空间与发展目标</h2>
<div id="marketChart" class="flex-grow min-h-[300px]"></div>
</div>
<!-- Risks -->
<div class="bento-item glass rounded-3xl p-6 flex flex-col">
<h2 class="text-2xl font-bold text-error mb-4">潜在风险与挑战</h2>
<ul class="space-y-3 text-gray-300 list-disc list-inside flex-grow">
<li><strong>技术风险:</strong> 国家标准尚未统一，可能导致重复投资；MEC边缘计算受高性能GPU供应限制，核心硬件国产化面临挑战。</li>
<li><strong>商业化风险:</strong> 盈利模式不清晰，当前严重依赖政府投资，自身“造血”能力待验证。高昂的单路口改造成本（50-200万）可能限制推广速度。</li>
<li><strong>政策与竞争风险:</strong> 财政资金落地进度不及预期；华为等巨头及大量企业涌入，可能导致价格战，压缩利润率。</li>
<li><strong>信息交叉验证风险:</strong> 新闻与研报中对项目投资额、市场规模的估算存在差异，需谨慎对待具体数值。</li>
</ul>
</div>
</div>
</section>
<!-- Supporting Evidence Section -->
<section class="mb-16" x-data="{ tab: 'policy' }">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-8 section-title">多维数据洞察</h2>
<div class="tabs tabs-boxed justify-center glass mb-6">
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'policy' }" @click="tab = 'policy'">政策与项目</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'tech' }" @click="tab = 'tech'">技术与标准</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'chain' }" @click="tab = 'chain'">产业链与商业化</a>
</div>
<div class="glass rounded-3xl p-6 min-h-[400px]">
<!-- Tab 1: Policy & Projects -->
<div x-show="tab === 'policy'" x-transition>
<h3 class="text-2xl font-bold text-primary mb-4">宏观政策与地方试点</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-semibold mb-2 text-secondary">国家级顶层设计</h4>
<ul class="space-y-2 list-disc list-inside text-gray-300">
<li><strong>五部门试点:</strong> 工信部、公安部等确定北京、上海、重庆等20个城市为应用试点。</li>
<li><strong>国家级路线图:</strong> “车路云一体化”推进路线图及基础设施分级标准征求意见稿或于今年底形成。</li>
<li><strong>“十五五”规划:</strong> 提出交通强国战略，推动车路云进入规模化发展阶段。</li>
<li><strong>2030年目标:</strong> 交通事故率降低80%以上，城市拥堵指数下降30%以上。</li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-2 text-secondary">地方项目建设（部分）</h4>
<ul class="space-y-2 list-disc list-inside text-gray-300">
<li><strong>北京:</strong> 总投资近百亿（99.39亿），改造约6050个路口，已启动设备招标。</li>
<li><strong>武汉:</strong> 备案金额高达170亿元，为全球最大单体项目之一。</li>
<li><strong>重庆:</strong> 目标到2027年建成600个感知路口，覆盖2500公里道路。</li>
<li><strong>其他城市:</strong> 上海、深圳、福州、杭州、合肥、长春等多地项目密集启动备案或招标。</li>
</ul>
</div>
</div>
</div>
<!-- Tab 2: Technology & Standards -->
<div x-show="tab === 'tech'" x-transition>
<h3 class="text-2xl font-bold text-primary mb-4">核心技术架构</h3>
<div class="grid md:grid-cols-3 gap-6 text-gray-300">
<div class="p-4 border border-gray-700 rounded-2xl">
<h4 class="text-xl font-semibold text-secondary">路端 (Roadside)</h4>
<p class="mt-2">部署于交叉路口、桥隧等复杂场景。核心设备包括：感知设备 (AI摄像头、雷达)、通信设备 (RSU)、计算设备 (MEC边缘计算单元)。</p>
</div>
<div class="p-4 border border-gray-700 rounded-2xl">
<h4 class="text-xl font-semibold text-secondary">车端 (Vehicle)</h4>
<p class="mt-2">核心设备为OBU (车载单元)，支持5G+C-V2X通信。预期2025年起试点城市新车强制装配，实现与路、云实时交互。</p>
</div>
<div class="p-4 border border-gray-700 rounded-2xl">
<h4 class="text-xl font-semibold text-secondary">云端 (Cloud)</h4>
<p class="mt-2">采用“边缘云-区域云-中心云”三层架构。云控平台是数据处理与决策中枢，实现数据融合、交通管理和协同算法。</p>
</div>
</div>
<p class="mt-6 text-center text-lg"><strong>关键技术:</strong> <strong>C-V2X</strong> 作为通信底座，实现车、路、云、人互联互通。<strong>AI大模型</strong>与<strong>边缘计算(MEC)</strong>是实现低延迟、高可靠协同决策的关键。</p>
</div>
<!-- Tab 3: Industry & Commercialization -->
<div x-show="tab === 'chain'" x-transition>
<h3 class="text-2xl font-bold text-primary mb-4">产业链图谱与商业模式</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="text-xl font-semibold mb-2 text-secondary">产业链核心环节</h4>
<ul class="space-y-2 list-disc list-inside text-gray-300">
<li><strong>上游:</strong> 芯片/模组 (华为、高通)、传感器 (海康、大华)、高精度地图服务商。</li>
<li><strong>中游 (本轮投资核心):</strong> RSU/OBU设备商 (金溢科技、万集科技)、云控平台 (四维图新、百度Apollo)。</li>
<li><strong>下游:</strong> 系统集成商 (千方科技、三大运营商)、整车厂 (宝马、北汽)、应用方 (交通管理部门)。</li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-2 text-secondary">商业模式探索</h4>
<ul class="space-y-2 list-disc list-inside text-gray-300">
<li><strong>核心逻辑:</strong> 数据价值挖掘 + B端服务收费 + 产业链延伸。</li>
<li><strong>B端服务:</strong> 向公交、物流、出租车公司提供路径优化、辅助驾驶服务；向地图、保险公司提供实时数据。</li>
<li><strong>C端服务:</strong> 探索类似特斯拉FSD的订阅服务，解锁高级自动驾驶功能。</li>
<li><strong>模式借鉴:</strong> 参考高速公路“借钱修路、收费还贷”模式，通过运营服务偿还建设投资。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Conclusion & Key Stocks -->
<section>
<h2 class="text-3xl md:text-4xl font-bold text-center mb-8 section-title">相关概念股梳理</h2>
<div class="overflow-x-auto glass rounded-3xl p-2">
<table class="table table-zebra text-base">
<!-- head -->
<thead class="text-lg text-primary">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑与关联性</th>
<th>项目/其他信息</th>
</tr>
</thead>
<tbody>
<!-- Goldpac -->
<tr>
<td class="font-semibold">金溢科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002869" target="_blank" class="link link-hover">002869</a></td>
<td>车路云一体化全栈式产品布局，RSU/OBU设备核心供应商，在近年RSU销量上占据市场龙头地位，业绩与基建投资直接挂钩，弹性高。</td>
<td>参与深圳“车路云”一体化重大项目新建工程。</td>
</tr>
<!-- VanJee -->
<tr>
<td class="font-semibold">万集科技</td>
<td><a href="https://valuefrontier.cn/company?scode=300552" target="_blank" class="link link-hover">300552</a></td>
<td>路侧激光雷达和RSU/OBU领域的领导者之一，业务布局全面，覆盖感知、通信和决策。技术实力强，深度参与国家标准制定。</td>
<td>北京车路云一体化项目中标候选人。</td>
</tr>
<!-- NavInfo -->
<tr>
<td class="font-semibold">四维图新</td>
<td><a href="https://valuefrontier.cn/company?scode=002405" target="_blank" class="link link-hover">002405</a></td>
<td>高精度地图、云控平台与AI算法的核心竞争力企业。其价值在于软件和数据，是产业链长期价值的核心。</td>
<td>旗下世纪高通与百度联合中标北京高级别自动驾驶示范区3.0项目，金额2.5亿元。</td>
</tr>
<!-- China TransInfo -->
<tr>
<td class="font-semibold">千方科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002373" target="_blank" class="link link-hover">002373</a></td>
<td>传统智能交通龙头，具备强大的项目总包和集成能力，有望在各地项目中获取较大订单份额。</td>
<td>深度参与北京车路云项目。</td>
</tr>
<!-- Neusoft -->
<tr>
<td class="font-semibold">东软集团</td>
<td><a href="https://valuefrontier.cn/company?scode=600718" target="_blank" class="link link-hover">600718</a></td>
<td>具备软硬件一体化能力，负责开发国产化C-V2X协议栈、智能终端和云控平台，区域优势明显。</td>
<td>子公司参与武汉(经开区)车路云一体化项目。</td>
</tr>
<!-- Luchang -->
<tr>
<td class="font-semibold">路畅科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002813" target="_blank" class="link link-hover">002813</a></td>
<td>主营前装OBU/智能座舱盒，直接受益于强制装配C-V2X终端政策预期。与华为合作开发鸿蒙座舱车路协同网关。</td>
<td>获比亚迪“天神之眼”智能车机定点。</td>
</tr>
<!-- Soling -->
<tr>
<td class="font-semibold">索菱股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002766" target="_blank" class="link link-hover">002766</a></td>
<td>车载通信单元（V2X/T-Box）业务增长迅速，直接受益于V2X终端购置税抵免政策。具备L3车规级量产经验。</td>
<td>中标重庆高新区车路云项目车载终端1.8亿元。</td>
</tr>
<!-- China Telecom -->
<tr>
<td class="font-semibold">中国电信</td>
<td><a href="https://valuefrontier.cn/company?scode=601728" target="_blank" class="link link-hover">601728</a></td>
<td>运营商作为通信网络建设主导方，可能成为项目总包方，深度参与基础设施建设与后期运营。</td>
<td>旗下“天翼交通”参与苏州“车路云”一体化项目。</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<script>
// Tailwind & DaisyUI Config
tailwind.config = {
theme: {
extend: {
colors: {
// Your custom colors here
}
}
},
plugins: [
require('daisyui'),
],
daisyui: {
themes: [
{
mytheme: {
"primary": "#00f6ff",
"secondary": "#ff00e5",
"accent": "#37cdbe",
"neutral": "rgba(31, 41, 55, 0.2)",
"base-100": "#080618",
"info": "#3abff8",
"success": "#36d399",
"warning": "#fbbd23",
"error": "#f87272",
"--rounded-box": "1.5rem",
"--rounded-btn": "1rem",
},
},
],
},
}
// ECharts Initialization
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('marketChart');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(20, 20, 30, 0.8)',
borderColor: '#00f6ff',
textStyle: {
color: '#e0e0e0'
}
},
legend: {
data: ['项目投资 (亿元)', '产业规模 (万亿元)'],
textStyle: {
color: '#e0e0e0'
},
top: '5%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
},
yAxis: {
type: 'category',
data: ['首批试点城市总投资', '2025年产业增量规模', '2030年产业增量规模'],
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } }
},
series: [
{
name: '项目投资 (亿元)',
type: 'bar',
data: [1000, null, null], // 首批试点总投资约800-1000亿
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#00f6ff' },
{ offset: 1, color: '#37cdbe' }
])
},
label: {
show: true,
position: 'right',
formatter: '{c} 亿元',
color: '#fff'
}
},
{
name: '产业规模 (万亿元)',
type: 'bar',
data: [null, 0.7, 2.5], // 2025年7000亿, 2030年2.5万亿
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ff00e5' },
{ offset: 1, color: '#8a2be2' }
])
},
label: {
show: true,
position: 'right',
formatter: '{c} 万亿元',
color: '#fff'
}
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>