From b0b1acd680874227c700aae03a48a42b457a44ee Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Mon, 28 Apr 2025 22:54:14 +0800
Subject: [PATCH 1/6] 13

---
 .../front/front/pages/yisheng/register.html   | 382 +++++++++---------
 1 file changed, 197 insertions(+), 185 deletions(-)
diff --git a/target/classes/front/front/pages/yisheng/register.html b/target/classes/front/front/pages/yisheng/register.html
index 7ba1a8a..540ddab 100644
--- a/target/classes/front/front/pages/yisheng/register.html
+++ b/target/classes/front/front/pages/yisheng/register.html
@@ -1,244 +1,256 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>注册</title>
-    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
-    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
-    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
-
-    <link rel="stylesheet" href="../../css/theme.css" />
+    <!-- 元数据定义 -->
+    <meta charset="utf-8"> <!-- 字符编码设置为UTF-8 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- 响应式视口设置 -->
+    <title>注册</title> <!-- 页面标题 -->
+
+    <!-- CSS样式表引入 -->
+    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"> <!-- 引入LayUI框架样式 -->
+    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/> <!-- 公共样式表 -->
+    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/> <!-- 登录相关样式 -->
+    <link rel="stylesheet" href="../../css/theme.css" /> <!-- 主题样式 -->
+
+    <!-- 内联CSS样式 -->
     <style type="text/css">
+        /* 注册页面主容器样式 */
         .register {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            height: 100%;
-            background-attachment: fixed;
-            background-size: cover;
-            background-position: center;
-            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg);
+            display: flex; /* 弹性布局 */
+            justify-content: center; /* 水平居中 */
+            align-items: center; /* 垂直居中 */
+            width: 100%; /* 宽度100% */
+            height: 100%; /* 高度100% */
+            background-attachment: fixed; /* 背景固定 */
+            background-size: cover; /* 背景覆盖 */
+            background-position: center; /* 背景居中 */
+            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片 */
         }
+
+        /* 表单样式 */
         .register form {
-            box-sizing: border-box;
-            min-height: 400px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center !important;
-        }
-        .register .logo, .register .title {
-            box-sizing: border-box;
-        }
-        .register .logo img {
-            display: block;
+            box-sizing: border-box; /* 盒模型计算方式 */
+            min-height: 400px; /* 最小高度 */
+            display: flex; /* 弹性布局 */
+            flex-direction: column; /* 垂直排列 */
+            justify-content: center !important; /* 垂直居中 */
         }
+
+        /* 标题和logo样式 */
         .register .title {
-            text-align: center;
+            text-align: center; /* 文字居中 */
         }
+
+        /* 表单项样式 */
         .register .form-item {
-            display: flex;
-            align-items: center;
-            flex-wrap: wrap;
-            box-sizing: border-box;
-        }
-        .register .form-item input, .register .form-label {
-            box-sizing: border-box;
+            display: flex; /* 弹性布局 */
+            align-items: center; /* 垂直居中 */
+            flex-wrap: wrap; /* 允许换行 */
+            box-sizing: border-box; /* 盒模型计算方式 */
         }
+
+        /* 提交按钮样式 */
         .register .btn-submit {
-            display: block;
-            box-sizing: border-box;
-        }
-        .register form p.txt {
-            width: 100%;
-            margin: 0;
-            box-sizing: border-box;
-        }
-        .layui-unselect{
-            margin-left: -5px;
-            margin-top: 3px;
-            border: 0px;
+            display: block; /* 块级元素 */
+            box-sizing: border-box; /* 盒模型计算方式 */
         }
     </style>
 </head>
 <body>
+<!-- Vue.js应用容器 -->
 <div class="register" id="app">
-    <form class="layui-form login-form" lay-filter="myForm" :style='{"padding":"20px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"20px","borderWidth":"0","width":"400px","borderStyle":"solid","justifyContent":"center","height":"auto"}'>
-        <p class="title" v-if="true" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(247, 247, 247, 0)","color":"red","isshow":true,"borderRadius":"8px","borderWidth":"0","width":"110px","lineHeight":"32px","fontSize":"17px","borderStyle":"solid"}'>医生注册</p>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">医生工号：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" autocomplete="off" class="layui-input">
-                 </div>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">账户：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" autocomplete="off" class="layui-input">
-                 </div>
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
-                    <input type="password" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
-                </div>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" autocomplete="off" class="layui-input">
-                 </div>
-                                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">医生名称：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" autocomplete="off" class="layui-input">
-                 </div>
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'>
-                    <div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'>
-                        <select name="yishengTypes" id="yishengTypes">
-                            <option value="">请选择科室</option>
-                            <option v-for="(item,index) in yishengTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
-                        </select>
-                    </div>
-                </div>
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'>
-                    <div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'>
-                        <select name="zhiweiTypes" id="zhiweiTypes">
-                            <option value="">请选择职位</option>
-                            <option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
-                        </select>
-                    </div>
-                </div>
-                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">职称：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" autocomplete="off" class="layui-input">
-                 </div>
-<!-- 手机号 -->
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">联系方式：</label>
-                    <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
-                </div>
-                                 <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                     <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">挂号须知：</label>
-                     <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" autocomplete="off" class="layui-input">
-                 </div>
-<!-- 邮箱 -->
-                <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
-                    <label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">邮箱：</label>
-                    <input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
-                </div>
-        <button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-submit lay-filter="register" style="width: 280px;">注册</button>
-        <p :style='{"color":"rgba(59, 46, 126, 1)","textAlign":"left","fontSize":"12px"}' class="txt"><a href="javascript:window.location.href='../login/login.html'">已有账号登录</a></p>
+    <!-- 注册表单 -->
+    <form class="layui-form login-form" lay-filter="myForm">
+        <!-- 表单标题 -->
+        <p class="title">医生注册</p>
+
+        <!-- 医生工号输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" class="layui-input">
+        </div>
+
+        <!-- 用户名输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" class="layui-input">
+        </div>
+
+        <!-- 密码输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" class="layui-input">
+        </div>
+
+        <!-- 确认密码输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" class="layui-input">
+        </div>
+
+        <!-- 医生姓名输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" class="layui-input">
+        </div>
+
+        <!-- 科室选择下拉框 -->
+        <div>
+            <select name="yishengTypes" id="yishengTypes">
+                <option value="">请选择科室</option>
+                <!-- Vue动态渲染科室选项 -->
+                <option v-for="(item,index) in yishengTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
+            </select>
+        </div>
+
+        <!-- 职位选择下拉框 -->
+        <div>
+            <select name="zhiweiTypes" id="zhiweiTypes">
+                <option value="">请选择职位</option>
+                <!-- Vue动态渲染职位选项 -->
+                <option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
+            </select>
+        </div>
+
+        <!-- 职称输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" class="layui-input">
+        </div>
+
+        <!-- 联系方式输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" class="layui-input">
+        </div>
+
+        <!-- 挂号须知输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" class="layui-input">
+        </div>
+
+        <!-- 邮箱输入框 -->
+        <div class="form-item layui-form-text">
+            <input lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" class="layui-input">
+        </div>
+
+        <!-- 注册按钮 -->
+        <button class="layui-btn" lay-submit lay-filter="register">注册</button>
+
+        <!-- 已有账号登录链接 -->
+        <p class="txt"><a href="../login/login.html">已有账号登录</a></p>
     </form>
 </div>
 
-<script src="../../layui/layui.js"></script>
-<script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
-<script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-<!-- 组件配置信息 -->
-<script src="../../js/config.js"></script>
-<!-- 扩展插件配置信息 -->
-<script src="../../modules/config.js"></script>
-<!-- 工具方法 -->
-<script src="../../js/utils.js"></script>
-<!-- 校验格式工具类 -->
-<script src="../../js/validate.js"></script>
+<!-- JavaScript文件引入 -->
+<script src="../../layui/layui.js"></script> <!-- LayUI框架 -->
+<script src="../../js/vue.js"></script> <!-- Vue.js框架 -->
+<script src="../../xznstatic/js/element.min.js"></script> <!-- Element UI组件库 -->
+<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <!-- Element UI样式 -->
+<script src="../../js/config.js"></script> <!-- 组件配置信息 -->
+<script src="../../modules/config.js"></script> <!-- 扩展插件配置 -->
+<script src="../../js/utils.js"></script> <!-- 工具方法 -->
+<script src="../../js/validate.js"></script> <!-- 校验工具类 -->
 
 <script>
+    // 创建Vue实例
     var vue = new Vue({
-        el: '#app',
+        el: '#app', // 挂载到id为app的元素上
         data: {
-            yishengTypesList : [],
-            zhiweiTypesList : [],
+            yishengTypesList : [], // 科室类型列表
+            zhiweiTypesList : [], // 职位类型列表
         },
         updated: function() {
+            // 当Vue更新DOM后，重新渲染LayUI表单
             layui.form.render(null, 'myForm');
         },
     });
 
+    // 使用LayUI模块
     layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var form = layui.form;
-        var http = layui.http;
-        var jquery = layui.jquery;
+        // 获取LayUI模块
+        var layer = layui.layer; // 弹层组件
+        var element = layui.element; // 元素组件
+        var carousel = layui.carousel; // 轮播组件
+        var form = layui.form; // 表单组件
+        var http = layui.http; // HTTP请求组件
+        var jquery = layui.jquery; // jQuery组件
 
+        // 获取表名参数
         var tablename = http.getParam('tablename');
-        //字典表数据容器
-        // 科室的查询和初始化
+
+        // 初始化科室下拉框
         yishengTypesSelect();
-        // 职位的查询和初始化
+        // 初始化职位下拉框
         zhiweiTypesSelect();
-        // 日期效验规则及格式
+        // 初始化日期选择器
         dateTimePick();
