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