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] 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
