|
|
|
|
@ -1,22 +1,26 @@
|
|
|
|
|
|
|
|
|
|
<!-- 个人中心 -->
|
|
|
|
|
<!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">
|
|
|
|
|
<!-- 引入element样式 -->
|
|
|
|
|
<!-- 引入element的CSS样式文件 -->
|
|
|
|
|
<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::after {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
@ -30,9 +34,11 @@
|
|
|
|
|
background-position: center;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
/* 轮播图容器样式，设置溢出内容隐藏 */
|
|
|
|
|
#swiper {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
/* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影 */
|
|
|
|
|
#swiper .layui-carousel-ind li {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
@ -43,6 +49,7 @@
|
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
|
box-shadow: 0 0 6px rgba(255,0,0,.8);
|
|
|
|
|
}
|
|
|
|
|
/* 轮播图指示器当前激活项的样式，设置宽度和其他样式 */
|
|
|
|
|
#swiper .layui-carousel-ind li.layui-this {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
@ -51,7 +58,7 @@
|
|
|
|
|
border-color: rgba(0,0,0,.3);
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 页面标题容器的样式，设置文本居中、宽度和弹性布局 */
|
|
|
|
|
.index-title {
|
|
|
|
|
text-align: center;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
@ -61,16 +68,20 @@
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
/* 页面标题中span元素的样式，设置内边距和行高 */
|
|
|
|
|
.index-title span {
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
/* 个人中心容器中导航树的样式，设置宽度为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;
|
|
|
|
|
@ -82,10 +93,12 @@
|
|
|
|
|
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);
|
|
|
|
|
@ -93,6 +106,7 @@
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
/* 个人中心容器中导航树导航项鼠标悬停时的样式，设置字体大小和颜色 */
|
|
|
|
|
.center-container .layui-nav-tree .layui-nav-item:hover {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
@ -100,6 +114,7 @@
|
|
|
|
|
border-style: solid;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
/* 个人中心容器中导航树导航项链接的样式，设置行高、高度、背景色、颜色和去除下划线 */
|
|
|
|
|
.center-container .layui-nav-tree .layui-nav-item a {
|
|
|
|
|
line-height: inherit;
|
|
|
|
|
height: auto;
|
|
|
|
|
@ -107,18 +122,21 @@
|
|
|
|
|
color: inherit;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
/* 右侧容器的样式，设置为相对定位 */
|
|
|
|
|
.right-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 右侧容器中表单元素项的样式，设置为弹性布局并垂直居中对齐 */
|
|
|
|
|
.right-container .layui-form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
/* 右侧容器中输入框所在块的样式，设置外边距为0，弹性增长系数为1 */
|
|
|
|
|
.right-container .layui-input-block {
|
|
|
|
|
margin: 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
/* 右侧容器中普通输入框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式 */
|
|
|
|
|
.right-container .input .layui-input {
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
@ -129,6 +147,7 @@
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
/* 右侧容器中选择框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式 */
|
|
|
|
|
.right-container .select .layui-input {
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
@ -139,6 +158,7 @@
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
/* 右侧容器中日期输入框的样式，设置内边距、高度、字体大小、颜色、边框、背景色、阴影和文本对齐方式 */
|
|
|
|
|
.right-container .date .layui-input {
|
|
|
|
|
padding: 0 12px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
@ -151,443 +171,371 @@
|
|
|
|
|
box-shadow: 0 0 0px rgba(255,0,0,.8);
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
|
|
|
|
|
#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
|
|
|
|
|
.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
|
|
|
|
|
#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
|
|
|
|
|
.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;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;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
|
|
|
|
|
#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;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; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
|
|
|
|
|
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;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);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; 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;overflow: hidden; 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}
|
|
|
|
|
/* 头部区域的样式，设置动画效果、内边距、位置和底部边框 */
|
|
|
|
|
.header {
|
|
|
|
|
animation-name: fadeInUp;
|
|
|
|
|
padding-bottom: 26px;
|
|
|
|
|
padding-top: 70px;
|
|
|
|
|
position: relative;
|
|
|
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
/* 特定头部区域的样式，设置顶部位置、内边距、宽度、高度和圆角 */
|
|
|
|
|
#plheader {
|
|
|
|
|
top: 48px;
|
|
|
|
|
padding-bottom: 40px;
|
|
|
|
|
width: 220px;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 70px;
|
|
|
|
|
border-radius: 3px 3px 0px 0px;
|
|
|
|
|
padding-top: 40px !important;
|
|
|
|
|
}
|
|
|
|
|
/* 头部标题的样式，设置颜色、字体大小、边距、文本溢出处理、字体加粗、底部边框和字母间距 */
|
|
|
|
|
.header p.title {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-left: 31px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding-bottom: 8px;
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
width: 158px;
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
|
|
|
|
letter-spacing:1px;
|
|
|
|
|
}
|
|
|
|
|
/* 分类菜单区域的样式，设置内边距、位置、宽度、浮动、背景色和圆角 */
|
|
|
|
|
#category {
|
|
|
|
|
padding-top: 136px;
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
padding-bottom: 30px;
|
|
|
|
|
width: 205px;
|
|
|
|
|
float: left;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
margin-top: -120px;
|
|
|
|
|
background-color: var(--publicMainColor);
|
|
|
|
|
border-radius: 0px 0px 3px 3px;
|
|
|
|
|
}
|
|
|
|
|
/* 头部副标题的样式，设置字体、字母间距、字体大小、显示方式、颜色、边距、浮动、文本溢出处理和文本对齐方式 */
|
|
|
|
|
.header p.subtitle {
|
|
|
|
|
font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding-top: 0px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-top: 0px;
|
|
|
|
|
margin-right:31px;
|
|
|
|
|
float: right;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
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;
|
|
|
|
|
border-color: #838383;
|
|
|
|
|
transition: 0.3s;
|
|
|
|
|
transform-origin: bottom;
|
|
|
|
|
}
|
|
|
|
|
/* 分类菜单列表项的样式，设置高度、位置、浮动、显示方式、边距、行高、底部边框、内边距和过渡效果 */
|
|
|
|
|
#category li {
|
|
|
|
|
height:auto;
|
|
|
|
|
position:relative;
|
|
|
|
|
float:none;
|
|
|
|
|
display:block;
|
|
|
|
|
margin-top:1px;
|
|
|
|
|
margin-bottom:1px;
|
|
|
|
|
line-height:43px;
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
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;
|
|
|
|
|
color:#CFDCF9;
|
|
|
|
|
font-size:14px;
|
|
|
|
|
position:relative;
|
|
|
|
|
padding:0;
|
|
|
|
|
line-height: 42px;
|
|
|
|
|
height: 42px;
|
|
|
|
|
}
|
|
|
|
|
/* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果 */
|
|
|
|
|
#category a::before {
|
|
|
|
|
content:'';
|
|
|
|
|
position:absolute;
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 190px;
|
|
|
|
|
background-color: #AEAEAF;
|
|
|
|
|
height: 42px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
left: -16px;
|
|
|
|
|
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);
|
|
|
|
|
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
|
|
|
|
|
background: var(--publicSubColor);
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
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;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
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>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<!-- 轮播图 -->
|
|
|
|
|
<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>
|
|
|
|
|
<div v-for="(item,index) in swiperList" :key="index">
|
|
|
|
|
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 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>
|
|
|
|
|
<!-- 轮播图 -->
|
|
|
|
|
|
|
|
|
|
<!-- 标题 -->
|
|
|
|
|
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
|
|
|
|
|
<div class="line-container">
|
|
|
|
|
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
<!-- 标题 -->
|
|
|
|
|
|
|
|
|
|
<div class="center-container">
|
|
|
|
|
<!-- 个人中心菜单 config.js-->
|
|
|
|
|
<div style=" width:auto; margin:-70px 10px 0px auto">
|
|
|
|
|
<div class="header" id="plheader">
|
|
|
|
|
<p class="title">个人中心</p>
|
|
|
|
|
<p class="subtitle">USER / CENTER</p>
|
|
|
|
|
</div>
|
|
|
|
|
<ul id="category">
|
|
|
|
|
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
|
|
|
|
|
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div> <!-- 个人中心菜单 -->
|
|
|
|
|
<!-- 个人中心 -->
|
|
|
|
|
<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"}'>
|
|
|
|
|
<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"}'>
|
|
|
|
|
<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">
|
|
|
|
|
<input type="text" v-model="detail.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" 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">
|
|
|
|
|
<input type="text" v-model="detail.username" name="username" id="username" 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">
|
|
|
|
|
<input type="text" v-model="detail.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 标题部分，当前被注释掉，可根据需要显示 -->
|
|
|
|
|
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
|
|
|
|
|
<div class="line-container">
|
|
|
|
|
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- 个人中心容器，包含菜单和内容区域 -->
|
|
|
|
|
<div class="center-container">
|
|
|
|
|
<!-- 个人中心菜单区域，设置样式和位置 -->
|
|
|
|
|
<div style=" width:auto; margin:-70px 10px 0px auto">
|
|
|
|
|
<!-- 头部区域，显示标题和副标题 -->
|
|
|
|
|
<div class="header" id="plheader">
|
|
|
|
|
<p class="title">个人中心</p>
|
|
|
|
|
<p class="subtitle">USER / CENTER</p>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 分类菜单列表 -->
|
|
|
|
|
<ul id="category">
|
|
|
|
|
<!-- 使用Vue的v-for指令循环渲染菜单列表项，根据centerMenu数组动态生成 -->
|
|
|
|
|
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
|
|
|
|
|
<!-- 菜单链接，点击调用jump函数并传递链接地址 -->
|
|
|
|
|
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 个人中心内容区域，右侧容器 -->
|
|
|
|
|
<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"}'>
|
|
|
|
|
<!-- 表单标签，显示医生工号 -->
|
|
|
|
|
<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.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" lay-verify="required" placeholder="医生工号" autocomplete="off" class="layui-input">
|
|
|
|
|
</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 select">
|
|
|
|
|
<el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item,index) in yishengTypesList"
|
|
|
|
|
v-bind:key="item.codeIndex"
|
|
|
|
|
:label="item.indexName"
|
|
|
|
|
:value="item.codeIndex">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</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.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
|
|
|
|
|
</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 select">
|
|
|
|
|
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item,index) in zhiweiTypesList"
|
|
|
|
|
v-bind:key="item.codeIndex"
|
|
|
|
|
:label="item.indexName"
|
|
|
|
|
:value="item.codeIndex">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</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.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input">
|
|
|
|
|
</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">
|
|
|
|
|
<input type="text" v-model="detail.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" 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 select">
|
|
|
|
|
<!-- Element UI的选择框，使用v-model绑定数据，设置过滤功能和占位符 -->
|
|
|
|
|
<el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes">
|
|
|
|
|
<!-- 使用Vue的v-for指令循环渲染选择项，根据yishengTypesList数组动态生成 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item,index) in yishengTypesList"
|
|
|
|
|
v-bind:key="item.codeIndex"
|
|
|
|
|
:label="item.indexName"
|
|
|
|
|
:value="item.codeIndex">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</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"}' style="opacity: 0;" class="layui-form-label">
|
|
|
|
|
医生头像
|
|
|
|
|
</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto">
|
|
|
|
|
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
|
|
|
|
|
</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 select">
|
|
|
|
|
<!-- Element UI的选择框，使用v-model绑定数据，设置过滤功能和占位符 -->
|
|
|
|
|
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes">
|
|
|
|
|
<!-- 使用Vue的v-for指令循环渲染选择项，根据zhiweiTypesList数组动态生成 -->
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item,index) in zhiweiTypesList"
|
|
|
|
|
v-bind:key="item.codeIndex"
|
|
|
|
|
:label="item.indexName"
|
|
|
|
|
:value="item.codeIndex">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</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"}' style="opacity: 0;" class="layui-form-label">
|
|
|
|
|
医生头像
|
|
|
|
|
</label>
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
|
|
|
|
|
id="yishengPhotoUpload">
|
|
|
|
|
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon"></i>上传医生头像
|
|
|
|
|
</button>
|
|
|
|
|
</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.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" lay-verify="required" placeholder="职称" autocomplete="off" class="layui-input">
|
|
|
|
|
</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">
|
|
|
|
|
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" 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"}'>
|
|
|
|
|
<!-- 表单标签，设置透明度为0隐藏 -->
|
|
|
|
|
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
|
|
|
|
|
医生头像
|
|
|
|
|
</label>
|
|
|
|
|
<!-- 输入框所在块 -->
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<!-- 医生头像图片显示区域，使用v-model绑定图片地址 -->
|
|
|
|
|
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto">
|
|
|
|
|
<!-- 隐藏输入框，用于存储医生头像图片地址 -->
|
|
|
|
|
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
|
|
|
|
|
</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">
|
|
|
|
|
<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"}'>
|
|
|
|
|
<!-- 表单标签，设置透明度为0隐藏 -->
|
|
|
|
|
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
|
|
|
|
|
医生头像
|
|
|
|
|
</label>
|
|
|
|
|
<!-- 输入框所在块 -->
|
|
|
|
|
<div class="layui-input-block">
|
|
|
|
|
<!-- 医生头像上传按钮，点击触发上传操作 -->
|
|
|
|
|
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
|
|
|
|
|
id="yishengPhotoUpload">
|
|
|
|
|
<!-- 上传图标 -->
|
|
|
|
|
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon"></i>上传医生头像
|
|
|
|
|
</button>
|
|
|
|
|
</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">
|
|
|
|
|
<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-block input">
|
|
|
|
|
<!-- 联系方式输入框，使用v-model绑定数据，设置验证规则和占位符 -->
|
|
|
|
|
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" placeholder="联系方式" autocomplete="off" class="layui-input">
|
|
|
|
|
</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">
|
|
|
|
|
<input type="number" v-model="detail.yishengNewMoney" name="yishengNewMoney" id="yishengNewMoney" placeholder="挂号价格" autocomplete="off" class="layui-input" disabled="disabled">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-form-mid layui-word-aux">
|
|
|
|
|
<i class="layui-icon" style="font-size: 20px;color: red;"></i>
|
|
|
|
|
<a id="btn-recharge" href="javascript:void(0)">点我充值</a>
|
|
|
|
|
</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 class="layui-form-item">
|
|
|
|
|
<div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
|
|
|
|
|
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
|
|
|
|
|
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
|
|
|
|
|
</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>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 个人中心 -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- layui -->
|
|
|
|
|
<script src="../../layui/layui.js"></script>
|
|
|
|
|
<!-- vue -->
|
|
|
|
|
<script src="../../js/vue.js"></script>
|
|
|
|
|
<!-- 引入element组件库 -->
|
|
|
|
|
<script src="../../xznstatic/js/element.min.js"></script>
|
|
|
|
|
<!-- 组件配置信息 -->
|
|
|
|
|
<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>
|
|
|
|
|
var vue = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
|
|
|
|
// 轮播图
|
|
|
|
|
swiperList: [],
|
|
|
|
|
detail: {
|
|
|
|
|
yishengUuidNumber: new Date().getTime(),//数字
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
yishengName: '',
|
|
|
|
|
yishengTypes: '',//数字
|
|
|
|
|
yishengValue: '',//数字对应的值
|
|
|
|
|
zhiweiTypes: '',//数字
|
|
|
|
|
zhiweiValue: '',//数字对应的值
|
|
|
|
|
yishengZhichneg: '',
|
|
|
|
|
yishengPhoto: '',
|
|
|
|
|
yishengPhone: '',
|
|
|
|
|
yishengGuahao: '',
|
|
|
|
|
yishengEmail: '',
|
|
|
|
|
yishengNewMoney: '',
|
|
|
|
|
yishengContent: '',
|
|
|
|
|
createTime: '',
|
|
|
|
|
},
|
|
|
|
|
yishengTypesList: [],
|
|
|
|
|
zhiweiTypesList: [],
|
|
|
|
|
centerMenu: centerMenu
|
|
|
|
|
},
|
|
|
|
|
updated: function() {
|
|
|
|
|
// layui.form.render(null, 'myForm');
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
jump(url) {
|
|
|
|
|
jump(url)
|
|
|
|
|
},
|
|
|
|
|
logout(){
|
|
|
|
|
localStorage.removeItem('Token');
|
|
|
|
|
localStorage.removeItem('role');
|
|
|
|
|
localStorage.removeItem('sessionTable');
|
|
|
|
|
localStorage.removeItem('adminName');
|
|
|
|
|
localStorage.removeItem('userid');
|
|
|
|
|
localStorage.removeItem('userTable');
|
|
|
|
|
localStorage.removeItem('iframeUrl');
|
|
|
|
|
window.parent.location.href = '../login/login.html';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
var element = layui.element;
|
|
|
|
|
var carousel = layui.carousel;
|
|
|
|
|
var http = layui.http;
|
|
|
|
|
var jquery = layui.jquery;
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
var upload = layui.upload;
|
|
|
|
|
|
|
|
|
|
// 充值
|
|
|
|
|
jquery('#btn-recharge').click(function(e) {
|
|
|
|
|
layer.open({
|
|
|
|
|
type: 2,
|
|
|
|
|
title: '用户充值',
|
|
|
|
|
area: ['900px', '600px'],
|
|
|
|
|
content: '../recharge/recharge.html'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 获取轮播图 数据
|
|
|
|
|
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'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 查询字典表相关
|
|
|
|
|
// 科室的查询和初始化
|
|
|
|
|
yishengTypesSelect();
|
|
|
|
|
// 职位的查询和初始化
|
|
|
|
|
zhiweiTypesSelect();
|
|
|
|
|
// 日期效验规则及格式
|
|
|
|
|
dateTimePick();
|
|
|
|
|
// 表单效验规则
|
|
|
|
|
form.verify({
|
|
|
|
|
// 正整数效验规则
|
|
|
|
|
integer: [
|
|
|
|
|
/^[1-9][0-9]*$/
|
|
|
|
|
,'必须是正整数'
|
|
|
|
|
]
|
|
|
|
|
// 小数效验规则
|
|
|
|
|
,double: [
|
|
|
|
|
/^[0-9]{0,6}(\.[0-9]{1,2})?$/
|
|
|
|
|
,'最大整数位为6为,小数最大两位'
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 上传 文件/图片
|
|
|
|
|
// 医生头像的文件上传
|
|
|
|
|
var yishengPhotoUpload = upload.render({
|
|
|
|
|
//绑定元素
|
|
|
|
|
elem: '#yishengPhotoUpload',
|
|
|
|
|
//上传接口
|
|
|
|
|
url: http.baseurl + 'file/upload',
|
|
|
|
|
// 请求头
|
|
|
|
|
headers: {
|
|
|
|
|
Token: localStorage.getItem('Token')
|
|
|
|
|
},
|
|
|
|
|
// 允许上传时校验的文件类型
|
|
|
|
|
accept: 'images',
|
|
|
|
|
before: function() {
|
|
|
|
|
//loading层
|
|
|
|
|
var index = layer.load(1, {
|
|
|
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 上传成功
|
|
|
|
|
done: function(res) {
|
|
|
|
|
console.log(res);
|
|
|
|
|
layer.closeAll();
|
|
|
|
|
if (res.code == 0) {
|
|
|
|
|
layer.msg("上传成功", {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 6
|
|
|
|
|
})
|
|
|
|
|
var url = http.baseurl + 'upload/' + res.file;
|
|
|
|
|
vue.detail.yishengPhoto = url;
|
|
|
|
|
} else {
|
|
|
|
|
layer.msg(res.msg, {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 5
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
//请求异常回调
|
|
|
|
|
error: function() {
|
|
|
|
|
layer.closeAll();
|
|
|
|
|
layer.msg("请求接口异常", {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 5
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 查询用户信息
|
|
|
|
|
let table = localStorage.getItem("userTable");
|
|
|
|
|
|
|
|
|
|
if(!table){
|
|
|
|
|
layer.msg('请先登录', {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 5
|
|
|
|
|
}, function() {
|
|
|
|
|
window.parent.location.href = '../login/login.html';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
http.request(`yisheng/session`, 'get', {}, function(data) {
|
|
|
|
|
// 表单赋值
|
|
|
|
|
// form.val("myForm", data.data);
|
|
|
|
|
vue.detail = data.data
|
|
|
|
|
// 图片赋值
|
|
|
|
|
//jquery("#yishengPhotoImg").attr("src", data.data.yishengPhoto);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 提交表单
|
|
|
|
|
form.on('submit(*)', function(data) {
|
|
|
|
|
data = vue.detail;
|
|
|
|
|
data['createTime']=jquery("#createTime").val();
|
|
|
|
|
http.requestJson(table + '/update', 'post', data, function(res) {
|
|
|
|
|
layer.msg('修改成功', {
|
|
|
|
|
time: 2000,
|
|
|
|
|
icon: 6
|
|
|
|
|
}, function() {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
return false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 日期框初始化
|
|
|
|
|
function dateTimePick(){
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//科室的查询
|
|
|
|
|
function yishengTypesSelect() {
|
|
|
|
|
//填充下拉框选项
|
|
|
|
|
layui.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() {
|
|
|
|
|
//填充下拉框选项
|
|
|
|
|
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
vue.zhiweiTypesList = res.data.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
</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
|
