dshclm
3 months ago
parent
2469cbc821
commit
60c29c3f26
@ -0,0 +1,120 @@
|
|||||||
|
/* 页面整体布局 */
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置内容区域自动填充剩余高度 */
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.content-main{
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.img_title {
|
||||||
|
text-align: center;
|
||||||
|
background: #b22222;
|
||||||
|
border-radius: 6px 6px 0 0;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 0 4px 0;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.content-main-left{
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 20%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: #727272 2px 2px 6px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.content-main-right{
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 79%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
margin-left:1%;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: #727272 2px 2px 6px;
|
||||||
|
}
|
||||||
|
#back-to-top {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 12%;
|
||||||
|
right: 2%;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
#back-to-top img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
#back-to-top:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.filter-tree{
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #b22222;
|
||||||
|
border-top: none;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
}
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.el-card__body, .el-main {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.clearfix a{
|
||||||
|
font-size: 130%;
|
||||||
|
float: left;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #555656;
|
||||||
|
}
|
||||||
|
.clearfix a:hover{
|
||||||
|
color: #2b2bf1;
|
||||||
|
}
|
||||||
|
.detailContent{
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: #727272 2px 2px 6px;
|
||||||
|
}
|
||||||
|
.search_form{
|
||||||
|
width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.el-input__inner{
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,175 @@
|
|||||||
|
<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;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
#dhl .layui-nav-item .homePage{
|
||||||
|
color: rgba(255,255,255,1) !important;
|
||||||
|
}
|
||||||
|
.layui-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #0b61d3;
|
||||||
|
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/new_top_bg2.jpg}">
|
||||||
|
<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" >
|
||||||
|
<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">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,192 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>甘肃省人民检察院兰铁分院</title>
|
||||||
|
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
|
||||||
|
<link th:href="@{/css/lawBase.css}" rel="stylesheet"/>
|
||||||
|
<th:block th:include="include :: element-css" />
|
||||||
|
</head>
|
||||||
|
<body class="layui-bg-gray" style="">
|
||||||
|
<!--头部-->
|
||||||
|
<th:block th:include="home_head2 :: home_head"/>
|
||||||
|
<div class="content" id="app">
|
||||||
|
<!-- <form action="" id="search_form" class="layui-form" style="display:flex;">-->
|
||||||
|
<!-- <input name="title" id="title" type="text" width="500px" placeholder="请输入搜索内容" class="layui-input">-->
|
||||||
|
<!-- <button class="layui-btn" @click="queryList()" style="background-color: rgb(51, 111, 184);">搜索</button>-->
|
||||||
|
<!-- </form>-->
|
||||||
|
<div class="search_form" >
|
||||||
|
<el-input v-model="searchText" :clearable="true" @clear='queryList' placeholder="请输入内容"></el-input>
|
||||||
|
<el-button type="primary" @click="queryList">搜索</el-button>
|
||||||
|
</div>
|
||||||
|
<div id="back-to-top" onclick="scrollToTop()">
|
||||||
|
<img th:src="@{/home/base/fanhui.png}" alt="返回顶部">
|
||||||
|
</div>
|
||||||
|
<div class="content-main">
|
||||||
|
<div class="content-main-left">
|
||||||
|
<p class="img_title">法规分类</p>
|
||||||
|
<el-tree
|
||||||
|
class="filter-tree"
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="columnId"
|
||||||
|
default-expand-all
|
||||||
|
ref="tree"
|
||||||
|
:highlight-current="true"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
@node-click="getRightContent"
|
||||||
|
>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
<div class="content-main-right">
|
||||||
|
<h3>{{contentTitle}}</h3>
|
||||||
|
<hr style="border-width: 5px;border-color: #b22222" />
|
||||||
|
<el-card class="box-card" v-for="item in rightContentList">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<a href="#" @click="openPublicView(item.specialId)">{{item.specialTitle}}</a>
|
||||||
|
</div>
|
||||||
|
<div class="text item">
|
||||||
|
{{filteredContent(item.specialContent)}}
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<div class="blockPage">
|
||||||
|
<el-pagination
|
||||||
|
:current-page="page.PageNum"
|
||||||
|
:page-sizes="[5 , 10, 20, 50 , 100]"
|
||||||
|
:page-size="page.pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next"
|
||||||
|
:total="page.total"
|
||||||
|
@size-change="handlePageSizeChange"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="home_footer :: home_footer"/>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: element-js" />
|
||||||
|
<script type="text/javascript" th:inline="javascript">
|
||||||
|
//返回顶部
|
||||||
|
window.onscroll = function() {scrollFunction()};
|
||||||
|
function scrollFunction() {
|
||||||
|
var backToTopBtn = document.getElementById("back-to-top");
|
||||||
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||||
|
backToTopBtn.style.display = "block";
|
||||||
|
} else {
|
||||||
|
backToTopBtn.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function scrollToTop() {
|
||||||
|
window.scrollTo({
|
||||||
|
top:0,
|
||||||
|
behavior:"smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!--左侧树部分-->
|
||||||
|
<script>
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
filterText: '',
|
||||||
|
treeData: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'columnName',
|
||||||
|
id: 'columnId'
|
||||||
|
},
|
||||||
|
contentTitle:'全部数据',
|
||||||
|
rightContentList:[],
|
||||||
|
page: {
|
||||||
|
pageSize: 5,
|
||||||
|
PageNum: 1,
|
||||||
|
total: 0,
|
||||||
|
},
|
||||||
|
searchText:'',
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree.filter(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getInitTree()
|
||||||
|
this.getRightContent()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
filteredContent(value){
|
||||||
|
let parser = new DOMParser();
|
||||||
|
let doc = parser.parseFromString(value, 'text/html');
|
||||||
|
return this.getLastTwoSentences(doc.body.textContent);
|
||||||
|
},
|
||||||
|
getLastTwoSentences(article) {
|
||||||
|
let sentences = article.split('。');
|
||||||
|
if (sentences.length < 2) {
|
||||||
|
return article;
|
||||||
|
}
|
||||||
|
let lastTwoSentences = sentences.slice(-2).join('。');
|
||||||
|
return lastTwoSentences + '。';
|
||||||
|
},
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.label.indexOf(value) !== -1;
|
||||||
|
},
|
||||||
|
getInitTree(){
|
||||||
|
axios.get('/law/getTree').then(res => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.treeData = res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getRightContent(data) {
|
||||||
|
let url = '/law/special';
|
||||||
|
let params = {
|
||||||
|
pageSize: this.page.pageSize,
|
||||||
|
pageNum: this.page.PageNum,
|
||||||
|
specialTitle:this.searchText
|
||||||
|
};
|
||||||
|
const handleResponse = (res) => {
|
||||||
|
if (res.data.code == 0) {
|
||||||
|
this.rightContentList = res.data.data.list;
|
||||||
|
if (res.data.data.total) {
|
||||||
|
this.page.total = res.data.data.total;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!data) {
|
||||||
|
axios.get(url, { params }).then(handleResponse);
|
||||||
|
} else {
|
||||||
|
params.pageNum = 1;
|
||||||
|
params.pageSize = 5;
|
||||||
|
this.contentTitle = data.columnName;
|
||||||
|
if (data.columnGrade!== '1') {
|
||||||
|
params.columnId = data.columnId;
|
||||||
|
} else {
|
||||||
|
delete params.columnId;
|
||||||
|
}
|
||||||
|
axios.get(url, { params }).then(handleResponse);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openPublicView(id){
|
||||||
|
window.open('/publicView?specialId='+id)
|
||||||
|
},
|
||||||
|
handlePageChange(pageNum) {
|
||||||
|
this.page.PageNum = pageNum;
|
||||||
|
this.getRightContent();
|
||||||
|
},
|
||||||
|
handlePageSizeChange(pageSize) {
|
||||||
|
this.page.pageSize = pageSize;
|
||||||
|
this.page.PageNum = 1;
|
||||||
|
this.getRightContent();
|
||||||
|
},
|
||||||
|
queryList(){
|
||||||
|
this.getRightContent(undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>甘肃省人民检察院兰铁分院</title>
|
||||||
|
<link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
|
||||||
|
<link th:href="@{/css/lawBase.css}" rel="stylesheet"/>
|
||||||
|
<th:block th:include="include :: element-css" />
|
||||||
|
</head>
|
||||||
|
<body class="layui-bg-gray" style="">
|
||||||
|
<!--头部-->
|
||||||
|
<th:block th:include="home_head2 :: home_head"/>
|
||||||
|
<div id="content">
|
||||||
|
<div id="back-to-top" onclick="scrollToTop()">
|
||||||
|
<img th:src="@{/home/base/fanhui.png}" alt="返回顶部">
|
||||||
|
</div>
|
||||||
|
<div class="content-main">
|
||||||
|
<div class="detailContent" id="detailContent" th:utext="${sysSpecial.specialContent}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="home_footer :: home_footer"/>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: element-js" />
|
||||||
|
<script type="text/javascript" th:inline="javascript">
|
||||||
|
//返回顶部
|
||||||
|
window.onscroll = function() {scrollFunction()};
|
||||||
|
function scrollFunction() {
|
||||||
|
var backToTopBtn = document.getElementById("back-to-top");
|
||||||
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||||
|
backToTopBtn.style.display = "block";
|
||||||
|
} else {
|
||||||
|
backToTopBtn.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function scrollToTop() {
|
||||||
|
window.scrollTo({
|
||||||
|
top:0,
|
||||||
|
behavior:"smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue