From 2d1e485d56fbc736b2156347a0e6d602cd048547 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 23 四月 2025 17:42:58 +0800
Subject: [PATCH] 修改主页新闻列表
---
src/views/PolicyInfo.vue | 268 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 187 insertions(+), 81 deletions(-)
diff --git a/src/views/PolicyInfo.vue b/src/views/PolicyInfo.vue
index 97586a9..de566cf 100644
--- a/src/views/PolicyInfo.vue
+++ b/src/views/PolicyInfo.vue
@@ -4,63 +4,96 @@
<div class="mb-6 text-sm">
<el-breadcrumb separator=">" class="text-gray-600">
<el-breadcrumb-item :to="{ path: '/' }">棣栭〉</el-breadcrumb-item>
- <el-breadcrumb-item>鏀跨瓥璧勮</el-breadcrumb-item>
+ <el-breadcrumb-item >鏀跨瓥璧勮</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="flex gap-[30px]">
<div class="left-news-box">
<!-- 涓绘爣棰� -->
- <h1 class="text-2xl font-bold my-[10px]">鏀跨瓥璧勮</h1>
+ <h1 class="text-2xl font-bold my-[10px]" style="margin-top:10px;">鏀跨瓥璧勮</h1>
<!-- 鏍囩椤� -->
<div class="bg-white rounded-lg shadow" style="height: calc(100% - 50px);">
- <el-tabs v-model="activeTab" class="policy-tabs">
- <el-tab-pane label="鐩稿叧娉曞緥" name="laws"></el-tab-pane>
- <el-tab-pane label="鍏憡閫氱煡" name="notices"></el-tab-pane>
- </el-tabs>
-
- <!-- 鍒楄〃鍐呭 -->
- <div class="p-6">
- <div v-for="(item, index) in policyList" :key="index" class="policy-item">
- <div
- class="flex justify-between items-start py-4 border-b border-gray-200 hover:bg-gray-50">
- <div class="flex-1">
- <a href="#" class="text-blue-600 hover:text-blue-800 text-lg mb-2 block">{{
- item.title
- }}</a>
- <p class="text-gray-500 text-sm">{{ item.description }}</p>
+ <el-tabs v-model="activeTab" class="policy-tabs h-full">
+ <el-tab-pane label="鎺ㄨ崘" name="laws" class="h-full">
+ <div class="flex flex-col w-full h-full"
+ style="justify-content: center; align-items: center;">
+ <!-- 鍒楄〃鍐呭 -->
+ <div class="w-full px-6 flex-1 h-full" style="box-sizing: border-box;">
+ <div v-for="(item, index) in policyList" :key="index" class="policy-item">
+ <div @click="toDetail(item)"
+ class="h-[140px] flex justify-between items-start py-4 border-b border-gray-200 hover:bg-gray-50 gap-[20px]"
+ style="border-bottom: 1px solid #f1f1f1;">
+ <div class="h-full flex flex-col flex-1 justify-between">
+ <div class="">
+ <a
+ class="text-blue-600 hover:text-blue-800 text-lg mb-2 block text-[20px] text-[#0d0d0d]">{{
+ item.title
+ }}</a>
+ <p class="text-gray-500 text-[16px] text-[#797979]">{{
+ item.description
+ }}</p>
+ </div>
+ <div class="text-gray-400 text-sm text-[#797979]">
+ 鍙戝竷鏃堕棿锛歿{ item.publishTime }}
+ </div>
+ </div>
+ <div class="w-[155px] h-[140px]">
+ <img src="/static/Data/newsData/img/preview_1.png" alt=""
+ class="w-full h-full object-cover news-img-style">
+ </div>
+ </div>
+ </div>
</div>
- <div class="text-gray-400 text-sm ml-4">
- 鍙戝竷鏃堕棿锛歿{ item.publishTime }}
+
+ <!-- 鍒嗛〉 -->
+ <div class="flex items-center justify-center p-4 border-t w-full h-[64px]">
+ <div class="flex items-center">
+ <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
+ :page-sizes="[20, 30, 50]" :background="true"
+ layout="total, sizes, prev, pager, next, jumper" :total="policyList.length"
+ @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+ </div>
</div>
</div>
- </div>
- </div>
+ </el-tab-pane>
+ <el-tab-pane label="鍏憡" name="notices">
- <!-- 鍒嗛〉 -->
- <div class="flex items-center justify-between p-4 border-t">
- <div class="flex items-center">
- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
- :page-sizes="[20, 30, 50]" :background="true" layout="sizes, prev, pager, next, jumper"
- :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
- </div>
- </div>
+ </el-tab-pane>
+ </el-tabs>
</div>
</div>
<!-- 鍙充晶鏍囧噯鍔ㄦ�� -->
- <div
- class="">
+ <div class="w-[35%]">
<div class="p-4" style="border: 1px solid #d1d1d1; box-sizing: border-box;">
- <h3 class="text-lg font-bold mb-4 flex items-center">
+ <h3 class="text-lg font-bold mb-4 flex items-center right-title-name"
+ style="border-bottom: 2px solid #003a8f;margin-bottom: 6px; padding-bottom: 5px;">
<span class="w-1 h-6 bg-blue-600 mr-2"></span>
- 鏍囧噯鍔ㄦ��
+ 鏈�鏂板姩鎬�
</h3>
- <ul class="space-y-4">
- <li v-for="(news, index) in standardNews" :key="index" class="text-sm" style="border-bottom: 1px dashed; border-color: #d1d1d1; padding: 10px 0;">
- <a href="#" class="hover:text-blue-600">{{ news.title }}</a>
- <div class="text-gray-400 mt-1">鍙戝竷鏃堕棿锛歿{ news.publishTime }}</div>
- </li>
- </ul>
+ <ol class="hot-news-list my-[0px] h-[498px]">
+ <swiper
+ :direction="'vertical'"
+ :slidesPerView="10"
+ :spaceBetween="0"
+ :loop="true"
+ :autoplay="{
+ delay: 3500,
+ disableOnInteraction: false,
+ pauseOnMouseEnter: true,
+ }" :modules="SwiperModule" class="mySwiper">
+ <swiper-slide v-for="(news, index) in standardNews" :key="index" style="height: auto;">
+ <li @click="toDetail(news)" :key="index"
+ class="text-sm"
+ style="border-bottom: 1px dashed; border-color: #d1d1d1; padding: 10px 0;">
+ <a class="news-title flex items-center justify-start gap-[17px] text-[18px] text-[#646465] hover:text-blue-600">
+ <span :style="newsNumberStyle(index + 1)">{{ index + 1 }}</span>
+ <p :title="news.title">{{ news.title }}</p>
+ </a>
+ </li>
+ </swiper-slide>
+ </swiper>
+ </ol>
</div>
</div>
</div>
@@ -69,49 +102,56 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, EffectFade,Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/effect-fade';
+import 'swiper/css/pagination';
+const SwiperModule = [Autoplay, EffectFade,Pagination];
const activeTab = ref('laws')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(100)
-
+const router = useRouter();
// 妯℃嫙鏁版嵁
-const policyList = ref([
- {
- title: '涓婃捣甯備汉姘戞斂搴滃叧浜庡嵃鍙戙�婁笂娴峰競鎺ㄥ姩澶ц妯¤澶囨洿鏂板拰娑堣垂鍝佷互鏃ф崲鏂拌鍔ㄨ鍒掞紙2024-2027骞达級銆嬬殑閫氱煡',
- description: '鍚勫尯浜烘皯鏀垮簻锛屽競鏀垮簻鍚勫銆佸姙銆佸眬锛屽悇鏈夊叧鍗曚綅锛氱幇灏嗐�婁笂娴峰競鎺ㄥ姩澶ц妯¤澶囨洿鏂板拰娑堣垂鍝佷互鏃ф崲鏂拌鍔ㄨ鍒掞紙2024-2027骞达級銆嬪嵃鍙戠粰浣犱滑锛岃璁ょ湡璐交鎵ц...',
- publishTime: '2024-04-23'
- },
- // 娣诲姞鏇村鏁版嵁椤�...
-])
+const policyList = ref([])
-const standardNews = ref([
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- },
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- },
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- },
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- },
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- },
- {
- title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
- publishTime: '2025-02-07'
- }
- // 娣诲姞鏇村鏁版嵁椤�...
-])
+const standardNews = ref([])
+
+onMounted(() => {
+ initNewsList()
+})
+// 鍒濆鍖栨柊闂诲垪琛ㄦ暟鎹�
+const initNewsList = () => {
+ axios({
+ url: "static/Data/newsData/list.json",
+ method: "get"
+ }).then(res => {
+ const result = res.data
+ const { LegalRelatedList, StandardDynamicsList } = result
+
+ policyList.value = LegalRelatedList.map(item => {
+ return {
+ id: item.id,
+ title: item.title,
+ description: item.description,
+ publishTime: item.pubdate
+ }
+ })
+ standardNews.value = StandardDynamicsList.map(item => {
+ return {
+ id: item.id,
+ title: item.title,
+ date: item.pubdate,
+ }
+ })
+ }).catch(err => {
+
+ })
+}
const handleSizeChange = (val: number) => {
pageSize.value = val
@@ -123,9 +163,24 @@
// TODO: 閲嶆柊鍔犺浇鏁版嵁
}
-onMounted(() => {
- // TODO: 鍒濆鍖栧姞杞芥暟鎹�
-})
+const toDetail = (node) => {
+ router.push({
+ path: `news-detail/${node.id}`
+ })
+}
+const newsNumberStyle = (index) => {
+ if (index == 1) {
+ return 'color:#ff403a;font-family: PingFang SC; font-weight: 500; font-size: 16px;'
+ }
+ if (index == 2) {
+ return 'color:#ff9500;font-family: PingFang SC; font-weight: 500; font-size: 16px;'
+ }
+ if (index == 3) {
+ return 'color:#fc0;font-family: PingFang SC; font-weight: 500; font-size: 16px;'
+ }
+
+ return 'color:#a1a3a6;font-family: PingFang SC; font-weight: 500; font-size: 16px;'
+}
</script>
<style scoped>
@@ -152,10 +207,12 @@
.policy-item:last-child>div {
border-bottom: none;
}
-.left-news-box{
+
+.left-news-box {
width: 100%;
position: relative;
- &::before{
+
+ &::before {
content: "";
width: 20%;
position: absolute;
@@ -163,7 +220,8 @@
height: 4px;
background-color: #73af2d;
}
- &::after{
+
+ &::after {
content: "";
width: 80%;
position: absolute;
@@ -173,4 +231,52 @@
background-color: #003a8f;
}
}
+
+.news-img-style {
+ transition: all .3s ease-in-out;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+}
+
+.hot-news-list {
+ padding: 0;
+
+ li {
+ list-style: none;
+ }
+
+ .news-title {
+ cursor: pointer;
+ p {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 16px;
+ }
+ }
+}
+
+.right-title-name {
+ position: relative;
+
+ &::before {
+ content: "";
+ width: 4px;
+ position: absolute;
+ top: 0px;
+ height: 80%;
+ background-color: var(--theme-color);
+ }
+}
+.mySwiper {
+ width: 100%;
+ height: 100%;
+}
+:deep(.el-tabs__content) {
+ height: 100%;
+}
</style>
--
Gitblit v1.9.3