pljfpuixq
/
museum-information
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码注释

Browse Source
my_branch
DMM 6 months ago
parent 7a9433cc30
commit e2b7f50277
1 changed files with 442 additions and 424 deletions
Show Stats Download Patch File Download Diff File

866
src/main/resources/front/front/pages/paibanxinxi/list.html
Unescape View File

@ -1,462 +1,480 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>排班信息</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<meta charset="utf-8"> <!-- 设定页面字符编码为 UTF-8，避免中文乱码 -->
<title>排班信息</title> <!-- 页面标题，显示在浏览器标签栏 -->
<meta name="keywords" content="" /> <!-- 页面关键词（SEO 优化用，此处未填写） -->
<meta name="description" content="" /> <!-- 页面描述（SEO 优化用，此处未填写） -->
<meta name="renderer" content="webkit"> <!-- 指定浏览器渲染内核为 WebKit（兼容 Chrome、Safari 等） -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- 兼容 IE 浏览器，使用最新渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 移动端适配：宽度=设备宽度，初始缩放1，禁止用户缩放 -->
<!-- 引入外部样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css"> <!-- Layui 框架样式：提供轮播、分页、按钮等组件样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/> <!-- 自定义通用样式：全局统一的文本、边距等基础样式 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/> <!-- 自定义业务样式：页面特定布局、模块样式 -->
<!-- 引入外部脚本文件 -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script> <!-- jQuery 库：简化 DOM 操作、事件绑定等 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script> <!-- 轮播图插件：增强轮播功能（如多图切换、动画效果） -->
</head>
<style>
html::after {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
#test1 {
overflow: hidden;
}
#test1 .layui-carousel-ind li {
width: 16px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 10px;
background-color: #f7f7f7;
box-shadow: 0 0 6px #af8b7a;
}
#test1 .layui-carousel-ind li.layui-this {
width: 34px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border-radius: 10px;
background-color: rgba(175, 139, 122, 1);
box-shadow: 0 0 6px #af8b7a;
}
// 列表
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.recommend .box {
width: 1002px;
margin: 0 auto;
}
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
.recommend .box .filter {
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
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;
box-sizing: border-box;
align-items: center;
justify-content: center;
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 50%;
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);
padding: 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
display: block;
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;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 20%;
}
.recommend .box .news {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
.recommend .box .news .list-item {
flex: 0 0 $var4%;
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);
padding: 10px;
box-sizing: border-box;
display: flex;
}
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
}
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
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(1000px) translate3d(0px, 0px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
.index-pv1 .animation-box img:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
/* 1. 页面背景：固定全屏背景（需后续通过其他方式设置背景图，此处仅定义布局） */
html::after {
position: fixed; /* 固定定位，不随页面滚动移动 */
top: 0; right: 0; left: 0; bottom: 0; /* 覆盖整个页面可视区域 */
content: ''; /* 伪元素必须有 content 属性，此处为空占位 */
display: block;
background-attachment: fixed; /* 背景图固定，不随滚动滚动 */
background-size: cover; /* 背景图自适应铺满容器，保持比例 */
background-position: center; /* 背景图居中显示 */
}
/* 2. 轮播图（ID 为 test1）样式：自定义轮播指示器 */
#test1 {
overflow: hidden; /* 隐藏轮播图溢出部分（如切换时的边缘内容） */
}
/* 轮播指示器（未选中状态）：椭圆形、浅灰色背景、暖棕色阴影 */
#test1 .layui-carousel-ind li {
width: 16px; height: 10px; /* 宽16px、高10px，形成椭圆形 */
border: 0; /* 无边框 */
border-radius: 10px; /* 圆角=高度的一半，完全呈现椭圆形 */
background-color: #f7f7f7; /* 浅灰色背景 */
box-shadow: 0 0 6px #af8b7a; /* 暖棕色（#af8b7a）阴影，增强视觉层次 */
}
/* 轮播指示器（选中状态）：更长的椭圆形、暖棕色背景 */
#test1 .layui-carousel-ind li.layui-this {
width: 34px; height: 10px; /* 宽度增加到34px，突出选中状态 */
border: 0;
border-radius: 10px;
background-color: rgba(175, 139, 122, 1); /* 实心暖棕色 */
box-shadow: 0 0 6px #af8b7a; /* 同未选中状态的阴影，保持一致性 */
}
/* 3. 排班列表容器（recommend 模块）：整体布局 */
.recommend {
padding: 10px 0; /* 上下内边距10px，左右0 */
display: flex; /* 弹性布局，方便子元素居中 */
justify-content: center; /* 子元素水平居中 */
background-repeat: no-repeat; /* 背景图不重复 */
background-position: center center; /* 背景图居中 */
background-size: cover; /* 背景图自适应铺满 */
}
/* 列表内容盒子（固定宽度，水平居中） */
.recommend .box {
width: 1002px; /* 固定宽度1002px，适配桌面端 */
margin: 0 auto; /* 水平居中 */
}
/* 列表标题栏（包含标题文本和操作按钮） */
.recommend .box .title {
padding: 10px 5px; /* 上下内边距10px，左右5px */
display: flex; /* 弹性布局，使标题和按钮左右分布 */
justify-content: space-between; /* 子元素两端对齐（左标题、右按钮） */
align-items: center; /* 子元素垂直居中 */
box-sizing: border-box; /* 内边距和边框计入元素总宽度 */
}
/* 标题文本样式 */
.recommend .box .title span {
padding: 0 10px; /* 左右内边距10px */
font-size: 16px; /* 字体大小16px */
line-height: 1.4; /* 行高1.4，优化文本可读性 */
}
/* 4. 筛选栏（filter 模块）：筛选条件布局 */
.recommend .box .filter {
padding: 0 10px; /* 左右内边距10px */
display: flex; /* 弹性布局，使筛选项横向排列 */
align-items: center; /* 筛选项垂直居中 */
box-sizing: border-box; /* 内边距计入总宽度 */
width: 100%; /* 占满父容器宽度 */
flex-wrap: wrap; /* 筛选项过多时自动换行，避免溢出 */
}
/* 单个筛选项组（标签+输入框） */
.recommend .box .filter .item-list {
display: flex; /* 弹性布局，标签和输入框横向排列 */
align-items: center; /* 垂直居中 */
}
/* 筛选项标签文本 */
.recommend .box .filter .item-list .lable {
font-size: 14px; /* 字体大小14px */
color: #333; /* 文本颜色深灰色 */
box-sizing: border-box;
}
/* 筛选项输入框 */
.recommend .box .filter .item-list input {
padding: 0 10px; /* 左右内边距10px，避免文本贴边 */
box-sizing: border-box; /* 内边距计入总宽度 */
outline: none; /* 取消输入框聚焦时的默认蓝色边框 */
}
/* 筛选按钮（如“查询”“重置”） */
.recommend .box .filter button {
display: flex; /* 弹性布局，使图标和文字居中 */
padding: 0 10px; /* 左右内边距10px */
box-sizing: border-box;
align-items: center; /* 图标和文字垂直居中 */
justify-content: center; /* 内容水平居中 */
outline: none; /* 取消按钮聚焦时的默认轮廓 */
}
/* 按钮内图标样式 */
.recommend .box .filter button i {
margin-right: 4px; /* 图标与文字之间的间距4px */
}
/* 5. 排班列表（list 模块）：网格布局 */
.recommend .box .list {
display: flex; /* 弹性布局，实现网格排列 */
flex-wrap: wrap; /* 超出一行时自动换行 */
}
/* 列表项（默认占50%宽度，一行2个） */
.recommend .box .list .list-item {
flex: 0 0 50%; /* 固定宽度50%，不缩放、不拉伸 */
padding: 0 5px; /* 左右内边距5px，控制列表项间距 */
box-sizing: border-box;
}
/* 列表项内容容器（边框、内边距） */
.recommend .box .list .list-item .list-item-body {
cursor: pointer; /* 鼠标悬浮时显示手型，提示可点击 */
border: 1px solid rgba(0, 0, 0, 3); /* 浅灰色边框（透明度30%） */
padding: 5px; /* 内边距5px */
box-sizing: border-box;
}
/* 列表项中的图片（自适应宽度，固定高度） */
.recommend .box .list .list-item-body img {
width: 100%; /* 宽度占满父容器 */
height: 100px; /* 固定高度100px，统一显示效果 */
display: block; /* 取消图片默认的inline特性，避免底部留白 */
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; /* 上内边距5px，与图片间距 */
color: red; /* 文本红色，突出价格 */
font-size: 14px; /* 字体大小14px */
text-align: center; /* 文本居中 */
box-sizing: border-box;
}
/* 名称文本样式（与价格样式一致） */
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
/* 列表项变体：占33.33%宽度（一行3个） */
.recommend .box .list .list-item3 {
flex: 0 0 33.33%; /* 固定宽度33.33% */
}
/* 列表项变体：占20%宽度（一行5个） */
.recommend .box .list .list-item5 {
flex: 0 0 20%; /* 固定宽度20% */
}
/* 6. 新闻式列表（news 模块）：图文混排布局 */
.recommend .box .news {
display: flex; /* 弹性布局 */
flex-wrap: wrap; /* 自动换行 */
padding: 0; /* 取消内边距 */
width: 100%; /* 占满父容器宽度 */
}
/* 新闻列表项（默认宽度，可通过变体类修改） */
.recommend .box .news .list-item {
flex: 0 0 $var4%; /* 此处 $var4% 应为变量（可能是模板占位符），实际使用时会替换为具体百分比（如25%） */
padding: 0 10px; /* 左右内边距10px */
box-sizing: border-box;
}
/* 新闻列表项内容容器（弹性布局，图文横向排列） */
.recommend .box .news .list-item .list-item-body {
cursor: pointer; /* 手型指针 */
border: 1px solid rgba(0, 0, 0, 3); /* 浅灰色边框 */
padding: 10px; /* 内边距10px */
box-sizing: border-box;
display: flex; /* 弹性布局，图片和文本横向排列 */
}
/* 新闻列表项图片（固定宽度120px，高度自适应） */
.recommend .box .news .list-item .list-item-body img {
width: 120px; /* 固定宽度120px */
height: 100%; /* 高度占满父容器 */
display: block;
margin: 0 auto;
}
/* 新闻列表项文本区（弹性布局，垂直分布） */
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1; /* 占满剩余宽度 */
display: flex;
justify-content: space-between; /* 文本上下两端对齐（名称在上，时间在下） */
flex-direction: column; /* 垂直排列 */
padding-left: 10px; /* 左内边距10px，与图片间距 */
box-sizing: border-box;
}
/* 新闻名称文本（红色、单行溢出省略） */
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden; /* 隐藏溢出文本 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
display: -webkit-box; /* 适配webkit内核浏览器的多行文本控制 */
-webkit-line-clamp: 1; /* 只显示1行 */
-webkit-box-orient: vertical; /* 垂直排列 */
}
/* 新闻时间文本（与名称样式一致，单行溢出省略） */
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
/* 新闻列表项变体：占100%宽度（一行1个） */
.recommend .box .news .list-item1 {
flex: 0 0 100%; /* 固定宽度100% */
}
/* 新闻列表项变体：占33.33%宽度（一行3个） */
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
/* 7. hover 动画效果：鼠标悬浮时无缩放（保持原大小，仅过渡效果） */
.index-pv1 .animation-box:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg); /* 3D透视效果，无位移、缩放、旋转 */
transition: all 0.3s; /* 过渡动画时长0.3秒，平滑效果 */
}
.index-pv1 .animation-box img:hover {
transform: perspective(1000px) translate3d(0px, 0px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg); /* 图片hover效果与容器一致 */
transition: all 0.3s;
}
/* 8. Layui 分页组件样式调整：分页计数和跳转区的内边距 */
.layui-laypage .layui-laypage-count {
padding: 0 10px; /* 计数区左右内边距10px */
}
.layui-laypage .layui-laypage-skip {
padding-left: 10px; /* 跳转区左内边距10px，与计数区分开 */
}
</style>
<body>
<div id="app">
<div id="app">
<div class="banner">
<div class="layui-carousel" id="test1" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","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>
</div>
</div>
<div class="layui-carousel" id="test1" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","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>
</div>
</div>
</div>
<div class="recommend index-pv1" :style='{"padding":"20px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","background":"#fff","borderStyle":"solid"}'>
<div class="box" style='width:1100px'>
<div class="title" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(175, 139, 122, 1)","borderRadius":"4px","borderWidth":"0","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(0, 0, 0, 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(0, 0, 0, 1)","borderRadius":"0","borderWidth":"0","fontSize":"14px","borderStyle":"solid"}'>您现在的位置：排班信息</span>
</div>
<form class="layui-form filter" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(252, 222, 208, 1)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"50px"}'>
<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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>工作编号</div>
<select :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' style="display:block" name="gongzuobianhao" id="gongzuobianhao" lay-filter="gongzuobianhao">
<option value="">请选择</option>
<option v-for="(item,index) in gongzuobianhaoOptions" v-bind:key="index" :value="item">{{item}}</option>
</select>
</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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>发布日期</div>
<input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' name="faburiqistart" id="faburiqistart" placeholder="发布日期起始" autocomplete="off" class="layui-input">
<span :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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>至</span>
<input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' name="faburiqiend" id="faburiqiend" placeholder="发布日期结束" autocomplete="off" class="layui-input">
</div>
<button :style='{"padding":"0 15px","boxShadow":"0 0 0px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(175, 139, 122, 1)","color":"#fff","borderRadius":"0","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' id="btn-search" type="button" class="layui-btn layui-btn-normal">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button>
<button :style='{"padding":"0 15px","boxShadow":"0 0 0px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(175, 139, 122, 1)","color":"#fff","borderRadius":"0","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' v-if="isAuth('paibanxinxi','新增')" @click="jump('../paibanxinxi/add.html')" type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon">&#xe654;</i>添加
</button>
</form>
<!-- 样式二 -->
<div class="list news" style="position: relative;width: 100%;">
<div @click="jump('../paibanxinxi/detail.html?id='+item.id)" v-for="(item,index) in dataList" :key="index" class="list-item" :class="2=='1'?'list-item1':2=='3'?'list-item3':''">
<div class="list-item-body animation-box" :style='{"padding":"10px 20px 10px 10px","boxShadow":"0px 3px 6px rgba(0, 0, 0, 0.16)","margin":"20px 0","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"5px 0 0 0","borderStyle":"solid"}'>
<div class="item-info">
<div v-if="item.price" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'>￥</span>{{Number(item.price).toFixed(2)}}</div>
<div v-if="item.vipprice&&item.vipprice>0" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'>￥</span>{{Number(item.vipprice).toFixed(2)}} <span :style='{"fontSize":"12px"}'>会员价</span></div>
<div v-if="item.jf" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'></span>{{Number(item.jf).toFixed(0)}}积分</div>
</div>
</div>
</div>
</div>
<div class="pager" id="pager" :style="{textAlign:2==1?'left':2==2?'center':'right'}"></div>
</div>
</div>
<div class="recommend index-pv1" :style='{"padding":"20px 0 10px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0","borderColor":"rgba(0,0,0,.3)","borderRadius":"0","borderWidth":"0","background":"#fff","borderStyle":"solid"}'>
<div class="box" style='width:1100px'>
<div class="title" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(175, 139, 122, 1)","borderRadius":"4px","borderWidth":"0","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(0, 0, 0, 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(0, 0, 0, 1)","borderRadius":"0","borderWidth":"0","fontSize":"14px","borderStyle":"solid"}'>您现在的位置：排班信息</span>
</div>
<form class="layui-form filter" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(252, 222, 208, 1)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"50px"}'>
<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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>工作编号</div>
<select :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' style="display:block" name="gongzuobianhao" id="gongzuobianhao" lay-filter="gongzuobianhao">
<option value="">请选择</option>
<option v-for="(item,index) in gongzuobianhaoOptions" v-bind:key="index" :value="item">{{item}}</option>
</select>
</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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>发布日期</div>
<input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' name="faburiqistart" id="faburiqistart" placeholder="发布日期起始" autocomplete="off" class="layui-input">
<span :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(0, 0, 0, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>至</span>
<input type="text" :style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"rgba(175, 139, 122, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}' name="faburiqiend" id="faburiqiend" placeholder="发布日期结束" autocomplete="off" class="layui-input">
</div>
<button :style='{"padding":"0 15px","boxShadow":"0 0 0px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(175, 139, 122, 1)","color":"#fff","borderRadius":"0","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' id="btn-search" type="button" class="layui-btn layui-btn-normal">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button>
<button :style='{"padding":"0 15px","boxShadow":"0 0 0px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"#409EFF","backgroundColor":"rgba(175, 139, 122, 1)","color":"#fff","borderRadius":"0","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' v-if="isAuth('paibanxinxi','新增')" @click="jump('../paibanxinxi/add.html')" type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon">&#xe654;</i>添加
</button>
</form>
<!-- 样式二 -->
<div class="list news" style="position: relative;width: 100%;">
<div @click="jump('../paibanxinxi/detail.html?id='+item.id)" v-for="(item,index) in dataList" :key="index" class="list-item" :class="2=='1'?'list-item1':2=='3'?'list-item3':''">
<div class="list-item-body animation-box" :style='{"padding":"10px 20px 10px 10px","boxShadow":"0px 3px 6px rgba(0, 0, 0, 0.16)","margin":"20px 0","borderColor":"rgba(175, 139, 122, 1)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"5px 0 0 0","borderStyle":"solid"}'>
<div class="item-info">
<div v-if="item.price" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'>￥</span>{{Number(item.price).toFixed(2)}}</div>
<div v-if="item.vipprice&&item.vipprice>0" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'>￥</span>{{Number(item.vipprice).toFixed(2)}} <span :style='{"fontSize":"12px"}'>会员价</span></div>
<div v-if="item.jf" :style='{"padding":"0","margin":"10px 0 0 0","backgroundColor":"rgba(0,0,0,0)","color":"rgba(0, 0, 0, 1)","borderRadius":"0","textAlign":"center","width":"100%","fontSize":"18px"}' class="time"><span :style='{"fontSize":"12px"}'></span>{{Number(item.jf).toFixed(0)}}积分</div>
</div>
</div>
</div>
</div>
<div class="pager" id="pager" :style="{textAlign:2==1?'left':2==2?'center':'right'}"></div>
</div>
</div>
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<script src="../../js/config.js"></script>
<script src="../../modules/config.js"></script>
<script src="../../js/utils.js"></script>
<script type="text/javascript">
<script type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
swiperList: [],
gongzuobianhaoOptions: [],
dataList: [],
baseurl:'',
swiperIndex: '-1'
},
filters: {
newsDesc: function(val) {
if (val) {
if (val.length > 60) {
return val.substring(0, 60).replace(/<[^>]*>/g).replace(/undefined/g, '');
} else {
return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
el: '#app',
data: {
swiperList: [],
gongzuobianhaoOptions: [],
dataList: [],
baseurl:'',
swiperIndex: '-1'
},
filters: {
newsDesc: function(val) {
if (val) {
if (val.length > 60) {
return val.substring(0, 60).replace(/<[^>]*>/g).replace(/undefined/g, '');
} else {
return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
}
}
return '';
}
}
return '';
}
},
methods: {
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
jump(url) {
jump(url)
methods: {
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
jump(url) {
jump(url)
}
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery','laydate'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var jquery = layui.jquery;
var laydate = layui.laydate;
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var jquery = layui.jquery;
var laydate = layui.laydate;
var limit = 8;
limit = 2 * 2;
vue.baseurl = http.baseurl;
// 获取轮播图 数据
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: http.baseurl+element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#test1',
width: '100%',
height: '350px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
var limit = 8;
limit = 2 * 2;
vue.baseurl = http.baseurl;
// 获取轮播图 数据
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: http.baseurl+element.value
});
})
// vue.$nextTick(()=>{
// window.xznSlide();
// });
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#test1',
width: '100%',
height: '350px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
// vue.$nextTick(()=>{
// window.xznSlide();
// });
}
});
http.request(`option/gongzuorenyuan/gongzuobianhao`,'get',{},(res)=>{
vue.gongzuobianhaoOptions = res.data
});
});
http.request(`option/gongzuorenyuan/gongzuobianhao`,'get',{},(res)=>{
vue.gongzuobianhaoOptions = res.data
});
laydate.render({
elem: '#faburiqistart'
});
laydate.render({
elem: '#faburiqiend'
});
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function(e) {
laydate.render({
elem: '#faburiqistart'
});
laydate.render({
elem: '#faburiqiend'
});
// 分页列表
pageList();
});
function pageList() {
var param = {
page: 1,
limit: limit
}
// 搜索按钮
jquery('#btn-search').click(function(e) {
pageList();
});
function pageList() {
var param = {
page: 1,
limit: limit
}
if (jquery('#gongzuobianhao').val()) {
param['gongzuobianhao'] = jquery('#gongzuobianhao').val() ? jquery('#gongzuobianhao').val() : '';
}
if (jquery('#faburiqistart').val()) {
param['faburiqistart'] = jquery('#faburiqistart').val() ? jquery('#faburiqistart').val() : '';
}
if (jquery('#faburiqiend').val()) {
param['faburiqiend'] = jquery('#faburiqiend').val() ? jquery('#faburiqiend').val() : '';
}
if (jquery('#gongzuobianhao').val()) {
param['gongzuobianhao'] = jquery('#gongzuobianhao').val() ? jquery('#gongzuobianhao').val() : '';
}
if (jquery('#faburiqistart').val()) {
param['faburiqistart'] = jquery('#faburiqistart').val() ? jquery('#faburiqistart').val() : '';
}
if (jquery('#faburiqiend').val()) {
param['faburiqiend'] = jquery('#faburiqiend').val() ? jquery('#faburiqiend').val() : '';
}
// 获取列表数据
http.request('paibanxinxi/list', 'get', param, function(res) {
vue.dataList = res.data.list
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: limit,
groups: 5,
layout: ["prev","page","next"],
theme: '#AF8B7A',
jump: function(obj, first) {
param.page = obj.curr;
//首次不执行
if (!first) {
http.request('paibanxinxi/list', 'get', param, function(res) {
vue.dataList = res.data.list
})
}
}
});
})
}
// 获取列表数据
http.request('paibanxinxi/list', 'get', param, function(res) {
vue.dataList = res.data.list
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: limit,
groups: 5,
layout: ["prev","page","next"],
theme: '#AF8B7A',
jump: function(obj, first) {
param.page = obj.curr;
//首次不执行
if (!first) {
http.request('paibanxinxi/list', 'get', param, function(res) {
vue.dataList = res.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});
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>
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save