-        // 表单效验规则
+
+        // 表单验证规则
         form.verify({
-            // 正整数效验规则
+            // 正整数验证
             integer: [
-                /^[1-9][0-9]*$/
-                ,'必须是正整数'
-            ]
-            // 小数效验规则
-            ,double: [
-                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
-                ,'最大整数位为6为,小数最大两位'
-            ]
-            ,password1: function(value, item){ //value：表单的值、item：表单的DOM对象
-            var password2 = jquery("#password2").val();
-                if(password2 != null && password2 != "" && password2 != "null"){
-                    if(value != password2){
-                        return '密码的两次密码不一致';
-                    }
+                /^[1-9][0-9]*$/,
+                '必须是正整数'
+            ],
+            // 小数验证
+            double: [
+                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/,
+                '最大整数位为6为,小数最大两位'
+            ],
+            // 密码一致性验证1
+            password1: function(value, item) {
+                var password2 = jquery("#password2").val();
+                if(password2 && value != password2){
+                    return '密码的两次密码不一致';
                 }
-            }
-            ,password2: function(value, item){ //value：表单的值、item：表单的DOM对象
-            var password1 = jquery("#password1").val();
-                if(password1 != null && password1 != "" && password1 != "null"){
-                    if(value != password1){
-                        return '密码的两次密码不一致';
-                    }
+            },
+            // 密码一致性验证2
+            password2: function(value, item) {
+                var password1 = jquery("#password1").val();
+                if(password1 && value != password1){
+                    return '密码的两次密码不一致';
                 }
             }
         });
 
-        // 注册
+        // 注册表单提交事件
         form.on('submit(register)', function(data) {
-            data = data.field;
+            data = data.field; // 获取表单数据
+            // 发送注册请求
             http.requestJson(tablename + '/register', 'post', data, function(res) {
+                // 注册成功提示
                 layer.msg('注册成功', {
-                    time: 2000,
-                    icon: 6
-                },function(){
-                    // 路径访问设置
+                    time: 2000, // 2秒后自动关闭
+                    icon: 6 // 成功图标
+                }, function(){
+                    // 跳转到登录页面
                     window.location.href = '../login/login.html';
                 });
             });
-            return false
+            return false; // 阻止表单默认提交
         });
 
-
-
-        // 日期框初始化
+        // 日期选择器初始化函数
         function dateTimePick(){
+            // 可以在这里初始化日期选择器
         };
 
-      // 科室的查询
-      function yishengTypesSelect() {
-          //填充下拉框选项
-          http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", "GET", {}, (res) => {
-              if(res.code == 0){
-                vue.yishengTypesList = res.data.list;
-              }
-          });
-      }
-      // 职位的查询
-      function zhiweiTypesSelect() {
-          //填充下拉框选项
-          http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
-              if(res.code == 0){
-                vue.zhiweiTypesList = res.data.list;
-              }
-          });
-      }
+        // 科室类型查询函数
+        function yishengTypesSelect() {
+            // 请求科室类型数据
+            http.request("dictionary/page?page=1&limit=100&dicCode=yisheng_types", "GET", {}, (res) => {
+                if(res.code == 0){
+                    // 将数据存入Vue实例
+                    vue.yishengTypesList = res.data.list;
+                }
+            });
+        }
 
+        // 职位类型查询函数
+        function zhiweiTypesSelect() {
+            // 请求职位类型数据
+            http.request("dictionary/page?page=1&limit=100&dicCode=zhiwei_types", "GET", {}, (res) => {
+                if(res.code == 0){
+                    // 将数据存入Vue实例
+                    vue.zhiweiTypesList = res.data.list;
+                }
+            });
+        }
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
-- 
2.34.1


From 7ed0468795fb213a89428707447e25038fa8fb50 Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Tue, 29 Apr 2025 14:03:14 +0800
Subject: [PATCH 2/6] 14

---
 target/classes/front/front/pages/yisheng/add.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/target/classes/front/front/pages/yisheng/add.html b/target/classes/front/front/pages/yisheng/add.html
index 764cd77..b23f067 100644
--- a/target/classes/front/front/pages/yisheng/add.html
+++ b/target/classes/front/front/pages/yisheng/add.html
@@ -199,4 +199,8 @@
                         <input type="hidden" :value="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
                     </div>
                     <!-- 如果头像不是只读状态，则显示上传头像按钮 -->
-                    <button v-if="!ro.yishengPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 1
\ No newline at end of file
+                    <button v-if="!ro.yishengPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 1">上传头像</button>
+                    </div>
+                </div>
+            </form>
+        </
\ No newline at end of file
-- 
2.34.1


From 6bfb1d168810a3595b98ecae994e05686e5b8dff Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Tue, 29 Apr 2025 14:11:37 +0800
Subject: [PATCH 3/6] 15

---
 .../front/front/pages/yisheng/center.html     | 171 +++++++++---------
 1 file changed, 89 insertions(+), 82 deletions(-)

diff --git a/target/classes/front/front/pages/yisheng/center.html b/target/classes/front/front/pages/yisheng/center.html
index 43da56d..96ab0b8 100644
--- a/target/classes/front/front/pages/yisheng/center.html
+++ b/target/classes/front/front/pages/yisheng/center.html
@@ -2,25 +2,26 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <!-- 设置字符编码为UTF - 8 -->
+    <!-- 设置字符编码为UTF - 8，确保页面能正确显示各种字符 -->
     <meta charset="utf-8">
-    <!-- 设置页面在移动设备上的显示效果，宽度为设备宽度，初始缩放比例为1，最大缩放比例为1 -->
+    <!-- 设置页面在移动设备上的显示效果，宽度为设备宽度，初始缩放比例为1，最大缩放比例为1，以实现页面的响应式布局 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <!-- 设置页面标题为个人中心 -->
+    <!-- 设置页面标题为个人中心，该标题会显示在浏览器的标签栏上 -->
     <title>个人中心</title>
-    <!-- 引入layui的CSS样式文件 -->
+    <!-- 引入layui的CSS样式文件，layui是一个前端框架，提供了丰富的组件和样式 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 引入element的CSS样式文件 -->
+    <!-- 引入element的CSS样式文件，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 -->
     <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-    <!-- 引入自定义的样式文件 -->
+    <!-- 引入自定义的样式文件，可对页面进行特定的样式设置 -->
     <link rel="stylesheet" href="../../css/style.css" />
-    <!-- 引入主题样式文件，用于设置主要颜色等 -->
+    <!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关样式 -->
     <link rel="stylesheet" href="../../css/theme.css" />
-    <!-- 引入通用的CSS样式文件 -->
+    <!-- 引入通用的CSS样式文件，包含一些通用的样式规则 -->
     <link rel="stylesheet" href="../../css/common.css" />
 </head>
 <style>
-    /* 在HTML元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性 */
+    /* 在HTML元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性
+       该伪元素会覆盖整个页面，用于设置背景图片、颜色等，且固定在页面上，不随滚动条滚动 */
     html::after {
         position: fixed;
         top: 0;
@@ -34,11 +35,12 @@
         background-position: center;
         z-index: -1;
     }
-    /* 轮播图容器样式，设置溢出内容隐藏 */
+    /* 轮播图容器样式，设置溢出内容隐藏，防止轮播图超出容器范围 */
     #swiper {
         overflow: hidden;
     }
-    /* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影 */
+    /* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影
+       轮播图指示器通常是小圆点，用于指示当前轮播到的图片位置 */
     #swiper .layui-carousel-ind li {
         width: 20px;
         height: 10px;
@@ -49,7 +51,8 @@
         background-color: #f7f7f7;
         box-shadow: 0 0 6px rgba(255,0,0,.8);
     }
-    /* 轮播图指示器当前激活项的样式，设置宽度和其他样式 */
+    /* 轮播图指示器当前激活项的样式，设置宽度和其他样式
+       当轮播到某张图片时，对应的指示器小圆点会变成该样式 */
     #swiper .layui-carousel-ind li.layui-this {
         width: 30px;
         height: 10px;
@@ -58,7 +61,8 @@
         border-color: rgba(0,0,0,.3);
         border-radius: 6px;
     }
-    /* 页面标题容器的样式，设置文本居中、宽度和弹性布局 */
+    /* 页面标题容器的样式，设置文本居中、宽度和弹性布局
+       用于包裹页面标题，使其水平和垂直居中显示 */
     .index-title {
         text-align: center;
         box-sizing: border-box;
@@ -68,20 +72,24 @@
         align-items: center;
         flex-direction: column;
     }
-    /* 页面标题中span元素的样式，设置内边距和行高 */
+    /* 页面标题中span元素的样式，设置内边距和行高
+       用于调整标题文本的显示效果 */
     .index-title span {
         padding: 0 10px;
         line-height: 1.4;
     }
-    /* 个人中心容器中导航树的样式，设置宽度为100% */
+    /* 个人中心容器中导航树的样式，设置宽度为100%
+       导航树用于展示个人中心的菜单选项 */
     .center-container .layui-nav-tree {
         width: 100%;
     }
-    /* 个人中心容器中导航的样式，设置定位为继承 */
+    /* 个人中心容器中导航的样式，设置定位为继承
+       确保导航的定位与父元素相关 */
     .center-container .layui-nav {
         position: inherit;
     }
-    /* 个人中心容器中导航树导航项的样式，设置高度、行高、字体大小、边框、背景色和文本对齐方式 */
+    /* 个人中心容器中导航树导航项的样式，设置高度、行高、字体大小、边框、背景色和文本对齐方式
+       每个导航项代表一个菜单选项 */
     .center-container .layui-nav-tree .layui-nav-item {
         height: 44px;
         line-height: 44px;
@@ -93,12 +101,14 @@
         background-color: #fff;
         text-align: center;
     }
-    /* 个人中心容器中导航树导航条的样式，设置高度和透明度 */
+    /* 个人中心容器中导航树导航条的样式，设置高度和透明度
+       导航条通常是导航项下方的一条线，这里设置其高度和透明度 */
     .center-container .layui-nav-tree .layui-nav-bar {
         height: 44px !important;
         opacity: 0 !important;
     }
-    /* 个人中心容器中导航树当前激活导航项的样式，设置字体大小、颜色、边框和圆角 */
+    /* 个人中心容器中导航树当前激活导航项的样式，设置字体大小、颜色、边框和圆角
+       当用户点击某个导航项时，该导航项会变成该样式 */
     .center-container .layui-nav-tree .layui-nav-item.layui-this {
         font-size: 16px;
         color: rgba(17, 17, 17, 1);
@@ -106,7 +116,8 @@
         border-style: solid;
         border-radius: 0;
     }
-    /* 个人中心容器中导航树导航项鼠标悬停时的样式，设置字体大小和颜色 */
+    /* 个人中心容器中导航树导航项鼠标悬停时的样式，设置字体大小和颜色
+       当鼠标悬停在导航项上时，导航项会变成该样式 */
     .center-container .layui-nav-tree .layui-nav-item:hover {
         font-size: 14px;
         color: #fff;
@@ -114,7 +125,8 @@
         border-style: solid;
         border-radius: 0;
     }
-    /* 个人中心容器中导航树导航项链接的样式，设置行高、高度、背景色、颜色和去除下划线 */
+    /* 个人中心容器中导航树导航项链接的样式，设置行高、高度、背景色、颜色和去除下划线
+       导航项链接是用户点击的部分，这里设置其显示效果 */
     .center-container .layui-nav-tree .layui-nav-item a {
         line-height: inherit;
         height: auto;
@@ -122,21 +134,25 @@
         color: inherit;
         text-decoration: none;
     }
-    /* 右侧容器的样式，设置为相对定位 */
+    /* 右侧容器的样式，设置为相对定位
+       右侧容器用于展示个人中心的详细内容 */
     .right-container {
         position: relative;
     }
