<template>
|
<div class="container mx-auto px-4 py-8">
|
<!-- 面包屑导航 -->
|
<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>
|
</div>
|
<div class="flex gap-[30px]">
|
<div class="left-news-box">
|
<!-- 主标题 -->
|
<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 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 dispPolicyList" :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="item.thumbnail" alt=""
|
class="w-full h-full object-cover news-img-style">
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<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="[5, 10, 20, 30, 50]" :background="true"
|
layout="total, sizes, prev, pager, next, jumper" :total="policyList.length"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="公告" name="notices">
|
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<!-- 右侧标准动态 -->
|
<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;">
|
<span class="w-1 h-6 bg-blue-600 mr-2"></span>
|
最新动态
|
</h3>
|
<ol class="hot-news-list my-[0px] h-[498px]">
|
<swiper :direction="'vertical'" :slidesPerView="10" :spaceBetween="0" :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>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted,computed } 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(5)
|
const total = ref(100)
|
const router = useRouter();
|
// 模拟数据
|
const policyList = ref([])
|
|
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,
|
thumbnail: item.thumbnail,
|
}
|
})
|
standardNews.value = StandardDynamicsList.map(item => {
|
return {
|
id: item.id,
|
title: item.title,
|
date: item.pubdate,
|
}
|
})
|
|
}).catch(err => {
|
|
})
|
}
|
|
const handleSizeChange = (val: number) => {
|
pageSize.value = val
|
// TODO: 重新加载数据
|
}
|
|
const handleCurrentChange = (val: number) => {
|
currentPage.value = val
|
// TODO: 重新加载数据
|
}
|
|
const dispPolicyList = computed(() => {
|
const start = (currentPage.value - 1) * pageSize.value
|
const end = currentPage.value * pageSize.value
|
return policyList.value.slice(start, end)
|
})
|
|
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>
|
.policy-tabs :deep(.el-tabs__header) {
|
margin: 0;
|
border-bottom: 1px solid #e5e7eb;
|
background-color: #f1f1f1;
|
}
|
|
.policy-tabs :deep(.el-tabs__nav-wrap) {
|
padding: 0 1.5rem;
|
}
|
|
.policy-tabs :deep(.el-tabs__item) {
|
font-size: 1rem;
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.policy-tabs :deep(.el-tabs__item.is-active) {
|
font-weight: bold;
|
}
|
|
.policy-item:last-child>div {
|
border-bottom: none;
|
}
|
|
.left-news-box {
|
width: 100%;
|
position: relative;
|
|
&::before {
|
content: "";
|
width: 20%;
|
position: absolute;
|
top: 0px;
|
height: 4px;
|
background-color: #73af2d;
|
}
|
|
&::after {
|
content: "";
|
width: 80%;
|
position: absolute;
|
top: 0px;
|
left: 20%;
|
height: 4px;
|
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>
|
