feat: 更新文档以优化产品描述，调整核心优势和功能模块的展示，增强用户对License Manager的理解与使用体验，同时更新VitePress配置以支持自定义样式
This commit is contained in:
wood911010 committed
1 parent
3bae20aa26
commit
f08c12b785
3 files changed
+672
-703
No files matched your search
@@ -102,7 +102,8 @@ export default withMermaid(
|
||||
})
|
||||
],
|
||||
|
||||
['script', { src: 'https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js', defer: '' }]
|
||||
['script', { src: 'https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js' }],
|
||||
['link', { rel: 'stylesheet', href: '/.vitepress/custom.css' }]
|
||||
],
|
||||
base: '/', // 使用自定义域名时，base 应该设置为 '/'
|
||||
|
||||
|
||||
@@ -0,0 +1,486 @@
|
||||
/* Dynamic Background */
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
|
||||
animation: background-float 20s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes background-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: translateY(-10px) rotate(1deg);
|
||||
}
|
||||
66% {
|
||||
transform: translateY(10px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Core Layout */
|
||||
.VPContent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Hero Section Enhancement */
|
||||
.VPHero .VPImage {
|
||||
filter: drop-shadow(0 8px 32px rgba(59, 130, 246, 0.2));
|
||||
}
|
||||
|
||||
/* Value Proposition */
|
||||
.value-proposition {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
position: relative;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.value-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-light));
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.value-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.value-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.value-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.value-card h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.value-card p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Feature Grid */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 2rem;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.feature-item h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Use Cases */
|
||||
.use-cases {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.75rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.use-case-item {
|
||||
padding: 2rem;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.use-case-item:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.use-case-icon {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.use-case-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.use-case-item h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.use-case-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Commercialization Grid */
|
||||
.commercialization-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.75rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.commercialization-item {
|
||||
padding: 2rem;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.commercialization-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.commercialization-icon {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.commercialization-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.commercialization-item h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.commercialization-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Service Timeline */
|
||||
.service-timeline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
margin: 4rem 0 5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.timeline-number {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
color: var(--vp-c-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Architecture Grid */
|
||||
.architecture-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.architecture-item {
|
||||
padding: 2rem;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.architecture-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.architecture-icon {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.architecture-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.architecture-item h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.architecture-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Quick Start */
|
||||
.quick-start {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.75rem;
|
||||
margin: 4rem 0 5rem;
|
||||
}
|
||||
|
||||
.quick-start-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.75rem;
|
||||
border-radius: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.quick-start-link:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.quick-start-icon {
|
||||
margin-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quick-start-icon .iconify {
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.quick-start-content h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.quick-start-content p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Typography Enhancement */
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
margin: 3rem 0 2rem 0;
|
||||
background: linear-gradient(135deg, var(--vp-c-text-1), var(--vp-c-text-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 2.5rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.value-proposition,
|
||||
.feature-grid,
|
||||
.use-cases,
|
||||
.commercialization-grid,
|
||||
.architecture-grid,
|
||||
.quick-start {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.service-timeline {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.value-card,
|
||||
.feature-item,
|
||||
.use-case-item,
|
||||
.commercialization-item,
|
||||
.architecture-item,
|
||||
.quick-start-link {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.value-card,
|
||||
.feature-item,
|
||||
.use-case-item,
|
||||
.commercialization-item,
|
||||
.architecture-item,
|
||||
.quick-start-link {
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.value-card:hover,
|
||||
.feature-item:hover,
|
||||
.use-case-item:hover,
|
||||
.commercialization-item:hover,
|
||||
.architecture-item:hover,
|
||||
.quick-start-link:hover {
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
}
|
||||
}
|
||||
+184
-702
@@ -3,782 +3,264 @@ layout: home
|
||||
|
||||
hero:
|
||||
name: License Manager
|
||||
text: 企业级软件授权管理SaaS平台
|
||||
tagline: 全功能授权管理闭环 · 涵盖授权生成、订单管理、支付处理、发票管理、用户权限控制及完整的统计分析体系
|
||||
text: 企业级软件授权管理平台
|
||||
tagline: 构建完整的软件商业化生态 · 全生命周期授权管理解决方案
|
||||
image:
|
||||
src: /images/logo.png
|
||||
alt: License Manager
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 快速开始
|
||||
text: 开始使用
|
||||
link: /guide/getting-started
|
||||
- theme: alt
|
||||
text: 在线演示
|
||||
link: http://lm.cedar-v.com:18080
|
||||
- theme: alt
|
||||
text: GitHub
|
||||
text: 查看源码
|
||||
link: https://github.com/cedar-v/license-manager
|
||||
---
|
||||
|
||||
## 产品价值
|
||||
## 核心优势
|
||||
|
||||
<div class="value-proposition">
|
||||
<div class="value-card">
|
||||
<div class="value-badge">🚀 SDK快速集成</div>
|
||||
<p>提供多语言SDK（JavaScript、Java、Python、Go等），不区分开发语言，快速对接客户现有软件产品，降低客户集成门槛</p>
|
||||
<div class="value-icon">
|
||||
<iconify-icon icon="solar:shield-keyhole-bold-duotone" width="48" height="48"></iconify-icon>
|
||||
</div>
|
||||
<h3>企业级安全</h3>
|
||||
<p>硬件指纹绑定与RSA加密双重防护，有效阻断盗版与非法分发</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-badge">🎯 软件厂商数字化转型</div>
|
||||
<p>构建完整的软件商业化生态，实现从产品定价到用户付费、从授权发放到售后服务的全流程数字化管理</p>
|
||||
<div class="value-icon">
|
||||
<iconify-icon icon="solar:bolt-bold-duotone" width="48" height="48"></iconify-icon>
|
||||
</div>
|
||||
<h3>快速集成</h3>
|
||||
<p>多语言SDK支持，零门槛对接现有产品，分钟级完成集成</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-badge">🛡️ 多重安全防护体系</div>
|
||||
<p>硬件指纹绑定 + RSA-PSS-SHA256加密双重保障，有效阻断软件盗版和非法分发，保护商业利益</p>
|
||||
<div class="value-icon">
|
||||
<iconify-icon icon="solar:refresh-circle-bold-duotone" width="48" height="48"></iconify-icon>
|
||||
</div>
|
||||
<h3>完整闭环</h3>
|
||||
<p>从授权生成到售后服务的全流程数字化管理，一站式解决方案</p>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-badge">💰 完整商业化闭环</div>
|
||||
<p>支持在线/离线双重授权模式，提供完整的订单-支付-发票自动化流程，支持多种商业模式</p>
|
||||
<div class="value-icon">
|
||||
<iconify-icon icon="solar:chart-square-bold-duotone" width="48" height="48"></iconify-icon>
|
||||
</div>
|
||||
<h3>商业赋能</h3>
|
||||
<p>灵活的商业模式支持，助力软件厂商实现可持续增长</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 核心功能模块
|
||||
## 核心功能
|
||||
|
||||
<section class="lm-feature-grid" aria-label="核心功能模块">
|
||||
<article class="lm-feature-card" style="--accent-from:#3b82f6; --accent-to:#22d3ee;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:key-minimalistic-bold-duotone"></iconify-icon>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:key-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🔐 智能授权管理</h3>
|
||||
<p>双重授权模式（在线/离线）、硬件指纹绑定、RSA-PSS-SHA256加密保护、授权生命周期管理、状态实时监控</p>
|
||||
<h4>智能授权管理</h4>
|
||||
<p>在线/离线双重模式，硬件指纹绑定，RSA加密保护</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#8b5cf6; --accent-to:#ec4899;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:cart-large-4-bold-duotone"></iconify-icon>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:card-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>💰 订单支付系统</h3>
|
||||
<p>灵活定价策略、智能价格计算、订单状态管理、多维度订单筛选，支持免费试用、一次性购买、订阅制</p>
|
||||
<h4>订单支付系统</h4>
|
||||
<p>灵活定价策略，自动化支付流程，多重商业模式</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#f97316; --accent-to:#facc15;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:bill-list-bold-duotone"></iconify-icon>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:document-text-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📄 发票管理服务</h3>
|
||||
<p>自动化发票流程、发票状态跟踪、发票统计分析、PDF文件安全下载，用户自助申请发票</p>
|
||||
<h4>发票管理服务</h4>
|
||||
<p>自动化开票流程，电子发票下载，合规管理</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#0ea5e9; --accent-to:#14b8a6;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-bold-duotone"></iconify-icon>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:users-group-two-rounded-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>👥 用户权限体系</h3>
|
||||
<p>多级用户管理、账户安全保障、手机号注册、短信验证、密码重置、用户资料管理</p>
|
||||
<h4>用户权限体系</h4>
|
||||
<p>多级权限控制，账户安全，统一身份管理</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#14b8a6; --accent-to:#22d3ee;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:chart-2-bold-duotone"></iconify-icon>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:chart-2-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📊 数据统计分析</h3>
|
||||
<p>授权使用统计、设备管理统计、订单数据分析、趋势分析图表，支持按周/月/自定义时间范围分析</p>
|
||||
<h4>数据统计分析</h4>
|
||||
<p>实时数据监控，多维度统计报告，可视化仪表板</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#a855f7; --accent-to:#ec4899;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:settings-bold-duotone"></iconify-icon>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon="solar:settings-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>系统运维管理</h4>
|
||||
<p>健康状态监控，自动化运维，性能优化</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>⚙️ 系统运维管理</h3>
|
||||
<p>系统健康监控、管理员控制台、权限分级控制、多语言支持，实时监控系统运行状态</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#f43f5e; --accent-to:#fb7185;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:shield-minimalistic-bold-duotone"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🛡️ 多重安全防护</h3>
|
||||
<p>硬件指纹技术、RSA非对称加密、授权状态监控、离线授权支持，有效阻断软件盗版和非法分发</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#0f172a; --accent-to:#475569;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:server-bold-duotone"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🏗️ 企业级架构</h3>
|
||||
<p>模块化设计、高可用部署、弹性伸缩、容器化支持，支持集群部署保障7×24小时稳定运行</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="lm-feature-card" style="--accent-from:#16a34a; --accent-to:#4ade80;">
|
||||
<div class="lm-feature-icon">
|
||||
<iconify-icon icon="solar:link-minimalistic-2-bold-duotone"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🔌 开放API生态</h3>
|
||||
<p>RESTful API设计、多语言SDK支持、完善API文档、Swagger自动生成，便于第三方系统集成</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
## 适用场景与目标用户
|
||||
## 适用场景
|
||||
|
||||
<div class="use-cases">
|
||||
<div class="use-case-card">
|
||||
<h4>🏢 SaaS厂商</h4>
|
||||
<p>构建完整的软件商业化生态，实现从产品定价到用户付费的全流程数字化管理</p>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-icon">
|
||||
<iconify-icon icon="solar:buildings-2-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<h4>💻 软件开发商</h4>
|
||||
<p>ISV授权体系建设，支持订阅制、永久授权、企业批量许可等多种商业模式</p>
|
||||
<h4>SaaS厂商</h4>
|
||||
<p>构建完整的商业化生态，实现全流程数字化管理</p>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<h4>🏭 企业IT部门</h4>
|
||||
<p>企业软件采购管理，统一管理软件授权、订单和发票，优化采购流程</p>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-icon">
|
||||
<iconify-icon icon="solar:code-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<div class="use-case-card">
|
||||
<h4>👨💻 独立开发者</h4>
|
||||
<p>个人软件授权订阅管理，快速构建软件变现能力，降低技术门槛</p>
|
||||
<h4>软件开发商</h4>
|
||||
<p>灵活的授权体系，支持多种商业模式</p>
|
||||
</div>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-icon">
|
||||
<iconify-icon icon="solar:case-minimalistic-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<h4>企业IT部门</h4>
|
||||
<p>统一管理软件授权，优化采购流程</p>
|
||||
</div>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-icon">
|
||||
<iconify-icon icon="solar:user-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<h4>独立开发者</h4>
|
||||
<p>快速构建变现能力，降低技术门槛</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 软件货币化策略
|
||||
## 商业化支持
|
||||
|
||||
<div class="monetization-section">
|
||||
<p class="monetization-intro">软件商业化是一场系统性工程。从产品定价到用户获取，从试用到转化，从续费到升级，每一个环节都至关重要。License Manager作为您的商业化基石，提供完整的货币化技术栈：</p>
|
||||
<div class="commercialization-grid">
|
||||
<div class="commercialization-item">
|
||||
<div class="commercialization-icon">
|
||||
<iconify-icon icon="solar:dollar-minimalistic-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>灵活定价</h4>
|
||||
<p>多维度定价策略，支持按用户数、功能模块、使用时长</p>
|
||||
</div>
|
||||
<div class="commercialization-item">
|
||||
<div class="commercialization-icon">
|
||||
<iconify-icon icon="solar:refresh-circle-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>订阅管理</h4>
|
||||
<p>灵活的订阅周期，自动化续费提醒和生命周期管理</p>
|
||||
</div>
|
||||
<div class="commercialization-item">
|
||||
<div class="commercialization-icon">
|
||||
<iconify-icon icon="solar:buildings-3-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>企业采购</h4>
|
||||
<p>批量许可支持，优惠折扣计算，集中化管理</p>
|
||||
</div>
|
||||
<div class="commercialization-item">
|
||||
<div class="commercialization-icon">
|
||||
<iconify-icon icon="solar:diploma-verified-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>试用转化</h4>
|
||||
<p>试用期管理，分阶段功能解锁，引导用户升级</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monetization-grid">
|
||||
<div class="monetization-item">
|
||||
<h4>📊 定价策略数字化</h4>
|
||||
<p>支持多维度定价（按用户数、按功能模块、按使用时长）</p>
|
||||
## 定制开发服务
|
||||
|
||||
<div class="service-timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">3天</div>
|
||||
<div class="timeline-content">
|
||||
<h4>核心部署</h4>
|
||||
<p>标准授权管理功能快速集成</p>
|
||||
</div>
|
||||
<div class="monetization-item">
|
||||
<h4>🔄 订阅经济支撑</h4>
|
||||
<p>灵活的订阅周期管理（月付/年付/多年付），自动续费提醒</p>
|
||||
</div>
|
||||
<div class="monetization-item">
|
||||
<h4>🏢 企业批量采购</h4>
|
||||
<p>支持企业级批量许可，优惠折扣计算，集中化管理</p>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">7天</div>
|
||||
<div class="timeline-content">
|
||||
<h4>业务定制</h4>
|
||||
<p>根据商业模式定制定价策略和授权规则</p>
|
||||
</div>
|
||||
<div class="monetization-item">
|
||||
<h4>🎯 试用转化机制</h4>
|
||||
<p>试用期管理、功能限制、分阶段解锁引导用户升级</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-number">14天</div>
|
||||
<div class="timeline-content">
|
||||
<h4>完整上线</h4>
|
||||
<p>UI定制、流程优化、系统集成测试</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 定制化开发服务
|
||||
## 技术架构
|
||||
|
||||
<div class="custom-service">
|
||||
<div class="service-highlight">
|
||||
<h3>🚀 快速定制交付</h3>
|
||||
<ul>
|
||||
<li><strong>3天</strong> - 完成核心部署（标准授权管理功能模块快速集成）</li>
|
||||
<li><strong>7天</strong> - 完成业务定制（根据商业模式定制定价策略和授权规则）</li>
|
||||
<li><strong>14天</strong> - 完成完整上线（包含UI定制、业务流程优化、系统集成测试）</li>
|
||||
</ul>
|
||||
<div class="architecture-grid">
|
||||
<div class="architecture-item">
|
||||
<div class="architecture-icon">
|
||||
<iconify-icon icon="solar:rocket-2-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
|
||||
<div class="service-content">
|
||||
<h3>🎯 定制化服务内容</h3>
|
||||
<div class="service-grid">
|
||||
<div class="service-item">
|
||||
<strong>商业模式适配</strong>
|
||||
<p>订阅制、永久授权、分层定价、批量许可等模式定制</p>
|
||||
<h4>高性能</h4>
|
||||
<p>Go原生协程支撑万级并发，响应时间<200ms</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<strong>UI界面定制</strong>
|
||||
<p>品牌色彩、界面风格、操作流程的用户体验优化</p>
|
||||
<div class="architecture-item">
|
||||
<div class="architecture-icon">
|
||||
<iconify-icon icon="solar:lock-password-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<strong>系统集成开发</strong>
|
||||
<p>与现有CRM、ERP、财务系统的API集成</p>
|
||||
<h4>企业级安全</h4>
|
||||
<p>AES-256加密，RSA签名，GDPR合规</p>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<strong>安全增强服务</strong>
|
||||
<p>自定义加密算法、硬件绑定规则、安全审计日志</p>
|
||||
<div class="architecture-item">
|
||||
<div class="architecture-icon">
|
||||
<iconify-icon icon="solar:programming-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<div class="service-item">
|
||||
<strong>多语言本地化</strong>
|
||||
<p>支持中文、英文等多语言界面和文档定制</p>
|
||||
<h4>易于集成</h4>
|
||||
<p>RESTful API，多语言SDK，开箱即用</p>
|
||||
</div>
|
||||
<div class="architecture-item">
|
||||
<div class="architecture-icon">
|
||||
<iconify-icon icon="solar:server-path-bold-duotone" width="40" height="40"></iconify-icon>
|
||||
</div>
|
||||
<h4>弹性伸缩</h4>
|
||||
<p>容器化部署，支持集群扩展</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 在线演示
|
||||
## 快速开始
|
||||
|
||||
访问地址：[lm.cedar-v.com:18080](http://lm.cedar-v.com:18080)
|
||||
<div class="quick-start">
|
||||
<a href="/guide/getting-started" class="quick-start-link">
|
||||
<div class="quick-start-icon">
|
||||
<iconify-icon icon="solar:book-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<div class="quick-start-content">
|
||||
<h4>查看文档</h4>
|
||||
<p>详细的部署和使用指南</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
**登录凭证：**
|
||||
- 用户名：`admin`
|
||||
- 密码：`admin@123`
|
||||
<a href="http://lm.cedar-v.com:18080" class="quick-start-link">
|
||||
<div class="quick-start-icon">
|
||||
<iconify-icon icon="solar:play-circle-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<div class="quick-start-content">
|
||||
<h4>在线演示</h4>
|
||||
<p>体验核心功能特性</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
::: tip 提示
|
||||
这是一个功能演示环境，您可以体验已开发的核心特性。我们正在持续开发中，更多功能将陆续上线。
|
||||
:::
|
||||
|
||||
## 快速安装
|
||||
|
||||
查看 [快速开始文档](/guide/getting-started) 了解详细的部署步骤和配置说明。
|
||||
|
||||
## 技术架构优势
|
||||
|
||||
<div class="tech-advantages">
|
||||
<div class="tech-advantage-card">
|
||||
<div class="tech-icon">🏗️</div>
|
||||
<h3>企业级架构设计</h3>
|
||||
<ul>
|
||||
<li>模块化设计，支持独立部署和扩展</li>
|
||||
<li>高可用部署，保障系统7×24小时稳定运行</li>
|
||||
<li>弹性伸缩，根据业务负载自动调整资源</li>
|
||||
<li>容器化支持，便于DevOps流程集成</li>
|
||||
</ul>
|
||||
<a href="https://github.com/cedar-v/license-manager" class="quick-start-link">
|
||||
<div class="quick-start-icon">
|
||||
<iconify-icon icon="solar:code-bold-duotone" width="32" height="32"></iconify-icon>
|
||||
</div>
|
||||
<div class="quick-start-content">
|
||||
<h4>开源代码</h4>
|
||||
<p>GitHub仓库，贡献代码</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tech-advantage-card">
|
||||
<div class="tech-icon">🔌</div>
|
||||
<h3>开放API生态</h3>
|
||||
<ul>
|
||||
<li>RESTful API设计，标准化接口易于集成</li>
|
||||
<li>多语言SDK支持（JavaScript、Java、Python）</li>
|
||||
<li>自动生成的Swagger文档，开发友好</li>
|
||||
<li>API平均响应时间 <200ms，保障用户体验</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-advantage-card">
|
||||
<div class="tech-icon">🔒</div>
|
||||
<h3>数据安全与隐私</h3>
|
||||
<ul>
|
||||
<li>敏感数据采用AES-256加密算法存储</li>
|
||||
<li>全站HTTPS加密，保障数据传输安全</li>
|
||||
<li>完整的数据操作审计日志，支持安全追溯</li>
|
||||
<li>GDPR合规，支持数据隐私保护法规</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-advantage-card">
|
||||
<div class="tech-icon">⚡</div>
|
||||
<h3>性能与体验</h3>
|
||||
<ul>
|
||||
<li>Go原生协程支撑万级并发请求</li>
|
||||
<li>多级缓存策略，提升系统性能</li>
|
||||
<li>实时监控系统指标，主动故障预警</li>
|
||||
<li>内存占用 <100MB，轻量高效</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 技术栈
|
||||
|
||||
<div class="tech-grid">
|
||||
<div class="tech-category">
|
||||
<h3>前端</h3>
|
||||
<ul>
|
||||
<li>Vue.js 3+</li>
|
||||
<li>现代化UI组件</li>
|
||||
<li>响应式设计</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-category">
|
||||
<h3>后端</h3>
|
||||
<ul>
|
||||
<li>Go 1.23+</li>
|
||||
<li>Gin框架</li>
|
||||
<li>GORM</li>
|
||||
<li>Viper配置</li>
|
||||
<li>Logrus日志</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-category">
|
||||
<h3>数据库</h3>
|
||||
<ul>
|
||||
<li>MySQL 8+</li>
|
||||
<li>Redis缓存</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="tech-category">
|
||||
<h3>部署</h3>
|
||||
<ul>
|
||||
<li>Docker容器化</li>
|
||||
<li>系统服务</li>
|
||||
<li>集群部署</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## 开源许可
|
||||
|
||||
本项目采用 [GPL-3.0](https://www.gnu.org/licenses/gpl-3.0.html) 开源许可证
|
||||
|
||||
- ✅ 自由使用、学习、修改和分发
|
||||
- ✅ 允许个人和商业使用
|
||||
- ⚠️ 开源使用时不得修改logo、商标等品牌元素
|
||||
- ⚠️ 衍生作品必须同样开源
|
||||
- ℹ️ 如需专有许可证、品牌定制或商业支持，请联系项目维护者
|
||||
|
||||
## 加入社区
|
||||
|
||||
<div class="community">
|
||||
<img src="/images/qrcode_1755081220153.jpg" alt="QQ群二维码" width="200" />
|
||||
|
||||
<div>
|
||||
<h3>扫码加入QQ群</h3>
|
||||
<ul>
|
||||
<li>分享使用经验和最佳实践</li>
|
||||
<li>提出问题和获得帮助</li>
|
||||
<li>参与新功能讨论</li>
|
||||
<li>反馈问题和改进建议</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Value Proposition Section */
|
||||
.value-proposition {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.value-card {
|
||||
padding: 1.75rem;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--vp-c-brand) 8%, transparent), color-mix(in srgb, var(--vp-c-brand-light) 5%, transparent));
|
||||
border: 1px solid color-mix(in srgb, var(--vp-c-brand) 20%, transparent);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--vp-c-brand) 40%, transparent);
|
||||
box-shadow: 0 8px 16px color-mix(in srgb, var(--vp-c-brand) 15%, transparent);
|
||||
}
|
||||
|
||||
.value-badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.value-card p {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Use Cases Section */
|
||||
.use-cases {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.25rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.use-case-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.875rem;
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.use-case-card:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.use-case-card h4 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.use-case-card p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Monetization Section */
|
||||
.monetization-section {
|
||||
margin: 2rem 0 3rem;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--vp-c-bg-soft), var(--vp-c-bg) 50%);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.monetization-intro {
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.monetization-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.monetization-item {
|
||||
padding: 1.25rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid color-mix(in srgb, var(--vp-c-divider) 70%, transparent);
|
||||
}
|
||||
|
||||
.monetization-item h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.monetization-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Custom Service Section */
|
||||
.custom-service {
|
||||
margin: 2rem 0 3rem;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.service-highlight {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--vp-c-brand) 10%, transparent), color-mix(in srgb, var(--vp-c-brand-light) 5%, transparent));
|
||||
border: 2px solid color-mix(in srgb, var(--vp-c-brand) 30%, transparent);
|
||||
}
|
||||
|
||||
.service-highlight h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.service-highlight ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-highlight li {
|
||||
padding: 0.75rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.service-highlight strong {
|
||||
color: var(--vp-c-brand);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.service-content {
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.service-content h3 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 0.625rem;
|
||||
border: 1px solid color-mix(in srgb, var(--vp-c-divider) 60%, transparent);
|
||||
}
|
||||
|
||||
.service-item strong {
|
||||
display: block;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.service-item p {
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Tech Advantages Section */
|
||||
.tech-advantages {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.tech-advantage-card {
|
||||
padding: 1.75rem;
|
||||
border-radius: 1rem;
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-advantage-card:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--vp-c-brand) 10%, transparent);
|
||||
}
|
||||
|
||||
.tech-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tech-advantage-card h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.tech-advantage-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tech-advantage-card li {
|
||||
padding: 0.5rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.tech-advantage-card li:before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Feature Grid */
|
||||
.lm-feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2.5rem 0 3rem;
|
||||
}
|
||||
|
||||
.lm-feature-card {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid color-mix(in srgb, var(--vp-c-divider) 80%, transparent);
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 55%);
|
||||
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.lm-feature-card:hover,
|
||||
.lm-feature-card:focus-within {
|
||||
border-color: color-mix(in srgb, var(--vp-c-brand) 65%, transparent);
|
||||
background: color-mix(in srgb, var(--vp-c-bg-soft) 85%, var(--vp-c-brand) 10%);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.lm-feature-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 0.8rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
|
||||
color: #fff;
|
||||
border: 1px solid color-mix(in srgb, #fff 25%, transparent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lm-feature-icon iconify-icon {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lm-feature-card h3 {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.lm-feature-card p {
|
||||
margin: 0.4rem 0 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* Tech Stack Grid */
|
||||
.tech-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.tech-category {
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 65%);
|
||||
border-radius: 0.9rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tech-category:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tech-category h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tech-category ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tech-category li {
|
||||
padding: 0.5rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tech-category li:before {
|
||||
content: "▸";
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Community Section */
|
||||
.community {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2.5rem;
|
||||
margin: 2rem 0;
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: color-mix(in srgb, var(--vp-c-bg), var(--vp-c-bg-soft) 60%);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.community img {
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 4px 8px color-mix(in srgb, var(--vp-c-divider) 50%, transparent);
|
||||
}
|
||||
|
||||
.community h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.community ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.community li {
|
||||
padding: 0.4rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.community li:before {
|
||||
content: "✓ ";
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 700;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.community {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.lm-feature-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.value-proposition,
|
||||
.use-cases,
|
||||
.monetization-grid,
|
||||
.service-grid,
|
||||
.tech-advantages,
|
||||
.lm-feature-grid,
|
||||
.tech-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.monetization-section,
|
||||
.service-highlight,
|
||||
.service-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.tech-advantage-card,
|
||||
.value-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user