-    /* 右侧容器中表单元素项的样式，设置为弹性布局并垂直居中对齐 */
+    /* 右侧容器中表单元素项的样式，设置为弹性布局并垂直居中对齐
+       表单元素项包含标签和输入框等，这里设置其布局方式 */
     .right-container .layui-form-item {
         display: flex;
         align-items: center;
     }
-    /* 右侧容器中输入框所在块的样式，设置外边距为0，弹性增长系数为1 */
+    /* 右侧容器中输入框所在块的样式，设置外边距为0，弹性增长系数为1
+       输入框所在块用于包裹输入框，使其占据剩余的空间 */
     .right-container .layui-input-block {
         margin: 0;
         flex: 1;
     }
-    /* 右侧容器中普通输入框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式 */
+    /* 右侧容器中普通输入框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式
+       普通输入框用于输入文本信息 */
     .right-container .input .layui-input {
         padding: 0 12px;
         height: 40px;
@@ -147,7 +163,8 @@
         background-color: #fff;
         text-align: left;
     }
-    /* 右侧容器中选择框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式 */
+    /* 右侧容器中选择框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式
+       选择框用于选择选项 */
     .right-container .select .layui-input {
         padding: 0 12px;
         height: 40px;
@@ -158,7 +175,8 @@
         background-color: #fff;
         text-align: left;
     }
-    /* 右侧容器中日期输入框的样式，设置内边距、高度、字体大小、颜色、边框、背景色、阴影和文本对齐方式 */
+    /* 右侧容器中日期输入框的样式，设置内边距、高度、字体大小、颜色、边框、背景色、阴影和文本对齐方式
+       日期输入框用于输入日期信息 */
     .right-container .date .layui-input {
         padding: 0 12px;
         height: 40px;
@@ -171,7 +189,8 @@
         box-shadow: 0 0 0px rgba(255,0,0,.8);
         text-align: left;
     }
-    /* 头部区域的样式，设置动画效果、内边距、位置和底部边框 */
+    /* 头部区域的样式，设置动画效果、内边距、位置和底部边框
+       头部区域包含标题和副标题等信息 */
     .header {
         animation-name: fadeInUp;
         padding-bottom: 26px;
@@ -180,7 +199,8 @@
         border-bottom: 1px solid rgba(0,0,0,0.1);
         margin-bottom: 40px;
     }
-    /* 特定头部区域的样式，设置顶部位置、内边距、宽度、高度和圆角 */
+    /* 特定头部区域的样式，设置顶部位置、内边距、宽度、高度和圆角
+       该头部区域可能是个人中心菜单部分的头部 */
     #plheader {
         top: 48px;
         padding-bottom: 40px;
@@ -190,7 +210,8 @@
         border-radius: 3px 3px 0px 0px;
         padding-top: 40px !important;
     }
-    /* 头部标题的样式，设置颜色、字体大小、边距、文本溢出处理、字体加粗、底部边框和字母间距 */
+    /* 头部标题的样式，设置颜色、字体大小、边距、文本溢出处理、字体加粗、底部边框和字母间距
+       头部标题用于显示页面的主要标题 */
     .header p.title {
         color: #fff;
         font-size: 25px;
@@ -206,7 +227,8 @@
         border-bottom: 1px solid rgba(255, 255, 255, 0.16);
         letter-spacing:1px;
     }
-    /* 分类菜单区域的样式，设置内边距、位置、宽度、浮动、背景色和圆角 */
+    /* 分类菜单区域的样式，设置内边距、位置、宽度、浮动、背景色和圆角
+       分类菜单区域用于展示个人中心的菜单列表 */
     #category {
         padding-top: 136px;
         margin-left: 0px;
@@ -219,7 +241,8 @@
         background-color: var(--publicMainColor);
         border-radius: 0px 0px 3px 3px;
     }
-    /* 头部副标题的样式，设置字体、字母间距、字体大小、显示方式、颜色、边距、浮动、文本溢出处理和文本对齐方式 */
+    /* 头部副标题的样式，设置字体、字母间距、字体大小、显示方式、颜色、边距、浮动、文本溢出处理和文本对齐方式
+       头部副标题用于显示页面的次要标题 */
     .header p.subtitle {
         font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";
         letter-spacing: 1px;
@@ -234,15 +257,18 @@
         width: 156px;
         text-align: left;
     }
-    /* 分类菜单中激活链接的前伪元素样式，设置为不显示 */
+    /* 分类菜单中激活链接的前伪元素样式，设置为不显示
+       前伪元素通常用于在元素前面添加额外的样式 */
     #category a.active::before {
         display: none;
     }
-    /* 分类菜单中激活链接的后伪元素样式，设置为不显示 */
+    /* 分类菜单中激活链接的后伪元素样式，设置为不显示
+       后伪元素通常用于在元素后面添加额外的样式 */
     #category a.active::after {
         display: none;
     }
-    /* 分类菜单中激活链接和鼠标悬停时链接的样式，设置背景色、颜色、边框颜色和过渡效果 */
+    /* 分类菜单中激活链接和鼠标悬停时链接的样式，设置背景色、颜色、边框颜色和过渡效果
+       当链接被激活或鼠标悬停时，会变成该样式 */
     #category a.active, #category a:hover {
         background: var(--publicSubColor);
         color: #FFFFFF;
@@ -250,7 +276,8 @@
         transition: 0.3s;
         transform-origin: bottom;
     }
-    /* 分类菜单列表项的样式，设置高度、位置、浮动、显示方式、边距、行高、底部边框、内边距和过渡效果 */
+    /* 分类菜单列表项的样式，设置高度、位置、浮动、显示方式、边距、行高、底部边框、内边距和过渡效果
+       分类菜单列表项代表每个菜单选项 */
     #category li {
         height:auto;
         position:relative;
@@ -264,11 +291,13 @@
         margin-right:16px;
         transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
     }
-    /* 分类菜单列表项最后一项的样式，去除底部边框 */
+    /* 分类菜单列表项最后一项的样式，去除底部边框
+       最后一项的底部边框可能会影响整体美观，这里去除 */
     #category li:last-child {
         border-bottom:none;
     }
-    /* 分类菜单链接的样式，设置边框、背景、颜色、字体大小、位置、内边距、行高和高度 */
+    /* 分类菜单链接的样式，设置边框、背景、颜色、字体大小、位置、内边距、行高和高度
+       分类菜单链接是用户点击的部分，这里设置其显示效果 */
     #category a {
         border:0px;
         background:none;
@@ -279,12 +308,11 @@
         line-height: 42px;
         height: 42px;
     }
-    /* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果 */
+    /* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果
+       前伪元素用于在链接前面添加额外的样式 */
     #category a::before {
         content:'';
         position:absolute;
-        content: '';
-        position: absolute;
         width: 190px;
         background-color: #AEAEAF;
         height: 42px;
@@ -293,17 +321,20 @@
         position: absolute;
         transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
     }
-    /* 分类菜单中激活链接的前伪元素样式，设置为不显示 */
+    /* 分类菜单中激活链接的前伪元素样式，设置为不显示
+       激活链接的前伪元素可能会影响显示效果，这里去除 */
     #category a.active::before {
         display: none;
     }
-    /* 分类菜单列表项鼠标悬停时的样式，设置内边距和背景色过渡效果 */
+    /* 分类菜单列表项鼠标悬停时的样式，设置内边距和背景色过渡效果
+       当鼠标悬停在列表项上时，列表项会变成该样式 */
     #category li:hover {
         padding-left:30px;
         background-color: var(--publicSubColor);
         transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
     }
-    /* 特定类名的分类菜单列表项和链接的样式，设置内边距、背景色、颜色和过渡效果 */
+    /* 特定类名的分类菜单列表项和链接的样式，设置内边距、背景色、颜色和过渡效果
+       特定类名的列表项和链接可能是默认选中的，这里设置其样式 */
     #category .bbbb, #category li .aaaa {
         padding-left:30px;
         background-color: var(--publicSubColor);
@@ -313,11 +344,13 @@
         transition: 0.3s;
         transform-origin: bottom;
     }
-    /* 分类菜单列表项鼠标悬停时子列表项的样式，设置宽度 */
+    /* 分类菜单列表项鼠标悬停时子列表项的样式，设置宽度
+       当鼠标悬停在列表项上时，子列表项会变成该样式 */
     #category li:hover ul li{
         width: 136px;
     }
-    /* 分类菜单列表项鼠标悬停时子列表项链接的样式，设置颜色、宽度、文本溢出处理、背景色和内边距 */
+    /* 分类菜单列表项鼠标悬停时子列表项链接的样式，设置颜色、宽度、文本溢出处理、背景色和内边距
+       当鼠标悬停在列表项上时，子列表项链接会变成该样式 */
     #category li:hover ul li a{
         color: rgba(255, 255, 255, 0.45);
         width: 136px;
@@ -325,25 +358,27 @@
         background-color: rgb(34, 73, 160);
         padding-left:0px;
     }
-    /* 分类菜单子列表项链接鼠标悬停时的样式，设置内边距和左边距 */
+    /* 分类菜单子列表项链接鼠标悬停时的样式，设置内边距和左边距
+       当鼠标悬停在子列表项链接上时，链接会变成该样式 */
     #category li ul li:hover a{
         padding-left:0px;
         margin-left: 0px;
     }
-    /* 分类菜单列表项鼠标悬停时链接的样式，设置颜色 */
+    /* 分类菜单列表项鼠标悬停时链接的样式，设置颜色
+       当鼠标悬停在列表项上时，链接会变成该样式 */
     #category li:hover a{
         color:#fff
     }
 </style>
 <body>
-<!-- Vue实例挂载的根元素 -->
+<!-- Vue实例挂载的根元素，Vue会在该元素内渲染页面 -->
 <div id="app">
     <!-- 轮播图容器，使用layui的轮播图组件 -->
     <div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
         <div carousel-item>
             <!-- 使用Vue的v-for指令循环渲染轮播图项，根据swiperList数组动态生成 -->
             <div v-for="(item,index) in swiperList" :key="index">
-                <!-- 轮播图图片，设置宽度、高度和适应方式 -->
+                <!-- 轮播图图片，设置宽度、高度和适应方式，使图片适应容器大小 -->
                 <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
             </div>
         </div>
@@ -359,7 +394,9 @@
         <div style=" width:auto; margin:-70px 10px 0px auto">
             <!-- 头部区域，显示标题和副标题 -->
             <div class="header" id="plheader">
+                <!-- 头部标题，显示个人中心 -->
                 <p class="title">个人中心</p>
+                <!-- 头部副标题，显示USER / CENTER -->
                 <p class="subtitle">USER / CENTER</p>
             </div>
             <!-- 分类菜单列表 -->
@@ -375,7 +412,7 @@
         <div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
             <!-- 表单元素，使用layui表单 -->
             <form class="layui-form">
