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