增加个人版页面

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/static/css/personal.css

@@ -0,0 +1,528 @@
+/* 工时管家个人版样式 */
+
+/* 基础样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* 加载动画样式 */
+.spinner-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.spinner {
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: #3396FB;
+    border-radius: 100%;
+    display: inline-block;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+    animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% {
+        transform: scale(0);
+    } 40% {
+        transform: scale(1.0);
+    }
+}
+
+/* iframe样式 */
+.iframeClass {
+    width: 100%;
+    height: 7rem;
+    border: none;
+    display: block;
+}
+
+.resetIframe {
+    width: 100%;
+    border: none;
+    display: block;
+}
+
+/* 咨询客服样式 */
+.zhixun {
+    display: block;
+    position: fixed;
+    bottom: 7.5rem;
+    right: 20px;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0.1875rem 0.1875rem 0.625rem #ccc;
+    z-index: 99999999;
+    text-align: center;
+    border-radius: 8px;
+}
+
+.zhixun p {
+    margin: 8px 0;
+    font-size: 14px;
+    color: #333;
+}
+
+.zhixun img {
+    width: 128px;
+    height: 128px;
+}
+
+.consulting {
+    width: 3.125rem;
+    height: 3.125rem;
+    border-radius: 50%;
+    background: #fff;
+    position: fixed;
+    bottom: 3.75rem;
+    right: 6.25rem;
+    z-index: 4;
+    box-shadow: 0 0 20px 0px #cbcbcb;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.consulting:hover {
+    background: #3396FB;
+    transform: scale(1.1);
+}
+
+.consulting img {
+    width: 24px;
+    height: 24px;
+}
+
+/* 主横幅区域 */
+.personal-banner {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    padding: 120px 0 80px;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.personal-banner-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    gap: 80px;
+}
+
+.personal-banner-left {
+    flex: 1;
+    max-width: 600px;
+}
+
+.personal-logo {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+}
+
+.personal-logo img {
+    width: 40px;
+    height: 40px;
+    margin-right: 12px;
+}
+
+.personal-logo span {
+    font-size: 18px;
+    color: #3396FB;
+    font-weight: 600;
+}
+
+.personal-title {
+    font-size: 48px;
+    font-weight: 700;
+    color: #2c3e50;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    letter-spacing: -0.5px;
+}
+
+.personal-subtitle {
+    font-size: 18px;
+    color: #5a6c7d;
+    line-height: 1.6;
+    margin-bottom: 40px;
+    max-width: 500px;
+}
+
+.personal-download {
+    margin-top: 40px;
+}
+
+.download-btn {
+    display: inline-block;
+    background: #3396FB;
+    color: white;
+    padding: 16px 32px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(51, 150, 251, 0.3);
+}
+
+.download-btn:hover {
+    background: #2980b9;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(51, 150, 251, 0.4);
+    color: white;
+    text-decoration: none;
+}
+
+.personal-banner-right {
+    flex: 1;
+    text-align: center;
+}
+
+.dashboard-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+/* 为什么选择工时管家个人版 */
+.why-choose-section {
+    padding: 100px 0;
+    background: #fff;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+.section-tag {
+    display: inline-block;
+    background: #e8f4fd;
+    color: #3396FB;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 16px;
+}
+
+.section-header h2 {
+    font-size: 36px;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-bottom: 16px;
+    line-height: 1.2;
+}
+
+.section-desc {
+    font-size: 18px;
+    color: #5a6c7d;
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 40px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.feature-card {
+    background: #fff;
+    padding: 40px 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 24px;
+    background: linear-gradient(135deg, #3396FB, #2980b9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.feature-icon img {
+    width: 40px;
+    height: 40px;
+    filter: brightness(0) invert(1);
+}
+
+.feature-card h3 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #2c3e50;
+    margin-bottom: 16px;
+}
+
+.feature-card p {
+    font-size: 16px;
+    color: #5a6c7d;
+    line-height: 1.6;
+}
+
+/* 强大功能，简单操作 */
+.powerful-features-section {
+    padding: 80px 0;
+    background: #f8fafc;
+}
+
+/* 功能详情区域 */
+.feature-detail-section {
+    padding: 100px 0;
+    background: #fff;
+}
+
+.feature-detail-section:nth-child(even) {
+    background: #f8fafc;
+}
+
+.feature-detail-reverse {
+    background: #f8fafc;
+}
+
+.feature-detail-row {
+    display: flex;
+    align-items: center;
+    gap: 80px;
+}
+
+.feature-detail-reverse .feature-detail-row {
+    flex-direction: row-reverse;
+}
+
+.feature-detail-left,
+.feature-detail-right {
+    flex: 1;
+}
+
+.feature-detail-section h3 {
+    font-size: 32px;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+
+.feature-desc {
+    font-size: 18px;
+    color: #5a6c7d;
+    margin-bottom: 30px;
+    line-height: 1.6;
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+}
+
+.feature-list li {
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    color: #5a6c7d;
+    line-height: 1.6;
+}
+
+.feature-list li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #27ae60;
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.feature-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 1024px) {
+    .personal-banner-content {
+        flex-direction: column;
+        gap: 60px;
+        text-align: center;
+    }
+    
+    .personal-title {
+        font-size: 40px;
+    }
+    
+    .feature-detail-row,
+    .feature-detail-reverse .feature-detail-row {
+        flex-direction: column;
+        gap: 60px;
+    }
+    
+    .features-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 30px;
+    }
+}
+
+@media (max-width: 768px) {
+    .personal-banner {
+        padding: 100px 0 60px;
+    }
+    
+    .personal-title {
+        font-size: 32px;
+    }
+    
+    .personal-subtitle {
+        font-size: 16px;
+    }
+    
+    .section-header h2 {
+        font-size: 28px;
+    }
+    
+    .feature-detail-section h3 {
+        font-size: 24px;
+    }
+    
+    .why-choose-section,
+    .powerful-features-section,
+    .feature-detail-section {
+        padding: 60px 0;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 30px;
+    }
+    
+    .feature-card {
+        padding: 30px 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 0 15px;
+    }
+    
+    .personal-banner-content {
+        padding: 0 15px;
+    }
+    
+    .personal-title {
+        font-size: 28px;
+    }
+    
+    .consulting {
+        right: 20px;
+        bottom: 20px;
+    }
+    
+    .zhixun {
+        right: 10px;
+        bottom: 80px;
+        padding: 12px;
+    }
+    
+    .zhixun img {
+        width: 100px;
+        height: 100px;
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.feature-card {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+.feature-card:nth-child(1) { animation-delay: 0.1s; }
+.feature-card:nth-child(2) { animation-delay: 0.2s; }
+.feature-card:nth-child(3) { animation-delay: 0.3s; }
+.feature-card:nth-child(4) { animation-delay: 0.4s; }
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3396FB;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #2980b9;
+}

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/static/moduleView/header.html

@@ -76,6 +76,7 @@
             { label: '项目管家', path: '../project.html', icon: './image/icon/project.png', hoverIcon: './image/icon/projectHover.png' },
             { label: '客户管家', path: '../customerNew.html', icon: './image/icon/follow.png', hoverIcon: './image/icon/followHover.png' },
             { label: '生产车间管家', path: '../workshop.html', icon: './image/icon/production.png', hoverIcon: './image/icon/productionHover.png' },
+             { label: '工时管个人版', path: '../personal.html', icon: './image/icon/workHour.png', hoverIcon: './image/icon/workHourHover.png' }
          ],
           showRight: true,
           urlFiled: 'index',

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/static/personal.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="keywords" content="工时管家个人版,免费工时管理,兼职工时记录,小时工管理,车间人员工时,个人工时统计" />
+    <meta name="description" content="工时管家个人版是完全免费的工时管理工具，专为兼职、小时工和车间人员设计。轻松记录工时，自动计算收入，让每一分钟都有价值。"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <title>工时管家个人版 - 免费工时管理工具，兼职、小时工、车间人员专属</title>
+	<link href="css/styles.css" rel="stylesheet">
+    <link href="css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+    <link rel="stylesheet" href="css/personal.css">
+    <script src="js/jquery1.42.min.js"></script>
+    <script src="js/jquery.SuperSlide.2.1.3.js"></script>
+</head>
+
+<body data-spy="scroll" data-target=".fixed-top" id="body">
+    <div class="spinner-wrapper">
+        <div class="spinner">
+            <div class="bounce1"></div>
+            <div class="bounce2"></div>
+            <div class="bounce3"></div>
+        </div>
+    </div>
+
+    <!-- 头部 -->
+    <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
+
+    <!-- 咨询客服 -->
+    <div class="zhixun" id="zhixun" style="display: none">
+        <p>微信扫码咨询</p>
+        <img src="./image/codecopy.jpg" alt="">
+        <p><span style="color: #595959;">联系电话：</span>15895914665</p>
+    </div>
+
+    <!-- 咨询的图标 -->
+    <div class="consulting" id="consulting">
+        <img id="consultigImg" src="./image/ions/kefu2.png" alt="">
+    </div>
+
+    <!-- 主横幅区域 -->
+    <div class="personal-banner">
+        <div class="personal-banner-content">
+            <div class="personal-banner-left">
+                <div class="personal-logo">
+                    <img src="./image/ions/1.png" alt="工时管家个人版">
+                    <span>工时管家个人版</span>
+                </div>
+                <h1 class="personal-title">
+                    免费工时管理工具，<br>
+                    兼职、小时工、车间人员专属
+                </h1>
+                <p class="personal-subtitle">
+                    完全免费的工时管家个人版，专为兼职、小时工和车间人员设计，轻松记录工时，自动计算收入，让每一分钟都有价值。
+                </p>
+                <div class="personal-download">
+                    <a href="#" class="download-btn">下载手机版</a>
+                </div>
+            </div>
+            <div class="personal-banner-right">
+                <img src="./image/gs1.jpg" alt="工时管家个人版界面" class="dashboard-img">
+            </div>
+        </div>
+    </div>
+
+    <!-- 为什么选择工时管家个人版 -->
+    <div class="why-choose-section">
+        <div class="container">
+            <div class="section-header">
+                <p class="section-tag">完全免费 · 专为兼职/小时工/车间人员设计</p>
+                <h2>为什么选择工时管家个人版</h2>
+                <p class="section-desc">专为自由职业者和小时工设计的工时管理工具，让你的每一分钟都有价值</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="./image/ions/1.png" alt="便捷记录">
+                    </div>
+                    <h3>便捷记录</h3>
+                    <p>支持快速、按时间段填报工时方式，灵活记录不同工作任务，随时随地记录工时。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="./image/ions/2.png" alt="智能统计">
+                    </div>
+                    <h3>智能统计</h3>
+                    <p>自动生成月、月工时与收入分析，直观呈现工时数据变化，帮你掌握工作收入情况。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="./image/ions/5.png" alt="精准计算">
+                    </div>
+                    <h3>精准计算</h3>
+                    <p>自定义时薪标准，实时核算收入，基础薪资等多种计费方式，确保每分钟都有价值。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="./image/ions/6.png" alt="数据安全">
+                    </div>
+                    <h3>数据安全</h3>
+                    <p>登录保护数据，支持数据导出，保障个人工时与收入信息安全，让你使用更放心。</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 强大功能，简单操作 -->
+    <div class="powerful-features-section">
+        <div class="container">
+            <div class="section-header">
+                <p class="section-tag">完全免费使用</p>
+                <h2>强大功能，简单操作</h2>
+                <p class="section-desc">日历工时填报入口 | 可视化统计分析 | 数据设置与导出</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- 工时记录功能 -->
+    <div class="feature-detail-section">
+        <div class="container">
+            <div class="feature-detail-row">
+                <div class="feature-detail-left">
+                    <h3>工时记录</h3>
+                    <p class="feature-desc">轻松记录每日工作时间，支持日历视图填报工时，满足不同工作模式需求。</p>
+                    <ul class="feature-list">
+                        <li>日历视图直观显示工时，支持快速填报和修改</li>
+                        <li>预设输入方式：按时间段填报或按项目填报时间</li>
+                        <li>支持自定义时薪标准，实时计算工作收入</li>
+                        <li>可添加备注信息，记录工作详情</li>
+                    </ul>
+                </div>
+                <div class="feature-detail-right">
+                    <img src="./image/gs2.jpg" alt="工时记录界面" class="feature-img">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 统计分析功能 -->
+    <div class="feature-detail-section feature-detail-reverse">
+        <div class="container">
+            <div class="feature-detail-row">
+                <div class="feature-detail-left">
+                    <img src="./image/gs3.jpg" alt="统计分析界面" class="feature-img">
+                </div>
+                <div class="feature-detail-right">
+                    <h3>统计分析</h3>
+                    <p class="feature-desc">智能分析你的工时数据，提供多维度统计和可视化图表，帮你更好地掌握工作情况。</p>
+                    <ul class="feature-list">
+                        <li>支持日、月度等时间维度工时与收入数据</li>
+                        <li>核心数据对比：总工时、总收入、工作天数、平均时薪</li>
+                        <li>收入趋势分析显示工时与收入变化</li>
+                        <li>数据可视化图表，直观掌握工作规律</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 我的设置功能 -->
+    <div class="feature-detail-section">
+        <div class="container">
+            <div class="feature-detail-row">
+                <div class="feature-detail-left">
+                    <h3>我的设置</h3>
+                    <p class="feature-desc">个性化设置工时管理标准，配置账号与信息，录入方式和标准设置。</p>
+                    <ul class="feature-list">
+                        <li>账号管理：登录状态查看与账号信息</li>
+                        <li>工时录入配置：选择按小时或按项目的时间录入</li>
+                        <li>薪资标准设置：自定义时薪标准</li>
+                        <li>数据导出：支持Excel/CSV格式导出工时与收入数据</li>
+                    </ul>
+                </div>
+                <div class="feature-detail-right">
+                    <img src="./image/gs4.jpg" alt="我的设置界面" class="feature-img">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 底部 -->
+    <iframe id="bottomIframe" src="./moduleView/bottom.html" class="resetIframe resetIframebtn"></iframe>
+    
+    <script>
+        // 简化的iframe处理
+        function reinitIframe() {
+            // 简化处理，避免跨域问题
+        }
+        
+        // 页面加载完成后隐藏加载动画
+        window.addEventListener('load', function() {
+            const spinner = document.querySelector('.spinner-wrapper');
+            if (spinner) {
+                spinner.style.display = 'none';
+            }
+        });
+    </script>
+    <script>
+        // 咨询客服功能
+        $('#consulting').click(function() {
+            if($('#zhixun').is(':hidden')) {
+                $('#zhixun').show();
+            } else {
+                $('#zhixun').hide();
+            }
+        });
+
+        // 点击其他地方隐藏咨询框
+        $(document).click(function(e) {
+            if(!$(e.target).closest('#consulting, #zhixun').length) {
+                $('#zhixun').hide();
+            }
+        });
+    </script>
+</body>
+</html>