-                <!-- 隐藏输入框，用于存储主键信息 -->
+                <!-- 隐藏输入框，用于存储主键信息，通常用于标识数据的唯一性 -->
                 <input type="hidden" v-model="detail.id" name="id" id="id" />
                 <!-- 医生工号表单元素项 -->
                 <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
@@ -508,34 +545,4 @@
                     </div>
                 </div>
                 <!-- 挂号须知表单元素项 -->
-                <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <!-- 表单标签，显示挂号须知 -->
-                    <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        挂号须知
-                    </label>
-                    <!-- 输入框所在块 -->
-                    <div class="layui-input-block input">
-                        <!-- 挂号须知输入框，使用v-model绑定数据，设置验证规则和占位符 -->
-                        <input type="text" v-model="detail.yishengGuahao" name="yishengGuahao" id="yishengGuahao" lay-verify="required" placeholder="挂号须知" autocomplete="off" class="layui-input">
-                    </div>
-                </div>
-                <!-- 邮箱表单元素项 -->
-                <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <!-- 表单标签，显示邮箱 -->
-                    <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
-                        邮箱
-                    </label>
-                    <!-- 输入框所在块 -->
-                    <div class="layui-input-block input">
-                        <!-- 邮箱输入框，使用v-model绑定数据，设置验证规则和占位符 -->
-                        <input type="text" v-model="detail.yishengEmail" name="yishengEmail" id="yishengEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
-                    </div>
-                </div>
-                <!-- 挂号价格表单元素项 -->
-                <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
-                    <!-- 表单标签，显示挂号价格 -->
-                    <label  :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">挂号价格</label>
-                    <!-- 输入框所在块 -->
-                    <div class="layui-input-inline input">
-                        <!-- 挂号价格输入框，使用v-model绑定数据，设置占位符，禁用输入 -->
-                        <input type="number
\ No newline at end of file
+                <div class="layui-form-item main_borderColor"  :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"#fff","borderRadius":"1px","borderWidth
\ No newline at end of file
-- 
2.34.1


From 8f366325c1da4ef2d5fc9c55fb39e75376ac756a Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Tue, 29 Apr 2025 14:26:03 +0800
Subject: [PATCH 4/6] 16

---
 .../front/front/pages/yisheng/detail.html     | 176 +++++++++++++-----
 1 file changed, 130 insertions(+), 46 deletions(-)

diff --git a/target/classes/front/front/pages/yisheng/detail.html b/target/classes/front/front/pages/yisheng/detail.html
index c50b894..14ee10b 100644
--- a/target/classes/front/front/pages/yisheng/detail.html
+++ b/target/classes/front/front/pages/yisheng/detail.html
@@ -1,29 +1,35 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <!-- 设置字符编码为 UTF-8，确保页面能正确显示各种字符 -->
     <meta charset="utf-8">
+    <!-- 设置页面在移动设备上的显示效果，宽度为设备宽度，初始缩放比例为 1，最大缩放比例为 1 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 设置页面标题为医生详情页 -->
     <title>医生详情页</title>
+    <!-- 引入 layui 的 CSS 样式文件 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
-    <!-- 样式 -->
+    <!-- 引入自定义样式文件 -->
     <link rel="stylesheet" href="../../css/style.css"/>
-    <!-- 主题（主要颜色设置） -->
+    <!-- 引入主题样式文件，用于设置主要颜色 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
-    <!-- 通用的css -->
+    <!-- 引入通用的 CSS 文件 -->
     <link rel="stylesheet" href="../../css/common.css"/>
+    <!-- 引入 Bootstrap 的 CSS 样式文件 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
 </head>
 <style>
-    /*padding-bottom 属性设置元素的下内边距（底部空白）*/
+    /* 定义一个类，设置元素的底部内边距为 50px */
     .pb-120 {
         padding-bottom: 50px;
     }
 
-    /*padding-top 属性设置元素的上内边距（头部空白）*/
+    /* 定义一个类，设置元素的顶部内边距为 20px */
     .pt-120 {
         padding-top: 20px;
     }
 
+    /* 手风琴样式相关设置，设置加号图标旋转效果 */
     .cmn-accordion .card-header .acc-btn .plus-icon::after {
         position: absolute;
         content: '';
@@ -40,20 +46,24 @@
         transition: all 0.3s;
     }
 
+    /* 设置手风琴卡片内容区域的内边距为 0 */
     .cmn-accordion .card-body {
         padding: 0;
     }
 
+    /* 设置块引用元素的左右内边距为 50px */
     blockquote {
         padding: 0 50px;
     }
 
+    /* 当屏幕宽度小于等于 767px 时，设置块引用元素的左右内边距为 30px */
     @media (max-width: 767px) {
         blockquote {
             padding: 0 30px;
         }
     }
 
+    /* 设置块引用内段落的字体样式和对齐方式 */
     blockquote p {
         font-size: 24px;
         font-style: italic;
@@ -61,13 +71,14 @@
         font-family: "Playfair Display", serif;
     }
 
+    /* 当屏幕宽度小于等于 767px 时，设置块引用内段落的字体大小为 20px */
     @media (max-width: 767px) {
         blockquote p {
             font-size: 20px;
         }
     }
 
-    /* 评论样式 和文本框样式 */
+    /* 评论样式和文本框样式设置 */
     body {
         font-family: "Raleway", sans-serif;
         font-size: 16px;
@@ -78,21 +89,25 @@
         overflow-x: hidden;
     }
 
+    /* 设置图片的最大宽度为 100%，高度自适应 */
     img {
         max-width: 100%;
         height: auto;
     }
 
+    /* 设置无序列表和有序列表的内边距和外边距为 0，去除列表样式 */
     ul, ol {
         padding: 0;
         margin: 0;
         list-style: none;
     }
 
+    /* 设置按钮无边框 */
     button {
         border: none;
     }
 
+    /* 设置输入框和文本框的样式 */
     input, textarea {
         padding: 10px 20px;
         border: 1px solid #e5e5e5;
@@ -100,13 +115,13 @@
         background-color: #ffffff;
     }
 
+    /* 设置文本框的最小高度为 150px，禁止用户调整大小 */
     textarea {
         min-height: 150px;
         resize: none;
     }
 
-    /* 标题下面的蓝色字体 删除就会换行 */
-
+    /* 标题下面的蓝色字体样式，设置为弹性布局，允许换行 */
     .post-meta {
         display: -ms-flexbox;
         display: flex;
@@ -116,34 +131,41 @@
         margin-top: 5px;
     }
 
+    /* 设置文章元数据列表项的外边距 */
     .post-meta li {
         margin: 3px 8px;
     }
 
+    /* 设置文章元数据列表项内链接的字体大小 */
     .post-meta li a {
         font-size: 12px;
     }
 
+    /* 设置博客详情经典布局内容区域的顶部外边距 */
     .blog-single-classic .content {
         margin-top: 25px;
     }
 
-    /* 博客详情部分 css start */
+    /* 博客详情部分 CSS 开始 */
+    /* 设置博客详情头部的顶部外边距、底部内边距和底部边框 */
     .blog-details-wrapper .blog-details-header {
         margin-top: 25px;
         padding-bottom: 15px;
         border-bottom: 1px solid #e5e5e5;
     }
 
+    /* 设置评论区域的顶部外边距 */
     .comments-area {
         margin-top: 50px;
     }
 
+    /* 设置评论区域标题的样式 */
     .comments-area .title {
         text-transform: capitalize;
         margin-bottom: 30px;
     }
 
+    /* 设置评论列表中单个评论的样式，弹性布局，允许换行 */
     .comments-list .single-comment {
         display: flex;
         flex-wrap: wrap;
@@ -151,15 +173,18 @@
         border-bottom: 1px solid #e5e5e5;
     }
 
+    /* 设置评论列表中第一个评论的顶部内边距为 0 */
     .comments-list .single-comment:first-child {
         padding-top: 0;
     }
 
+    /* 设置评论列表中最后一个评论的底部内边距为 0，去除底部边框 */
     .comments-list .single-comment:last-child {
         padding-bottom: 0;
         border-bottom: none;
     }
 
+    /* 设置评论中用户头像区域的样式 */
     .comments-list .single-comment .thumb {
         flex: 0 0 80px;
         -ms-flex: 0 0 80px;
@@ -173,6 +198,7 @@
         overflow: hidden;
     }
 
+    /* 设置评论内容区域的样式 */
     .comments-list .single-comment .content {
         flex: 0 0 calc(100% - 80px);
         -ms-flex: 0 0 calc(100% - 80px);
@@ -180,34 +206,42 @@
         padding-left: 20px;
     }
 
+    /* 设置评论日期的字体大小 */
     .comments-list .single-comment .content .date {
         font-size: 14px;
     }
 
+    /* 设置评论内容段落的顶部外边距 */
     .comments-list .single-comment .content p {
         margin-top: 5px;
     }
 
+    /* 设置评论操作区域的顶部外边距 */
     .comments-list .single-comment .content .comment-action {
         margin-top: 3px;
     }
 
+    /* 设置评论表单区域的顶部外边距 */
     .comment-form-area {
         margin-top: 50px;
     }
 
+    /* 设置评论表单标题的底部外边距 */
     .comment-form-area .title {
         margin-bottom: 30px;
     }
 
+    /* 设置评论表单中表单组的底部外边距 */
     .comment-form-area .comment-form .form-group {
         margin-bottom: 30px;
     }
 
+    /* 设置侧边栏中相邻小部件之间的顶部外边距 */
     .sidebar .widget + .widget {
         margin-top: 50px;
     }
 
+    /* 设置侧边栏小部件标题的样式 */
     .sidebar .widget-title {
         font-size: 24px;
         text-transform: capitalize;
@@ -216,6 +250,7 @@
         padding-left: 15px;
     }
 
+    /* 设置侧边栏小部件标题前的竖线样式 */
     .sidebar .widget-title::before {
         position: absolute;
         content: '';
@@ -226,16 +261,18 @@
         background-color: var(--publicMainColor);
     }
 
+    /* 设置侧边栏分类列表项的样式 */
     .sidebar .category-list li {
         padding: 10px 0;
         border-bottom: 1px solid #e5e5e5;
     }
 
-    /*位置为 Latest Blog Post 意思 最新博客 样式*/
+    /* 最新博客文章样式，设置第一个小文章的顶部内边距为 0 */
     .small-post-list .small-post-single:first-child {
         padding-top: 0;
     }
 
+    /* 设置小文章列表项的样式，弹性布局，允许换行 */
     .small-post-list .small-post-single {
         display: -ms-flexbox;
         display: flex;
@@ -245,13 +282,15 @@
         border-bottom: 1px solid #e5e5e5;
     }
 
