添加功能对比

_config/css/styles.css

@@ -74,14 +74,14 @@ section.cover ul {
   text-align: left;
   grid-column-gap: 16px;
   grid-row-gap: 20px;
-  grid-template-columns: repeat(2, 50%);
+  /* grid-template-columns: repeat(2, 50%); */
   list-style: none;
   max-width: unset;
   margin: 1.5em 0;
 }
 
 section.cover ul li {
-  white-space: nowrap;
+  /* white-space: nowrap; */
 }
 
 section.cover.show ~ .sidebar,
@@ -378,14 +378,117 @@ body .sidebar-toggle span:nth-child(3) {
 }
 
 /****** FOOTER *******/
+.features-comparison {
+  width: 100%;
+  background-color: #f8f9fa;
+  padding: 60px 0;
+  margin: 40px 0;
+}
+
+.comparison-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.comparison-title {
+  text-align: center;
+  margin-bottom: 40px;
+  font-size: 28px;
+  color: #333;
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-bottom: 40px;
+}
+
+.comparison-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease;
+}
+
+.comparison-card:hover {
+  transform: translateY(-5px);
+}
+
+.card-header {
+  text-align: center;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.card-title {
+  font-size: 22px;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.card-price {
+  font-size: 32px;
+  color: var(--theme-color);
+  font-weight: bold;
+}
+
+.card-price span {
+  font-size: 16px;
+  color: #666;
+}
+
+.feature-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.feature-list li {
+  display: flex;
+  align-items: flex-start;  /* 改为顶部对齐 */
+  margin-bottom: 15px;
+  color: #666;
+  font-size: 15px;
+  line-height: 1.4;  /* 添加行高 */
+}
+
+.feature-list li:before {
+  content: '';
+  flex: 0 0 20px;  /* 固定宽度，防止被压缩 */
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  margin-top: 2px;  /* 微调图标位置，与文本第一行对齐 */
+  background-image: url('/_media/svg/check.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.feature-list li.unavailable {
+  color: #999;
+  text-decoration: line-through;
+}
+
+.feature-list li.unavailable:before {
+  background-image: url('/_media/svg/close.svg');
+}
+
+@media (max-width: 768px) {
+  .comparison-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .comparison-card {
+    margin-bottom: 20px;
+  }
+}
+
 .footer {
   color: #747a83;
-  /* position: fixed;
-  bottom: 10px;
-  z-index: 10;
-  left: 50%;
-  transform: translate(-50%, -50%); */
-
   z-index: 10;
   width: 100%;
   margin: 0 auto;
@@ -541,7 +644,7 @@ body .sidebar-toggle span:nth-child(3) {
   margin-left: 12px;
 }
 
-.skying-title,.screen-title  {
+.skying-title,.screen-title, .comparison-title  {
   color: var(--theme-color);
 }
 

_coverpage.md

@@ -96,6 +96,81 @@
   </div>
 </div>
 
+<div class="features-comparison">
+  <div class="comparison-container">
+    <h2 class="comparison-title">星空抽奖功能</h2>
+    <div class="comparison-grid">
+      <!-- 免费网页版 -->
+      <div class="comparison-card">
+        <div class="card-header">
+          <h3 class="card-title">网页版</h3>
+          <div class="card-price">免费</div>
+        </div>
+        <ul class="feature-list">
+          <li>需要网络（仅加载静态资源）</li>
+          <li>数据安全（浏览器本地存储）</li>
+          <li>简单易用（excel导入数据）</li>
+          <li>3D星空动画效果</li>
+          <li>支持1万人+抽奖</li>
+          <li>自定义Logo、背景（图片最大3M）</li>
+          <li>中奖名单可Excel下载</li>
+          <li>可投屏，全屏显示</li>
+          <li>无时间次数限制</li>
+          <!-- <li class="unavailable">分批次抽奖</li>
+          <li class="unavailable">Excel批量导入</li>
+          <li class="unavailable">自定义背景音乐</li>
+          <li class="unavailable">离线运行模式</li>
+          <li class="unavailable">数据本地存储</li> -->
+        </ul>
+      </div>
+      <!-- 专业版 -->
+      <div class="comparison-card">
+        <div class="card-header">
+          <h3 class="card-title">安装版</h3>
+          <div class="card-price">49.9<span>元/一个月</span></div>
+        </div>
+        <ul class="feature-list">
+          <li>无需网络（U盘运行，完全离线）</li>
+          <li>数据安全（数据存储在你电脑上）</li>
+          <li>简单易用（Excel一键导入名单）</li>
+          <li>3D星空动画效果</li>
+          <li>支持1万人+抽奖</li>
+          <li>自定义Logo、背景，音乐，字体，二维码（图片无大小限制）</li>
+          <li>支持分批次抽奖</li>
+          <li>支持取消中奖重新抽取</li>
+          <li>支持外接抽奖按钮</li>
+          <li>可投屏，全屏显示</li>
+          <li>无次数机器限制</li>
+        </ul>
+      </div>
+      <!-- 企业版 -->
+      <div class="comparison-card">
+        <div class="card-header">
+          <h3 class="card-title">升级版</h3>
+          <div class="card-price">199.9<span>元/一年</span></div>
+        </div>
+        <ul class="feature-list">
+          <li>无需网络（U盘运行，完全离线）</li>
+          <li>数据安全（数据存储在你电脑上）</li>
+          <li>简单易用（Excel一键导入名单）</li>
+          <li>3D星空动画效果</li>
+          <li>支持1万人+抽奖</li>
+          <li>自定义Logo、背景，音乐，字体，二维码（图片无大小限制）</li>
+          <li>支持分批次抽奖</li>
+          <li>支持取消中奖重新抽取</li>
+          <li>支持外接抽奖按钮</li>
+          <li>可投屏，全屏显示</li>
+          <li>无次数机器限制</li>
+          <li>无人数上限</li>
+          <li>专属技术支持</li>
+          <li>免费功能更新</li>
+          <li>7*24售后服务</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- <div class="buttons">
   <a href="https://git.luckday.cn" target="_blank"><span>Git</span></a>
   <a href="#/README"><span>Get Started</span></a>

_media/svg/check.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
+    fill="#e50914" fill-opacity="0.2" />
+  <path d="M16 24L22 30L32 20" stroke="#e50914" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

_media/svg/close.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
+    fill="#999" fill-opacity="0.2" />
+  <path d="M16 16L32 32M32 16L16 32" stroke="#999" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

_media/svg/right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760251277935" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7528" id="mx_n_1760251277936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M44.42112 578.12992l685.25568 0-259.18464 248.69376 183.22432 0 324.00896-310.79424-324.00896-310.8352L470.49728 205.19424l259.18464 248.66304L44.42112 453.85728 44.42112 578.12992z" fill="red" p-id="7529"></path></svg>