feat: 添加设计文件packages
This commit is contained in:
R524809
229
packages/design-ui/index.html
Normal file
229
packages/design-ui/index.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!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 rel="stylesheet" href="styles.css">
|
||||
<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 主容器 -->
|
||||
<div class="app-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<h1 class="app-title">思投录</h1>
|
||||
<p class="app-subtitle">让每笔投资都经得起思考</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<main class="main-content">
|
||||
<!-- 持仓概览卡片 -->
|
||||
<section class="overview-card">
|
||||
<div class="card-header">
|
||||
<h2>持仓概览</h2>
|
||||
<span class="total-value">¥128,450.00</span>
|
||||
</div>
|
||||
<div class="portfolio-summary">
|
||||
<div class="summary-item">
|
||||
<span class="label">今日收益</span>
|
||||
<span class="value positive">+¥1,250.00</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="label">总收益率</span>
|
||||
<span class="value positive">+12.5%</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<nav class="bottom-nav">
|
||||
<div class="nav-item active" data-tab="portfolio">
|
||||
<div class="nav-icon">📊</div>
|
||||
<span>持仓</span>
|
||||
</div>
|
||||
<div class="nav-item" data-tab="plans">
|
||||
<div class="nav-icon">📋</div>
|
||||
<span>计划</span>
|
||||
</div>
|
||||
<div class="nav-item" data-tab="records">
|
||||
<div class="nav-icon">📝</div>
|
||||
<span>记录</span>
|
||||
</div>
|
||||
<div class="nav-item" data-tab="tools">
|
||||
<div class="nav-icon">🛠️</div>
|
||||
<span>我的</span>
|
||||
</div>
|
||||
</nav>
|
||||
</main>
|
||||
|
||||
<!-- 持仓页面 -->
|
||||
<div class="page" id="portfolio-page">
|
||||
<div class="page-header">
|
||||
<h2>我的持仓</h2>
|
||||
<button class="add-btn">+ 添加</button>
|
||||
</div>
|
||||
|
||||
<div class="holdings-list">
|
||||
<div class="holding-item">
|
||||
<div class="stock-info">
|
||||
<div class="stock-name">贵州茅台</div>
|
||||
<div class="stock-code">600519</div>
|
||||
</div>
|
||||
<div class="holding-details">
|
||||
<div class="shares">100股</div>
|
||||
<div class="current-price">¥1,850.00</div>
|
||||
<div class="profit positive">+¥2,500.00 (+15.6%)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="holding-item">
|
||||
<div class="stock-info">
|
||||
<div class="stock-name">腾讯控股</div>
|
||||
<div class="stock-code">00700</div>
|
||||
</div>
|
||||
<div class="holding-details">
|
||||
<div class="shares">200股</div>
|
||||
<div class="current-price">¥320.00</div>
|
||||
<div class="profit negative">-¥800.00 (-1.2%)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易计划页面 -->
|
||||
<div class="page hidden" id="plans-page">
|
||||
<div class="page-header">
|
||||
<h2>交易计划</h2>
|
||||
<button class="add-btn">+ 新建</button>
|
||||
</div>
|
||||
|
||||
<div class="plans-list">
|
||||
<div class="plan-item">
|
||||
<div class="plan-header">
|
||||
<div class="stock-info">
|
||||
<div class="stock-name">招商银行</div>
|
||||
<div class="stock-code">600036</div>
|
||||
</div>
|
||||
<div class="plan-status pending">进行中</div>
|
||||
</div>
|
||||
<div class="plan-details">
|
||||
<div class="plan-row">
|
||||
<span class="label">目标价格：</span>
|
||||
<span class="value">¥45.00</span>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<span class="label">计划金额：</span>
|
||||
<span class="value">¥10,000</span>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<span class="label">截止时间：</span>
|
||||
<span class="value">2024-03-15</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plan-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: 60%"></div>
|
||||
</div>
|
||||
<span class="progress-text">已完成 60%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 交易记录页面 -->
|
||||
<div class="page hidden" id="records-page">
|
||||
<div class="page-header">
|
||||
<h2>交易记录</h2>
|
||||
<button class="add-btn">+ 记录</button>
|
||||
</div>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2024-01-15</div>
|
||||
<div class="timeline-content">
|
||||
<div class="transaction-card">
|
||||
<div class="transaction-header">
|
||||
<div class="stock-info">
|
||||
<div class="stock-name">贵州茅台</div>
|
||||
<div class="stock-code">600519</div>
|
||||
</div>
|
||||
<div class="transaction-type buy">买入</div>
|
||||
</div>
|
||||
<div class="transaction-details">
|
||||
<div class="detail-row">
|
||||
<span>数量：</span>
|
||||
<span>100股</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span>价格：</span>
|
||||
<span>¥1,600.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transaction-thoughts">
|
||||
<h4>交易思考：</h4>
|
||||
<p>基于茅台品牌价值和长期增长潜力，认为当前价格具有投资价值。白酒行业龙头地位稳固，现金流优秀。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的页面 -->
|
||||
<div class="page hidden" id="tools-page">
|
||||
<div class="page-header">
|
||||
<h2>我的工具</h2>
|
||||
</div>
|
||||
|
||||
<div class="tools-grid">
|
||||
<div class="tool-card" data-tool="checklist">
|
||||
<div class="tool-icon">✅</div>
|
||||
<div class="tool-name">投资检查清单</div>
|
||||
<div class="tool-desc">买入卖出检查项</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card" data-tool="calculator">
|
||||
<div class="tool-icon">🧮</div>
|
||||
<div class="tool-name">复利计算器</div>
|
||||
<div class="tool-desc">计算未来收益</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card" data-tool="valuation">
|
||||
<div class="tool-icon">📈</div>
|
||||
<div class="tool-name">估值工具</div>
|
||||
<div class="tool-desc">企业价值评估</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-card" data-tool="freedom">
|
||||
<div class="tool-icon">🎯</div>
|
||||
<div class="tool-name">自由目标</div>
|
||||
<div class="tool-desc">财务自由规划</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模态框 -->
|
||||
<div class="modal" id="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="modal-title">标题</h3>
|
||||
<button class="close-btn" id="close-modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-body">
|
||||
<!-- 动态内容 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user