+    /* 设置小文章内容区域的宽度和左内边距 */
     .small-post-list .small-post-single .content {
         width: calc(100% - 65px);
         padding-left: 15px;
     }
 
-    /* 侧边栏 css end */
+    /* 侧边栏 CSS 结束 */
 
+    /* 设置通用按钮边框样式 */
     .cmn-btn-border {
         padding: 13px 35px;
         font-size: 18px;
@@ -270,16 +309,19 @@
         -o-border-radius: 3px;
     }
 
+    /* 设置通用按钮边框鼠标悬停时的样式 */
     .cmn-btn-border:hover {
         color: #ffffff;
         box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
     }
 
+    /* 设置通用按钮边框鼠标悬停时伪元素的样式 */
     .cmn-btn-border:hover::before {
         top: 0;
         left: 0;
     }
 
+    /* 设置通用按钮边框伪元素的样式 */
     .cmn-btn-border::before {
         position: absolute;
         content: '';
@@ -295,6 +337,7 @@
         transition: all 0.3s;
     }
 
+    /* 设置通用按钮边框另一个伪元素的样式 */
     .cmn-btn-border::after {
         position: absolute;
         content: '';
@@ -307,6 +350,7 @@
         border: 2px solid #ffffff;
     }
 
+    /* 设置博客详情页底部的样式 */
     .blog-details-wrapper .blog-details-footer {
         padding: 20px 20px;
         border: 1px solid #f2f2f2;
@@ -316,19 +360,24 @@
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         justify-content: space-between;
-    }</style>
+    }
+</style>
 <body>
-
+<!-- Vue 实例挂载的根元素 -->
 <div id="app">
+    <!-- 博客详情部分，设置上下内边距 -->
     <section class="blog-details-section pt-120 pb-120">
+        <!-- 面包屑导航 -->
         <div class="sub_backgroundColor data-detail-breadcrumb" style="width: 1110px;"
              :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"20px auto","borderColor":"rgba(135, 206, 250, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","height":"54px"}'>
                 <span class="layui-breadcrumb">
+                    <!-- 首页链接 -->
                     <a class="first"
                        :style='{"padding":"8px 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 5px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'
                        href="../home/home.html">
                         首页
                     </a>
+                    <!-- 当前页面标题 -->
                     <a>
                         <cite :style='{"padding":"8px 15px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 15px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(129, 84, 118, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
                             {{title}}
@@ -336,37 +385,53 @@
                     </a>
                 </span>
         </div>
+        <!-- 容器 -->
         <div class="container">
+            <!-- 行布局 -->
             <div class="row">
+                <!-- 左侧内容区域，占 8 列 -->
                 <div class="col-lg-8">
+                    <!-- 博客详情包装器 -->
                     <div class="blog-details-wrapper">
+                        <!-- 医生图片 -->
                         <div class="thumb">
                             <img :src="detail.yishengPhoto" alt="image">
                         </div>
+                        <!-- 博客详情头部 -->
                         <div class="blog-details-header">
+                            <!-- 医生姓名 -->
                             <h3 class="blog-details-title">{{title}}</h3>
+                            <!-- 医生信息列表 -->
                             <ul class="post-meta">
+                                <!-- 医生工号 -->
                                 <li v-if="detail.yishengUuidNumber">医生工号：
                                     {{detail.yishengUuidNumber}}
                                 </li>
+                                <!-- 科室 -->
                                 <li v-if="detail.yishengTypes">科室：
                                     {{detail.yishengValue}}
                                 </li>
+                                <!-- 职位 -->
                                 <li v-if="detail.zhiweiTypes">职位：
                                     {{detail.zhiweiValue}}
                                 </li>
+                                <!-- 职称 -->
                                 <li v-if="detail.yishengZhichneg">职称：
                                     {{detail.yishengZhichneg}}
                                 </li>
+                                <!-- 联系方式 -->
                                 <li v-if="detail.yishengPhone">联系方式：
                                     {{detail.yishengPhone}}
                                 </li>
+                                <!-- 挂号须知 -->
                                 <li v-if="detail.yishengGuahao">挂号须知：
                                     {{detail.yishengGuahao}}
                                 </li>
+                                <!-- 邮箱 -->
                                 <li v-if="detail.yishengEmail">邮箱：
                                     {{detail.yishengEmail}}
                                 </li>
+                                <!-- 挂号价格 -->
                                 <li v-if="detail.yishengNewMoney">挂号价格：
                                     {{detail.yishengNewMoney}}
                                 </li>
@@ -377,32 +442,42 @@
                                 </li>
                             </ul>
 
-                             <div style="padding: 20px;border: 0px solid #f2f2f2;margin-top: 20px;display: flex">
-                                     <div class="num-picker">
-                                         <button @click="addaaaOrder()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit">
-                                             预约挂号
-                                         </button>
-                                     </div>
-                                 </div>
+                            <!-- 预约挂号按钮 -->
+                            <div style="padding: 20px;border: 0px solid #f2f2f2;margin-top: 20px;display: flex">
+                                <div class="num-picker">
+                                    <button @click="addaaaOrder()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit">
+                                        预约挂号
+                                    </button>
+                                </div>
+                            </div>
                         </div>
+                        <!-- 医生详细介绍，使用 v-html 指令渲染 HTML 内容 -->
                         <div class="blog-details-content" v-html="myFilters(detail.yishengContent)">
                         </div>
                     </div>
-
                 </div>
+                <!-- 右侧侧边栏区域，当 yishengRecommendList 存在时显示 -->
                 <div class="col-lg-4" v-if="yishengRecommendList">
                     <div class="sidebar">
+                        <!-- 系统推荐小部件 -->
                         <div class="widget">
+                            <!-- 小部件标题 -->
                             <h3 class="widget-title">系统推荐</h3>
+                            <!-- 推荐医生列表 -->
                             <ul class="small-post-list">
+                                <!-- 循环渲染推荐医生列表项 -->
                                 <li class="small-post-single" v-for="(item,index) in yishengRecommendList"
                                     v-bind:key="index"
                                     @click="jump('../yisheng/detail.html?id='+item.id)">
+                                    <!-- 医生图片 -->
                                     <div class="thumb"><img width="65px" :src="item.yishengPhoto"
                                                             alt="image">
                                     </div>
+                                    <!-- 医生信息 -->
                                     <div class="content">
+                                        <!-- 医生姓名 -->
                                         <a class="main_color" class="date">{{item.yishengName}}</a>
+                                        <!-- 挂号价格 -->
                                         <h6 v-if="item.yishengNewMoney" class="post-title"><a
                                                 style="color: red">{{item.yishengNewMoney}}</a>RMB</h6>
                                     </div>
@@ -416,21 +491,23 @@
     </section>
 </div>
 
-
+<!-- 引入 layui 脚本文件 -->
 <script src="../../layui/layui.js"></script>
+<!-- 引入 Vue 脚本文件 -->
 <script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
+<!-- 引入 Element 组件库脚本文件 -->
 <script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
+<!-- 引入 Element 样式文件 -->
 <link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-<!-- 组件配置信息 -->
+<!-- 引入组件配置信息脚本文件 -->
 <script src="../../js/config.js"></script>
-<!-- 扩展插件配置信息 -->
+<!-- 引入扩展插件配置信息脚本文件 -->
 <script src="../../modules/config.js"></script>
-<!-- 工具方法 -->
+<!-- 引入工具方法脚本文件 -->
 <script src="../../js/utils.js"></script>
 
 <script>
+    // 定义 Vue 原型方法，用于替换换行符为 HTML 换行标签
     Vue.prototype.myFilters = function (msg) {
         if (msg != null) {
             return msg.replace(/\n/g, "<br>");
@@ -438,39 +515,45 @@
             return "";
         }
     };
+
+    // 创建 Vue 实例
     var vue = new Vue({
         el: '#app',
         data: {
-            // 轮播图
+            // 轮播图数据
             swiperList: [],
-            // 数据详情
+            // 医生详情数据
             detail: {
                 id: 0
             },
-            // 商品标题
+            // 页面标题
             title: '',
-            totalScore: 0,//评分
-
-            storeupFlag: 0,//收藏 [0为收藏 1已收藏]
-            //系统推荐
+            // 评分
+            totalScore: 0,
+            // 收藏标志，0 为未收藏，1 为已收藏
+            storeupFlag: 0,
+            // 系统推荐医生列表
             yishengRecommendList: [],
-            // 当前详情页表
+            // 当前详情页表名
             detailTable: 'yisheng',
         },
         methods: {
+            // 预约挂号方法，跳转到预约页面
             addaaaOrder(){
                 this.jump("../guahao/add.html?yishengId="+this.detail.id)
             },
+            // 跳转页面方法
             jump(url) {
                 jump(url)
             },
+            // 权限验证方法
             isAuth(tablename, button) {
                 return isFrontAuth(tablename, button)
             },
-
         }
     });
 
+    // 加载 layui 模块
     layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
         var layer = layui.layer;
         var util = layui.util;
@@ -481,19 +564,22 @@
         var jquery = layui.jquery;
         var laypage = layui.laypage;
 
+        // 每页显示数量
         var limit = 10;
 
-        // 数据ID
+        // 获取 URL 中的医生 ID 参数
         var id = http.getParam('id');
         vue.detail.id = id;
-        // 数据信息
+
+        // 请求医生详情信息
         http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function (res) {
-            // 详情信息
+            // 更新医生详情数据
             vue.detail = res.data;
+            // 更新页面标题
             vue.title = vue.detail.yishengName;
-            // 轮播图片
+            // 处理轮播图数据
             vue.swiperList = vue.detail.yishengPhoto ? vue.detail.yishengPhoto.split(",") : [];
-            // 轮播图
+            // 渲染轮播图
             vue.$nextTick(() => {
                 carousel.render({
                     elem: '#swiper',
@@ -506,21 +592,19 @@
                     indicator: 'inside'
                 });
             });
-
         });
 
-
-        // 系统推荐
+        // 请求系统推荐医生列表
         http.request(`yisheng/list`, 'get', {
             page: 1,
             limit: 5,
             yishengTypes: vue.detail.yishengTypes,
             zhiweiTypes: vue.detail.zhiweiTypes,
         }, function (res) {
+            // 更新系统推荐医生列表数据
             vue.yishengRecommendList = res.data.list;
         });
-
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
-- 
2.34.1


From cd78156d7700a1d6562228f64a9cc6f5522693ce Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Tue, 29 Apr 2025 14:31:20 +0800
Subject: [PATCH 5/6] 17

---
 .../front/front/pages/yisheng/list.html       | 344 ++++--------------
 1 file changed, 65 insertions(+), 279 deletions(-)

