|
@@ -1,940 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>明律通 - AI法律咨询</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;
|
|
|
- }
|
|
|
-
|
|
|
- /* 咨询页面样式 */
|
|
|
- .chat-container {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-bottom: 60px;
|
|
|
- background: linear-gradient(180deg, rgba(248, 249, 255, 0.8) 0%, rgba(230, 247, 255, 0.5) 100%);
|
|
|
- border-radius: 16px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-header {
|
|
|
- padding: 15px;
|
|
|
- background: white;
|
|
|
- border-radius: 16px 16px 0 0;
|
|
|
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-avatar {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- background: linear-gradient(135deg, var(--primary), #6A8EFF);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-info {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-name {
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-status {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .status-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #00C4A1;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-messages {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 15px;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .message {
|
|
|
- max-width: 85%;
|
|
|
- margin-bottom: 15px;
|
|
|
- position: relative;
|
|
|
- animation: fadeIn 0.3s ease-out;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeIn {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(10px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .user-message {
|
|
|
- align-self: flex-end;
|
|
|
- background: var(--primary);
|
|
|
- color: white;
|
|
|
- border-radius: 18px 18px 0 18px;
|
|
|
- padding: 12px 15px;
|
|
|
- margin-left: auto;
|
|
|
- box-shadow: 0 2px 8px rgba(58, 95, 229, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message {
|
|
|
- align-self: flex-start;
|
|
|
- background: white;
|
|
|
- border-radius: 18px 18px 18px 0;
|
|
|
- padding: 12px 15px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .message-time {
|
|
|
- font-size: 10px;
|
|
|
- color: #999;
|
|
|
- text-align: right;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message .message-time {
|
|
|
- color: #666;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .law-ref {
|
|
|
- background: #E6F7FF;
|
|
|
- border-left: 3px solid var(--primary);
|
|
|
- padding: 8px 12px;
|
|
|
- margin: 8px 0;
|
|
|
- border-radius: 0 8px 8px 0;
|
|
|
- font-size: 14px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .law-ref::before {
|
|
|
- content: "⚖️";
|
|
|
- position: absolute;
|
|
|
- left: -25px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .suggestion-box {
|
|
|
- background: #F0FFF4;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid #E6FFED;
|
|
|
- }
|
|
|
-
|
|
|
- .suggestion-title {
|
|
|
- font-weight: bold;
|
|
|
- color: var(--secondary);
|
|
|
- margin-bottom: 5px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .suggestion-title i {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-actions {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- background: rgba(58, 95, 229, 0.1);
|
|
|
- color: var(--primary);
|
|
|
- border: none;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 8px 12px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action:hover {
|
|
|
- background: rgba(58, 95, 229, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .chat-input-container {
|
|
|
- display: flex;
|
|
|
- padding: 10px;
|
|
|
- background: white;
|
|
|
- position: fixed;
|
|
|
- bottom: 60px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- max-width: 480px;
|
|
|
- margin: 0 auto;
|
|
|
- box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
|
|
- border-radius: 16px 16px 0 0;
|
|
|
- }
|
|
|
-
|
|
|
- .input-wrapper {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- background: #F5F7FA;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 5px 15px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .chat-input {
|
|
|
- flex: 1;
|
|
|
- border: none;
|
|
|
- outline: none;
|
|
|
- padding: 8px 5px;
|
|
|
- font-size: 16px;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .attach-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: #666;
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .send-btn {
|
|
|
- background: var(--primary);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-left: 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: all 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .send-btn:active {
|
|
|
- transform: scale(0.95);
|
|
|
- }
|
|
|
-
|
|
|
- .send-btn:disabled {
|
|
|
- background: #ccc;
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
-
|
|
|
- /* 加载动画 */
|
|
|
- .loading {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-indicator {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: white;
|
|
|
- padding: 10px 15px;
|
|
|
- border-radius: 18px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
- width: fit-content;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-text {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-dots {
|
|
|
- display: flex;
|
|
|
- gap: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-dots span {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- background: #999;
|
|
|
- border-radius: 50%;
|
|
|
- animation: bounce 1s infinite alternate;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-dots span:nth-child(2) {
|
|
|
- animation-delay: 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .typing-dots span:nth-child(3) {
|
|
|
- animation-delay: 0.4s;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes bounce {
|
|
|
- to {
|
|
|
- transform: translateY(-3px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部导航 */
|
|
|
- .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;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-
|
|
|
- /* 空状态 */
|
|
|
- .empty-state {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 60%;
|
|
|
- text-align: center;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .empty-icon {
|
|
|
- font-size: 60px;
|
|
|
- color: #D6E4FF;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .empty-text {
|
|
|
- color: #999;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 返回按钮 */
|
|
|
- .back-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- font-size: 18px;
|
|
|
- margin-right: 10px;
|
|
|
- color: var(--primary);
|
|
|
- }
|
|
|
-
|
|
|
- /* 咨询类型选择 */
|
|
|
- .consult-types {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 10px;
|
|
|
- margin: 15px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .consult-type {
|
|
|
- flex: 1;
|
|
|
- min-width: calc(50% - 5px);
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 15px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- transition: all 0.2s;
|
|
|
- }
|
|
|
-
|
|
|
- .consult-type:active {
|
|
|
- transform: scale(0.98);
|
|
|
- }
|
|
|
-
|
|
|
- .consult-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: var(--primary);
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .consult-title {
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .consult-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <div class="container" id="app">
|
|
|
- <!-- 咨询主页 -->
|
|
|
- <div class="page" id="consult-home-page">
|
|
|
- <div class="header">
|
|
|
- <button class="back-btn" onclick="showPage('home-page')">
|
|
|
- <i class="fas fa-arrow-left"></i>
|
|
|
- </button>
|
|
|
- <div class="logo">
|
|
|
- <span>法律咨询</span>
|
|
|
- </div>
|
|
|
- <div class="user-avatar">
|
|
|
- <i class="fas fa-user"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin: 20px 0;">
|
|
|
- <h3 style="margin-bottom: 15px;">选择咨询类型</h3>
|
|
|
- <div class="consult-types">
|
|
|
- <div class="consult-type" onclick="startConsult('劳动纠纷')">
|
|
|
- <div class="consult-icon">
|
|
|
- <i class="fas fa-briefcase"></i>
|
|
|
- </div>
|
|
|
- <div class="consult-title">劳动纠纷</div>
|
|
|
- <div class="consult-desc">劳动合同、工资拖欠、工伤赔偿等问题</div>
|
|
|
- </div>
|
|
|
- <div class="consult-type" onclick="startConsult('婚姻家庭')">
|
|
|
- <div class="consult-icon">
|
|
|
- <i class="fas fa-heart"></i>
|
|
|
- </div>
|
|
|
- <div class="consult-title">婚姻家庭</div>
|
|
|
- <div class="consult-desc">离婚财产分割、抚养权、继承等问题</div>
|
|
|
- </div>
|
|
|
- <div class="consult-type" onclick="startConsult('合同纠纷')">
|
|
|
- <div class="consult-icon">
|
|
|
- <i class="fas fa-file-contract"></i>
|
|
|
- </div>
|
|
|
- <div class="consult-title">合同纠纷</div>
|
|
|
- <div class="consult-desc">合同审查、违约赔偿、协议起草等问题</div>
|
|
|
- </div>
|
|
|
- <div class="consult-type" onclick="startConsult('侵权责任')">
|
|
|
- <div class="consult-icon">
|
|
|
- <i class="fas fa-user-shield"></i>
|
|
|
- </div>
|
|
|
- <div class="consult-title">侵权责任</div>
|
|
|
- <div class="consult-desc">人身损害、名誉权、隐私权等问题</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="margin: 20px 0;">
|
|
|
- <h3 style="margin-bottom: 15px;">常见问题</h3>
|
|
|
- <div style="background: white; border-radius: 12px; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
|
|
|
- <div style="margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="startConsult('公司拖欠工资怎么办?')">
|
|
|
- <i class="fas fa-question-circle" style="color: var(--primary); margin-right: 8px;"></i>
|
|
|
- 公司拖欠工资怎么办?
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="startConsult('离婚后财产如何分割?')">
|
|
|
- <i class="fas fa-question-circle" style="color: var(--primary); margin-right: 8px;"></i>
|
|
|
- 离婚后财产如何分割?
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="startConsult('合同违约如何索赔?')">
|
|
|
- <i class="fas fa-question-circle" style="color: var(--primary); margin-right: 8px;"></i>
|
|
|
- 合同违约如何索赔?
|
|
|
- </div>
|
|
|
- <div style="padding: 10px; cursor: pointer;" onclick="startConsult('交通事故责任认定标准是什么?')">
|
|
|
- <i class="fas fa-question-circle" style="color: var(--primary); margin-right: 8px;"></i>
|
|
|
- 交通事故责任认定标准是什么?
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 聊天咨询页 -->
|
|
|
- <div class="page" id="chat-page" style="display: none;">
|
|
|
- <div class="header">
|
|
|
- <button class="back-btn" onclick="showPage('consult-home-page')">
|
|
|
- <i class="fas fa-arrow-left"></i>
|
|
|
- </button>
|
|
|
- <div class="logo">
|
|
|
- <span>AI法律咨询</span>
|
|
|
- </div>
|
|
|
- <div class="user-avatar">
|
|
|
- <i class="fas fa-ellipsis-v"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat-container">
|
|
|
- <div class="chat-header">
|
|
|
- <div class="chat-avatar">
|
|
|
- <i class="fas fa-balance-scale"></i>
|
|
|
- </div>
|
|
|
- <div class="chat-info">
|
|
|
- <div class="chat-name">明律通AI律师</div>
|
|
|
- <div class="chat-status">
|
|
|
- <span class="status-dot"></span>
|
|
|
- <span>在线</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat-messages" id="chat-messages">
|
|
|
- <!-- 初始欢迎消息 -->
|
|
|
- <div class="message ai-message">
|
|
|
- <p>您好!我是明律通AI律师助手,可以为您解答劳动纠纷、婚姻家庭、合同争议等法律问题。</p>
|
|
|
- <p>请简要描述您遇到的法律问题,我将为您提供专业分析。</p>
|
|
|
- <div class="quick-actions">
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('公司拖欠工资怎么办?')">拖欠工资</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('离婚财产如何分割?')">财产分割</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('合同违约怎么处理?')">合同违约</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('工伤如何认定?')">工伤认定</button>
|
|
|
- </div>
|
|
|
- <div class="message-time">刚刚</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat-input-container">
|
|
|
- <div class="input-wrapper">
|
|
|
- <button class="attach-btn">
|
|
|
- <i class="fas fa-paperclip"></i>
|
|
|
- </button>
|
|
|
- <input type="text" class="chat-input" id="chat-input" placeholder="输入您的问题..." onkeypress="handleKeyPress(event)">
|
|
|
- </div>
|
|
|
- <button class="send-btn" id="send-btn" onclick="sendMessage()" disabled>
|
|
|
- <i class="fas fa-paper-plane"></i>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </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 active" onclick="showPage('consult-home-page')">
|
|
|
- <div class="tab-icon">
|
|
|
- <i class="fas fa-comment-dots"></i>
|
|
|
- </div>
|
|
|
- <div>咨询</div>
|
|
|
- </a>
|
|
|
- <a href="#" class="tab-item">
|
|
|
- <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 === 'consult-home-page' || pageId === 'chat-page') {
|
|
|
- document.querySelectorAll('.tab-item')[1].classList.add('active');
|
|
|
- }
|
|
|
-
|
|
|
- // 滚动到底部
|
|
|
- if(pageId === 'chat-page') {
|
|
|
- setTimeout(() => {
|
|
|
- const messages = document.getElementById('chat-messages');
|
|
|
- messages.scrollTop = messages.scrollHeight;
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 开始咨询
|
|
|
- function startConsult(question) {
|
|
|
- showPage('chat-page');
|
|
|
-
|
|
|
- if(question) {
|
|
|
- setTimeout(() => {
|
|
|
- const input = document.getElementById('chat-input');
|
|
|
- input.value = question;
|
|
|
- document.getElementById('send-btn').disabled = false;
|
|
|
- }, 300);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 发送快捷问题
|
|
|
- function sendQuickQuestion(question) {
|
|
|
- const input = document.getElementById('chat-input');
|
|
|
- input.value = question;
|
|
|
- document.getElementById('send-btn').disabled = false;
|
|
|
- sendMessage();
|
|
|
- }
|
|
|
-
|
|
|
- // 处理回车键
|
|
|
- function handleKeyPress(e) {
|
|
|
- if(e.key === 'Enter') {
|
|
|
- sendMessage();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 输入框变化时启用/禁用发送按钮
|
|
|
- document.getElementById('chat-input').addEventListener('input', function() {
|
|
|
- document.getElementById('send-btn').disabled = this.value.trim() === '';
|
|
|
- });
|
|
|
-
|
|
|
- // 发送消息
|
|
|
- function sendMessage() {
|
|
|
- const input = document.getElementById('chat-input');
|
|
|
- const messageText = input.value.trim();
|
|
|
- if(messageText === '') return;
|
|
|
-
|
|
|
- const messages = document.getElementById('chat-messages');
|
|
|
-
|
|
|
- // 添加用户消息
|
|
|
- const userMsg = document.createElement('div');
|
|
|
- userMsg.className = 'message user-message';
|
|
|
- userMsg.innerHTML = `
|
|
|
- ${messageText}
|
|
|
- <div class="message-time">${formatTime(new Date())}</div>
|
|
|
- `;
|
|
|
- messages.appendChild(userMsg);
|
|
|
-
|
|
|
- // 清空输入框
|
|
|
- input.value = '';
|
|
|
- document.getElementById('send-btn').disabled = true;
|
|
|
-
|
|
|
- // 显示AI正在输入指示器
|
|
|
- const typingIndicator = document.createElement('div');
|
|
|
- typingIndicator.className = 'typing-indicator';
|
|
|
- typingIndicator.innerHTML = `
|
|
|
- <div class="typing-text">AI律师正在思考...</div>
|
|
|
- <div class="typing-dots">
|
|
|
- <span></span>
|
|
|
- <span></span>
|
|
|
- <span></span>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- messages.appendChild(typingIndicator);
|
|
|
-
|
|
|
- // 滚动到底部
|
|
|
- messages.scrollTop = messages.scrollHeight;
|
|
|
-
|
|
|
- // 模拟AI回复延迟
|
|
|
- setTimeout(() => {
|
|
|
- // 移除输入指示器
|
|
|
- messages.removeChild(typingIndicator);
|
|
|
-
|
|
|
- // 添加AI回复
|
|
|
- const aiMsg = document.createElement('div');
|
|
|
- aiMsg.className = 'message ai-message';
|
|
|
-
|
|
|
- // 根据问题类型生成不同的回复
|
|
|
- if(messageText.includes('工资') || messageText.includes('拖欠')) {
|
|
|
- aiMsg.innerHTML = generateLaborResponse();
|
|
|
- } else if(messageText.includes('离婚') || messageText.includes('财产') || messageText.includes('分割')) {
|
|
|
- aiMsg.innerHTML = generateMarriageResponse();
|
|
|
- } else if(messageText.includes('合同') || messageText.includes('违约')) {
|
|
|
- aiMsg.innerHTML = generateContractResponse();
|
|
|
- } else {
|
|
|
- aiMsg.innerHTML = generateGeneralResponse();
|
|
|
- }
|
|
|
-
|
|
|
- messages.appendChild(aiMsg);
|
|
|
-
|
|
|
- // 滚动到底部
|
|
|
- messages.scrollTop = messages.scrollHeight;
|
|
|
- }, 1500 + Math.random() * 2000); // 随机延迟1.5-3.5秒
|
|
|
- }
|
|
|
-
|
|
|
- // 生成劳动法相关回复
|
|
|
- function generateLaborResponse() {
|
|
|
- const laws = [
|
|
|
- '《劳动合同法》第三十条',
|
|
|
- '《劳动争议调解仲裁法》第五条',
|
|
|
- '《工资支付暂行规定》第七条'
|
|
|
- ];
|
|
|
-
|
|
|
- const suggestions = [
|
|
|
- '收集工资条、银行流水等证据',
|
|
|
- '向当地劳动监察大队投诉',
|
|
|
- '申请劳动仲裁(时效1年)',
|
|
|
- '可以主张经济补偿金'
|
|
|
- ];
|
|
|
-
|
|
|
- return `
|
|
|
- <p>您的问题涉及劳动法相关规定,根据${laws[Math.floor(Math.random()*laws.length)]},用人单位应当按时足额支付劳动者工资。</p>
|
|
|
-
|
|
|
- <div class="law-ref">
|
|
|
- <strong>${laws[0]}</strong><br>
|
|
|
- 用人单位应当按照劳动合同约定和国家规定,向劳动者及时足额支付劳动报酬。
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="suggestion-box">
|
|
|
- <div class="suggestion-title">
|
|
|
- <i class="fas fa-lightbulb"></i> 维权建议
|
|
|
- </div>
|
|
|
- <ol>
|
|
|
- <li>${suggestions[0]}</li>
|
|
|
- <li>${suggestions[1]}</li>
|
|
|
- <li>${suggestions[2]}</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="quick-actions">
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('劳动仲裁需要什么材料?')">仲裁材料</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('经济补偿金怎么计算?')">补偿计算</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('试用期被辞退怎么办?')">试用期辞退</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="message-time">${formatTime(new Date())}</div>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // 生成婚姻法相关回复
|
|
|
- function generateMarriageResponse() {
|
|
|
- const laws = [
|
|
|
- '《民法典》第一千零八十七条',
|
|
|
- '《民法典》第一千零八十四条',
|
|
|
- '《民法典》第一千零九十一条'
|
|
|
- ];
|
|
|
-
|
|
|
- const suggestions = [
|
|
|
- '婚前财产原则上归各自所有',
|
|
|
- '婚后共同财产一般均等分割',
|
|
|
- '考虑照顾子女、女方和无过错方权益',
|
|
|
- '可以协议分割或诉讼分割'
|
|
|
- ];
|
|
|
-
|
|
|
- return `
|
|
|
- <p>关于离婚财产分割问题,根据${laws[Math.floor(Math.random()*laws.length)]},夫妻共同财产由双方协议处理;协议不成的,由人民法院根据财产的具体情况判决。</p>
|
|
|
-
|
|
|
- <div class="law-ref">
|
|
|
- <strong>${laws[0]}</strong><br>
|
|
|
- 离婚时,夫妻的共同财产由双方协议处理;协议不成的,由人民法院根据财产的具体情况,按照照顾子女、女方和无过错方权益的原则判决。
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="suggestion-box">
|
|
|
- <div class="suggestion-title">
|
|
|
- <i class="fas fa-lightbulb"></i> 处理建议
|
|
|
- </div>
|
|
|
- <ol>
|
|
|
- <li>${suggestions[0]}</li>
|
|
|
- <li>${suggestions[1]}</li>
|
|
|
- <li>${suggestions[3]}</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="quick-actions">
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('婚前房产怎么分割?')">婚前房产</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('抚养权怎么判定?')">抚养权</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('离婚协议书怎么写?')">离婚协议</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="message-time">${formatTime(new Date())}</div>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // 生成合同法相关回复
|
|
|
- function generateContractResponse() {
|
|
|
- const laws = [
|
|
|
- '《民法典》第五百七十七条',
|
|
|
- '《民法典》第五百八十四条',
|
|
|
- '《民法典》第五百八十五条'
|
|
|
- ];
|
|
|
-
|
|
|
- const suggestions = [
|
|
|
- '审查合同违约条款是否明确',
|
|
|
- '收集违约证据(聊天记录、邮件等)',
|
|
|
- '先协商解决,协商不成可诉讼',
|
|
|
- '注意诉讼时效(一般为3年)'
|
|
|
- ];
|
|
|
-
|
|
|
- return `
|
|
|
- <p>合同违约问题涉及${laws[Math.floor(Math.random()*laws.length)]},当事人一方不履行合同义务或者履行合同义务不符合约定的,应当承担继续履行、采取补救措施或者赔偿损失等违约责任。</p>
|
|
|
-
|
|
|
- <div class="law-ref">
|
|
|
- <strong>${laws[0]}</strong><br>
|
|
|
- 当事人一方不履行合同义务或者履行合同义务不符合约定的,应当承担继续履行、采取补救措施或者赔偿损失等违约责任。
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="suggestion-box">
|
|
|
- <div class="suggestion-title">
|
|
|
- <i class="fas fa-lightbulb"></i> 维权步骤
|
|
|
- </div>
|
|
|
- <ol>
|
|
|
- <li>${suggestions[1]}</li>
|
|
|
- <li>${suggestions[2]}</li>
|
|
|
- <li>${suggestions[3]}</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="quick-actions">
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('违约金过高怎么办?')">违约金</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('合同解除的条件?')">合同解除</button>
|
|
|
- <button class="quick-action" onclick="sendQuickQuestion('如何起草合同?')">合同起草</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="message-time">${formatTime(new Date())}</div>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // 生成通用回复
|
|
|
- function generateGeneralResponse() {
|
|
|
- const responses = [
|
|
|
- '您的问题涉及多个法律要点,需要进一步了解具体情况。',
|
|
|
- '根据相关法律规定,您描述的情况可能有以下几种处理方式:',
|
|
|
- '这是一个常见的法律问题,司法实践中通常这样处理:'
|
|
|
- ];
|
|
|
-
|
|
|
- const suggestions = [
|
|
|
- '建议收集相关证据材料',
|
|
|
- '可以咨询专业律师获取详细建议',
|
|
|
- '注意保留相关书面证据',
|
|
|
- '注意诉讼时效问题'
|
|
|
- ];
|
|
|
-
|
|
|
- return `
|
|
|
- <p>${responses[Math.floor(Math.random()*responses.length)]}</p>
|
|
|
-
|
|
|
- <div class="law-ref">
|
|
|
- <strong>相关法律依据</strong><br>
|
|
|
- 根据《民法典》相关规定,民事主体从事民事活动,应当遵循诚信原则,按照约定全面履行自己的义务。
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="suggestion-box">
|
|
|
- <div class="suggestion-title">
|
|
|
- <i class="fas fa-lightbulb"></i> 一般建议
|
|
|
- </div>
|
|
|
- <ol>
|
|
|
- <li>${suggestions[0]}</li>
|
|
|
- <li>${suggestions[1]}</li>
|
|
|
- <li>${suggestions[2]}</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
-
|
|
|
- <p>如果您能提供更多细节,我可以给出更具体的法律建议。</p>
|
|
|
-
|
|
|
- <div class="message-time">${formatTime(new Date())}</div>
|
|
|
- `;
|
|
|
- }
|
|
|
-
|
|
|
- // 格式化时间
|
|
|
- function formatTime(date) {
|
|
|
- const hours = date.getHours().toString().padStart(2, '0');
|
|
|
- const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
|
- return `${hours}:${minutes}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 初始化显示咨询主页
|
|
|
- showPage('consult-home-page');
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|