body.html
Changed around line 1
+
+
DividendFolio
+
智能红利投资组合分析与回测
+
+
+
+
+
预设投资组合
+
+
+
高红利组合
+
年化收益率: 8.5%
+
+
+
+
低波动组合
+
年化收益率: 7.2%
+
+
+
+
高质量公司组合
+
年化收益率: 9.1%
+
+
+
+
+
+
+
自定义投资组合
+
+
+ 高红利
+
+
+ 低波动
+
+
+ 高质量公司
+
+
+
+
+
+
+
+
+
+
组合分析结果
+
+
+
年化收益率
+
-
+
+
+
最大回撤
+
-
+
+
+
夏普比率
+
+
+
+
+
+
+
+
+
+
+
+ 关于我们
+ 联系我们
+ 隐私政策
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://dividendfolio.scroll.pub
+ metaTags
+ editButton /edit.html
+ title DividendFolio - 红利投资组合分析
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # dividendfolio1.scroll.pub
+ Website generated by DeepSeek from prompt: 做一个网站，网站是给投资人用于挑选红利组合的一个投资网站，网站上显示几个常见的投资组合的过往表现。投资人可以选择标的池的股票，标的池的股票有三个维度是否是红利、是否低波、是否高质量公司。投资人可以选择自己股票组成想要的组合，看回测数据。
script.js
Changed around line 1
+ // Sample stock data
+ const stocks = [
+ { name: 'AAPL', dividend: true, lowVolatility: false, highQuality: true },
+ { name: 'MSFT', dividend: true, lowVolatility: true, highQuality: true },
+ { name: 'TSLA', dividend: false, lowVolatility: false, highQuality: false },
+ { name: 'JNJ', dividend: true, lowVolatility: true, highQuality: true },
+ { name: 'XOM', dividend: true, lowVolatility: false, highQuality: false },
+ { name: 'PG', dividend: true, lowVolatility: true, highQuality: true }
+ ];
+
+ // DOM Elements
+ const stockGrid = document.getElementById('stock-grid');
+ const analyzeButton = document.getElementById('analyze-button');
+ const resultsSection = document.getElementById('analysis-results');
+ const annualReturn = document.getElementById('annual-return');
+ const maxDrawdown = document.getElementById('max-drawdown');
+ const sharpeRatio = document.getElementById('sharpe-ratio');
+ const performanceChart = document.getElementById('performance-chart');
+
+ // Initialize stock grid
+ function renderStocks() {
+ stockGrid.innerHTML = '';
+ stocks.forEach(stock => {
+ const stockCard = document.createElement('div');
+ stockCard.className = 'stock-card';
+ stockCard.innerHTML = `
+
${stock.name}
+
+ 红利
+ 低波
+ 高质量
+
+
+ `;
+ stockGrid.appendChild(stockCard);
+ });
+ }
+
+ // Analyze portfolio
+ function analyzePortfolio() {
+ // Simulate analysis results
+ annualReturn.textContent = '7.8%';
+ maxDrawdown.textContent = '-12.3%';
+ sharpeRatio.textContent = '1.2';
+
+ // Show results section
+ resultsSection.style.display = 'block';
+
+ // Chart data
+ const chartData = {
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ datasets: [{
+ label: '组合表现',
+ data: [100, 105, 102, 110, 115, 120],
+ borderColor: '#3498db',
+ fill: false
+ }]
+ };
+
+ // Render chart
+ new Chart(performanceChart, {
+ type: 'line',
+ data: chartData,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ });
+ }
+
+ // Event listeners
+ analyzeButton.addEventListener('click', analyzePortfolio);
+
+ // Initial render
+ renderStocks();
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --secondary-color: #3498db;
+ --accent-color: #e74c3c;
+ --background-color: #f5f6fa;
+ --text-color: #2c3e50;
+ --card-bg: #ffffff;
+ --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ margin: 0;
+ padding: 0;
+ }
+
+ header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .portfolio-grid, .stock-grid, .results-grid {
+ display: grid;
+ gap: 1.5rem;
+ padding: 2rem;
+ }
+
+ .portfolio-grid {
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ }
+
+ .stock-grid {
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ }
+
+ .results-grid {
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ }
+
+ .portfolio-card, .metric-card {
+ background: var(--card-bg);
+ padding: 1.5rem;
+ border-radius: 8px;
+ box-shadow: var(--shadow);
+ transition: transform 0.3s ease;
+ }
+
+ .portfolio-card:hover {
+ transform: translateY(-5px);
+ }
+
+ button {
+ background: var(--secondary-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ }
+
+ button:hover {
+ background: #2980b9;
+ }
+
+ .chart-container {
+ max-width: 800px;
+ margin: 2rem auto;
+ }
+
+ .filter-controls {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin: 1rem 0;
+ }
+
+ footer {
+ background: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ footer nav {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ }
+
+ footer a {
+ color: white;
+ text-decoration: none;
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .portfolio-grid {
+ grid-template-columns: 1fr;
+ }
+ }