修改申报流程界面

tanghaolin

9 天以前 49ab96a40dd2e95cde3e455b07f990e49bbc9cee

 src/views/PolicyInfo.vue

@@ -10,55 +10,61 @@
        <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="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>
                                            </div>
                                            <div class="text-gray-400 text-sm text-[#797979]">
                                                发布时间：{{ item.publishTime }}
                                            </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="">
                <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>
                    <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>
                </div>
@@ -69,49 +75,49 @@

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router';
import axios from 'axios';
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 +129,11 @@
    // TODO: 重新加载数据
}

onMounted(() => {
    // TODO: 初始化加载数据
})
const toDetail = (node)=>{
    router.push({
        path:`news-detail/${node.id}`
    })
}
</script>

<style scoped>
@@ -152,10 +160,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 +173,8 @@
        height: 4px;
        background-color: #73af2d;
    }
    &::after{

    &::after {
        content: "";
        width: 80%;
        position: absolute;
@@ -173,4 +184,19 @@
        background-color: #003a8f;
    }
}
.right-title-name{
    position: relative;
    &::before{
        content: "";
        width: 4px;
        position: absolute;
        top: 0px;
        height: 80%;
        background-color: var(--theme-color);
    }
}

:deep(.el-tabs__content){
    height: 100%;
}
</style>