添加功能对比
This commit is contained in:
liushuang
parent
c74a7c2549
commit
d054cf6320
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
7
_media/svg/check.svg
Normal file
7
_media/svg/check.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 427 B |
7
_media/svg/close.svg
Normal file
7
_media/svg/close.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 427 B |
1
_media/svg/right.svg
Normal file
1
_media/svg/right.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 576 B |
Loading…
Reference in New Issue
Block a user