<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8" />
|
<title></title>
|
</head>
|
<body>
|
<!--页面样式-->
|
<style>
|
.welcome .layui-card {
|
border: 1px solid #f2f2f2;
|
border-radius: 5px;
|
}
|
|
.welcome .layuimini-notice:hover {
|
background: #f6f6f6;
|
}
|
|
.welcome .layuimini-notice {
|
padding: 7px 16px;
|
clear: both;
|
font-size: 12px !important;
|
cursor: pointer;
|
position: relative;
|
transition: background 0.2s ease-in-out;
|
}
|
|
.welcome .layuimini-notice-title {
|
padding-right: 70px !important;
|
text-overflow: ellipsis !important;
|
overflow: hidden !important;
|
white-space: nowrap !important;
|
}
|
|
.welcome .layuimini-notice-title {
|
line-height: 28px;
|
font-size: 14px;
|
}
|
|
.welcome .layuimini-notice-extra {
|
position: absolute;
|
top: 50%;
|
margin-top: -8px;
|
right: 16px;
|
display: inline-block;
|
height: 16px;
|
color: #999;
|
}
|
</style>
|
<div class="layuimini-container layuimini-page-anim">
|
<div class="layuimini-main welcome">
|
<div class="layui-row layui-col-space20">
|
<div class="layui-col-md12">
|
<div class="layui-row layui-col-space15">
|
|
<!--系统公告-->
|
<div class="layui-col-md6">
|
<div class="layui-card">
|
<div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
|
<div class="layui-card-body layui-text">
|
|
<!-- 系统公告的通知详情 -->
|
<div id="notice" class="layui-card">
|
<!-- 存放模板的script标签 -->
|
<script type="text/html" id="noticeTemplate">
|
<!-- 使用layui的each循环, 遍历数据集合信息(注意: 这里一定要使用d.data; 参数index表示集合下标, item表示集合元素) -->
|
{{# layui.each(d.data,function(index,item){ }}
|
<div class="layuimini-notice">
|
<!-- class选择器为"layuimini-notice-title"的div盒子用于存储公告通知中的标题 -->
|
<!-- 判断当前元素下标是否位于集合的前两位, 若为前两位, 则在运动会名称后加上new的字样 -->
|
{{# if(index<=1) { }}
|
<!-- 遍历每个元素值均使用 {{ item.字段名 }} 格式(注意: {{后无需加#号) -->
|
<div class="layuimini-notice-title">{{ item.sportName }}报名开启 <span class="label layui-bg-red">new</span></div>
|
{{# } else { }}
|
<!-- 若当前元素下标不位于集合中的前两位, 则无需显示new字样 -->
|
<div class="layuimini-notice-title">{{ item.sportName }}报名开启</div>
|
{{# } }}
|
<!-- class选择器为"layuimini-notice-extra"的div盒子用于存储公告通知中的发布时间 -->
|
<div class="layuimini-notice-extra">{{ item.createTime }}</div>
|
<!-- class选择器为"layuimini-notice-content"的div盒子用于存储公告通知的具体内容, 使用layui-hide将内容隐藏, 在查看详情时展示 -->
|
<div class="layuimini-notice-content layui-hide">
|
<!-- 仍旧是遍历每个元素值, 也是使用 {{ item.字段名 }} 的格式 -->
|
<span style="font-size:14px;font-weight: bolder;color: #000000">运动会名：</span>{{ item.sportName }} <br>
|
<span style="font-size:14px;font-weight: bolder;color: #000000">举办场地：</span>{{ item.place }} <br>
|
<span style="font-size:14px;font-weight: bolder;color: #000000">举办方：</span>{{ item.holder }} <br>
|
<span style="font-size:14px;font-weight: bolder;color: #000000">举办时间：</span>{{ item.startTime}} 至 {{ item.endTime }} <br>
|
<span style="font-size:14px;font-weight: bolder;color: #000000">详情描述：</span>{{ item.description }} <br>
|
</div>
|
</div>
|
<!-- 循环结束记得加上这个 -->
|
{{# }); }}
|
</script>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<script>
|
/* 加载layer,form和table等实例 */
|
layui.use(['layer', 'jquery', 'laytpl'], function () {
|
// 获取jquery对象
|
var $ = layui.jquery,
|
// 获取layer对象
|
layer = layui.layer,
|
// 获取laytpl对象
|
laytpl = layui.laytpl;
|
|
// 已发布的运动会信息
|
let sportInfoList;
|
/* 编写获取已发布的运动会信息的ajax请求 */
|
$.ajax({
|
// 请求方式为GET
|
type: 'GET',
|
// 数据接口：请求JSON数据到后端
|
url: GetWEBURL() + '/GG_Notice/notices',
|
type: "GET",
|
data: { "user": sessionStorage["HUserName"] },
|
// 开启同步
|
async: false,
|
/* 处理请求的回调函数 */
|
success: function (res) {
|
// 若返回的状态码为0，则执行成功处理操作
|
if (res.count == 1) {
|
// 运动会信息为当前数据
|
sportInfoList = res.data;
|
// console.log(sportInfoList);
|
// 若返回的状态码为1，则执行失败处理操作
|
} else {
|
layer.msg('获取已发布的运动会信息失败！', { icon: 2 });
|
}
|
}
|
});
|
|
// 获取通知模板中的html页面代码(noticeTemplate对应script模板中的id选择器)
|
let noticeTpl = noticeTemplate.innerHTML,
|
// 根据id选择器定位到公告通知的div盒子
|
notice = document.getElementById('notice');
|
// console.log(sportInfoList);
|
//渲染模板信息(noticeTpl是模板引擎的html代码, sportInfoList是上面获取到的已发布运动会信息, html用于存储div盒子中的代码)
|
laytpl(noticeTpl).render(sportInfoList, function (html) {
|
// 获取模板引擎中的html代码, 将其赋值到html参数中去
|
notice.innerHTML = html;
|
});
|
|
/**
|
* 查看公告详情信息的点击事件
|
**/
|
$('body').on('click', '.layuimini-notice', function () {
|
// 获取公告通知中的标题文本(由于前两条数据的标题后面存在new字样, 这里将其进行替换
|
var title = $(this).children('.layuimini-notice-title').text().replace("new", ""),
|
// 获取公告通知中的发布时间
|
noticeTime = $(this).children('.layuimini-notice-extra').text(),
|
// 获取公告通知中的通知详情
|
content = $(this).children('.layuimini-notice-content').html();
|
// 绘制公告通知详情的html页面(其中\n用于换行)
|
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #ffffff;color: #000000">\n' +
|
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px">\n' +
|
'<h3 class="text-danger" style="font-size:16px;font-weight:bolder;color:red;">' + title + '</h3></div>\n' +
|
'<div style="font-size: 15px">' + content + '</div>\n' +
|
'</div>\n';
|
// 打开公告通知页面
|
parent.layer.open({
|
// 类型为页面层
|
type: 1,
|
// 设置公告通知标题
|
title: ['系统公告' + '<span style="float: right;right: 1px;font-size: 14px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>', 'font-size:18px;'],
|
// 设置页面的宽高
|
area: ['500px', '500px'],
|
// 开启遮罩效果
|
shade: 0.3,
|
// 对应公告通知div标签的id
|
id: 'layuimini-notice',
|
// 弹出框的按钮
|
btn: ['查看', '取消'],
|
// 按钮排列为居中对齐
|
btnAlign: 'c',
|
// 窗口拖拽类型
|
moveType: 1,
|
// 页面内容为上面绘制的公告通知详情
|
content: html,
|
// 请求成功的回调函数(其中layero表示打开的弹出层页面)
|
success: function (layero) {
|
// 首先在弹出层页面中定位btn按钮
|
var btn = layero.find('.layui-layer-btn');
|
// 然后根据btn按钮继续定位第一个btn(即查看)按钮
|
btn.find('.layui-layer-btn0').attr({
|
// 设置点击按钮后跳转地址
|
href: 'https://gitee.com/zhongshaofa/layuimini',
|
// 打开方式为当前页
|
target: '_self'
|
});
|
}
|
});
|
});
|
|
});
|
</script>
|
</body>
|
</html>
|
