修改主页新闻列表

tanghaolin

7 天以前 2d1e485d56fbc736b2156347a0e6d602cd048547

 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>