diff --git a/target/classes/front/front/pages/yisheng/list.html b/target/classes/front/front/pages/yisheng/list.html
index ecfe594..18037e1 100644
--- a/target/classes/front/front/pages/yisheng/list.html
+++ b/target/classes/front/front/pages/yisheng/list.html
@@ -1,23 +1,38 @@
 <!DOCTYPE html>
 <html>
 <head lang="en">
+    <!-- 设置页面的字符编码为 UTF-8，确保能正确显示各种字符 -->
     <meta charset="utf-8">
+    <!-- 设置页面标题为“医生” -->
     <title>医生</title>
+    <!-- 设置页面的关键词，用于搜索引擎优化，这里为空 -->
     <meta name="keywords" content=""/>
+    <!-- 设置页面的描述信息，用于搜索引擎展示，这里为空 -->
     <meta name="description" content=""/>
+    <!-- 指定页面使用 Webkit 渲染引擎 -->
     <meta name="renderer" content="webkit">
+    <!-- 设置页面在 IE 浏览器中的兼容性模式为 Edge 模式 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <!-- 设置页面在移动设备上的显示方式，宽度为设备宽度，初始缩放比例为 1，最大缩放比例为 1，禁止用户手动缩放 -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <!-- 引入 layui 的 CSS 样式文件 -->
     <link rel="stylesheet" href="../../layui/css/layui.css">
+    <!-- 引入自定义的公共样式文件 -->
     <link rel="stylesheet" href="../../xznstatic/css/common.css"/>
+    <!-- 引入自定义的样式文件 -->
     <link rel="stylesheet" href="../../xznstatic/css/style.css"/>
+    <!-- 引入 jQuery 库文件，版本为 1.11.3 -->
     <script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
+    <!-- 引入 jQuery 的 SuperSlide 插件文件，版本为 2.1.1 -->
     <script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
+    <!-- 引入 Bootstrap 的 CSS 样式文件 -->
     <link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
-
+    <!-- 引入自定义的主题样式文件 -->
     <link rel="stylesheet" href="../../css/theme.css"/>
 </head>
 <style>
+    /* 在 HTML 元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性
+       该伪元素会覆盖整个页面，用于设置背景图片、颜色等，且固定在页面上，不随滚动条滚动 */
     html::after {
         position: fixed;
         top: 0;
@@ -31,11 +46,14 @@
         background-position: center;
     }
 
-    /*轮播图相关 start*/
+    /*轮播图相关样式开始*/
+    /* 轮播图容器样式，设置溢出内容隐藏，防止轮播图超出容器范围 */
     #swiper {
         overflow: hidden;
     }
 
+    /* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影
+       轮播图指示器通常是小圆点，用于指示当前轮播到的图片位置 */
     #swiper .layui-carousel-ind li {
         width: 20px;
         height: 10px;
@@ -47,6 +65,8 @@
         box-shadow: 0 0 6px rgba(255, 0, 0, .8);
     }
 
+    /* 轮播图指示器当前激活项的样式，设置宽度和其他样式
+       当轮播到某张图片时，对应的指示器小圆点会变成该样式 */
     #swiper .layui-carousel-ind li.layui-this {
         width: 30px;
         height: 10px;
@@ -55,9 +75,10 @@
         border-color: rgba(0, 0, 0, .3);
         border-radius: 6px;
     }
-    /*轮播图相关 end*/
+    /*轮播图相关样式结束*/
 
-    /*列表*/
+    /* 推荐列表相关样式 */
+    /* 推荐区域样式，设置内边距、布局方式和背景相关属性 */
     .recommend {
         padding: 10px 0;
         display: flex;
@@ -67,11 +88,13 @@
         background-size: cover;
     }
 
+    /* 推荐区域内盒子样式，设置宽度和居中显示 */
     .recommend .box {
         width: 1002px;
         margin: 0 auto;
     }
 
