修改主页新闻列表

tanghaolin

7 天以前 2d1e485d56fbc736b2156347a0e6d602cd048547

 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>