|
|
@@ -0,0 +1,735 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>明律通 - 法律文书</title>
|
|
|
+ <!-- 引入国内CDN资源 -->
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #F8F9FF, #E6F7FF); /* 浅蓝到白色的渐变 */
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ line-height: 1.6;
|
|
|
+ max-width: 100vw;
|
|
|
+ overflow-x: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #3A5FE5;
|
|
|
+ --secondary: #00C4A1;
|
|
|
+ --danger: #FF4D4F;
|
|
|
+ --bg: #F8F9FF;
|
|
|
+ --text: #2D3748;
|
|
|
+ --card: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 480px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 15px;
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部导航 */
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: var(--primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo i {
|
|
|
+ margin-right: 8px;
|
|
|
+ color: var(--secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-avatar {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: var(--primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部导航 */
|
|
|
+ .tab-bar {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ max-width: 480px;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ color: #999;
|
|
|
+ text-decoration: none;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item.active {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 文书页面特有样式 */
|
|
|
+ .documents-page {
|
|
|
+ padding-bottom: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar {
|
|
|
+ display: flex;
|
|
|
+ background: white;
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 10px 15px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: var(--primary);
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 15px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title a {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: var(--primary);
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tabs {
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ gap: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tab {
|
|
|
+ padding: 8px 15px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-tab.active {
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 15px;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
+ transition: transform 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-card:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: white;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ display: -webkit-box;
|
|
|
+
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-section {
|
|
|
+ margin: 25px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-list {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-icon {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #E6F7FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-name {
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-date {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .recent-action {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .floating-btn {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 80px;
|
|
|
+ right: 20px;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ background: var(--primary);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 4px 12px rgba(58, 95, 229, 0.3);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 加载动画 */
|
|
|
+ .loading {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-dots {
|
|
|
+ display: flex;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-dots span {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: var(--primary);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: bounce 1s infinite alternate;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-dots span:nth-child(2) {
|
|
|
+ animation-delay: 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading-dots span:nth-child(3) {
|
|
|
+ animation-delay: 0.4s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes bounce {
|
|
|
+ to {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 文书详情页 */
|
|
|
+ .document-detail {
|
|
|
+ padding-bottom: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-header {
|
|
|
+ background: white;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-meta {
|
|
|
+ display: flex;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-meta span {
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-content {
|
|
|
+ background: white;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
+ line-height: 1.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-content h3 {
|
|
|
+ margin: 15px 0 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-content p {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .document-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-outline {
|
|
|
+ border: 1px solid var(--primary);
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 创建文书页 */
|
|
|
+ .create-document {
|
|
|
+ padding-bottom: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-control {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 15px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-select {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px 15px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ padding: 14px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="container" id="app">
|
|
|
+ <!-- 文书首页 -->
|
|
|
+ <div class="page documents-page" id="documents-page">
|
|
|
+ <div class="header">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-arrow-left" onclick="showPage('home-page')"></i>
|
|
|
+ <span style="margin-left: 10px;">法律文书</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-avatar">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-bar">
|
|
|
+ <input type="text" class="search-input" placeholder="搜索文书模板...">
|
|
|
+ <button class="search-btn">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section-title">
|
|
|
+ 文书分类
|
|
|
+ <a href="#">全部</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="category-tabs">
|
|
|
+ <div class="category-tab active">全部</div>
|
|
|
+ <div class="category-tab">劳动合同</div>
|
|
|
+ <div class="category-tab">婚姻家事</div>
|
|
|
+ <div class="category-tab">债权债务</div>
|
|
|
+ <div class="category-tab">房产交易</div>
|
|
|
+ <div class="category-tab">公司经营</div>
|
|
|
+ <div class="category-tab">知识产权</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="section-title">
|
|
|
+ 常用文书模板
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-grid">
|
|
|
+ <div class="document-card" onclick="showPage('document-detail-page')">
|
|
|
+ <div class="document-icon" style="background: #3A5FE5;">
|
|
|
+ <i class="fas fa-file-contract"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">劳动合同</div>
|
|
|
+ <div class="document-desc">标准劳动合同模板，适用于企业与员工签订</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-card">
|
|
|
+ <div class="document-icon" style="background: #00C4A1;">
|
|
|
+ <i class="fas fa-ring"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">离婚协议书</div>
|
|
|
+ <div class="document-desc">协议离婚必备文书，包含财产分割、子女抚养等条款</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-card">
|
|
|
+ <div class="document-icon" style="background: #FF6B6B;">
|
|
|
+ <i class="fas fa-handshake"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">借款合同</div>
|
|
|
+ <div class="document-desc">个人或企业间借款协议，明确利率、还款方式等</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-card">
|
|
|
+ <div class="document-icon" style="background: #FFC107;">
|
|
|
+ <i class="fas fa-home"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">房屋租赁合同</div>
|
|
|
+ <div class="document-desc">房东与租客签订的标准租赁协议</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-card">
|
|
|
+ <div class="document-icon" style="background: #9C27B0;">
|
|
|
+ <i class="fas fa-building"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">股东协议</div>
|
|
|
+ <div class="document-desc">公司股东之间的权利义务约定</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-card">
|
|
|
+ <div class="document-icon" style="background: #673AB7;">
|
|
|
+ <i class="fas fa-pen-fancy"></i>
|
|
|
+ </div>
|
|
|
+ <div class="document-title">著作权转让协议</div>
|
|
|
+ <div class="document-desc">作品著作权转让的法律文书</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recent-section">
|
|
|
+ <div class="section-title">
|
|
|
+ 最近使用
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recent-list">
|
|
|
+ <div class="recent-item">
|
|
|
+ <div class="recent-icon">
|
|
|
+ <i class="fas fa-file-contract"></i>
|
|
|
+ </div>
|
|
|
+ <div class="recent-info">
|
|
|
+ <div class="recent-name">劳动合同(2023版)</div>
|
|
|
+ <div class="recent-date">2023-10-15 编辑</div>
|
|
|
+ </div>
|
|
|
+ <div class="recent-action">
|
|
|
+ <i class="fas fa-ellipsis-v"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recent-item">
|
|
|
+ <div class="recent-icon">
|
|
|
+ <i class="fas fa-handshake"></i>
|
|
|
+ </div>
|
|
|
+ <div class="recent-info">
|
|
|
+ <div class="recent-name">借款合同-张三</div>
|
|
|
+ <div class="recent-date">2023-09-28 生成</div>
|
|
|
+ </div>
|
|
|
+ <div class="recent-action">
|
|
|
+ <i class="fas fa-ellipsis-v"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="recent-item">
|
|
|
+ <div class="recent-icon">
|
|
|
+ <i class="fas fa-ring"></i>
|
|
|
+ </div>
|
|
|
+ <div class="recent-info">
|
|
|
+ <div class="recent-name">离婚协议书草案</div>
|
|
|
+ <div class="recent-date">2023-08-10 保存</div>
|
|
|
+ </div>
|
|
|
+ <div class="recent-action">
|
|
|
+ <i class="fas fa-ellipsis-v"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="floating-btn" onclick="showPage('create-document-page')">
|
|
|
+ <i class="fas fa-plus"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文书详情页 -->
|
|
|
+ <div class="page document-detail" id="document-detail-page" style="display: none;">
|
|
|
+ <div class="header">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-arrow-left" onclick="showPage('documents-page')"></i>
|
|
|
+ <span style="margin-left: 10px;">文书详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-avatar">
|
|
|
+ <i class="fas fa-share-alt"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-header">
|
|
|
+ <div class="document-name">劳动合同(标准版)</div>
|
|
|
+ <div class="document-meta">
|
|
|
+ <span><i class="fas fa-download"></i> 1.2K下载</span>
|
|
|
+ <span><i class="fas fa-star"></i> 4.8分</span>
|
|
|
+ <span><i class="fas fa-file-alt"></i> 5页</span>
|
|
|
+ </div>
|
|
|
+ <div>适用于企业与员工签订的全职劳动合同，包含劳动法规定的基本条款。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="document-content">
|
|
|
+ <h3>劳动合同</h3>
|
|
|
+ <p>甲方(用人单位)：_____________</p>
|
|
|
+ <p>乙方(劳动者)：_____________</p>
|
|
|
+
|
|
|
+ <h3>第一条 合同期限</h3>
|
|
|
+ <p>1. 本合同期限为____年，自____年____月____日起至____年____月____日止。</p>
|
|
|
+ <p>2. 试用期为____个月，自____年____月____日起至____年____月____日止。</p>
|
|
|
+
|
|
|
+ <h3>第二条 工作内容和工作地点</h3>
|
|
|
+ <p>1. 乙方同意根据甲方工作需要，担任________岗位(工种)工作。</p>
|
|
|
+ <p>2. 根据甲方的岗位作业特点，乙方的工作区域或工作地点为________。</p>
|
|
|
+
|
|
|
+ <h3>第三条 工作时间和休息休假</h3>
|
|
|
+ <p>1. 甲方安排乙方执行________工作制。</p>
|
|
|
+ <p>2. 乙方依法享有法定节假日、婚假、产假、带薪年休假等休假权利。</p>
|
|
|
+
|
|
|
+ <div class="document-actions">
|
|
|
+ <div class="document-btn btn-outline">收藏模板</div>
|
|
|
+ <div class="document-btn btn-primary">使用此模板</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 创建文书页 -->
|
|
|
+ <div class="page create-document" id="create-document-page" style="display: none;">
|
|
|
+ <div class="header">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-arrow-left" onclick="showPage('documents-page')"></i>
|
|
|
+ <span style="margin-left: 10px;">创建文书</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">文书类型</label>
|
|
|
+ <select class="form-select">
|
|
|
+ <option value="">选择文书类型</option>
|
|
|
+ <option value="1">劳动合同</option>
|
|
|
+ <option value="2">借款合同</option>
|
|
|
+ <option value="3">房屋租赁合同</option>
|
|
|
+ <option value="4">离婚协议书</option>
|
|
|
+ <option value="5">股东协议</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">文书名称</label>
|
|
|
+ <input type="text" class="form-control" placeholder="例如: 张三劳动合同">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group">
|
|
|
+ <label class="form-label">创建方式</label>
|
|
|
+ <div style="display: flex; gap: 10px;">
|
|
|
+ <div style="flex: 1; text-align: center; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
|
|
+ <div style="font-size: 24px; color: var(--primary); margin-bottom: 5px;">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ </div>
|
|
|
+ <div>使用模板</div>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 1; text-align: center; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
|
|
+ <div style="font-size: 24px; color: var(--primary); margin-bottom: 5px;">
|
|
|
+ <i class="fas fa-keyboard"></i>
|
|
|
+ </div>
|
|
|
+ <div>空白创建</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="submit-btn">开始创建</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部导航 -->
|
|
|
+ <div class="tab-bar">
|
|
|
+ <a href="#" class="tab-item" onclick="showPage('home-page')">
|
|
|
+ <div class="tab-icon">
|
|
|
+ <i class="fas fa-home"></i>
|
|
|
+ </div>
|
|
|
+ <div>首页</div>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="tab-item">
|
|
|
+ <div class="tab-icon">
|
|
|
+ <i class="fas fa-comment-dots"></i>
|
|
|
+ </div>
|
|
|
+ <div>咨询</div>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="tab-item active">
|
|
|
+ <div class="tab-icon">
|
|
|
+ <i class="fas fa-file-alt"></i>
|
|
|
+ </div>
|
|
|
+ <div>文书</div>
|
|
|
+ </a>
|
|
|
+ <a href="#" class="tab-item">
|
|
|
+ <div class="tab-icon">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ </div>
|
|
|
+ <div>我的</div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // 简单页面切换逻辑
|
|
|
+ function showPage(pageId) {
|
|
|
+ document.querySelectorAll('.page').forEach(page => {
|
|
|
+ page.style.display = 'none';
|
|
|
+ });
|
|
|
+ document.getElementById(pageId).style.display = 'block';
|
|
|
+
|
|
|
+ // 更新底部导航状态
|
|
|
+ document.querySelectorAll('.tab-item').forEach(tab => {
|
|
|
+ tab.classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ if(pageId === 'home-page') {
|
|
|
+ document.querySelectorAll('.tab-item')[0].classList.add('active');
|
|
|
+ } else if(pageId === 'documents-page' || pageId === 'document-detail-page' || pageId === 'create-document-page') {
|
|
|
+ document.querySelectorAll('.tab-item')[2].classList.add('active');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 分类标签点击效果
|
|
|
+ document.querySelectorAll('.category-tab').forEach(tab => {
|
|
|
+ tab.addEventListener('click', function() {
|
|
|
+ document.querySelectorAll('.category-tab').forEach(t => {
|
|
|
+ t.classList.remove('active');
|
|
|
+ });
|
|
|
+ this.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
