提交内容

special-20250331
dshclm 5 days ago
parent f708588778
commit 33f9cce7d1

@ -56,7 +56,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.main-left { .main-left {
width: 22.3%; width: 100%;
} }
.fl { .fl {
float: left; float: left;
@ -119,26 +119,26 @@
background-size: cover; background-size: cover;
} }
.sidebar li { /*.sidebar li {*/
border-bottom: 1px solid #E1E1E1; /* border-bottom: 1px solid #E1E1E1;*/
line-height: 42px; /* line-height: 42px;*/
} /*}*/
.sidebar li a.active { /*.sidebar li a.active {*/
color: #0055A5; /* color: #0055A5;*/
} /*}*/
.sidebar li a.active { /*.sidebar li a.active {*/
background: url(/home/base/p110.png) no-repeat 12%; /* background: url(/home/base/p110.png) no-repeat 12%;*/
background-size: 5%; /* background-size: 5%;*/
} /*}*/
.sidebar li a { /*.sidebar li a {*/
display: block; /* display: block;*/
background: url(/home/base/p111.png) no-repeat 12%; /* background: url(/home/base/p111.png) no-repeat 12%;*/
background-size: 5%; /* background-size: 5%;*/
padding-left: 22%; /* padding-left: 22%;*/
font-size: 16px; /* font-size: 16px;*/
} /*}*/
.pag { .pag {
margin-top: 80px; margin-top: 80px;
@ -170,6 +170,42 @@
display: block; display: block;
font-size: 16px; 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> </style>
</head> </head>
<body class="layui-bg-gray" style=""> <body class="layui-bg-gray" style="">
@ -190,38 +226,24 @@
<div class="main"> <div class="main">
<div class="row"> <div class="row">
<div class="main-left fl" id="app"> <div class="main-left fl" id="app">
<h2> <h2 style="width: 22.3%">
专题栏目 专题栏目
</h2> </h2>
<el-tree <hr/>
ref="treeRef" <div class="imageList">
:data="treeData" <ul>
:props="defaultProps" <li th:each="column,status : ${columnList}">
node-key="columnId" <a th:href="@{/special_view.html(columnId=${column.columnId})}" th:title="${column.columnName}" target="_blank">
:default-expanded-keys="defauleExpandedKeys" <div class="place">
:current-node-key="defaultSelected" <div class="pic">
highlight-current <img style="height: 100%;width: 100% ;filter: brightness(1.1);" th:src="${column.columnUrl}">
:expand-on-click-node="false" </div>
@node-click="handleNodeClick" </div>
> <span style="margin-top: 5px;font-size: 15px;">[[${column.columnName}]]</span >
<span slot-scope="{ node, data }" class="custom-tree-node" v-text="data.columnName" :title="data.columnName"> </a>
</span> </li>
</el-tree> </ul>
</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)}]]
</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>
</div> </div>
@ -251,52 +273,38 @@
el: '#app', el: '#app',
data(){ data(){
return{ return{
treeData: [], listData: [[${columnList}]],
defaultProps: {
children: 'children',
label: 'columnName',
id:'columnId'
},
defaultSelected:[[${columnId}]],
defauleExpandedKeys:[],
}; };
}, },
mounted(){ mounted(){
this.getTreeData(); console.log(this.listData)
}, },
methods: { methods: {
getTreeData(){ // getTreeData(){
$.ajax({ // $.ajax({
type: "get", // type: "get",
url: "/columnTree/getTree", // url: "/columnTree/getTree",
success: function(res) { // success: function(res) {
if (res.code == 0) { // if (res.code == 0) {
this.treeData = res.data; // this.treeData = res.data;
this.$nextTick(()=>{ // this.$nextTick(()=>{
this.$refs.treeRef.setCurrentKey(this.defaultSelected) // this.$refs.treeRef.setCurrentKey(this.defaultSelected)
var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys')); // var expandedKeys = JSON.parse(localStorage.getItem('expandedKeys'));
if (expandedKeys) { // if (expandedKeys) {
this.defauleExpandedKeys.push(expandedKeys) // this.defauleExpandedKeys.push(expandedKeys)
} // }
}) // })
} // }
}.bind(this) // }.bind(this)
}); // });
}, // },
handleNodeClick(data) { // handleNodeClick(data) {
localStorage.setItem('expandedKeys', JSON.stringify(data.columnId)); // localStorage.setItem('expandedKeys', JSON.stringify(data.columnId));
redirect("/special_view.html?columnId="+data.columnId); // redirect("/special_view.html?columnId="+data.columnId);
console.log(data); // console.log(data);
}, // },
} }
}) })
function redirect(url) {
window.location.href = url;
}
function openPopup(url) {
window.open(url, '_blank');
}
</script> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save