You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
8.2 KiB
235 lines
8.2 KiB
<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;
|
|
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;*/
|
|
/*}*/
|
|
</style>
|
|
</head>
|
|
<div id="hd">
|
|
<img class="bg_image1" th:src="@{/home/base/bg-head7.png}">
|
|
<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>
|
|
<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>
|