init
This commit is contained in:
646
public/htmls/社保.html
Normal file
646
public/htmls/社保.html
Normal file
@@ -0,0 +1,646 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>社保概念股分析 - 金融与科技融合的新机遇</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #1a73e8;
|
||||
--secondary-color: #34a853;
|
||||
--accent-color: #ea4335;
|
||||
--light-bg: #f8f9fa;
|
||||
--dark-text: #202124;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
color: var(--dark-text);
|
||||
background-color: #ffffff;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1a73e8 0%, #34a853 100%);
|
||||
color: white;
|
||||
padding: 4rem 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="rgba(255,255,255,0.05)" width="50" height="50" x="0" y="0"></rect><rect fill="rgba(255,255,255,0.05)" width="50" height="50" x="50" y="50"></rect></svg>');
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 4px;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
background-color: var(--light-bg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(26, 115, 232, 0.05);
|
||||
}
|
||||
|
||||
.badge-industry {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.industry-1 { background-color: #e8f0fe; color: #1a73e8; }
|
||||
.industry-2 { background-color: #e6f4ea; color: #34a853; }
|
||||
.industry-3 { background-color: #fce8e6; color: #ea4335; }
|
||||
.industry-4 { background-color: #fef7e0; color: #fbbc04; }
|
||||
.industry-5 { background-color: #f3e8ff; color: #a142f4; }
|
||||
|
||||
.footer {
|
||||
background-color: var(--light-bg);
|
||||
padding: 2rem 0;
|
||||
margin-top: 4rem;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container hero-content">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-4 fw-bold mb-3">社保概念股分析</h1>
|
||||
<p class="lead mb-4">探索金融与科技融合的新机遇，把握社保产业链投资价值</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-light text-dark px-3 py-2"><i class="bi bi-credit-card me-1"></i> 社保卡</span>
|
||||
<span class="badge bg-light text-dark px-3 py-2"><i class="bi bi-gear me-1"></i> 社保系统</span>
|
||||
<span class="badge bg-light text-dark px-3 py-2"><i class="bi bi-cpu me-1"></i> 芯片技术</span>
|
||||
<span class="badge bg-light text-dark px-3 py-2"><i class="bi bi-diagram-3 me-1"></i> 产业链</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
|
||||
<div class="d-flex justify-content-lg-end justify-content-center gap-4">
|
||||
<div class="text-center">
|
||||
<div class="stat-number">24</div>
|
||||
<div>相关企业</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="stat-number">5</div>
|
||||
<div>细分领域</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container my-5">
|
||||
<!-- Concept Overview -->
|
||||
<section class="mb-5">
|
||||
<h2 class="section-title">社保概念概述</h2>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
|
||||
<i class="bi bi-credit-card-2-front text-primary fs-4"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">社保卡制造</h5>
|
||||
</div>
|
||||
<p class="card-text">第三代社保卡全面升级，集成金融功能，发卡量持续增长，带动相关产业链发展。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
|
||||
<i class="bi bi-server text-success fs-4"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">社保系统建设</h5>
|
||||
</div>
|
||||
<p class="card-text">人社信息化建设加速，全国统一平台建设为相关IT服务商带来巨大市场空间。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-danger bg-opacity-10 p-3 rounded-circle me-3">
|
||||
<i class="bi bi-cpu text-danger fs-4"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">芯片技术</h5>
|
||||
</div>
|
||||
<p class="card-text">安全芯片是社保卡核心部件，国产替代趋势明显，技术壁垒高。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<div class="bg-warning bg-opacity-10 p-3 rounded-circle me-3">
|
||||
<i class="bi bi-phone text-warning fs-4"></i>
|
||||
</div>
|
||||
<h5 class="card-title mb-0">电子社保卡</h5>
|
||||
</div>
|
||||
<p class="card-text">电子社保卡快速普及，"一卡通"应用场景不断拓展，数字化服务需求增长。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industry Chain Analysis -->
|
||||
<section class="mb-5">
|
||||
<h2 class="section-title">社保产业链分析</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row text-center mb-4">
|
||||
<div class="col-md-4 mb-3 mb-md-0">
|
||||
<div class="stat-card">
|
||||
<h5>上游</h5>
|
||||
<p class="mb-1">芯片、基材、磁条</p>
|
||||
<div class="d-flex justify-content-center gap-2 mt-2">
|
||||
<span class="badge badge-industry industry-3">紫光国微</span>
|
||||
<span class="badge badge-industry industry-3">大唐电信</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3 mb-md-0">
|
||||
<div class="stat-card">
|
||||
<h5>中游</h5>
|
||||
<p class="mb-1">社保卡制造、系统建设</p>
|
||||
<div class="d-flex justify-content-center gap-2 mt-2">
|
||||
<span class="badge badge-industry industry-1">楚天龙</span>
|
||||
<span class="badge badge-industry industry-2">东软集团</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="stat-card">
|
||||
<h5>下游</h5>
|
||||
<p class="mb-1">应用服务、解决方案</p>
|
||||
<div class="d-flex justify-content-center gap-2 mt-2">
|
||||
<span class="badge badge-industry industry-5">新开普</span>
|
||||
<span class="badge badge-industry industry-5">熵基科技</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<strong>产业链特点：</strong>社保产业链呈现"上游高技术壁垒、中游集中度高、下游应用场景多元化"的特点。随着第三代社保卡和电子社保卡的普及，产业链各环节均迎来发展机遇。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Data Table -->
|
||||
<section class="mb-5">
|
||||
<h2 class="section-title">社保概念股一览</h2>
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>社保概念相关企业（24家）</span>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-primary me-2" onclick="filterTable('all')">全部</button>
|
||||
<button class="btn btn-sm btn-outline-primary me-2" onclick="filterTable('社保卡')">社保卡</button>
|
||||
<button class="btn btn-sm btn-outline-primary me-2" onclick="filterTable('社保系统')">社保系统</button>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="filterTable('其他')">其他</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-container">
|
||||
<table class="table table-hover mb-0" id="stockTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>行业</th>
|
||||
<th>项目</th>
|
||||
<th>产业链地位</th>
|
||||
<th>关联原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>楚天龙</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>社保卡发卡</td>
|
||||
<td>发卡量行业首位，市占率提升</td>
|
||||
<td>调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>德生科技</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>参与发行近170个城市，市场份额领先</td>
|
||||
<td>调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>紫光国微</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>入围多个省级项目并批量供货</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>东港股份</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>为12个省市提供服务</td>
|
||||
<td>调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>国民技术</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>电子社保卡</td>
|
||||
<td>主要参与者和技术产品供应商</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>恒宝股份</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>助力多省市实现供应</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>东信和平</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>首发全国首张人社部标准社保卡</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>鸿博股份</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>社保卡制作</td>
|
||||
<td>首家承接福建社保卡制作</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>澄天伟业</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>社保卡业务</td>
|
||||
<td>涉及社保卡业务</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>*ST天喻</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>第三代社保卡</td>
|
||||
<td>涉及第三代社保卡业务</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>大唐电信</strong></td>
|
||||
<td><span class="badge badge-industry industry-1">社保卡</span></td>
|
||||
<td>社保卡芯片</td>
|
||||
<td>提供社保卡芯片和模块</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>华信新材</strong></td>
|
||||
<td><span class="badge badge-industry industry-3">耗材</span></td>
|
||||
<td>智能卡基材</td>
|
||||
<td>主营智能卡基材用于社保卡，金卡工程配套企业</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>航天智造</strong></td>
|
||||
<td><span class="badge badge-industry industry-3">耗材</span></td>
|
||||
<td>磁条生产</td>
|
||||
<td>国内最大磁条生产商，与社保卡制卡公司合作</td>
|
||||
<td>调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>恒银科技</strong></td>
|
||||
<td><span class="badge badge-industry industry-4">制卡机</span></td>
|
||||
<td>社保卡制卡机</td>
|
||||
<td>实现批量供货</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>东软集团</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>人社部及省级系统建设</td>
|
||||
<td>承建人社部及15省核心系统，服务29省客户</td>
|
||||
<td>公告</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>久远银海</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>人社信息化建设</td>
|
||||
<td>人社部主要供应商，参与多项信息化建设</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>ST易联众</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>数智化人社项目</td>
|
||||
<td>参建人社部及省级项目，推出"一卡通"管理平台</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>用友网络</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>政务社保业务</td>
|
||||
<td>控股子公司保持政务社保全国占有率领先</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>山大地纬</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>社保卡一卡通</td>
|
||||
<td>拓展社保卡居民服务一卡通业务</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>浙大网新</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>社保医保信息化</td>
|
||||
<td>全资子公司为国内最早社保医保服务商之一</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>新开普</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>社保卡一卡通</td>
|
||||
<td>"社保卡进校园一卡通系统"对接多省平台</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>万达信息</strong></td>
|
||||
<td><span class="badge badge-industry industry-2">社保系统</span></td>
|
||||
<td>社保核心业务系统</td>
|
||||
<td>承接医保、社保、公积金等核心业务系统</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>京北方</strong></td>
|
||||
<td><span class="badge badge-industry industry-5">其他</span></td>
|
||||
<td>数字人民币社保卡</td>
|
||||
<td>参与客户数字人民币社保卡系统测试</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>熵基科技</strong></td>
|
||||
<td><span class="badge badge-industry industry-5">其他</span></td>
|
||||
<td>社保卡产品支持</td>
|
||||
<td>推出支持第二、三代及电子社保卡的产品</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Investment Value -->
|
||||
<section class="mb-5">
|
||||
<h2 class="section-title">投资价值与前景分析</h2>
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">核心投资逻辑</h5>
|
||||
<div class="accordion" id="investmentAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
|
||||
<i class="bi bi-graph-up-arrow text-success me-2"></i> 政策驱动
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#investmentAccordion">
|
||||
<div class="accordion-body">
|
||||
国家持续推进社保信息化建设，第三代社保卡全面推广，电子社保卡普及加速，政策红利持续释放。人社部"十四五"规划明确提出要推进社保卡"一卡通"建设，为相关企业带来确定性增长。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
|
||||
<i class="bi bi-people-fill text-primary me-2"></i> 市场空间
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#investmentAccordion">
|
||||
<div class="accordion-body">
|
||||
我国社保卡持卡人数已超过13亿，第三代社保卡替换需求巨大，预计市场规模超百亿。同时，社保系统建设和维护、电子社保卡应用拓展等衍生市场空间更为广阔，产业链各环节均受益。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
|
||||
<i class="bi bi-lightbulb-fill text-warning me-2"></i> 技术创新
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#investmentAccordion">
|
||||
<div class="accordion-body">
|
||||
第三代社保卡集成非接触式、金融功能等多项技术创新，安全芯片、加密算法等技术壁垒高。电子社保卡与数字人民币融合、生物识别应用等创新方向不断涌现，技术领先企业具备长期竞争力。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-3">投资关注点</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<div>
|
||||
<strong>市场份额</strong>
|
||||
<div class="small text-muted">关注社保卡发卡和系统建设市占率</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<div>
|
||||
<strong>技术壁垒</strong>
|
||||
<div class="small text-muted">芯片安全和系统整合能力是关键</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<div>
|
||||
<strong>客户资源</strong>
|
||||
<div class="small text-muted">人社部和省级客户资源优势明显</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item d-flex align-items-center">
|
||||
<i class="bi bi-check-circle-fill text-success me-2"></i>
|
||||
<div>
|
||||
<strong>创新应用</strong>
|
||||
<div class="small text-muted">电子社保卡和"一卡通"应用拓展</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="alert alert-warning mt-3 mb-0">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||||
<strong>风险提示：</strong>行业竞争加剧、政策推进不及预期、技术迭代风险
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>社保概念股分析</h5>
|
||||
<p class="mb-0">探索金融与科技融合的新机遇，把握社保产业链投资价值</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<p class="mb-0">数据来源：公开信息整理 | 更新时间：2023年</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 表格筛选功能
|
||||
function filterTable(industry) {
|
||||
const table = document.getElementById('stockTable');
|
||||
const rows = table.getElementsByTagName('tr');
|
||||
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const cell = rows[i].getElementsByTagName('td')[1];
|
||||
const cellText = cell.textContent || cell.innerText;
|
||||
|
||||
if (industry === 'all' || cellText.includes(industry)) {
|
||||
rows[i].style.display = '';
|
||||
} else {
|
||||
rows[i].style.display = 'none';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 添加表格响应式处理
|
||||
const tableContainer = document.querySelector('.table-container');
|
||||
const table = document.querySelector('.table');
|
||||
|
||||
// 检查表格宽度是否超出容器
|
||||
function checkTableOverflow() {
|
||||
if (table.offsetWidth > tableContainer.clientWidth) {
|
||||
tableContainer.style.overflowX = 'auto';
|
||||
} else {
|
||||
tableContainer.style.overflowX = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检查和窗口大小改变时检查
|
||||
checkTableOverflow();
|
||||
window.addEventListener('resize', checkTableOverflow);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user