计件系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权限管理与工资计件系统 - 企业级解决方案</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
color: #333;
line-height: 1.6;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #409eff 100%);
color: white;
padding: 120px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.hero h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.hero p {
font-size: 20px;
opacity: 0.9;
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.hero .btn-group {
position: relative;
z-index: 1;
}
.btn {
display: inline-block;
padding: 14px 36px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn-primary {
background: #fff;
color: #409eff;
margin-right: 20px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255,255,255,0.3);
}
.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
border: 2px solid rgba(255,255,255,0.5);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.3);
border-color: white;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 80px;
margin-top: 80px;
position: relative;
z-index: 1;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 48px;
font-weight: 700;
}
.stat-label {
font-size: 16px;
opacity: 0.8;
margin-top: 8px;
}
/* Features Section */
.features {
padding: 100px 0;
background: #f5f7fa;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 36px;
font-weight: 700;
color: #1e3c72;
margin-bottom: 16px;
}
.section-title p {
font-size: 18px;
color: #666;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.feature-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(64,158,255,0.2);
}
.feature-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 24px;
}
.feature-icon.blue { background: #e8f4ff; color: #409eff; }
.feature-icon.green { background: #f0f9eb; color: #67c23a; }
.feature-icon.orange { background: #fff7e6; color: #e6a23c; }
.feature-icon.red { background: #fef0f0; color: #f56c6c; }
.feature-icon.purple { background: #f5f0ff; color: #909399; }
.feature-icon.cyan { background: #e6fffb; color: #13c2c2; }
.feature-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #333;
}
.feature-card p {
font-size: 14px;
color: #666;
line-height: 1.8;
}
/* Architecture Section */
.architecture {
padding: 100px 0;
background: white;
}
.arch-diagram {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
margin-top: 60px;
}
.arch-box {
padding: 30px;
border-radius: 12px;
text-align: center;
min-width: 200px;
}
.arch-box.frontend {
background: linear-gradient(135deg, #409eff 0%, #667eea 100%);
color: white;
}
.arch-box.backend {
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
color: white;
}
.arch-box.database {
background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
color: white;
}
.arch-arrow {
font-size: 32px;
color: #909399;
}
.tech-stack {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 60px;
}
.tech-item {
background: #f5f7fa;
padding: 24px;
border-radius: 12px;
text-align: center;
}
.tech-item span {
font-size: 16px;
font-weight: 600;
color: #333;
}
/* Workflow Section */
.workflow {
padding: 100px 0;
background: #1e3c72;
color: white;
}
.workflow .section-title h2 {
color: white;
}
.workflow .section-title p {
color: rgba(255,255,255,0.7);
}
.workflow-steps {
display: flex;
justify-content: space-between;
margin-top: 60px;
}
.workflow-step {
text-align: center;
position: relative;
max-width: 200px;
}
.workflow-step::after {
content: '';
position: absolute;
top: 32px;
left: 100%;
width: calc(100% + 20px);
height: 3px;
background: rgba(255,255,255,0.3);
z-index: 0;
}
.workflow-step:last-child::after {
display: none;
}
.step-number {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
border: 3px solid #409eff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
margin: 0 auto 20px;
position: relative;
z-index: 1;
}
.workflow-step h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.workflow-step p {
font-size: 14px;
opacity: 0.8;
}
/* Mobile Preview Section */
.mobile-preview {
padding: 100px 0;
background: #f5f7fa;
}
.preview-content {
display: flex;
align-items: center;
gap: 60px;
}
.phone-mockup {
width: 280px;
height: 560px;
background: #1a1a1a;
border-radius: 40px;
padding: 16px;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.phone-screen {
width: 100%;
height: 100%;
background: white;
border-radius: 32px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.phone-header {
background: #409eff;
color: white;
padding: 20px 16px;
text-align: center;
font-weight: 600;
}
.phone-content {
flex: 1;
padding: 16px;
overflow-y: auto;
}
.phone-item {
background: #f5f7fa;
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
}
.phone-item-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.phone-item-desc {
font-size: 12px;
color: #666;
}
.preview-text {
flex: 1;
}
.preview-text h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
color: #1e3c72;
}
.preview-text p {
font-size: 16px;
color: #666;
margin-bottom: 20px;
line-height: 1.8;
}
.preview-features {
list-style: none;
}
.preview-features li {
padding: 10px 0;
font-size: 16px;
color: #333;
}
.preview-features li::before {
content: '✓';
color: #67c23a;
font-weight: 700;
margin-right: 12px;
}
/* Pricing Section */
.pricing {
padding: 100px 0;
background: white;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 60px;
}
.pricing-card {
background: white;
border: 2px solid #e4e7ed;
border-radius: 16px;
padding: 40px;
text-align: center;
transition: all 0.3s ease;
}
.pricing-card:hover,
.pricing-card.popular {
border-color: #409eff;
box-shadow: 0 10px 40px rgba(64,158,255,0.15);
transform: translateY(-5px);
}
.pricing-card.popular {
position: relative;
}
.pricing-card.popular::before {
content: '热门推荐';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #409eff;
color: white;
padding: 4px 20px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.pricing-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
}
.pricing-card .price {
font-size: 48px;
font-weight: 700;
color: #409eff;
margin-bottom: 8px;
}
.pricing-card .price span {
font-size: 18px;
color: #909399;
}
.pricing-card .description {
font-size: 14px;
color: #666;
margin-bottom: 30px;
}
.pricing-card ul {
list-style: none;
text-align: left;
margin-bottom: 30px;
}
.pricing-card ul li {
padding: 10px 0;
font-size: 14px;
color: #333;
}
.pricing-card ul li::before {
content: '✓';
color: #67c23a;
margin-right: 8px;
}
.pricing-card .btn {
width: 100%;
}
.pricing-card.popular .btn {
background: #409eff;
color: white;
}
.pricing-card.popular .btn:hover {
background: #66b1ff;
}
/* Contact Section */
.contact {
padding: 100px 0;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
text-align: center;
}
.contact h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
}
.contact p {
font-size: 18px;
opacity: 0.9;
margin-bottom: 40px;
}
.contact-info {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 40px;
}
.contact-item {
text-align: center;
}
.contact-item .icon {
font-size: 32px;
margin-bottom: 12px;
}
.contact-item .label {
font-size: 14px;
opacity: 0.8;
margin-bottom: 4px;
}
.contact-item .value {
font-size: 16px;
font-weight: 600;
}
/* Footer */
.footer {
background: #1a1a2e;
color: white;
padding: 40px 0;
text-align: center;
}
.footer p {
font-size: 14px;
opacity: 0.7;
}
/* Responsive */
@media (max-width: 992px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-cards {
grid-template-columns: repeat(2, 1fr);
}
.preview-content {
flex-direction: column;
}
.arch-diagram {
flex-direction: column;
}
.hero-stats {
gap: 40px;
}
}
@media (max-width: 768px) {
.hero h1 {
font-size: 32px;
}
.features-grid {
grid-template-columns: 1fr;
}
.pricing-cards {
grid-template-columns: 1fr;
}
.workflow-steps {
flex-direction: column;
align-items: center;
}
.workflow-step::after {
display: none;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
.tech-stack {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>

<section class="hero">
<div class="container">
<h1>企业级权限管理与工资计件系统</h1>
<p>基于 .NET Core + Vue3 构建的现代化企业管理平台</p>
<div class="btn-group">
<a href="#features" class="btn btn-primary">了解更多</a>
<a href="#pricing" class="btn btn-secondary">立即订购</a>
</div>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-number">100%</div>
<div class="stat-label">按钮级权限控制</div>
</div>
<div class="stat-item">
<div class="stat-number">50+</div>
<div class="stat-label">企业客户</div>
</div>
<div class="stat-item">
<div class="stat-number">5000+</div>
<div class="stat-label">员工使用</div>
</div>
</div>
</div>
</section>

<section class="features" id="features">
<div class="container">
<div class="section-title">
<h2>核心功能模块</h2>
<p>全方位覆盖企业管理需求，提供完整的权限与计件解决方案</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon blue">🔐</div>
<h3>用户权限管理</h3>
<p>支持用户增删改查、角色分配、权限配置，精确到按钮级别的权限控制，确保数据安全。</p>
</div>
<div class="feature-card">
<div class="feature-icon green">👥</div>
<h3>角色管理</h3>
<p>灵活的角色定义与权限分配机制，支持自定义角色，快速实现组织架构管理。</p>
</div>
<div class="feature-card">
<div class="feature-icon orange">📋</div>
<h3>菜单管理</h3>
<p>树形菜单配置，支持多级菜单、动态路由，根据用户权限自动展示可用菜单。</p>
</div>
<div class="feature-card">
<div class="feature-icon red">👤</div>
<h3>员工管理</h3>
<p>完整的员工档案管理，支持部门、班组、联系方式等信息维护，支持批量导入。</p>
</div>
<div class="feature-card">
<div class="feature-icon purple">📦</div>
<h3>产品工序管理</h3>
<p>产品与工序的完整管理，支持工序单价设置，为计件工资核算提供基础数据。</p>
</div>
<div class="feature-card">
<div class="feature-icon cyan">💰</div>
<h3>计件工资核算</h3>
<p>支持员工自行计件、领导审核流程，自动计算工资，生成工资条和月汇总报表。</p>
</div>
</div>
</div>
</section>

<section class="architecture">
<div class="container">
<div class="section-title">
<h2>技术架构</h2>
<p>采用分层架构设计，保证系统的可扩展性和可维护性</p>
</div>
<div class="arch-diagram">
<div class="arch-box frontend">
<h3>前端层</h3>
<p>Vue3 + Element Plus</p>
</div>
<span class="arch-arrow">→</span>
<div class="arch-box backend">
<h3>后端层</h3>
<p>.NET Core 10 Web API</p>
</div>
<span class="arch-arrow">→</span>
<div class="arch-box database">
<h3>数据层</h3>
<p>SQL Server</p>
</div>
</div>
<div class="tech-stack">
<div class="tech-item"><span>Vue 3</span></div>
<div class="tech-item"><span>.NET Core 10</span></div>
<div class="tech-item"><span>SQL Server</span></div>
<div class="tech-item"><span>JWT 认证</span></div>
<div class="tech-item"><span>Element Plus</span></div>
<div class="tech-item"><span>Entity Framework</span></div>
<div class="tech-item"><span>BCrypt</span></div>
<div class="tech-item"><span>UniApp 移动端</span></div>
</div>
</div>
</section>

<section class="workflow">
<div class="container">
<div class="section-title">
<h2>计件审批流程</h2>
<p>规范的审批流程，确保数据准确性和业务合规性</p>
</div>
<div class="workflow-steps">
<div class="workflow-step">
<div class="step-number">1</div>
<h4>员工计件</h4>
<p>员工通过手机端录入计件数据，系统自动计算金额</p>
</div>
<div class="workflow-step">
<div class="step-number">2</div>
<h4>提交审核</h4>
<p>提交后等待审批，支持查看审核状态</p>
</div>
<div class="workflow-step">
<div class="step-number">3</div>
<h4>领导审批</h4>
<p>指定审批人审核，支持通过或驳回</p>
</div>
<div class="workflow-step">
<div class="step-number">4</div>
<h4>工资核算</h4>
<p>自动汇总生成工资条和月度报表</p>
</div>
</div>
</div>
</section>

<section class="mobile-preview">
<div class="container">
<div class="section-title">
<h2>移动端支持</h2>
<p>基于 UniApp 开发，支持 iOS、Android、微信小程序</p>
</div>
<div class="preview-content">
<div class="phone-mockup">
<div class="phone-screen">
<div class="phone-header">计件记录</div>
<div class="phone-content">
<div class="phone-item">
<div class="phone-item-title">产品A - 工序1</div>
<div class="phone-item-desc">数量: 100 | 单价: 5.00 | 金额: 500.00</div>
</div>
<div class="phone-item">
<div class="phone-item-title">产品B - 工序2</div>
<div class="phone-item-desc">数量: 50 | 单价: 8.00 | 金额: 400.00</div>
</div>
<div class="phone-item">
<div class="phone-item-title">产品C - 工序3</div>
<div class="phone-item-desc">数量: 200 | 单价: 3.00 | 金额: 600.00</div>
</div>
</div>
</div>
</div>
<div class="preview-text">
<h3>随时随地管理计件</h3>
<p>员工可以通过手机APP或微信小程序查看自己的计件记录，提交新的计件数据，实时了解审核状态和工资明细。</p>
<ul class="preview-features">
<li>支持产品、工序快速选择</li>
<li>自动带出工序单价，计算金额</li>
<li>实时查看审核进度</li>
<li>月工资明细一目了然</li>
<li>支持拍照记录功能</li>
</ul>
</div>
</div>
</div>
</section>

<section class="pricing" id="pricing">
<div class="container">
<div class="section-title">
<h2>订阅方案</h2>
<p>灵活的定价策略，满足不同规模企业的需求</p>
</div>
<div class="pricing-cards">
<div class="pricing-card">
<h3>基础版</h3>
<div class="price">¥1,999<span>/年</span></div>
<div class="description">适合小型企业和初创团队</div>
<ul>
<li>最多50名员工</li>
<li>基础权限管理</li>
<li>产品工序管理</li>
<li>计件记录管理</li>
<li>工资核算报表</li>
<li>1年技术支持</li>
</ul>
<button class="btn btn-primary">选择方案</button>
</div>
<div class="pricing-card popular">
<h3>专业版</h3>
<div class="price">¥4,999<span>/年</span></div>
<div class="description">适合中型企业，功能全面</div>
<ul>
<li>最多200名员工</li>
<li>完整权限管理系统</li>
<li>审批流程配置</li>
<li>移动端APP支持</li>
<li>自定义报表</li>
<li>数据导出功能</li>
<li>优先技术支持</li>
</ul>
<button class="btn">选择方案</button>
</div>
<div class="pricing-card">
<h3>企业版</h3>
<div class="price">¥9,999<span>/年</span></div>
<div class="description">适合大型企业，定制化服务</div>
<ul>
<li>不限员工数量</li>
<li>私有化部署</li>
<li>定制开发服务</li>
<li>专属客户经理</li>
<li>数据安全审计</li>
<li>高级报表分析</li>
<li>7x24技术支持</li>
</ul>
<button class="btn btn-secondary">联系我们</button>
</div>
</div>
</div>
</section>

<section class="contact">
<div class="container">
<h2>联系我们</h2>
<p>如有任何问题或需求，欢迎随时联系我们</p>
<div class="contact-info">
<div class="contact-item">
<div class="icon">📧</div>
<div class="label">邮箱</div>
<div class="value">sales@example.com</div>
</div>
<div class="contact-item">
<div class="icon">📞</div>
<div class="label">电话</div>
<div class="value">400-888-8888</div>
</div>
<div class="contact-item">
<div class="icon">💬</div>
<div class="label">微信</div>
<div class="value">wx_example</div>
</div>
</div>
<a href="#pricing" class="btn btn-primary">立即咨询</a>
</div>
</section>

posted @ 2026-07-14 15:21 superstar 阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

随风

计件系统

公告