From 9accae40a24b4dd43d1e7eeafd3df2e7a5c323dc Mon Sep 17 00:00:00 2001
From: wangxy <1481820854@qq.com>
Date: Mon, 31 Mar 2025 14:50:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E4=B8=93=E9=A2=98?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8service?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/resources/templates/home/base.html   |   2 +-
 .../templates/home/special_list.html          | 302 ++++++++++++++++++
 2 files changed, 303 insertions(+), 1 deletion(-)
 create mode 100644 ruoyi-admin/src/main/resources/templates/home/special_list.html
diff --git a/ruoyi-admin/src/main/resources/templates/home/base.html b/ruoyi-admin/src/main/resources/templates/home/base.html
index a029bce..9ac863a 100644
--- a/ruoyi-admin/src/main/resources/templates/home/base.html
+++ b/ruoyi-admin/src/main/resources/templates/home/base.html
@@ -272,7 +272,7 @@
                         <div class="layui-card-header"><i class="layui-icon layui-icon-theme" style="display: inline-block;font-size: 21px;
                         font-weight: bold;border-bottom: 3px solid #0b61d3;;height: 100%;line-height: 40px;color: #0b61d3;">专题活动</i>
                             <span class="more">
-                                <a href="special_view.html" target="_blank">更多+</a>
+                                <a href="special_list.html" target="_blank">更多+</a>
                             </span>
                         </div>
                         <div class="layui-card-body" style="min-height:400px ">
diff --git a/ruoyi-admin/src/main/resources/templates/home/special_list.html b/ruoyi-admin/src/main/resources/templates/home/special_list.html
new file mode 100644
index 0000000..c5a560d
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/templates/home/special_list.html
@@ -0,0 +1,302 @@
+<!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  th:href="@{/home/base/favicon.ico}" rel="shortcut icon"/>
+    <link href="/home/lib/css/layui.css" th:href="@{/home/lib/css/layui.css}" rel="stylesheet"/>
+    <link href="/home/lib/css/elementui.css" th:href="@{/home/lib/css/elementui.css}" rel="stylesheet"/>
+    <style>
+        /* 页面整体布局 */
+        html, body {
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* 设置内容区域自动填充剩余高度 */
+        #content {
+            flex-grow: 1;
+            padding-bottom: 28px;
+        }
+
+        .layui-nav-item {
+            position: relative;
+            margin: 0 10px;
+            padding: 0 5px;
+        }
+
+
+        .time {
+            position: absolute;
+            right: 0;
+        }
+
+        .container {
+            margin: auto;
+        }
+        .main {
+            margin: 0 auto;
+            border: none !important;
+            border-radius: 0 !important;
+            min-height: auto !important;
+            padding: 1% 2.224% !important;
+            background: #fff;
+            margin-bottom: 20px !important;
+        }
+        .row {
+            display: inline-block;
+            width: 100%;
+            display: flex;
+            display: inline-block\9;
+            justify-content: space-between;
+            flex-wrap: nowrap;
+        }
+        .main-left {
+            width: 22.3%;
+        }
+        .fl {
+            float: left;
+        }
+        sidebar {
+            border: 1px solid #E1E1E1;
+            border-bottom: none;
+        }
+
+        .main-right {
+            width: 74.92%;
+            min-height: 516px;
+        }
+        .fr {
+            float: right;
+        }
+
+
+        .mt10 {
+            margin-top: 10px;
+            min-height: 565px;
+        }
+        .mt10 li{
+            border-bottom:1px solid #ccc;
+        }
+        ul.list li .date {
+            color: #999;
+            font-size: 14px;
+            float: right;
+            width: 13%;
+            text-align: right;
+        }
+
+        .common-list ul.list li {
+            line-height: 36px;
+            padding: 0;
+        }
+        ul.list li a {
+            width: 75%;
+            display: inline-block;
+            font-size: 14px;
+            vertical-align: middle;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+        }
+        a {
+            text-decoration: none;
+            color: #333;
+        }
+
+        .main-left h2 {
+            padding: 16px 0px;
+            color: #fff;
+            font-size: 18px;
+            line-height: 0.5em;
+            text-align: center;
+            background: url(/home/base/p109.png);
+            background-size: cover;
+        }
+
+        .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 {
+            display: block;
+            background: url(/home/base/p111.png) no-repeat 12%;
+            background-size: 5%;
+            padding-left: 22%;
+            font-size: 16px;
+        }
+
+        .pag {
+            margin-top: 80px;
+        }
+        .el-tree-node {
+            border-bottom: 1px solid #E1E1E1;
+        }
+        .el-tree-node__content {
+            height: 42px;
+        }
+        .el-tree-node__expand-icon {
+            color: #4774ce;
+            font-size: 22px;
+        }
+        .el-tree-node__label {
+            font-size: 18px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+        .el-tree-node__children .el-tree-node__label{
+            font-size: 16px;
+        }
+        .custom-tree-node {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            display: block;
+            font-size: 16px;
+        }
+    </style>
+</head>
+<body class="layui-bg-gray" style="">
+<div id="content">
+    <!--头部-->
+    <th:block th:include="home_head.html :: home_head"/>
+    <div class="layui-container" style="padding-top: 20px">
+        <div>
+            <blockquote class="layui-elem-quote">
+                <h2  style="color: #074488;">专题活动</h2>
+            </blockquote>
+            <br>
+            <p><i class="layui-icon layui-icon-location"></i>当前位置：<a target="_parent" href="base.html">首页</a>&nbsp;/&nbsp;<a
+                    href="special_view.html" target="_parent">专题活动</a></p>
+            <hr>
+            <br>
+            <div class="container">
+                <div class="main">
+                    <div class="row">
+                        <div class="main-left fl" id="app">
+                            <h2>
+                               专题栏目
+                            </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>
+                        </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>
+</div>
+<!--底部-->
+<script  th:src="@{/home/lib/vue.js}"></script>
+<script  th:src="@{/home/lib/elementui.js}"></script>
+<th:block th:include="home_footer :: home_footer"/>
+<script  th:src="@{/home/lib/layui.js}"></script>
+<script th:inline="javascript">
+    window.addEventListener('DOMContentLoaded', function () {
+        var currentUrl = location.href;
+        // 获取所有的<a>标签
+        var links = document.querySelectorAll('a');
+        // 遍历每个链接，并判断其href属性是否与当前URL相同
+        for (var i = 0; i < links.length; i++) {
+            if (links[i].href === currentUrl) {
+                // 添加layui-this类名到对应的父元素的class中
+                links[i].parentNode.classList.add('layui-this');
+            }
+        }
+    });
+    var app = new Vue({
+        el: '#app',
+        data(){
+            return{
+                treeData: [],
+                defaultProps: {
+                    children: 'children',
+                    label: 'columnName',
+                    id:'columnId'
+                },
+                defaultSelected:[[${columnId}]],
+                defauleExpandedKeys:[],
+            };
+        },
+        mounted(){
+            this.getTreeData();
+        },
+        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)
+                                }
+                            })
+                        }
+                    }.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>
