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

15

Browse Source
cp
cp 3 months ago
parent 7ed0468795
commit 6bfb1d1688
1 changed files with 89 additions and 82 deletions
Show Stats Download Patch File Download Diff File

171
target/classes/front/front/pages/yisheng/center.html
Unescape View File

@ -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,10 +308,9 @@
line-height: 42px;
height: 42px;
}
/* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果 */
/* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果
前伪元素用于在链接前面添加额外的样式 */
#category a::before {
content:'';
position:absolute;
content:'';
position:absolute;
width: 190px;
@ -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
<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
Write Preview
Loading…
Cancel
Save