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 | 172 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 126 insertions(+), 46 deletions(-)
diff --git a/src/views/PolicyInfo.vue b/src/views/PolicyInfo.vue
index 69a315f..de566cf 100644
--- a/src/views/PolicyInfo.vue
+++ b/src/views/PolicyInfo.vue
@@ -4,7 +4,7 @@
<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]">
@@ -15,22 +15,32 @@
<!-- 鏍囩椤� -->
<div class="bg-white rounded-lg shadow" style="height: calc(100% - 50px);">
<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;">
+ <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="flex flex-col justify-between items-start py-4 border-b border-gray-200 hover:bg-gray-50" style="border-bottom: 1px solid #f1f1f1;">
- <div class="flex-1">
- <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>
+ 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="text-gray-400 text-sm text-[#797979]">
- 鍙戝竷鏃堕棿锛歿{ item.publishTime }}
+ <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>
@@ -47,26 +57,43 @@
</div>
</div>
</el-tab-pane>
- <el-tab-pane label="鍏憡閫氱煡" name="notices">
+ <el-tab-pane label="鍏憡" name="notices">
</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 right-title-name" style="border-bottom: 2px solid #003a8f;margin-bottom: 6px; padding-bottom: 5px;">
+ <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 my-[0px]">
- <li v-for="(news, index) in standardNews" @click="toDetail(news)" :key="index" class="text-sm"
- style="border-bottom: 1px dashed; border-color: #d1d1d1; padding: 10px 0;">
- <a href="#" class="text-[18px] text-[#646465] hover:text-blue-600">{{ news.title }}</a>
- <div class="text-gray-400 mt-1 text-[14px] text-[#646465]">鍙戝竷鏃堕棿锛歿{ news.date }}</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>
@@ -77,44 +104,51 @@
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([ ])
+const policyList = ref([])
const standardNews = ref([])
-onMounted(()=>{
+onMounted(() => {
initNewsList()
})
// 鍒濆鍖栨柊闂诲垪琛ㄦ暟鎹�
-const initNewsList=()=>{
+const initNewsList = () => {
axios({
- url:"/static/Data/newsData/list.json",
- method:"get"
- }).then(res=>{
+ url: "static/Data/newsData/list.json",
+ method: "get"
+ }).then(res => {
const result = res.data
- const {LegalRelatedList,StandardDynamicsList} = result
+ const { LegalRelatedList, StandardDynamicsList } = result
- policyList.value = LegalRelatedList.map(item=>{
+ policyList.value = LegalRelatedList.map(item => {
return {
- id:item.id,
- title:item.title,
- description:item.description,
- publishTime:item.pubdate
+ id: item.id,
+ title: item.title,
+ description: item.description,
+ publishTime: item.pubdate
}
})
- standardNews.value = StandardDynamicsList.map(item=>{
+ standardNews.value = StandardDynamicsList.map(item => {
return {
- id:item.id,
- title:item.title,
- date:item.pubdate,
+ id: item.id,
+ title: item.title,
+ date: item.pubdate,
}
})
- }).catch(err=>{
+ }).catch(err => {
})
}
@@ -129,10 +163,23 @@
// TODO: 閲嶆柊鍔犺浇鏁版嵁
}
-const toDetail = (node)=>{
+const toDetail = (node) => {
router.push({
- path:`news-detail/${node.id}`
+ 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>
@@ -184,9 +231,39 @@
background-color: #003a8f;
}
}
-.right-title-name{
+
+.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{
+
+ &::before {
content: "";
width: 4px;
position: absolute;
@@ -195,8 +272,11 @@
background-color: var(--theme-color);
}
}
-
-:deep(.el-tabs__content){
+.mySwiper {
+ width: 100%;
+ height: 100%;
+}
+:deep(.el-tabs__content) {
height: 100%;
}
</style>
--
Gitblit v1.9.3