< div th:fragment = "home_head" >
< head >
< style >
.homePage{
color: #fff;
font-size: 23px;
display: block;text-align: center;
/*font-weight: bold;padding: 0 14px;*/
letter-spacing: 2px;
}
#hd {
position: relative;
height: 326px;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
min-width: 1690px;
margin: 0 auto;
}
#hd .bg_image1{
width:100%;
height: 326px;
}
#ltlogo {
position: absolute;
top: 43%; /* 将图像元素垂直居中 */
left: 43%; /* 将图像元素水平居中 */
height: 122px;
transform: translate(-50%, -50%);
}
#ltlogo2 {
position: absolute;
top: 43%; /* 将图像元素垂直居中 */
left: 30%; /* 将图像元素水平居中 */
height: 82px;
transform: translate(-50%, -50%);
}
#dhl {
padding-bottom: 0;
font-style: inherit;
}
.layui-nav {
display: flex;
justify-content: center;
background-color: rgba(7,68,136,1);
width: 100%;
position: absolute;
bottom: -26px;
}
.homePage .layui-nav-more{
display:none;
}
.dept .layui-nav-child {
display: none;
position: absolute;
left: -353%;
top: 65px;
transform: translate(-50%, -50%);
width: 80vw;
//line-height: 85px;
padding: 5px 0;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
border: 1px solid #eee;
background-color: rgba(255,255,255,0.89);
z-index: 100;
border-radius: 2px;
white-space: wrap;
box-sizing: border-box;
height:auto;
}
.layui-nav-item .arrow {
z-index: 999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #1e68b0;
position: absolute;
left: 44%;
display: none;
}
.layui-nav-item .arrow2 {
z-index: 999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #1e68b0;
position: absolute;
left: 44%;
display: none;
}
.special .layui-nav-child {
display: none;
position: absolute;
left: -581%;
top: 65px;
transform: translate(-50%, -50%);
width: 80vw;
max-width: 75vw;
//line-height: 85px;
padding: 5px 0;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
border: 1px solid #eee;
background-color: rgba(255,255,255,0.89);
z-index: 100;
border-radius: 2px;
box-sizing: border-box;
height:auto;
}
.childBox{
display: flex;
align-items: center;
justify-content: start;
height: 100%;
flex-wrap: wrap;
}
.childBox2{
display: flex;
align-items: center;
justify-content: start;
height: 100%;
flex-wrap: wrap;
}
.layui-elem-quote{
border-left: 5px solid #005cb1;
}
/*.childBox2 dd{*/
/* float: left;*/
/* fongt-size:18px;*/
/* text-align: center;*/
/* width:auto;*/
/* margin: 1px 9px;*/
/*}*/
/*.childBox2 dd a{*/
/* text-align: center;*/
/* padding: 0 14px;*/
/*}*/
.fd-footer-bg {
position: absolute;
top: 105%;
left: 0;
z-index: -1;
width: 100%;
height: 539px;
background: url(/home/base/icon-footer-bg.png) center no-repeat;
}
.timeDt {
position: absolute;
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #fff;
top: 5%;
left: 9%;
}
< / style >
< / head >
< div id = "hd" >
< img class = "bg_image1" th:src = "@{/home/base/bg-head7.png}" >
< div class = "timeDt" >
< span th:text = "${#dates.format(new java.util.Date().getTime(), 'yyyy年MM月dd日')}" > < / span >
< span th:text = "${#dates.format(new java.util.Date().getTime(), 'EEEE')}" > < / span >
< / div >
< img th:src = "@{/home/base/lantie4.png}" id = "ltlogo" >
< ul class = "layui-nav" id = "dhl" >
< li class = "layui-nav-item" >
< a href = "base.html" class = "homePage" > 首页< / a >
< / li >
< li class = "layui-nav-item" >
< a href = "announce_view.html" class = "homePage" > 通知公告< / a >
< / li >
< li class = "layui-nav-item" >
< a href = "work_view.html" class = "homePage" > 工作动态< / a >
< / li >
< li class = "layui-nav-item dept" >
< a href = "dept_trends_view.html" class = "homePage" > 部门动态< / a >
< dl class = "layui-nav-child" >
< div class = "childBox" >
< dd th:each = "trend,status : ${deptColumns}" >
< a th:href = "@{/dept_trends_view.html(columnId=${trend.columnId})}" style = "color:#006fc4;font-size:18px;" th:title = "${trend.columnName}" target = "_blank" >
[[${trend.columnName}]]
< / a >
< / dd >
< / div >
< / dl >
< div class = "arrow" > < / div >
< / li >
< li class = "layui-nav-item" >
< a href = "business_view.html" class = "homePage" > 检察业务< / a >
< / li >
< li class = "layui-nav-item special" >
< a href = "special_view.html" class = "homePage" > 专题活动< / a >
< dl class = "layui-nav-child" >
< div class = "childBox2" >
< dd th:each = "column,status : ${specialColumns}" >
< a th:href = "@{/special_view.html(columnId=${column.columnId})}" style = "color:#006fc4;font-size:18px;" th:title = "${column.columnName}" target = "_blank" >
[[${column.columnName}]]
< / a >
< / dd >
< / div >
< / dl >
< div class = "arrow2" > < / div >
< / li >
< form action = "" id = "search_form" class = "layui-form" style = "display:flex;margin-top:11px;margin-left:40px;" >
< label >
< input name = "title" id = "title" type = "text" placeholder = "请输入搜索内容" class = "layui-input" >
< / label >
< button class = "layui-btn" onclick = "queryList()" style = "background-color: rgb(51, 111, 184);" > 搜索< / button >
< / form >
< / ul >
< div class = "fd-footer-bg" > < / div >
< / div >
< script th:src = "@{/js/jquery.min.js?v=3.6.3}" > < / script >
< script th:src = "@{/home/lib/layui.js}" > < / script >
< script type = "text/javascript" >
function queryList(){
var title = $("#title").val();
if (title){
$('#search_form').submit(function(){
var actionStr="/search";
$("#search_form").removeAttr("action").attr("action",actionStr);
return true;
});
}else{
alert("请输入查询关键字！")
}
}
layui.use(function(){
var carousel = layui.carousel;
// 渲染 - 常规轮播
carousel.render({
elem: '#ID-carousel-demo-1',
width: 'auto',
indicator:'none',
arrow:'none',
width: '100%',
height: '326px',
});
});
var deptHover = document.querySelector('.dept')
var jiantou = document.querySelector('.arrow')
deptHover.addEventListener('mouseover', function() {
jiantou.style.display = 'block';
});
deptHover.addEventListener('mouseout', function() {
jiantou.style.display = 'none';
});
//专题箭头
var specialHover = document.querySelector('.special')
var jiantou2 = document.querySelector('.arrow2')
specialHover.addEventListener('mouseover', function() {
jiantou2.style.display = 'block';
});
specialHover.addEventListener('mouseout', function() {
jiantou2.style.display = 'none';
});
< / script >
< / div >