+    /* 推荐区域内盒子的标题样式，设置内边距、布局方式和盒子模型属性 */
     .recommend .box .title {
         padding: 10px 5px;
         display: flex;
@@ -80,12 +103,14 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子标题的 span 样式，设置内边距、字体大小和行高 */
     .recommend .box .title span {
         padding: 0 10px;
         font-size: 16px;
         line-height: 1.4;
     }
 
+    /* 推荐区域内盒子的筛选区域样式，设置内边距、布局方式、宽度和换行属性 */
     .recommend .box .filter {
         padding: 0 10px;
         display: flex;
@@ -95,23 +120,27 @@
         flex-wrap: wrap;
     }
 
+    /* 推荐区域内盒子筛选区域的列表项样式，设置布局方式和对齐方式 */
     .recommend .box .filter .item-list {
         display: flex;
         align-items: center;
     }
 
+    /* 推荐区域内盒子筛选区域列表项的标签样式，设置字体大小、颜色和盒子模型属性 */
     .recommend .box .filter .item-list .lable {
         font-size: 14px;
         color: #333;
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子筛选区域列表项的输入框样式，设置内边距、盒子模型属性和去除默认轮廓 */
     .recommend .box .filter .item-list input {
         padding: 0 10px;
         box-sizing: border-box;
         outline: none;
     }
 
+    /* 推荐区域内盒子筛选区域的按钮样式，设置布局方式、内边距、盒子模型属性和去除默认轮廓 */
     .recommend .box .filter button {
         display: flex;
         padding: 0 10px;
@@ -121,21 +150,25 @@
         outline: none;
     }
 
+    /* 推荐区域内盒子筛选区域按钮内的图标样式，设置右边距 */
     .recommend .box .filter button i {
         margin-right: 4px;
     }
 
+    /* 推荐区域内盒子的列表样式，设置布局方式和换行属性 */
     .recommend .box .list {
         display: flex;
         flex-wrap: wrap;
     }
 
+    /* 推荐区域内盒子列表的列表项样式，设置弹性属性、内边距和盒子模型属性 */
     .recommend .box .list .list-item {
         flex: 0 0 25%;
         padding: 0 5px;
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子列表项的主体样式，设置光标样式、边框和内边距 */
     .recommend .box .list .list-item .list-item-body {
         cursor: pointer;
         border: 1px solid rgba(0, 0, 0, 3);
@@ -143,6 +176,7 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子列表项主体内的图片样式，设置宽度、高度和居中显示 */
     .recommend .box .list .list-item-body img {
         width: 100%;
         height: 100px;
@@ -150,11 +184,13 @@
         margin: 0 auto;
     }
 
+    /* 推荐区域内盒子列表项主体的信息区域样式，设置布局方式和换行属性 */
     .recommend .box .list .list-item-body .info {
         display: flex;
         flex-wrap: wrap;
     }
 
+    /* 推荐区域内盒子列表项主体信息区域的价格样式，设置上内边距、颜色、字体大小和文本对齐方式 */
     .recommend .box .list .list-item-body .info .price {
         padding-top: 5px;
         color: red;
@@ -163,6 +199,7 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小和文本对齐方式 */
     .recommend .box .list .list-item-body .info .name {
         padding-top: 5px;
         color: red;
@@ -171,14 +208,17 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
     .recommend .box .list .list-item3 {
         flex: 0 0 33.33%;
     }
 
+    /* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
     .recommend .box .list .list-item5 {
         flex: 0 0 25%;
     }
 
+    /* 推荐区域内盒子的新闻区域样式，设置布局方式、内边距和宽度 */
     .recommend .box .news {
         display: flex;
         flex-wrap: wrap;
@@ -186,12 +226,14 @@
         width: 100%;
     }
 
+    /* 推荐区域内盒子新闻区域的列表项样式，设置弹性属性、内边距和盒子模型属性 */
     .recommend .box .news .list-item {
         flex: 0 0 50%;
         padding: 0 10px;
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子新闻区域列表项的主体样式，设置光标样式、边框、内边距和布局方式 */
     .recommend .box .news .list-item .list-item-body {
         cursor: pointer;
         border: 1px solid rgba(0, 0, 0, 3);
@@ -200,6 +242,7 @@
         display: flex;
     }
 
+    /* 推荐区域内盒子新闻区域列表项主体内的图片样式，设置宽度、高度和居中显示 */
     .recommend .box .news .list-item .list-item-body img {
         width: 120px;
         height: 100%;
@@ -207,6 +250,7 @@
         margin: 0 auto;
     }
 
+    /* 推荐区域内盒子新闻区域列表项主体的信息区域样式，设置弹性属性、布局方式、方向和内边距 */
     .recommend .box .news .list-item .list-item-body .item-info {
         flex: 1;
         display: flex;
@@ -216,6 +260,7 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子新闻区域列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
     .recommend .box .news .list-item .list-item-body .item-info .name {
         padding-top: 5px;
         color: red;
@@ -228,6 +273,7 @@
         -webkit-box-orient: vertical;
     }
 
+    /* 推荐区域内盒子新闻区域列表项主体信息区域的时间样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
     .recommend .box .news .list-item .list-item-body .item-info .time {
         padding-top: 5px;
         color: red;
@@ -240,321 +286,61 @@
         box-sizing: border-box;
     }
 
+    /* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
     .recommend .box .news .list-item1 {
         flex: 0 0 100%;
     }
 
+    /* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
     .recommend .box .news .list-item3 {
         flex: 0 0 33.33%;
     }
 
+    /* 特定动画样式，当鼠标悬停在动画盒子上时，设置变换效果和过渡时间 */
     .index-pv1 .animation-box:hover {
         transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
         transition: all 0.3s;
     }
 
-
+    /* layui 分页组件的计数样式，设置内边距 */
     .layui-laypage .layui-laypage-count {
         padding: 0 10px;
     }
 
+    /* layui 分页组件的跳转输入框样式，设置左内边距 */
     .layui-laypage .layui-laypage-skip {
         padding-left: 10px;
     }
 </style>
 <body>
+<!-- Vue 实例挂载的根元素 -->
 <div id="app">
+    <!-- 页面的横幅区域 -->
     <div class="banner">
+        <!-- layui 的轮播图组件容器，设置相关样式 -->
         <div class="layui-carousel" id="swiper"
              :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
+            <!-- 轮播图的内容区域，使用 Vue 的指令循环渲染轮播图项 -->
             <div carousel-item>
                 <div v-for="(item,index) in swiperList" :key="index">
+                    <!-- 轮播图图片，设置宽度、高度和图片填充方式 -->
                     <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
                 </div>
             </div>
         </div>
     </div>
 
+    <!-- 推荐区域，设置相关样式 -->
     <div class="recommend index-pv1"
          :style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
+        <!-- 推荐区域内的盒子，设置宽度 -->
         <div class="box" style='width:80%'>
+            <!-- 科室筛选按钮区域，使用 Vue 的指令动态设置样式 -->
             <div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
                 <div style="display: inline-block;text-align: center;cursor: pointer;"
                      class="thisTableType-search main_backgroundColor" index=""
                      :style='searchForm.yishengTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
                     科室全部
                 </div>
-                <div v-for="(item,index) in yishengTypesList" :key="item.codeIndex"
-                     class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
-                     :style='searchForm.yishengTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
-                     style="display: inline-block;text-align: center;cursor: pointer;">
-                    {{item.indexName}}
-                </div>
-            </div>
-
-            <div class="title sub_backgroundColor sub_borderColor"
-                 :style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
-                    <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
-                        医生
-                    </span>
-                <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
-                        您现在的位置：医生
-                    </span>
-            </div>
-
-            <form class="layui-form filter main_backgroundColor"
-                  :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
-
-                                         
-                <div class="item-list">
-                    <div class="lable"
-                         :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
-                        医生名称
-                    </div>
-                    <input type="text" v-model="searchForm.yishengName"
-                           :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
-                           placeholder="医生名称" autocomplete="off"
-                           class="layui-input">
-                </div>
-         
-         
-                 <div class="item-list">
-                     <div class="lable"
-                          :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
-                         职位</div>
-                     <select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
-                             style="display:block"  v-model="searchForm.zhiweiTypes">
-                         <option value="">请选择</option>
-                         <option v-for="(item,index) in zhiweiTypesList" v-bind:key="index"
-                                 :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}
-                         </option>
-                     </select>
-                 </div>
-                                                                
-                <button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
-                    <i v-if="true" class="layui-icon layui-icon-search"></i>搜索
-                </button>
-                <button v-if="isAuth('yisheng','新增')" @click="jump('../yisheng/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
-                    <i v-if="true" class="layui-icon">&#xe654;</i>添加
-                </button>
-            </form>
-
-                    <div style="margin-top: 2em;">
-                        <div class="row">
-                            <div v-for="(item,index) in dataList" v-bind:key="index"  class="col-md-3 list-grid">
-                                <div @click="jumpCheck('../yisheng/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)" class="list-img">
-                                    <img :src="item.yishengPhoto?item.yishengPhoto.split(',')[0]:''" class="img-responsive" style="height: 350px;width:100%;" />
-                                    <div class="textbox"></div>
-                                    <h4 >名称:{{item.yishengName}}</h4>
-                                    <p v-if="item.yishengNewMoney != null" style="color: red;" >￥{{item.yishengNewMoney}}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-        </div>
-    </div>
-    <div class="pager" id="pager" :style="{textAlign:'center'}"></div>
-</div>
-
-<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
-<script src="../../layui/layui.js"></script>
-<script src="../../js/vue.js"></script>
-<!-- 引入element组件库 -->
-<script src="../../xznstatic/js/element.min.js"></script>
-<!-- 引入element样式 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
-<script src="../../js/config.js"></script>
-<script src="../../modules/config.js"></script>
-<script src="../../js/utils.js"></script>
-
-<script type="text/javascript">
-    var vue = new Vue({
-        el: '#app',
-        data: {
-            swiperList: [],
-            yishengTypesList: [],
-            zhiweiTypesList: [],
-
-            //查询条件
-            searchForm: {
-                page: 1
-                ,limit: 8
-                ,yishengName: ""
-                ,yishengTypes: ""
-                ,zhiweiTypes: ""
-            },
-
-
-            dataList: [],
-        },
-        filters: {
-            subString: function(val) {
-                if (val) {
-                    val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
-                    if (val.length > 60) {
-                        val = val.substring(0, 60);
-                        val+='...';
-                    }
-                    return val;
-                }
-                return '';
-            }
-        },
-        computed: {
-        },
-        methods: {
-            isAuth(tablename, button) {
-                return isFrontAuth(tablename, button);
-            }
-            ,jump(url) {
-                jump(url);
-            }
-            ,jumpCheck(url,check1,check2) {
-                if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
-                    layui.layer.msg("已经被删除", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
-                }
-                if(check2 == "2"  || check2 == 2){//是否下架[1:上架 2:下架]
-                    layui.layer.msg("已经下架", {
-                        time: 2000,
-                        icon: 2
-                    });
-                    return false;
-                }
-                this.jump(url);
-            }
-        }
-    });
-
-    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
-        var layer = layui.layer;
-        var element = layui.element;
-        var carousel = layui.carousel;
-        var laypage = layui.laypage;
-        var http = layui.http;
-        var laydate = layui.laydate;
-        var tinymce = layui.tinymce;
-        window.jQuery = window.$ = jquery = layui.jquery;
-
-        // var id = http.getParam('id');
-
-        // 获取轮播图 数据
-        http.request('config/list', 'get', {
-            page: 1,
-            limit: 5
-        }, function (res) {
-            if (res.data.list.length > 0) {
-                let swiperList = [];
-                res.data.list.forEach(element => {
-                    if(element.value != null){
-                        swiperList.push({
-                            img: element.value
-                        });
-                    }
-                });
-                vue.swiperList = swiperList;
-
-                vue.$nextTick(() => {
-                    carousel.render({
-                        elem: '#swiper',
-                        width: '100%',
-                        height: '450px',
-                        arrow: 'hover',
-                        anim: 'default',
-                        autoplay: 'true',
-                        interval: '3000',
-                        indicator: 'inside'
-                    });
-                });
-            }
-        });
-
-        //科室的动态搜素
-        $(document).on("click", ".thisTableType-search", function (e) {
-            vue.searchForm.yishengTypes = $(this).attr('index');
-            pageList();
-        });
-
-
-            //当前表的 科室 字段 字典表查询
-            yishengTypesSelect();
-            //当前表的 职位 字段 字典表查询
-            zhiweiTypesSelect();
-           //当前表的 科室 字段 字典表查询方法
-           function yishengTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.yishengTypesList = res.data.list;
-                   }
-               });
-           }
-           //当前表的 职位 字段 字典表查询方法
-           function zhiweiTypesSelect() {
-               http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", 'get', {}, function (res) {
-                   if(res.code == 0){
-                       vue.zhiweiTypesList = res.data.list;
-                   }
-               });
-           }
-
-
-            // 分页列表
-            pageList();
-
-            // 搜索按钮
-            jquery('#btn-search').click(function (e) {
-                pageList();
-            });
-
-            function pageList() {
-                // 获取列表数据
-                http.request('yisheng/list', 'get', vue.searchForm, function (res) {
-                    vue.dataList = res.data.list;
-                    // 分页
-                    laypage.render({
-                        elem: 'pager',
-                        count: res.data.total,
-                        limit: vue.searchForm.limit,
-                        groups: 3,
-                        layout: ["prev", "page", "next"],
-                        jump: function (obj, first) {
-                            vue.searchForm.page = obj.curr;//翻页
-                            //首次不执行
-                            if (!first) {
-                                http.request('yisheng/list', 'get', vue.searchForm, function (res1) {
-                                    vue.dataList = res1.data.list;
-                                })
-                            }
-                        }
-                    });
-                });
-            }
-    });
-
-    window.xznSlide = function () {
-        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
-        jQuery("#ifocus").slide({
-            titCell: "#ifocus_btn li",
-            mainCell: "#ifocus_piclist ul",
-            effect: "leftLoop",
-            delayTime: 200,
-            autoPlay: true,
-            triggerTime: 0
-        });
-        jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
-        jQuery(".product_list").slide({
-            mainCell: ".bd ul",
-            autoPage: true,
-            effect: "leftLoop",
-            autoPlay: true,
-            vis: 5,
-            trigger: "click",
-            interTime: 4000
-        });
-    };
-</script>
-</body>
-</html>
+                <!-- 循环渲染科室筛选按钮，使用 Vue 的指令动态设置样式和属性 -->
+                <
\ No newline at end of file
-- 
2.34.1


From 1e2f675d0c8b9d3b6366c339a5709074c0d68ac0 Mon Sep 17 00:00:00 2001
From: cp <2474209645@qq.com>
Date: Tue, 29 Apr 2025 14:34:06 +0800
Subject: [PATCH 6/6] 18

---
 .../front/front/pages/yisheng/register.html   | 190 ++++++++++++------
 1 file changed, 123 insertions(+), 67 deletions(-)

diff --git a/target/classes/front/front/pages/yisheng/register.html b/target/classes/front/front/pages/yisheng/register.html
index 540ddab..ec14c0c 100644
--- a/target/classes/front/front/pages/yisheng/register.html
+++ b/target/classes/front/front/pages/yisheng/register.html
@@ -2,172 +2,224 @@
 <html>
 <head>
     <!-- 元数据定义 -->
-    <meta charset="utf-8"> <!-- 字符编码设置为UTF-8 -->
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- 响应式视口设置 -->
-    <title>注册</title> <!-- 页面标题 -->
+    <!-- 设置字符编码为 UTF-8，确保页面能正确显示各种语言字符 -->
+    <meta charset="utf-8">
+    <!-- 响应式视口设置，让页面在不同设备上能自适应显示 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <!-- 页面标题，显示在浏览器标签栏 -->
+    <title>注册</title>
 
     <!-- CSS样式表引入 -->
-    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css"> <!-- 引入LayUI框架样式 -->
-    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/> <!-- 公共样式表 -->
-    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/> <!-- 登录相关样式 -->
-    <link rel="stylesheet" href="../../css/theme.css" /> <!-- 主题样式 -->
+    <!-- 引入 LayUI 框架样式，用于构建页面布局和组件 -->
+    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
+    <!-- 引入公共样式表，包含一些通用的样式设置 -->
+    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
+    <!-- 引入登录相关样式，可能包含注册页面的特定样式 -->
+    <link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
+    <!-- 引入主题样式，设置页面整体的视觉风格 -->
+    <link rel="stylesheet" href="../../css/theme.css" />
 
-    <!-- 内联CSS样式 -->
+    <!-- 内联 CSS 样式 -->
     <style type="text/css">
         /* 注册页面主容器样式 */
+        /* 使用弹性布局，让内容在水平和垂直方向上都居中显示 */
         .register {
-            display: flex; /* 弹性布局 */
-            justify-content: center; /* 水平居中 */
-            align-items: center; /* 垂直居中 */
-            width: 100%; /* 宽度100% */
-            height: 100%; /* 高度100% */
-            background-attachment: fixed; /* 背景固定 */
-            background-size: cover; /* 背景覆盖 */
-            background-position: center; /* 背景居中 */
-            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片 */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            /* 背景图片固定，不随页面滚动而移动 */
+            background-attachment: fixed;
+            /* 背景图片覆盖整个容器 */
+            background-size: cover;
+            /* 背景图片居中显示 */
+            background-position: center;
+            /* 设置背景图片 */
+            background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg);
         }
 
         /* 表单样式 */
