@ -56,7 +56,7 @@
flex-wrap: nowrap;
}
.main-left {
width: 22.3 %;
width: 100 %;
}
.fl {
float: left;
@ -119,26 +119,26 @@
background-size: cover;
}
.sidebar li {
border-bottom: 1px solid #E1E1E1;
line-height: 42px;
}
/* .sidebar li {*/
/* border-bottom: 1px solid #E1E1E1;*/
/* line-height: 42px;*/
/* }*/
.sidebar li a.active {
color: #0055A5;
}
.sidebar li a.active {
background: url(/home/base/p110.png) no-repeat 12%;
background-size: 5%;
}
/* .sidebar li a.active {*/
/* color: #0055A5;*/
/* }*/
/* .sidebar li a.active {*/
/* background: url(/home/base/p110.png) no-repeat 12%;*/
/* background-size: 5%;*/
/* }*/
.sidebar li a {
display: block;
background: url(/home/base/p111.png) no-repeat 12%;
background-size: 5%;
padding-left: 22%;
font-size: 16px;
}
/* .sidebar li a {*/
/* display: block;*/
/* background: url(/home/base/p111.png) no-repeat 12%;*/
/* background-size: 5%;*/
/* padding-left: 22%;*/
/* font-size: 16px;*/
/* }*/
.pag {
margin-top: 80px;
@ -170,6 +170,42 @@
display: block;
font-size: 16px;
}
.imageList li {
width: 25%;
}
.imageList ul li {
position: relative;
float: left;
}
.imageList ul li a {
position: relative;
display: block;
margin: 30px 10px 0;
font-size: 16px;
overflow: hidden;
text-align: center;
}
.imageList ul li a .place {
position: relative;
display: block;
padding-top: 56.25%;
overflow: hidden;
background-color: #f4f4f4;
}
.imageList ul li a .place .pic {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
object-fit:cover;
transition:all .5s;
}
.imageList ul li:hover .pic{
transform: scale(1.1);
}
< / style >
< / head >
< body class = "layui-bg-gray" style = "" >
@ -190,38 +226,24 @@
< div class = "main" >
< div class = "row" >
< div class = "main-left fl" id = "app" >
< h2 >
< h2 style = "width: 22.3%" >
专题栏目
< / h2 >
< el-tree
ref="treeRef"
:data="treeData"
:props="defaultProps"
node-key="columnId"
:default-expanded-keys="defauleExpandedKeys"
:current-node-key="defaultSelected"
highlight-current
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
< span slot-scope = "{ node, data }" class = "custom-tree-node" v-text = "data.columnName" :title = "data.columnName" >
< / span >
< / el-tree >
< hr / >
< div class = "imageList" >
< ul >
< li th:each = "column,status : ${columnList}" >
< a th:href = "@{/special_view.html(columnId=${column.columnId})}" th:title = "${column.columnName}" target = "_blank" >
< div class = "place" >
< div class = "pic" >
< img style = "height: 100%;width: 100% ;filter: brightness(1.1);" th:src = "${column.columnUrl}" >
< / div >
< / div >
< div class = "main-right fr common-list" >
< ul class = "list mt10" th:if = "${page.list.size() > 0}" >
< tbody th:each = "special,status : ${page.list}" >
< li >
< span style = "color:#ccc;" > -< / span >
< a th:href = "@{/public_view.html(type=5,id=${special.specialId})}" th:title = "${special.specialTitle}" target = "_blank" >
[[${#strings.abbreviate(special.specialTitle,45)}]]
< span style = "margin-top: 5px;font-size: 15px;" > [[${column.columnName}]]< / span >
< / a >
< span class = "date" > [[${#dates.format(special.createTime, 'yyyy年MM月dd日')}]]< / span >
< / li >
< / tbody >
< / ul >
<!-- 分页 -->
< th:block th:include = "home_page :: home_page" / >
< / div >
< / div >
< / div >
< / div >
@ -251,52 +273,38 @@
el: '#app',
data(){
return{
treeData: [],
defaultProps: {
children: 'children',
label: 'columnName',
id:'columnId'
},
defaultSelected:[[${columnId}]],
defauleExpandedKeys:[],
listData: [[${columnList}]],
};
},
mounted(){
this.getTreeData();
console.log(this.listData)
},
methods: {
getTreeData(){
$.ajax({
type: "get",
url: "/columnTree/getTree",
success: function(res) {
if (res.code == 0) {
this.treeData = res.data;
this.$nextTick(()=>{
this.$refs.treeRef.setCurrentKey(this.defaultSelected)
var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys'));
if (expandedKeys) {
this.defauleExpandedKeys.push(expandedKeys)
// getTreeData(){
// $.ajax({
// type: "get",
// url: "/columnTree/getTree",
// success: function(res) {
// if (res.code == 0) {
// this.treeData = res.data;
// this.$nextTick(()=>{
// this.$refs.treeRef.setCurrentKey(this.defaultSelected)
// var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys'));
// if (expandedKeys) {
// this.defauleExpandedKeys.push(expandedKeys)
// }
// })
// }
// }.bind(this)
// });
// },
// handleNodeClick(data) {
// localStorage.setItem('expandedKeys', JSON.stringify(data.columnId));
// redirect("/special_view.html?columnId="+data.columnId);
// console.log(data);
// },
}
})
}
}.bind(this)
});
},
handleNodeClick(data) {
localStorage.setItem('expandedKeys', JSON.stringify(data.columnId));
redirect("/special_view.html?columnId="+data.columnId);
console.log(data);
},
}
})
function redirect(url) {
window.location.href = url;
}
function openPopup(url) {
window.open(url, '_blank');
}
< / script >
< / body >
< / html >
dshclm
2 weeks ago