From 49ab96a40dd2e95cde3e455b07f990e49bbc9cee Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期二, 22 四月 2025 17:36:46 +0800
Subject: [PATCH] 修改申报流程界面
---
src/views/PolicyInfo.vue | 182 ++++++++++++++++++++++++++-------------------
1 files changed, 104 insertions(+), 78 deletions(-)
diff --git a/src/views/PolicyInfo.vue b/src/views/PolicyInfo.vue
index 97586a9..69a315f 100644
--- a/src/views/PolicyInfo.vue
+++ b/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>
--
Gitblit v1.9.3