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

17

Browse Source
cp
cp 1 month ago
parent 8f366325c1
commit cd78156d77
1 changed files with 65 additions and 279 deletions
Show Stats Download Patch File Download Diff File

344
target/classes/front/front/pages/yisheng/list.html
Unescape View File

@ -1,23 +1,38 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面的字符编码为 UTF-8，确保能正确显示各种字符 -->
<meta charset="utf-8">
<!-- 设置页面标题为“医生” -->
<title>医生</title>
<!-- 设置页面的关键词，用于搜索引擎优化，这里为空 -->
<meta name="keywords" content=""/>
<!-- 设置页面的描述信息，用于搜索引擎展示，这里为空 -->
<meta name="description" content=""/>
<!-- 指定页面使用 Webkit 渲染引擎 -->
<meta name="renderer" content="webkit">
<!-- 设置页面在 IE 浏览器中的兼容性模式为 Edge 模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 设置页面在移动设备上的显示方式，宽度为设备宽度，初始缩放比例为 1，最大缩放比例为 1，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入 layui 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义的公共样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义的样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入 jQuery 库文件，版本为 1.11.3 -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入 jQuery 的 SuperSlide 插件文件，版本为 2.1.1 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入 Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入自定义的主题样式文件 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 在 HTML 元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性
该伪元素会覆盖整个页面，用于设置背景图片、颜色等，且固定在页面上，不随滚动条滚动 */
html::after {
position: fixed;
top: 0;
@ -31,11 +46,14 @@
background-position: center;
}
/*轮播图相关 start*/
/*轮播图相关样式开始*/
/* 轮播图容器样式，设置溢出内容隐藏，防止轮播图超出容器范围 */
#swiper {
overflow: hidden;
}
/* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影
轮播图指示器通常是小圆点，用于指示当前轮播到的图片位置 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -47,6 +65,8 @@
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
}
/* 轮播图指示器当前激活项的样式，设置宽度和其他样式
当轮播到某张图片时，对应的指示器小圆点会变成该样式 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -55,9 +75,10 @@
border-color: rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*轮播图相关样式结束*/
/*列表*/
/* 推荐列表相关样式 */
/* 推荐区域样式，设置内边距、布局方式和背景相关属性 */
.recommend {
padding: 10px 0;
display: flex;
@ -67,11 +88,13 @@
background-size: cover;
}
/* 推荐区域内盒子样式，设置宽度和居中显示 */
.recommend .box {
width: 1002px;
margin: 0 auto;
}
/* 推荐区域内盒子的标题样式，设置内边距、布局方式和盒子模型属性 */
.recommend .box .title {
padding: 10px 5px;
display: flex;
@ -80,12 +103,14 @@
box-sizing: border-box;
}
/* 推荐区域内盒子标题的 span 样式，设置内边距、字体大小和行高 */
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
/* 推荐区域内盒子的筛选区域样式，设置内边距、布局方式、宽度和换行属性 */
.recommend .box .filter {
padding: 0 10px;
display: flex;
@ -95,23 +120,27 @@
flex-wrap: wrap;
}
/* 推荐区域内盒子筛选区域的列表项样式，设置布局方式和对齐方式 */
.recommend .box .filter .item-list {
display: flex;
align-items: center;
}
/* 推荐区域内盒子筛选区域列表项的标签样式，设置字体大小、颜色和盒子模型属性 */
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
/* 推荐区域内盒子筛选区域列表项的输入框样式，设置内边距、盒子模型属性和去除默认轮廓 */
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
/* 推荐区域内盒子筛选区域的按钮样式，设置布局方式、内边距、盒子模型属性和去除默认轮廓 */
.recommend .box .filter button {
display: flex;
padding: 0 10px;
@ -121,21 +150,25 @@
outline: none;
}
/* 推荐区域内盒子筛选区域按钮内的图标样式，设置右边距 */
.recommend .box .filter button i {
margin-right: 4px;
}
/* 推荐区域内盒子的列表样式，设置布局方式和换行属性 */
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
/* 推荐区域内盒子列表的列表项样式，设置弹性属性、内边距和盒子模型属性 */
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
/* 推荐区域内盒子列表项的主体样式，设置光标样式、边框和内边距 */
.recommend .box .list .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
@ -143,6 +176,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表项主体内的图片样式，设置宽度、高度和居中显示 */
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
@ -150,11 +184,13 @@
margin: 0 auto;
}
/* 推荐区域内盒子列表项主体的信息区域样式，设置布局方式和换行属性 */
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
/* 推荐区域内盒子列表项主体信息区域的价格样式，设置上内边距、颜色、字体大小和文本对齐方式 */
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
@ -163,6 +199,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小和文本对齐方式 */
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
@ -171,14 +208,17 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
/* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
/* 推荐区域内盒子的新闻区域样式，设置布局方式、内边距和宽度 */
.recommend .box .news {
display: flex;
flex-wrap: wrap;
@ -186,12 +226,14 @@
width: 100%;
}
/* 推荐区域内盒子新闻区域的列表项样式，设置弹性属性、内边距和盒子模型属性 */
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域列表项的主体样式，设置光标样式、边框、内边距和布局方式 */
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
@ -200,6 +242,7 @@
display: flex;
}
/* 推荐区域内盒子新闻区域列表项主体内的图片样式，设置宽度、高度和居中显示 */
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
@ -207,6 +250,7 @@
margin: 0 auto;
}
/* 推荐区域内盒子新闻区域列表项主体的信息区域样式，设置弹性属性、布局方式、方向和内边距 */
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
@ -216,6 +260,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
@ -228,6 +273,7 @@
-webkit-box-orient: vertical;
}
/* 推荐区域内盒子新闻区域列表项主体信息区域的时间样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
@ -240,321 +286,61 @@
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
/* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
/* 特定动画样式，当鼠标悬停在动画盒子上时，设置变换效果和过渡时间 */
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
/* layui 分页组件的计数样式，设置内边距 */
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
/* layui 分页组件的跳转输入框样式，设置左内边距 */
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style>
<body>
<!-- Vue 实例挂载的根元素 -->
<div id="app">
<!-- 页面的横幅区域 -->
<div class="banner">
<!-- 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"}'>
<!-- 轮播图的内容区域，使用 Vue 的指令循环渲染轮播图项 -->
<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>
</div>
</div>
</div>
<!-- 推荐区域，设置相关样式 -->
<div class="recommend index-pv1"
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<!-- 推荐区域内的盒子，设置宽度 -->
<div class="box" style='width:80%'>
<!-- 科室筛选按钮区域，使用 Vue 的指令动态设置样式 -->
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<div style="display: inline-block;text-align: center;cursor: pointer;"
class="thisTableType-search main_backgroundColor" index=""
:style='searchForm.yishengTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
科室全部
</div>
<div v-for="(item,index) in yishengTypesList" :key="item.codeIndex"
class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
:style='searchForm.yishengTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
style="display: inline-block;text-align: center;cursor: pointer;">
{{item.indexName}}
</div>
</div>
<div class="title sub_backgroundColor sub_borderColor"
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
医生
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：医生
</span>
</div>
<form class="layui-form filter main_backgroundColor"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
医生名称
</div>
<input type="text" v-model="searchForm.yishengName"
:style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
placeholder="医生名称" autocomplete="off"
class="layui-input">
</div>
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
职位</div>
<select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
style="display:block" v-model="searchForm.zhiweiTypes">
<option value="">请选择</option>
<option v-for="(item,index) in zhiweiTypesList" v-bind:key="index"
:value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}
</option>
</select>
</div>
<button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button>
<button v-if="isAuth('yisheng','新增')" @click="jump('../yisheng/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon">&#xe654;</i>添加
</button>
</form>
<div style="margin-top: 2em;">
<div class="row">
<div v-for="(item,index) in dataList" v-bind:key="index" class="col-md-3 list-grid">
<div @click="jumpCheck('../yisheng/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)" class="list-img">
<img :src="item.yishengPhoto?item.yishengPhoto.split(',')[0]:''" class="img-responsive" style="height: 350px;width:100%;" />
<div class="textbox"></div>
<h4 >名称:{{item.yishengName}}</h4>
<p v-if="item.yishengNewMoney != null" style="color: red;" >￥{{item.yishengNewMoney}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pager" id="pager" :style="{textAlign:'center'}"></div>
</div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入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 type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
swiperList: [],
yishengTypesList: [],
zhiweiTypesList: [],
//查询条件
searchForm: {
page: 1
,limit: 8
,yishengName: ""
,yishengTypes: ""
,zhiweiTypes: ""
},
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
},
computed: {
},
methods: {
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
// var id = http.getParam('id');
// 获取轮播图 数据
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'
});
});
}
});
//科室的动态搜素
$(document).on("click", ".thisTableType-search", function (e) {
vue.searchForm.yishengTypes = $(this).attr('index');
pageList();
});
//当前表的 科室 字段 字典表查询
yishengTypesSelect();
//当前表的 职位 字段 字典表查询
zhiweiTypesSelect();
//当前表的 科室 字段 字典表查询方法
function yishengTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", 'get', {}, function (res) {
if(res.code == 0){
vue.yishengTypesList = res.data.list;
}
});
}
//当前表的 职位 字段 字典表查询方法
function zhiweiTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", 'get', {}, function (res) {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
});
function pageList() {
// 获取列表数据
http.request('yisheng/list', 'get', vue.searchForm, function (res) {
vue.dataList = res.data.list;
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
jump: function (obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
http.request('yisheng/list', 'get', vue.searchForm, function (res1) {
vue.dataList = res1.data.list;
})
}
}
});
});
}
});
window.xznSlide = function () {
jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
};
</script>
</body>
</html>
<!-- 循环渲染科室筛选按钮，使用 Vue 的指令动态设置样式和属性 -->
<
Write Preview
Loading…
Cancel
Save