+        /* 使用盒模型计算方式，包含内边距和边框 */
         .register form {
-            box-sizing: border-box; /* 盒模型计算方式 */
-            min-height: 400px; /* 最小高度 */
-            display: flex; /* 弹性布局 */
-            flex-direction: column; /* 垂直排列 */
-            justify-content: center !important; /* 垂直居中 */
+            box-sizing: border-box;
+            /* 表单最小高度为 400px */
+            min-height: 400px;
+            display: flex;
+            /* 表单元素垂直排列 */
+            flex-direction: column;
+            /* 表单元素垂直居中 */
+            justify-content: center !important;
         }
 
-        /* 标题和logo样式 */
+        /* 标题和 logo 样式 */
+        /* 标题文字居中显示 */
         .register .title {
-            text-align: center; /* 文字居中 */
+            text-align: center;
         }
 
         /* 表单项样式 */
+        /* 使用弹性布局，让表单项内元素垂直居中 */
         .register .form-item {
-            display: flex; /* 弹性布局 */
-            align-items: center; /* 垂直居中 */
-            flex-wrap: wrap; /* 允许换行 */
-            box-sizing: border-box; /* 盒模型计算方式 */
+            display: flex;
+            align-items: center;
+            /* 表单项内元素允许换行 */
+            flex-wrap: wrap;
+            box-sizing: border-box;
         }
 
         /* 提交按钮样式 */
+        /* 提交按钮为块级元素 */
         .register .btn-submit {
-            display: block; /* 块级元素 */
-            box-sizing: border-box; /* 盒模型计算方式 */
+            display: block;
+            box-sizing: border-box;
         }
     </style>
 </head>
 <body>
-<!-- Vue.js应用容器 -->
+<!-- Vue.js 应用容器 -->
+<!-- 该容器为 Vue 实例的挂载点 -->
 <div class="register" id="app">
     <!-- 注册表单 -->
+    <!-- 使用 LayUI 表单，设置表单过滤器为 myForm -->
     <form class="layui-form login-form" lay-filter="myForm">
         <!-- 表单标题 -->
         <p class="title">医生注册</p>
 
         <!-- 医生工号输入框 -->
+        <!-- 设置输入框为必填项，输入提示为请输入医生工号 -->
         <div class="form-item layui-form-text">
             <input lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" class="layui-input">
         </div>
 
         <!-- 用户名输入框 -->
+        <!-- 设置输入框为必填项，输入提示为请输入账户 -->
         <div class="form-item layui-form-text">
             <input lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" class="layui-input">
         </div>
 
         <!-- 密码输入框 -->
+        <!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请输入密码 -->
         <div class="form-item layui-form-text">
             <input lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" class="layui-input">
         </div>
 
         <!-- 确认密码输入框 -->
+        <!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请重复输入密码 -->
         <div class="form-item layui-form-text">
             <input lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" class="layui-input">
         </div>
 
         <!-- 医生姓名输入框 -->
+        <!-- 设置输入框为必填项，输入提示为请输入医生名称 -->
         <div class="form-item layui-form-text">
             <input lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" class="layui-input">
         </div>
 
         <!-- 科室选择下拉框 -->
         <div>
+            <!-- 初始选项为请选择科室 -->
             <select name="yishengTypes" id="yishengTypes">
                 <option value="">请选择科室</option>
-                <!-- Vue动态渲染科室选项 -->
+                <!-- 使用 Vue 的 v-for 指令动态渲染科室选项 -->
                 <option v-for="(item,index) in yishengTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
             </select>
         </div>
 
         <!-- 职位选择下拉框 -->
         <div>
+            <!-- 初始选项为请选择职位 -->
             <select name="zhiweiTypes" id="zhiweiTypes">
                 <option value="">请选择职位</option>
-                <!-- Vue动态渲染职位选项 -->
+                <!-- 使用 Vue 的 v-for 指令动态渲染职位选项 -->
                 <option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
             </select>
         </div>
 
         <!-- 职称输入框 -->
+        <!-- 设置输入框为必填项，输入提示为请输入职称 -->
         <div class="form-item layui-form-text">
             <input lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" class="layui-input">
         </div>
 
         <!-- 联系方式输入框 -->
+        <!-- 设置输入框为必填项，同时进行手机号码格式验证，输入提示为请输入联系方式 -->
         <div class="form-item layui-form-text">
             <input lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" class="layui-input">
         </div>
 
         <!-- 挂号须知输入框 -->
+        <!-- 设置输入框为必填项，输入提示为请输入挂号须知 -->
         <div class="form-item layui-form-text">
             <input lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" class="layui-input">
         </div>
 
         <!-- 邮箱输入框 -->
+        <!-- 设置输入框为必填项，同时进行邮箱格式验证，输入提示为请输入邮箱 -->
         <div class="form-item layui-form-text">
             <input lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" class="layui-input">
         </div>
 
         <!-- 注册按钮 -->
+        <!-- 点击按钮提交表单，触发注册事件 -->
         <button class="layui-btn" lay-submit lay-filter="register">注册</button>
 
         <!-- 已有账号登录链接 -->
+        <!-- 点击链接跳转到登录页面 -->
         <p class="txt"><a href="../login/login.html">已有账号登录</a></p>
     </form>
 </div>
 
-<!-- JavaScript文件引入 -->
-<script src="../../layui/layui.js"></script> <!-- LayUI框架 -->
-<script src="../../js/vue.js"></script> <!-- Vue.js框架 -->
-<script src="../../xznstatic/js/element.min.js"></script> <!-- Element UI组件库 -->
-<link rel="stylesheet" href="../../xznstatic/css/element.min.css"> <!-- Element UI样式 -->
-<script src="../../js/config.js"></script> <!-- 组件配置信息 -->
-<script src="../../modules/config.js"></script> <!-- 扩展插件配置 -->
-<script src="../../js/utils.js"></script> <!-- 工具方法 -->
-<script src="../../js/validate.js"></script> <!-- 校验工具类 -->
+<!-- JavaScript 文件引入 -->
+<!-- 引入 LayUI 框架 -->
+<script src="../../layui/layui.js"></script>
+<!-- 引入 Vue.js 框架 -->
+<script src="../../js/vue.js"></script>
+<!-- 引入 Element UI 组件库 -->
+<script src="../../xznstatic/js/element.min.js"></script>
+<!-- 引入 Element UI 样式 -->
+<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
+<!-- 引入组件配置信息 -->
+<script src="../../js/config.js"></script>
+<!-- 引入扩展插件配置 -->
+<script src="../../modules/config.js"></script>
+<!-- 引入工具方法 -->
+<script src="../../js/utils.js"></script>
+<!-- 引入校验工具类 -->
+<script src="../../js/validate.js"></script>
 
 <script>
-    // 创建Vue实例
+    // 创建 Vue 实例
+    // 挂载到 id 为 app 的元素上
     var vue = new Vue({
-        el: '#app', // 挂载到id为app的元素上
+        el: '#app',
         data: {
-            yishengTypesList : [], // 科室类型列表
-            zhiweiTypesList : [], // 职位类型列表
+            // 科室类型列表，用于动态渲染科室下拉框选项
+            yishengTypesList : [],
+            // 职位类型列表，用于动态渲染职位下拉框选项
+            zhiweiTypesList : [],
         },
         updated: function() {
-            // 当Vue更新DOM后，重新渲染LayUI表单
+            // 当 Vue 更新 DOM 后，重新渲染 LayUI 表单，确保表单样式正确显示
             layui.form.render(null, 'myForm');
         },
     });
 
-    // 使用LayUI模块
+    // 使用 LayUI 模块
     layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
-        // 获取LayUI模块
-        var layer = layui.layer; // 弹层组件
-        var element = layui.element; // 元素组件
-        var carousel = layui.carousel; // 轮播组件
-        var form = layui.form; // 表单组件
-        var http = layui.http; // HTTP请求组件
-        var jquery = layui.jquery; // jQuery组件
+        // 获取 LayUI 模块
+        // 弹层组件，用于显示提示信息
+        var layer = layui.layer;
+        // 元素组件，用于操作页面元素
+        var element = layui.element;
+        // 轮播组件，这里未使用
+        var carousel = layui.carousel;
+        // 表单组件，用于处理表单相关操作
+        var form = layui.form;
+        // HTTP 请求组件，用于发送网络请求
+        var http = layui.http;
+        // jQuery 组件，用于操作 DOM 元素
+        var jquery = layui.jquery;
 
         // 获取表名参数
         var tablename = http.getParam('tablename');
@@ -176,7 +228,7 @@
         yishengTypesSelect();
         // 初始化职位下拉框
         zhiweiTypesSelect();
-        // 初始化日期选择器
+        // 初始化日期选择器，这里未实现具体逻辑
         dateTimePick();
 
         // 表单验证规则
@@ -189,39 +241,43 @@
             // 小数验证
             double: [
                 /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/,
-                '最大整数位为6为,小数最大两位'
+                '最大整数位为 6 位，小数最大两位'
             ],
-            // 密码一致性验证1
+            // 密码一致性验证 1
             password1: function(value, item) {
                 var password2 = jquery("#password2").val();
                 if(password2 && value != password2){
-                    return '密码的两次密码不一致';
+                    return '密码的两次输入不一致';
                 }
             },
-            // 密码一致性验证2
+            // 密码一致性验证 2
             password2: function(value, item) {
                 var password1 = jquery("#password1").val();
                 if(password1 && value != password1){
-                    return '密码的两次密码不一致';
+                    return '密码的两次输入不一致';
                 }
             }
         });
 
         // 注册表单提交事件
         form.on('submit(register)', function(data) {
-            data = data.field; // 获取表单数据
+            // 获取表单数据
+            data = data.field;
             // 发送注册请求
             http.requestJson(tablename + '/register', 'post', data, function(res) {
                 // 注册成功提示
                 layer.msg('注册成功', {
-                    time: 2000, // 2秒后自动关闭
-                    icon: 6 // 成功图标
+                    // 2 秒后自动关闭提示框
+                    time: 2000,
+                    // 成功图标
+                    icon: 6
                 }, function(){
                     // 跳转到登录页面
                     window.location.href = '../login/login.html';
                 });
             });
-            return false; // 阻止表单默认提交
+            // 阻止表单默认提交
+            return false;
         });
 
         // 日期选择器初始化函数
@@ -234,7 +290,7 @@
             // 请求科室类型数据
             http.request("dictionary/page?page=1&limit=100&dicCode=yisheng_types", "GET", {}, (res) => {
                 if(res.code == 0){
-                    // 将数据存入Vue实例
+                    // 将数据存入 Vue 实例
                     vue.yishengTypesList = res.data.list;
                 }
             });
@@ -245,7 +301,7 @@
             // 请求职位类型数据
             http.request("dictionary/page?page=1&limit=100&dicCode=zhiwei_types", "GET", {}, (res) => {
                 if(res.code == 0){
-                    // 将数据存入Vue实例
+                    // 将数据存入 Vue 实例
                     vue.zhiweiTypesList = res.data.list;
                 }
             });
-- 
2.34.1

