< div th:fragment = "home_head" >
< head >
< style >
.homePage{
color: #fff;
font-size: 1.3vw;
display: block;text-align: center;
/*font-weight: bold;padding: 0 14px;*/
letter-spacing: 2px;
}
#hd {
position: relative;
//background-image: url(/home/base/bg-head2.png);
//background-position-y:56%;
height: 326px;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
#hd .bg_image1{
width:100%;
height:100%;
}
#ltlogo {
position: absolute;
top: 43%; /* 将图像元素垂直居中 */
left: 30%; /* 将图像元素水平居中 */
height: 82px;
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 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
background-color: rgba(7,68,136,1);
}
.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;
//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;
}
/*.childBox2 dd{*/
/* float: left;*/
/* fongt-size:18px;*/
/* text-align: center;*/
/* width:auto;*/
/* margin: 1px 9px;*/
/*}*/
/*.childBox2 dd a{*/
/* text-align: center;*/
/* padding: 0 14px;*/
/*}*/
< / style >
< / head >
< div id = "hd" >
< div class = "layui-carousel" id = "ID-carousel-demo-1" style = "width: 100%;height: 326px;" >
< div carousel-item >
< div >
< img class = "bg_image1" th:src = "@{/home/base/bg-head5.png}" >
< / div >
< / div >
< / div >
<!-- <img class="bg_image1" th:src="@{/home/base/bg - head3.png}"> -->
< img th:src = "@{/home/base/lantie3.png}" id = "ltlogo" >
<!-- <div style=" position: absolute; -->
<!-- font - size: 52px; -->
<!-- font - weight: 900; -->
<!-- color: white; -->
<!-- top: 33%; -->
<!-- left: 5%; -->
<!-- width: 77vw; -->
<!-- height: 105px; -->
<!-- white - space: nowrap; -->
<!-- overflow: hidden; -->
<!-- text - overflow: ellipsis;"> -->
<!-- <img th:src="@{/home/base/logo.png}" style="width: 8%;" alt=""> -->
<!-- <span>甘肃省人民检察院兰州铁路运输分院</span><br> -->
<!-- <span style="font - size: 19.5px; -->
<!-- position: absolute; -->
<!-- left: 10%; -->
<!-- top: 74%;">Lanzhou Railway Transport Branch of Gansu Provincial People's Procuratorate</span> -->
<!-- </div> -->
< 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()" > 搜索< / button >
< / form >
< / ul >
< / 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 >
