prxhap34i
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

16

Browse Source
cp
cp 3 months ago
parent 6bfb1d1688
commit 8f366325c1
1 changed files with 130 additions and 46 deletions
Show Stats Download Patch File Download Diff File

160
target/classes/front/front/pages/yisheng/detail.html
Unescape View File

@ -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,6 +442,7 @@
</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">
@ -385,24 +451,33 @@
</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,20 +592,18 @@
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>

Write Preview
Loading…
Cancel
Save