特殊列表特殊详情页面完成

.nuxt/components.d.ts

@@ -5,7 +5,6 @@ interface _GlobalComponents {
       'AdvertisingBuyAD': typeof import("../components/advertising/BuyAD.vue")['default']
     'AdvertisingFoot': typeof import("../components/advertising/Foot.vue")['default']
     'AdvertisingHead': typeof import("../components/advertising/Head.vue")['default']
-    'AdvertisingOrderList copy': typeof import("../components/advertising/OrderList copy.vue")['default']
     'AdvertisingOrderList': typeof import("../components/advertising/OrderList.vue")['default']
     'DetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
     'DetailHotNews2': typeof import("../components/detail/HotNews2.vue")['default']
@@ -56,7 +55,6 @@ interface _GlobalComponents {
       'LazyAdvertisingBuyAD': typeof import("../components/advertising/BuyAD.vue")['default']
     'LazyAdvertisingFoot': typeof import("../components/advertising/Foot.vue")['default']
     'LazyAdvertisingHead': typeof import("../components/advertising/Head.vue")['default']
-    'LazyAdvertisingOrderList copy': typeof import("../components/advertising/OrderList copy.vue")['default']
     'LazyAdvertisingOrderList': typeof import("../components/advertising/OrderList.vue")['default']
     'LazyDetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
     'LazyDetailHotNews2': typeof import("../components/detail/HotNews2.vue")['default']
@@ -113,7 +111,6 @@ declare module 'vue' {
 export const AdvertisingBuyAD: typeof import("../components/advertising/BuyAD.vue")['default']
 export const AdvertisingFoot: typeof import("../components/advertising/Foot.vue")['default']
 export const AdvertisingHead: typeof import("../components/advertising/Head.vue")['default']
-export const AdvertisingOrderList copy: typeof import("../components/advertising/OrderList copy.vue")['default']
 export const AdvertisingOrderList: typeof import("../components/advertising/OrderList.vue")['default']
 export const DetailHotNews: typeof import("../components/detail/HotNews.vue")['default']
 export const DetailHotNews2: typeof import("../components/detail/HotNews2.vue")['default']
@@ -164,7 +161,6 @@ export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/
 export const LazyAdvertisingBuyAD: typeof import("../components/advertising/BuyAD.vue")['default']
 export const LazyAdvertisingFoot: typeof import("../components/advertising/Foot.vue")['default']
 export const LazyAdvertisingHead: typeof import("../components/advertising/Head.vue")['default']
-export const LazyAdvertisingOrderList copy: typeof import("../components/advertising/OrderList copy.vue")['default']
 export const LazyAdvertisingOrderList: typeof import("../components/advertising/OrderList.vue")['default']
 export const LazyDetailHotNews: typeof import("../components/detail/HotNews.vue")['default']
 export const LazyDetailHotNews2: typeof import("../components/detail/HotNews2.vue")['default']

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1739319442085}
+{"id":"dev","timestamp":1739320826166}

.nuxt/manifest/meta/dev.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1739319442085,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
+{"id":"dev","timestamp":1739320826166,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2025-02-12T00:17:25.967Z",
+  "date": "2025-02-12T00:40:28.727Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.10.4"
   },
   "dev": {
-    "pid": 21640,
+    "pid": 13612,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-21640-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-13612-1.sock"
     }
   }
 }

.nuxt/nuxt.d.ts

@@ -1,6 +1,6 @@
 // Generated by nuxi
-/// <reference types="@nuxt/telemetry" />
 /// <reference types="@nuxt/devtools" />
+/// <reference types="@nuxt/telemetry" />
 /// <reference path="types/builder-env.d.ts" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />

assets/css/font.css

@@ -24,9 +24,10 @@
 
 .icon-youjiantou:before {
     content: "\e624";
+    vertical-align: -2px;
 }
 
 .icon-zhijiao-triangle:before {
     content: "\e600";
     color: #e1e1e1;
-}
+}

components/advertising/OrderList copy.vue

@@ -1,822 +0,0 @@
-<template>
-    <!-- 工单列表 -->
-    <div class="orderList">
-        <div class="inner">
-            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
-                <el-tab-pane :label="`全部 ( ${allOrderTotal ? allOrderTotal : 0} )`" name="">
-                    <!-- 工单列表 -->
-                    <!-- <NuxtLink to="/advertising/adDetail"> -->
-                    <div class="order" v-for="item in allOrder" :key="item.id">
-                        <!-- 工单头部 -->
-                        <div class="title">
-                            <span v-show="item.status == 6" :class="item.status == 6 ? 'orangeStatus' : 'grayStatus'">{{
-                                order[item.status] }}</span>
-                            <span v-show="item.status == 1" :class="item.status == 1 ? 'greenStatus' : 'grayStatus'">{{
-                                order[item.status] }}</span>
-                            <span v-show="item.status == 7" :class="item.status == 7 ? 'greenStatus' : 'grayStatus'">{{
-                                order[item.status] }}</span>
-                            <span v-show="item.status != 6 && item.status != 1 && item.status != 7"
-                                :class="item.status != 6 && item.status != 1 && item.status != 7 ? 'grayStatus' : ''">{{
-                                    order[item.status]
-                                }}</span>
-                            <span class="code">
-                                工单编号:
-                                <span>{{ item.order_num }}</span>
-                            </span>
-                            <span class="createTime right">{{ item.created_at }}</span>
-                        </div>
-                        <!-- 工单内容 -->
-                        <div class="text">
-                            <!-- 开始时间和结束时间 -->
-                            <div class="time">
-                                <p>
-                                    开始时间:
-                                    <span>{{ item.sttime }}</span>
-                                </p>
-                                <p>
-                                    结束时间:
-                                    <span>{{ item.edtime }}</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告的天数与个数 -->
-                            <div class="num">
-                                <p>
-                                    天数:
-                                    <span>{{ item.days }}天</span>
-                                </p>
-                                <p>
-                                    广告个数:
-                                    <span>{{ item.num }}个</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告状态及总价格 -->
-                            <div class="state">
-                                <p>
-                                    广告状态:
-                                    <span>{{ order_ad[item.ad_status] }}</span>
-                                </p>
-                                <p>
-                                    <span class="price">{{ item.price }}</span>
-                                    元
-                                </p>
-                            </div>
-
-                            <!-- 按钮 -->
-                            <div class="btn">
-                                <button @click="goCancel(item)" v-if="item.status == 6">取消工单</button>
-                                <button @click="goAgain" v-else>再次申请</button>
-                                <!-- <button @click="goCancel(item)">{{ item.status == 6 ? '取消工单' : '再次申请' }}</button> -->
-                                <!-- &days=${item.days}&status=${item.status}&ad_status=${item.ad_status} -->
-                                <!-- <NuxtLink
-                                    :to="`/advertising/adDetail?id=${item.id}`">
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-
-                                <!-- <NuxtLink
-                                :to="{ path: '/advertising/adDetail', query: { id: item.id } }"
-                                    >
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-                                <!-- <NuxtLink :to="`/advertising/${item.id}`">
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-
-                                <button @click="goDetail(item)">查看详情</button>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- </NuxtLink> -->
-
-                    <div class="adEmpty" v-show="!allOrder">
-                        <img src="../../static/topic/Task_empty.png" alt="">
-                        <span>暂无提交的广告工单~</span>
-                    </div>
-
-                    <!-- 分页 -->
-                    <div class="paginationBox" v-show="allOrder">
-                        <HomePagination @sendData="handleData" :total="allOrderTotal"></HomePagination>
-                    </div>
-                </el-tab-pane>
-                <el-tab-pane :label="`已通过 ( ${total1 ? total1 : 0} )`" name="1">
-                    <!-- 工单列表 -->
-                    <div class="order1" v-for="item in orderList" :key="item.id">
-
-                        <!-- 工单头部 -->
-                        <div class="title">
-                            <span class="statusClass">已通过</span>
-                            <span class="code">
-                                工单编号:
-                                <span>{{ item.order_num }}</span>
-                            </span>
-                            <span class="createTime right">{{ item.created_at }}</span>
-                        </div>
-
-                        <!-- 工单内容 -->
-                        <div class="text">
-
-                            <!-- 开始时间和结束时间 -->
-                            <div class="time">
-                                <p>
-                                    开始时间:
-                                    <span>{{ item.sttime }}</span>
-                                </p>
-                                <p>
-                                    结束时间:
-                                    <span>{{ item.edtime }}</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告的天数与个数 -->
-                            <div class="num">
-                                <p>
-                                    天数:
-                                    <span>{{ item.days }}天</span>
-                                </p>
-                                <p>
-                                    广告个数:
-                                    <span>{{ item.num }}个</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告状态及总价格 -->
-                            <div class="state">
-                                <p>
-                                    广告状态:
-                                    <span>{{ order_ad[item.ad_status] }}</span>
-                                </p>
-                                <p>
-                                    <span class="price">{{ item.price }}</span>
-                                    元
-                                </p>
-                            </div>
-
-                            <!-- 按钮 -->
-                            <div class="btn">
-                                <button @click="goAgain(item)">再次申请</button>
-                                <!-- <NuxtLink
-                                    :to="`/advertising/adDetail?id=${item.id}`">
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-                                <!-- <button @click="goDetail(item)">查看详情</button> -->
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="adEmpty" v-show="!total1">
-                        <img src="../../static/topic/Task_empty.png" alt="">
-                        <span>暂无提交的广告工单~</span>
-                    </div>
-
-                    <!-- 分页 -->
-                    <div class="paginationBox" v-show="total1">
-                        <HomePagination @sendData="handleData1" :total="total1"></HomePagination>
-                    </div>
-                </el-tab-pane>
-                <el-tab-pane :label="`已驳回 ( ${total2 ? total2 : 0} )`" name="2">
-                    <!-- 工单列表 -->
-                    <div class="order2" v-for="item in orderList" :key="item.id">
-
-                        <!-- 工单头部 -->
-                        <div class="title">
-                            <span class="statusClass">已驳回</span>
-                            <span class="code">
-                                工单编号:
-                                <span>{{ item.order_num }}</span>
-                            </span>
-                            <span class="createTime right">{{ item.created_at }}</span>
-                        </div>
-
-                        <!-- 工单内容 -->
-                        <div class="text">
-
-                            <!-- 开始时间和结束时间 -->
-                            <div class="time">
-                                <p>
-                                    开始时间:
-                                    <span>{{ item.sttime }}</span>
-                                </p>
-                                <p>
-                                    结束时间:
-                                    <span>{{ item.edtime }}</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告的天数与个数 -->
-                            <div class="num">
-                                <p>
-                                    天数:
-                                    <span>{{ item.days }}天</span>
-                                </p>
-                                <p>
-                                    广告个数:
-                                    <span>{{ item.num }}个</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告状态及总价格 -->
-                            <div class="state">
-                                <p>
-                                    广告状态:
-                                    <span>{{ order_ad[item.ad_status] }}</span>
-                                </p>
-                                <p>
-                                    <span class="price">{{ item.price }}</span>
-                                    元
-                                </p>
-                            </div>
-
-                            <!-- 按钮 -->
-                            <div class="btn">
-                                <button @click="goAgain(item)">再次申请</button>
-                                <!-- <NuxtLink
-                                    :to="`/advertising/adDetail?id=${item.id}`">
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-                                <!-- <button @click="goDetail(item)">查看详情</button> -->
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="adEmpty" v-show="!total2">
-                        <img src="../../static/topic/Task_empty.png" alt="">
-                        <span>暂无提交的广告工单~</span>
-                    </div>
-
-                    <!-- 分页 -->
-                    <div class="paginationBox" v-show="total2">
-                        <HomePagination @sendData="handleData2" :total="total2"></HomePagination>
-                    </div>
-                </el-tab-pane>
-                <el-tab-pane :label="`待审核 ( ${total6 ? total6 : 0} )`" name="6">
-                    <!-- 工单列表 -->
-                    <div class="order6" v-for="item in orderList" :key="item.id">
-
-                        <!-- 工单头部 -->
-                        <div class="title">
-                            <span class="statusClass">待审核</span>
-                            <span class="code">
-                                工单编号:
-                                <span>{{ item.order_num }}</span>
-                            </span>
-                            <span class="createTime right">{{ item.created_at }}</span>
-                        </div>
-
-                        <!-- 工单内容 -->
-                        <div class="text">
-
-                            <!-- 开始时间和结束时间 -->
-                            <div class="time">
-                                <p>
-                                    开始时间:
-                                    <span>{{ item.sttime }}</span>
-                                </p>
-                                <p>
-                                    结束时间:
-                                    <span>{{ item.edtime }}</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告的天数与个数 -->
-                            <div class="num">
-                                <p>
-                                    天数:
-                                    <span>{{ item.days }}天</span>
-                                </p>
-                                <p>
-                                    广告个数:
-                                    <span>{{ item.num }}个</span>
-                                </p>
-                            </div>
-
-                            <!-- 广告状态及总价格 -->
-                            <div class="state">
-                                <p>
-                                    广告状态:
-                                    <span>{{ order_ad[item.ad_status] }}</span>
-                                </p>
-                                <p>
-                                    <span class="price">{{ item.price }}</span>
-                                    元
-                                </p>
-                            </div>
-
-                            <!-- 按钮 -->
-                            <div class="btn">
-                                <button @click="goCancel(item)">取消工单</button>
-                                <!-- <NuxtLink
-                                    :to="`/advertising/adDetail?id=${item.id}`">
-                                    <el-button type="success">查看详情</el-button>
-                                </NuxtLink> -->
-                                <!-- <button @click="goDetail(item)">查看详情 </button> -->
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="adEmpty" v-show="!total6">
-                        <img src="../../static/topic/Task_empty.png" alt="">
-                        <span>暂无提交的广告工单~</span>
-                    </div>
-
-                    <!-- 分页 -->
-                    <div class="paginationBox" v-show="total6">
-                        <HomePagination @sendData="handleData3" :total="total6"></HomePagination>
-                    </div>
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-
-    </div>
-</template>
-
-<script setup>
-import { ref, nextTick,onMounted  } from 'vue'
-import { ElTabs, ElTabPane, ElMessage, ElButton } from 'element-plus'
-import { useStatusStore } from "@/store/status"
-
-const StatusStore = useStatusStore()
-
-// axios请求
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-const activeName = ref('')
-let orderList = useState("orderList", () => "")
-
-let order = useState('order', () => "")
-let orders = useState('orders', () => "")
-let order_ad = useState('order_ad', () => [])
-let allOrder = useState("allOrder", () => "")
-let allOrderTotal = useState("allOrderTotal", () => "")
-let total1 = useState("total1", () => "")
-let total2 = useState("total2", () => "")
-let total6 = useState("total6", () => "")
-
-let page = useState("page", () => "1")
-let pageSize = useState("pageSize", () => "10")
-
-let page1 = useState("page1", () => "1")
-onMounted(async () => {
-  await getStauts()
-
-    // 获取全部工单
-    await getOrderList()
-})
-//全部标签下页码改变后触发的事件
-const handleData = (data) => {
-    console.log(data.value)
-    page.value = data.value
-    console.log(page);
-
-    //在全部下 页码发生变化时去请求对应的数据
-    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
-        // if (response.message) {
-        //     ElMessage(response.message)
-        // }
-        console.log(response);
-        console.log(response.data.rows);
-        allOrder.value = response.data.rows
-        console.log(orderList.value);
-    }).catch(error => {
-        console.log(error);
-    })
-}
-
-//已通过标签 页码改变后触发的事件
-const handleData1 = (data) => {
-    console.log(data.value)
-    page1.value = data.value
-    console.log(page1);
-
-    //在全部下 页码发生变化时去请求对应的数据
-    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${1}`).then(response => {
-        console.log(response.data.rows);
-        if (response.message) {
-            ElMessage(response.message)
-        }
-        orderList.value = response.data.rows
-        console.log(orderList.value);
-    }).catch(error => {
-        console.log(error);
-    })
-
-}
-
-//已驳回标签 页码改变后触发的事件
-const handleData2 = (data) => {
-    console.log(data.value)
-    page1.value = data.value
-    console.log(page1);
-
-    //在全部下 页码发生变化时去请求对应的数据
-    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${2}`).then(response => {
-        if (response.message) {
-            ElMessage(response.message)
-        }
-        console.log(response.data.rows);
-        orderList.value = response.data.rows
-        console.log(orderList.value);
-    }).catch(error => {
-        console.log(error);
-    })
-
-}
-
-//待审核标签 页码改变后触发的事件
-const handleData3 = (data) => {
-    console.log(data.value)
-    page1.value = data.value
-    console.log(page1);
-
-    //在全部下 页码发生变化时去请求对应的数据
-    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${6}`).then(response => {
-        console.log(response.data.rows);
-        // if (response.message) {
-        //     ElMessage(response.message)
-        // }
-        orderList.value = response.data.rows
-        console.log(orderList.value);
-    }).catch(error => {
-        console.log(error);
-    })
-
-}
-const getDate = () => {
-    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
-        console.log(response.data.rows);
-        allOrder.value = response.data.rows
-        console.log(orderList.value);
-    }).catch(error => {
-        console.log(error);
-    })
-}
-
-//点击tab标题获取对应的数据
-const handleChange = () => {
-    if (!activeName.value) {
-        axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
-            console.log(response.data.rows);
-            // if (response.message) {
-            //     ElMessage(response.message)
-            // }
-            allOrder.value = response.data.rows
-            console.log(orderList.value);
-        }).catch(error => {
-            console.log(error);
-        })
-    } else {
-        axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}&status=${activeName.value}`).then(response => {
-            console.log(response.data.rows);
-            // if (response.message) {
-            //     ElMessage(response.message)
-            // }
-            orderList.value = response.data.rows
-            console.log(orderList.value);
-        }).catch(error => {
-            console.log(error);
-        })
-    }
-}
-
-// 取消工单
-let goCancel = (item) => {
-    console.log(item);
-    axios.get(`/order/cancelOrder?order_id=${item.id}`).then(response => {
-        console.log(response.message);
-        if (response.code == 0) {
-            ElMessage.error(response.message)
-        } else if (response.code == 200) {
-            ElMessage.success("取消成功")
-        }
-    })
-    getOrderList()
-}
-
-//再次申请
-const emit = defineEmits(['childData']);
-const ad = 1;
-let goAgain = () => {
-    console.log(123);
-    emit('childData', 1);
-}
-
-// 查看详情
-let goDetail = (item) => {
-    // console.log(item);
-
-    // const params = {
-    //     id: item.id,
-    //     days: item.days,
-    //     status: item.status,
-    //     ad_status: item.ad_status
-    // }
-    // navigateTo({
-    //     path: "/advertising/adDetail",
-    //     query: params
-    // })
-    emit('aa', 104);
-}
-// const goDetail =  (item) => {
-//     const data = {
-//         id: item.id,
-//     }
-//     console.log(data)
-//     // 使用 nextTick 确保 DOM 更新完成
-//     // await nextTick();
-//     // 这里的代码会在 DOM 更新完成后执行
-//     // console.log(myDiv.value.textContent);
-//     navigateTo({
-//         path: "/advertising/adDetail",
-//         query: data
-//     })
-// };
-
-
-// 获取广告状态
-const getStauts = async () => {
-    try {
-        const response = await axios.get("/order/getStatus");
-        console.log(response.data);
-        order.value = response.data.order
-        order_ad.value = response.data.order_ad
-
-        StatusStore.setOrderStatus(order.value)
-        StatusStore.setAdStatus(order_ad.value)
-
-        //工单状态
-        orders.value = JSON.parse(JSON.stringify(order.value))  //深拷贝
-        // console.log(orders.value);
-        delete orders.value[3]
-        delete orders.value[4]
-        delete orders.value[5]
-        delete orders.value[7]
-
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-//获取全部工单
-const getOrderList = async () => {
-    try {
-        const response = await axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`);
-        // console.log(response.data.rows);
-        // if (response.message) {
-        //     ElMessage(response.message)
-        // }
-        allOrder.value = response.data.rows
-        allOrderTotal.value = response.data.count.all
-        total1.value = response.data.count.pass
-        total2.value = response.data.count.return
-        total6.value = response.data.count.waite
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-
-
-// //挂载成功钩子函数
-// onMounted(() => {
-
-//     //获取广告状态
-//     getStauts()
-
-//     // 获取全部工单
-//     getOrderList()
-
-
-// })
-</script>
-
-<style lang="less" scoped>
-.orderList {
-    width: 1200px;
-    margin: 0 54px;
-
-    .inner {
-        overflow: hidden;
-
-        /deep/.el-tabs__header {
-            width: 1100px;
-            margin: 0 auto;
-        }
-
-        /deep/.el-tabs__item {
-            padding: 0 100px 0 20px;
-            font-size: 16px;
-            height: 60px;
-        }
-
-        /deep/.el-tabs__item.is-active,
-        /deep/.el-tabs__item:hover {
-            color: #33b023;
-        }
-
-        /deep/.el-tabs__active-bar {
-            background-color: #33b023;
-            height: 0;
-        }
-
-        /deep/.el-tabs__nav {
-            height: 60px;
-        }
-
-        .order1,
-        .order2,
-        .order6,
-        .order {
-            width: 1196px;
-            height: 210px;
-            border: 1px solid #e1e1e1;
-            margin-top: 30px;
-
-            .title {
-                height: 60px;
-                line-height: 30px;
-                border-bottom: 1px solid #e1e1e1;
-                padding: 15px 24px 15px 50px;
-                box-sizing: border-box;
-                background-color: #fafafa;
-
-
-
-                >span {
-                    display: inline-block;
-                    text-align: center;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    vertical-align: middle;
-                }
-
-                .statusClass {
-                    width: 70px;
-                    height: 32px;
-                    line-height: 32px;
-                    margin-right: 50px;
-                    background: #fbebd5;
-                    color: #FFAA33;
-                    font-weight: 400;
-                    font-size: 16px;
-                }
-
-                .orangeStatus {
-                    width: 70px;
-                    height: 32px;
-                    line-height: 32px;
-                    margin-right: 50px;
-                    background: #fbebd5;
-                    color: #FFAA33;
-                    font-weight: 400;
-                    font-size: 16px;
-                }
-
-                .greenStatus {
-                    width: 70px;
-                    height: 32px;
-                    line-height: 32px;
-                    margin-right: 50px;
-                    background: #d5ecd2;
-                    color: #33B023;
-                    font-weight: 400;
-                    font-size: 16px;
-                }
-
-                .grayStatus {
-                    width: 70px;
-                    height: 32px;
-                    line-height: 32px;
-                    margin-right: 50px;
-                    background: #e8e8e8;
-                    color: #999999;
-                    font-weight: 400;
-                    font-size: 16px;
-                }
-
-                .code {
-                    font-weight: 400;
-                    font-size: 16px;
-                    color: #333333;
-                }
-
-                .createTime {
-                    font-weight: bold;
-                    font-size: 16px;
-                    color: #333333;
-                }
-            }
-
-            .text {
-                display: flex;
-                padding: 35px 70px 35px 50px;
-                justify-content: space-between;
-
-                .state,
-                .num,
-                .time {
-                    height: 80px;
-                    padding: 2px 0;
-                    font-weight: 400;
-                    font-size: 16px;
-                    color: #333333;
-
-                    >p:first-child {
-                        margin-bottom: 30px;
-                    }
-                }
-
-                .state,
-                .num {
-                    span {
-                        font-weight: 600;
-                    }
-                }
-
-                .state {
-
-                    >p:first-child {
-                        margin-bottom: 22px;
-                    }
-
-                    .price {
-                        font-weight: bold;
-                        font-size: 24px;
-                        color: #028E21;
-                    }
-                }
-
-                .btn {
-                    height: 85px;
-
-                    button {
-                        display: block;
-                        width: 82px;
-                        height: 34px;
-                        border: none;
-                        border-radius: 4px;
-                    }
-
-                    >button:first-child {
-                        border: 1px solid #33b023;
-                        color: #33b023;
-                        background-color: #fff;
-                        margin-bottom: 15px;
-                    }
-
-                    >button:last-child {
-                        background-color: #33b023;
-                        color: #fff;
-                    }
-                }
-
-            }
-        }
-
-        .adEmpty {
-            margin: 130px auto;
-            text-align: center;
-
-            img {
-                width: 78px;
-                height: 78px;
-                vertical-align: -28px;
-                margin-right: 10px;
-            }
-
-            span {
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: bold;
-                font-size: 26px;
-                color: #CCCCCC;
-                line-height: 30px;
-                text-align: center;
-                font-style: normal;
-                text-transform: none;
-            }
-        }
-
-
-        .order6>.title>.statusClass {
-            background: #fbebd5;
-            color: #FFAA33;
-        }
-
-        .order1>.title>.statusClass {
-            background: #d5ecd2;
-            color: #33B023;
-        }
-
-        .order2>.title>.statusClass {
-            background: #e8e8e8;
-            color: #999999;
-        }
-
-        .paginationBox {
-            margin-top: 60px;
-            margin-bottom: 90px;
-        }
-
-    }
-
-}
-</style>

components/home/MoreService.vue

@@ -176,7 +176,7 @@ let arr = [
                     >p {
                         width: 116px;
                         height: 32px;
-                        line-height: 32px;
+                        line-height: 30px;
                         border: 1px solid #eee;
                         margin: 26px 25px 34px 29px;
                         border-radius: 18px;

components/home/PageMessage.vue

@@ -27,11 +27,16 @@
                 <!-- 小图列表 -->
                 <ul class="smallList">
                     <li v-for="(item, index) in recommendImage" :key="index">
-                        <img :src="item.imgurl" alt="">
-                        <p>{{ item.title }}</p>
+                        <NuxtLink
+                            :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
+                            target="_blank">
+                            <img :src="item.imgurl" alt="">
+                            <p>{{ item.title }}</p>
+                        </NuxtLink>
                     </li>
                 </ul>
             </div>
+
             <div class="messageRight">
                 <!-- 列表 -->
                 <div class="hotTop">
@@ -42,7 +47,8 @@
                     <ul>
                         <li v-for="(item, index) in hotNewsList" :key="index">
                             <strong>{{ index + 1 }}</strong>
-                            <NuxtLink :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
+                            <NuxtLink
+                                :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
                                 target="_blank">{{ item.title }}</NuxtLink>
                         </li>
                     </ul>
@@ -55,7 +61,8 @@
                     <ul>
                         <li v-for="(item, index) in messageList" :key="index">
                             <em></em>
-                            <NuxtLink :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
+                            <NuxtLink
+                                :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
                                 target="_blank">{{ item.title }}</NuxtLink>
 
                         </li>
@@ -199,10 +206,6 @@ onMounted(() => {
             height: 140px;
             margin-top: 16px;
 
-            img {
-                width: 250px;
-                height: 140px;
-            }
 
             >li {
                 width: 250px;
@@ -210,13 +213,22 @@ onMounted(() => {
                 float: left;
                 padding-right: 20px;
                 position: relative;
+                // background-color: #f5f5f5;
 
-                >p {
+                img {
+                    width: 250px;
+                    height: 140px;
+                }
+
+                p {
                     position: absolute;
                     bottom: 0;
                     left: 0;
                     width: 250px;
                     height: 30px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                     line-height: 30px;
                     padding-left: 4px;
                     box-sizing: border-box;
@@ -294,7 +306,7 @@ onMounted(() => {
                         color: #FFFFFF;
                         font-style: normal;
                         text-transform: none;
-
+                        vertical-align: -2px;
                     }
 
                     &:nth-child(1)>strong {
@@ -311,10 +323,11 @@ onMounted(() => {
 
                     >em {
                         display: inline-block;
-                        width: 10px;
-                        height: 10px;
+                        width: 6px;
+                        height: 6px;
                         border-radius: 10px;
                         border: 2px solid #8CBA86;
+                        vertical-align: -1px;
                     }
 
                     >a,
@@ -337,6 +350,7 @@ onMounted(() => {
                         vertical-align: middle;
                     }
 
+                    >a:hover,
                     >span:hover {
                         color: #139609;
                     }

components/home/foot.vue

@@ -3,16 +3,16 @@
         <div class="inner">
             <!-- 图片列表 -->
             <ul class="logoList">
-                <li v-for="(item,index) in topImg":key=index class="left">
-                    <img :src="item" alt="">
+                <li v-for="(item,index) in bottomLink" :key=index class="left">
+                    <img :src="item.logo_url">
                 </li>
             </ul>
             <!-- 友情链接 -->
             <div class="link">
                 <h5 class="left">友情链接</h5>
                 <ul class="left">
-                    <li v-for="(item, index) in linkList" :key="index">
-                        <a href="#">{{ item }}</a>
+                    <li v-for="(item, index) in bottomLink" :key="index">
+                        <a href="#">{{ item.title }}</a>
                     </li>
                 </ul>
             </div>
@@ -20,33 +20,36 @@
             <div class="service">
                 <h5 class="left">快捷服务</h5>
                 <p class="left">
-                    <span v-for="(item, index) in serviceList" :key="index">
-                        <a href="#">{{ item }}</a>
+                    <span v-for="(item, index) in bottomMenu" :key="index">
+                        <NuxtLink :to="{ path: `/specialList/${item.id}`}" target="_blank" v-if="item.type==1">
+                            {{ item.name }}
+                        </NuxtLink>
+                        <NuxtLink :to="{ path: `/speciaArticle/${item.id}`}" target="_blank" v-if="item.type==0">
+                            {{ item.name }}
+                        </NuxtLink>
                     </span>
                 </p>
             </div>
-            <div class="tips">
-                <p>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农资讯网对此不承担任何保证责任。</p>
-                <p>本网部分转载文章、图片等无法联系到权利人，请相关权利人联系本网站索取稿酬。</p>
+            <div class="tips" v-if="bottomBase">
+                <p>{{ bottomBase.statement }}</p>
             </div>
 
-            <div class="tipsList">
-                <p>政讯通·全国三农调研中心行业百网成员站--全国三农信息一体化应用平台--中农兴业工程指定网站•农业百强网站</p>
-                <p>北京中农兴业网络技术有限公司主办--三农资讯网 snzxwt.org 版权所有。</p>
+            <div class="tipsList" v-if="bottomBase">
+                <p>{{ bottomBase.copyright_information }}</p>
                 <p>
                     <em></em>
-                    京ICP备11020904号-14 京公网安备11010202007231号
+                    {{bottomBase.icp_number}}
                 </p>
-                <p>联系邮箱：qgsndy@163.com</p>
-                <p>地址：第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</p>
-                <p>联系电话：010-80440269、010-69945235、010-56019387，监督电话：18516948318，违法和不良信息举报电话：010-57028685</p>
+                <p>{{bottomBase.record_number}}</p>
+                <p>{{bottomBase.company_address}}</p>
+                <p>{{bottomBase.contact_number}}</p>
             </div>
             <!-- 图片列表 -->
-            <ul class="logoList1">
+            <!-- <ul class="logoList1">
                 <li  v-for="(item,index) in bottomImg":key=index class="left">
                     <img :src="item" alt="">
                 </li>
-            </ul>
+            </ul> -->
 
         </div>
     </div>
@@ -57,30 +60,41 @@ import { onMounted } from 'vue';
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
 
-// 友情链接
-// let linkList = ["政府网", "工信部", "劳动保障局", "农业农村部", "商务部", "发展改革委员会", "(山西) 现代农业博览会", "来买地网"]
-// 快捷服务
-let serviceList = ["三农资讯网", "地方频道", "政务频道", "友情链接", "网站地图", "网站简介", "广告服务", "关于我们", "联系我们", "本网概况", "会员服务"]
-
-let topImg=["/images/image44.png","/images/image45.png","/images/image48.png","/images/image46.png","/images/image47.png","/images/image48.png","/images/image49.png"]
-let bottomImg=["/images/image50.png","/images/image51.png","/images/image52.png","/images/image53.png"]
-
-let type=useState("type",()=>2)
-let num =useState("num",()=>8)
-
-//获取友情链接
-let linkList = useState("linkList",()=>"")
-const linkList1 = async () => {
-    try {
-        const response = await axios.get(`/web/selectWebsiteLinks?type=${type.value}&num=${num.value}`);
-        console.log(response.data);
-        linkList1.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
+// const props = defineProps({
+//     bottomLink: Array,
+//     bottomMenu: Array,
+//     bottomBase: Object
+// });
+
+//获得友情链接
+const bottomLink = ref([])
+const getBottomLink = async () => {
+    const response = await axios.get(`/web/selectWebsiteLinks?&type=${1}&num=${7}`);
+    bottomLink.value = response.data;
+    console.log(bottomLink.value)
+}
+
+//获得底部导航
+const bottomMenu = ref([])
+const getBottomMenu = async () => {
+    const response = await axios.get(`/web/getWebsiteFooterCategory`);
+    bottomMenu.value = response.data;
+    console.log(bottomMenu.value)
+}
+
+//获得底部基本信息
+const bottomBase = ref({})
+const getBottomBase = async () => {
+    const response = await axios.get(`/web/getWebsiteFootInfo`);
+    bottomBase.value = response.data.website_foot;
+    console.log(7777777)
+    console.log(getBottomBase.value)
 }
-onMounted(()=>{
-    linkList1()
+
+onMounted(() => {
+    getBottomLink();
+    getBottomMenu();
+    getBottomBase();
 })
 </script>
 

components/home/pageHead.vue

@@ -140,10 +140,12 @@ let exit = () => {
     removeTicket()
 }
 
+
+
 //点击搜索按钮
 let goSearch = () => {
     navigateTo({
-        path: '/primaryNavigation/newsList',
+        path: '/search/search',
         query: {
             keyword: keyword.value
         }

components/home/pageNavigation.vue

@@ -7,8 +7,10 @@
                 <ul class="navigationOne">
                     <li v-for="(item, index) in navigation1" :key="index">
                         <!-- <NuxtLink :to="`/primaryNavigation/${item.alias}`" target="_blank">{{ item.alias }}</NuxtLink> -->
-                        <NuxtLink :to="{path:`/primaryNavigation/${item.category_id}`,query:{name:item.name}}" target="_blank" v-if="item.children_count!=0">{{ item.name }}</NuxtLink>
-                        <NuxtLink :to="{path:`/newsList/${item.category_id}`,query:{name:item.name}}" target="_blank" v-if="item.children_count==0">{{ item.name }}</NuxtLink>
+                        <NuxtLink :to="{ path: `/primaryNavigation/${item.category_id}`, query: { name: item.name } }"
+                            target="_blank" v-if="item.children_count != 0">{{ item.name }}</NuxtLink>
+                        <NuxtLink :to="{ path: `/newsList/${item.category_id}`, query: { name: item.name } }" target="_blank"
+                            v-if="item.children_count == 0">{{ item.name }}</NuxtLink>
                     </li>
                 </ul>
             </div>
@@ -232,16 +234,17 @@ onMounted(() => {
 
 .partOne {
     width: 100%;
-    height: 130px;
-    line-height: 65px;
+    height: 105px;
+    line-height: 50px;
     background-color: #fff;
     font-size: 20px;
     font-family: PingFang SC-Semibold;
     border-bottom: 1px solid #e3e3e3;
+    margin-bottom: 30px;
 
     .navigationOne {
         width: 1200px;
-        height: 130px;
+        // height: 130px;
         color: #333;
         display: flex;
         flex-wrap: wrap;

pages/index.vue

@@ -337,7 +337,7 @@ const info = ref("");
 const getInfo = async () => {
     const response = await axios.get(`/web/getWebsiteFootInfo`);
     info.value = response.data.website_head;
-    console.log(333333333333333333)
+    console.log('3333333333333333333333333')
     console.log(info.value)
 }
 
@@ -622,9 +622,12 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
-a {
-    color: #333333;
-}
+// a {
+//     color: #333333;
+// }
+// a:hover{
+//     color: #139602;
+// }
 
 // 农民工
 .farming {
@@ -698,6 +701,14 @@ a {
                         margin: 5px 8px 6px;
                         vertical-align: middle;
                     }
+
+                    a {
+                        color: #333333;
+                    }
+
+                    a:hover {
+                        color: #139602;
+                    }
                 }
 
                 >li:hover {
@@ -755,15 +766,24 @@ a {
                         height: 48px;
                         // line-height: 24px;
                         padding-left: 14px;
+                        // color: #333333;
+                    }
+
+                    a {
+                        color: #333333;
+                    }
+
+                    a:hover {
+                        color: #139602;
                     }
                 }
 
                 >li:hover,
-                >li:hover>h4 {
+                >li:hover>a>h4 {
                     color: #088f04;
                 }
 
-                >li:hover>h4>em {
+                >li:hover>a>h4>em {
                     background-color: #088f04;
                 }
             }
@@ -823,16 +843,18 @@ a {
                 width: 185px;
                 height: 104px;
                 position: relative;
+                border-radius: 6px;
 
                 img {
                     width: 185px;
                     height: 104px;
+                    border-radius: 6px;
                 }
 
                 span,
                 a {
                     position: absolute;
-                    top: 0;
+                    bottom: 0;
                     left: 0;
                     display: inline-block;
                     padding-left: 7px;
@@ -847,7 +869,7 @@ a {
                     font-size: 14px;
                     color: #FFFFFF;
                     line-height: 22px;
-
+                    // border-radius: 6px 6px 0px 0px;
                 }
             }
 
@@ -901,9 +923,10 @@ a {
 
                     }
 
+                    >a,
                     >span {
                         display: inline-block;
-                        width: 320px;
+                        width: 340px;
                         height: 25px;
                         white-space: nowrap;
                         overflow: hidden;
@@ -919,6 +942,7 @@ a {
                         vertical-align: middle;
                     }
 
+                    >a:hover,
                     >span:hover {
                         color: #139609;
                     }
@@ -928,6 +952,43 @@ a {
 
         }
 
+        .rich {
+            .photoL {
+                display: inline-block;
+                width: 185px;
+                height: 104px;
+                position: relative;
+                border-radius: 6px;
+
+                img {
+                    width: 185px;
+                    height: 104px;
+                    border-radius: 6px;
+                }
+
+                span,
+                a {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    display: inline-block;
+                    padding-left: 7px;
+                    box-sizing: border-box;
+                    width: 185px;
+                    height: 22px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    font-weight: 500px;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 22px;
+                    border-radius: 0px 0px 6px 6px;
+                }
+            }
+        }
+
         // 三农调查
         .inquire {
             width: 380px;
@@ -1095,10 +1156,12 @@ a {
                 width: 185px;
                 height: 104px;
                 position: relative;
+                border-radius: 2px;
 
                 img {
                     width: 185px;
                     height: 104px;
+                    border-radius: 2px;
                 }
 
                 span {
@@ -1118,6 +1181,7 @@ a {
                     font-size: 14px;
                     color: #FFFFFF;
                     line-height: 22px;
+                    border-radius: 2px 2px 0px 0px;
 
                 }
             }
@@ -1153,10 +1217,11 @@ a {
 
                     >em {
                         display: inline-block;
-                        width: 10px;
-                        height: 10px;
+                        width: 6px;
+                        height: 6px;
                         border-radius: 10px;
                         border: 2px solid #8CBA86;
+                        vertical-align: 5px;
                     }
 
                     a,
@@ -1178,6 +1243,7 @@ a {
                         padding-left: 9px;
                     }
 
+                    >a:hover,
                     >span:hover {
                         color: #139609;
                     }
@@ -1244,6 +1310,7 @@ a {
                     img {
                         width: 387px;
                         height: 320px;
+                        border-radius: 6px;
                     }
 
                     span {
@@ -1274,13 +1341,15 @@ a {
 
                     >li {
                         width: 185px;
-                        height: 139px;
+                        height: 210px;
                         float: left;
                         margin-right: 17px;
+                        background-color: #f5f5f5;
 
                         img {
                             width: 185px;
                             height: 139px;
+                            border-radius: 6px;
                         }
 
                         p {
@@ -1300,6 +1369,7 @@ a {
                             text-align: left;
                             font-style: normal;
                             text-transform: none;
+                            margin-left: 5px;
                         }
                     }
 
@@ -1368,12 +1438,20 @@ a {
                     }
                 }
 
-                >li:hover>h4,
-                >li:hover>p {
+                a {
+                    color: #333333;
+                }
+
+                a:hover {
                     color: #139602;
                 }
 
-                >li:hover>h4>em {
+                >li:hover>a>h4,
+                >li:hover>a>p {
+                    color: #139602;
+                }
+
+                >li:hover>a>h4>em {
                     background-color: #139602;
                 }
             }
@@ -1469,10 +1547,20 @@ a {
                     }
                 }
 
-                .text:hover {
+
+            }
+
+            li:hover {
+                .text {
                     box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
                     background-color: #fff;
+
+                    h5,
+                    p {
+                        color: #139602;
+                    }
                 }
+
             }
         }
     }
@@ -1580,10 +1668,17 @@ a {
                             text-transform: none;
                         }
                     }
+                }
 
-                    .text:hover {
+                li:hover {
+                    .text {
                         box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
                         background-color: #fff;
+
+                        h5,
+                        p {
+                            color: #139602;
+                        }
                     }
                 }
             }
@@ -1642,6 +1737,7 @@ a {
                     img {
                         width: 185px;
                         height: 104px;
+                        border-radius: 2px;
                     }
 
                     // a,
@@ -1696,10 +1792,11 @@ a {
 
                         >em {
                             display: inline-block;
-                            width: 10px;
-                            height: 10px;
+                            width: 6px;
+                            height: 6px;
                             border-radius: 10px;
                             border: 2px solid #8CBA86;
+                            vertical-align: middle;
                         }
 
                         a,
@@ -1722,6 +1819,7 @@ a {
                             vertical-align: middle;
                         }
 
+                        a:hover,
                         >span:hover {
                             color: #139609;
                         }

pages/newsList/[id].vue

@@ -161,7 +161,7 @@ onMounted(() => {
 //     page.value = data.value
 
 //     //在页码发生变化时去请求响应页面的新闻数据
-//     axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response => {
+//     axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response => {
 //         // console.log(response.data.rows);
 //         newsList.value = response.data.rows;
 //     }).catch(error => {
@@ -180,7 +180,7 @@ let changePage = (value) => {
 const newsList = useState("newsList", () => '');
 const newslists = async () => {
     try {
-        const response = await axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${pageSize.value}&catid=${category_id}`);
+        const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&catid=${category_id}`);
         // console.log(response.data.rows);
         newsList.value = response.data.rows;
         total.value = response.data.count;

pages/search/search.vue

@@ -0,0 +1,703 @@
+<template>
+    <div id="newsList">
+        <!-- 页面头部 -->
+        <HomePageHead></HomePageHead>
+        <!-- Banner1 -->
+        <HomeBanner1></HomeBanner1>
+        <!-- 面包屑导航 -->
+        <div class="breadcrumb">
+            <div class="inner">
+                <span class="location">当前位置:</span>
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                    <el-breadcrumb-item :to="{ path: '/newsList' }">{{ name }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+        </div>
+
+        <div class="searchBox">
+            <input type="text" placeholder="输入关键词" v-model="keywordInput">
+            <button @click="goSearch">搜索</button>
+        </div>
+
+
+        <!-- 资讯列表 -->
+        <div class="newsList">
+            <div class="inner">
+                <div class="innerLeft">
+                    <ul class="list">
+                        <li v-for="(item, index) in newsList" :key="index">
+                            <!-- <NuxtLink to="/primaryNavigation/newsDetail/newsDetail">{{ item }}</NuxtLink> -->
+                            <!-- <NuxtLink to="/newsDetail/newsDetail">{{ item.title }}</NuxtLink> -->
+                            <NuxtLink :to="{ path: `/newsDetail/${item.id}`, query: { listId: routeId, listName: routeName } }"
+                                target="_blank">{{ item.title }}</NuxtLink>
+
+                        </li>
+                    </ul>
+                    <!-- 分页器 -->
+                    <div class="pagination">
+                        <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
+                            prev-text="上一页" next-text="下一页" @change="changePage" />
+                        <!-- <HomePagination @sendData="handleData"></HomePagination> -->
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <DetailHotNews></DetailHotNews>
+                </div>
+            </div>
+        </div>
+
+        <!-- 三农资讯logo -->
+        <HomeSannongzixun></HomeSannongzixun>
+
+        <!-- 资讯推荐 -->
+        <div class="zixuntuijian">
+            <div class="inner">
+                <div class="innerLeft">
+                    <div class="zixunLeft">
+                        <!-- 标题部分 -->
+                        <div class="title">
+                            <h3>
+                                资讯推荐
+                                <!-- <span>查看更多</span> -->
+                            </h3>
+                        </div>
+                        <!-- 图片和文字列表 -->
+                        <ul class="photo_text">
+                            <li v-for="item in news1">
+                                <img :src="item.imgurl" alt="">
+                                <div>
+                                    <h5>{{ item.title }}</h5>
+                                    <p>
+                                        <span>{{ item.author }}</span>
+                                        <span>{{ item.created_at }}</span>
+                                    </p>
+                                </div>
+                            </li>
+                            <li v-for="item in news11">
+                                <em></em>
+                                {{ item.title }}
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="zixunRight">
+                        <!-- 标题部分 -->
+                        <div class="title">
+                            <h3>
+                                资讯推荐
+                                <!-- <span>查看更多</span> -->
+                            </h3>
+                        </div>
+                        <!-- 图片和文字列表 -->
+                        <ul class="photo_text">
+                            <li v-for="item in news2">
+                                <img :src="item.imgurl" alt="">
+                                <div>
+                                    <h5>{{ item.title }}</h5>
+                                    <p>
+                                        <span>{{ item.author }}</span>
+                                        <span>{{ item.created_at }}</span>
+                                    </p>
+                                </div>
+                            </li>
+                            <li v-for="item in news22">
+                                <em></em>
+                                {{ item.title }}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h4>
+                            热点资讯
+                            <!-- <span>查看更多</span> -->
+                        </h4>
+                    </div>
+                    <!-- 列表 -->
+                    <ul class="rightList">
+                        <li v-for="item in hotlistall">
+                            <img class="left" :src="item.imgurl">
+                            <p class="left">{{ item.title }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- 页面底部 -->
+        <HomeFoot></HomeFoot>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//获得跳转过来的id
+const route = useRoute();
+const articleId = route.params.id; //获得该页面的id
+const category_id = route.query.category_id; //获得该页面的id
+const name = route.query.name; //获得该页面的id
+const searchKey = route.query.keyword
+console.log(name);
+
+
+//关键词
+let keyWord = useState("keyWord", () => "")
+let id = useState("id", () => "")
+let total = useState("total", () => 0)
+let page = useState("page", () => 1)
+let pageSize = useState("pageSize", () => 10)
+
+
+let keywordInput = ref("")
+
+//点击搜索按钮
+let goSearch = () => {
+    navigateTo({
+        path: '/search/search',
+        query: {
+            keyword: keywordInput.value
+        }
+    })
+}
+
+
+onMounted(() => {
+    id.value = route.query.id;
+    console.log('id', id.value);
+})
+
+// 页码
+// //页面组件传递数据的时间驱动函数
+// const handleData = (data) => {
+//     console.log(data.value)
+//     page.value = data.value
+
+//     //在页码发生变化时去请求响应页面的新闻数据
+//     axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response => {
+//         // console.log(response.data.rows);
+//         newsList.value = response.data.rows;
+//     }).catch(error => {
+//         console.error(error);
+//     })
+// }
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    page.value = value
+    console.log(page.value);
+    newslists()
+}
+
+// 新闻列表
+const newsList = useState("newsList", () => '');
+const newslists = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${pageSize.value}&catid=${category_id}&keyword=${searchKey}`);
+        // console.log(response.data.rows);
+        newsList.value = response.data.rows;
+        total.value = response.data.count;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+//热点资讯
+const hotlistall = useState("hotlistall", () => "");
+const hotlist = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${2}&level=${4}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        for (let item of response.data) {
+            console.log(item);
+            item.count = 1;
+        }
+        hotlistall.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+//资讯推荐1
+const news1 = useState("news1", () => "");
+const newslist1 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news1.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+const news11 = useState("news11", () => "");
+const newslist11 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news11.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+//资讯推荐2
+const news2 = useState("news2", () => "");
+const newslist2 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news2.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+const news22 = useState("news22", () => "");
+const newslist22 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news22.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
+
+
+//挂载成功钩子函数
+onMounted(() => {
+
+    // 资讯推荐
+    newslists()
+    // 热点资讯
+    hotlist()
+    // 资讯推荐
+    newslist1()
+    newslist2()
+    // 热点资讯
+    newslist11()
+    newslist22()
+})
+
+//路由中间件
+definePageMeta({
+    middleware: 'auth'
+})
+
+</script>
+
+<style lang="less" scoped>
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    :deep(.el-breadcrumb) {
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    :deep(.el-breadcrumb__inner a),
+    :deep(.el-breadcrumb__inner.is-link) {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 20px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsList {
+    width: 100%;
+    height: 675px;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+
+        .innerLeft,
+        .innerRight {
+            border-top: 1px solid #139602;
+        }
+
+        .innerLeft {
+            height: 675px;
+
+            >.list {
+                height: 570px;
+                margin-bottom: 70px;
+
+                >li {
+                    width: 790px;
+                    height: 56px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: 56px;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    >a {
+                        width: 360px;
+                        height: 26px;
+
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 20px;
+                        color: #333333;
+                        line-height: 26px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                }
+
+                >li:hover>a {
+                    color: #139602;
+                }
+
+                >li:nth-child(1)::after,
+                >li:nth-child(2)::after {
+                    content: "热";
+                    margin-left: 13px;
+                    background: #FF8A37;
+                    color: #fff;
+                    font-size: 14px;
+                    padding: 0px 2px;
+                }
+            }
+
+            >.pagination {
+                width: 800px;
+                height: 34px;
+                margin-left: 141px;
+                display: flex;
+                justify-content: center;
+                margin: 0;
+
+                // 鼠标移入后字体颜色
+                .el-pagination::v-deep :hover {
+                    color: #139609;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next,
+                .el-pagination.is-background::v-deep .btn-prev {
+                    width: 70px;
+                    height: 34px;
+                    margin: 0px 10px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .el-pager li {
+                    margin: 0px 10px;
+                    width: 38px;
+                    height: 34px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next.is-active,
+                .el-pagination.is-background::v-deep .btn-prev.is-active,
+                .el-pagination.is-background::v-deep .el-pager li.is-active {
+                    background-color: #028e21;
+                    color: #fff;
+                }
+
+
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            height: 605px;
+
+        }
+    }
+}
+
+//资讯推荐
+.zixuntuijian {
+    width: 100%;
+    height: 290px;
+    margin-bottom: 70px;
+
+    .innerLeft {
+
+        // 左侧
+        .zixunLeft {
+            margin-right: 30px;
+        }
+
+        .zixunRight,
+        .zixunLeft {
+            float: left;
+            width: 380px;
+            height: 290px;
+
+            // 标题部分
+            >.title {
+                width: 380px;
+            }
+
+            >.title>h3 {
+                height: 36px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: bold;
+                font-size: 24px;
+                color: #000000;
+                line-height: 28px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                border-bottom: 1px solid #139602;
+
+            }
+
+            >.title>h3>span {
+                float: right;
+                width: 56px;
+                height: 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #999999;
+                font-style: normal;
+                text-transform: none;
+            }
+
+            .photo_text {
+
+                >li:first-child {
+                    width: 380px;
+                    height: 120px;
+                    margin-top: 20px;
+                    margin-bottom: 15px;
+                    position: relative;
+
+                    >img {
+                        float: left;
+                        width: 160px;
+                        height: 120px;
+                    }
+
+                    >div {
+                        float: left;
+                        width: 220px;
+                        height: 120px;
+                        padding-left: 15px;
+                        padding-top: 6px;
+                        box-sizing: border-box;
+                        background-color: #f6f6f6;
+
+
+                        >h5 {
+                            width: 200px;
+                            height: 54px;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 2;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            word-break: break-all;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 500;
+                            font-size: 18px;
+                            color: #333333;
+                            line-height: 26px;
+                            text-align: left;
+                            font-style: normal;
+                            text-transform: none;
+                        }
+
+                        >p {
+                            width: 200px;
+                            height: 22px;
+                            line-height: 20px;
+                            position: absolute;
+                            bottom: 5px;
+                            right: 0;
+
+                            >span {
+                                display: inline-block;
+                                // width: 100px;
+                                height: 18px;
+                                font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 400;
+                                font-size: 12px;
+                                color: #999999;
+                                text-align: left;
+                                line-height: 14px;
+                                font-style: normal;
+                                text-transform: none;
+                            }
+
+                            >span:last-child {
+                                // width: 90px;
+                                text-align: right;
+                                margin-left: 20px;
+                            }
+
+                        }
+                    }
+                }
+
+                >li {
+                    width: 380px;
+                    height: 25px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 21px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-bottom: 10px;
+
+                    em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 8px;
+                        margin-right: 10px;
+                        background-color: #d9d9d9;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+                >li:hover em {
+                    background-color: #139602;
+                }
+            }
+        }
+    }
+
+    .innerRight {
+        width: 381px;
+        height: 290px;
+        background-color: #fbfbfb;
+
+        >.title {
+            width: 380px;
+            height: 40px;
+            line-height: 40px;
+            border-top: 1px solid #139602;
+            border-bottom: 1px solid #e7e7e7;
+
+            >h4 {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                margin-left: 20px;
+                font-size: 20px;
+                color: #000000;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                >span {
+                    float: right;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    margin-right: 10px;
+                    color: #999999;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+        }
+
+        .rightList {
+            height: 540px;
+            margin-top: 20px;
+
+            >li {
+                height: 100px;
+                margin-bottom: 10px;
+
+                >img {
+                    width: 150px;
+                    height: 100px;
+                }
+
+                >p {
+                    width: 219px;
+                    height: 100px;
+                    padding-left: 12px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 22px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+
+                }
+
+                >p:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+
+    }
+}
+
+.searchBox {
+    text-align: center;
+    padding-bottom: 40px;
+}
+</style>

pages/speciaArticle/[id].vue

@@ -0,0 +1,228 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+
+    <!-- Banner1 -->
+    <HomeBanner1></HomeBanner1>
+
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb">
+        <div class="inner">
+            <span class="location">当前位置:</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: `/primaryNavigation/${listid}` }" v-show="name">{{name}}</el-breadcrumb-item>
+                <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+
+    <!-- 资讯列表 -->
+    <div class="newsDetail">
+        <div class="inner">
+            <div class="innerLeft">
+                <div class="LeftTop">
+                    <h1>{{ newsDetail.list_title }}</h1>
+                    <!-- <p>
+                        来源: <span>{{ newsDetail.author }}</span>
+                        <span>{{ newsDetail.updated_at }}</span>
+                        浏览量: <span>{{ newsDetail.hits }}</span>
+                    </p> -->
+                    <!-- <img :src="newsDetail.imgurl" alt=""> -->
+                </div>
+                <div class="leftBottom" v-html="newsDetail.content">
+              
+                </div>
+            </div>
+            <div class="innerRight">
+                <!-- 热点资讯1 -->
+                <DetailHotNews></DetailHotNews>
+                <!-- 热点资讯2 -->
+                <DetailHotNews2></DetailHotNews2>
+            </div>
+        </div>
+    </div>
+
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//获得跳转过来的id
+const route = useRoute();
+const articleId = route.params.id; //获得该页面的id
+const listid = route.query.listId; //获得该页面的id
+const name = route.query.listName; //获得该页面的id
+
+const newsDetail = ref({})
+console.log(articleId)
+
+const routeNewsTtitle = ref("");
+
+//获取详情
+const getNewsInfo =  async () => {
+    const response = await axios.get(`/web/getWebsiteFooterCategoryInfo?fcat_id=${articleId}`);
+    newsDetail.value = response.data;
+
+    console.log(newsDetail.value.title)
+    if(newsDetail.value.title.length > 30){
+        routeNewsTtitle.value = newsDetail.value.title.substr(0,30) + "...";
+    }
+}
+
+
+onMounted(()=>{
+    getNewsInfo()
+})
+
+</script>
+
+<style lang="less" scoped>
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    .el-breadcrumb::v-deep{
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    /deep/.el-breadcrumb__inner a,
+    /deep/.el-breadcrumb__inner.is-link {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 20px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsDetail {
+    width: 100%;
+    //height: 1400px;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+        //height: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+
+        .innerLeft {
+           // height: 1400px;
+            border-top: 1px solid #139602;
+
+            .LeftTop {
+                //height: 522px;
+                margin-top: 50px;
+
+                >h1 {
+                 
+                    line-height: 40px;
+                    margin-bottom: 30px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 30px;
+                    color: #333333;
+                }
+
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+
+            .leftBottom {
+                width: 790px;
+                height: 754px;
+                margin-top: 76px;
+                >h3,>p{
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 23px;
+                    padding-bottom: 30px;
+                }
+
+                >h3 {
+                    font-weight: 600px;
+                }
+
+                >p {
+                    font-weight: 400;
+                }
+
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            height: 605px;
+            background-color: #fbfbfb;
+            border-top: 1px solid #139602;
+        }
+    }
+}
+</style>

pages/specialList/[id].vue

@@ -0,0 +1,642 @@
+<template>
+    <div id="newsList">
+        <!-- 页面头部 -->
+        <HomePageHead></HomePageHead>
+        <!-- Banner1 -->
+        <HomeBanner1></HomeBanner1>
+        <!-- 面包屑导航 -->
+        <div class="breadcrumb">
+            <div class="inner">
+                <span class="location">当前位置:</span>
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                    <el-breadcrumb-item :to="{ path: '/newsList' }">{{ name }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+        </div>
+        <!-- 资讯列表 -->
+        <div class="newsList">
+            <div class="inner">
+                <div class="innerLeft">
+                    <ul class="list">
+                        <li v-for="(item, index) in newsList" :key="index">
+                            <NuxtLink :to="{ path: `/speciaArticle/${item.id}`}" target="_blank">{{ item.list_title }}</NuxtLink>
+                        </li>
+                    </ul>
+                    <!-- 分页器 -->
+                    <div class="pagination">
+                        <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
+                            prev-text="上一页" next-text="下一页" @change="changePage" />
+                        <!-- <HomePagination @sendData="handleData"></HomePagination> -->
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <DetailHotNews></DetailHotNews>
+                </div>
+            </div>
+        </div>
+
+        <!-- 三农资讯logo -->
+        <HomeSannongzixun></HomeSannongzixun>
+
+        <!-- 资讯推荐 -->
+        <div class="zixuntuijian">
+            <div class="inner">
+                <div class="innerLeft">
+                    <div class="zixunLeft">
+                        <!-- 标题部分 -->
+                        <div class="title">
+                            <h3>
+                                资讯推荐
+                                <!-- <span>查看更多</span> -->
+                            </h3>
+                        </div>
+                        <!-- 图片和文字列表 -->
+                        <ul class="photo_text">
+                            <li v-for="item in news1">
+                                <img :src="item.imgurl" alt="">
+                                <div>
+                                    <h5>{{ item.title }}</h5>
+                                    <p>
+                                        <span>{{ item.author }}</span>
+                                        <span>{{ item.created_at }}</span>
+                                    </p>
+                                </div>
+                            </li>
+                            <li v-for="item in news11">
+                                <em></em>
+                                {{ item.title }}
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="zixunRight">
+                        <!-- 标题部分 -->
+                        <div class="title">
+                            <h3>
+                                资讯推荐
+                                <!-- <span>查看更多</span> -->
+                            </h3>
+                        </div>
+                        <!-- 图片和文字列表 -->
+                        <ul class="photo_text">
+                            <li v-for="item in news2">
+                                <img :src="item.imgurl" alt="">
+                                <div>
+                                    <h5>{{ item.title }}</h5>
+                                    <p>
+                                        <span>{{ item.author }}</span>
+                                        <span>{{ item.created_at }}</span>
+                                    </p>
+                                </div>
+                            </li>
+                            <li v-for="item in news22">
+                                <em></em>
+                                {{ item.title }}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h4>
+                            热点资讯
+                            <!-- <span>查看更多</span> -->
+                        </h4>
+                    </div>
+                    <!-- 列表 -->
+                    <ul class="rightList">
+                        <li v-for="item in hotlistall">
+                            <img class="left" :src="item.imgurl">
+                            <p class="left">{{ item.title }}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- 页面底部 -->
+        <HomeFoot></HomeFoot>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//获得跳转过来的id
+const route = useRoute();
+const pageId = route.params.id; //获得该页面的id
+console.log(pageId);
+
+onMounted(() => {
+   
+})
+
+let changePage = (value) => {
+    console.log("当前页码", value);
+    page.value = value
+    console.log(page.value);
+    newslists()
+}
+
+// 新闻列表
+const newsList = useState("newsList", () => '');
+const newslists = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteFooterCategoryList?fcat_id=${pageId}`);
+        // console.log(response.data.rows);
+        newsList.value = response.data;
+        //total.value = response.data.count;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+//热点资讯
+const hotlistall = useState("hotlistall", () => "");
+const hotlist = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${2}&level=${4}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        for (let item of response.data) {
+            console.log(item);
+            item.count = 1;
+        }
+        hotlistall.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+//资讯推荐1
+const news1 = useState("news1", () => "");
+const newslist1 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news1.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+const news11 = useState("news11", () => "");
+const newslist11 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news11.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+//资讯推荐2
+const news2 = useState("news2", () => "");
+const newslist2 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news2.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+const news22 = useState("news22", () => "");
+const newslist22 = async () => {
+    try {
+        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
+        console.log('热点资讯', response.data);
+        news22.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+//挂载成功钩子函数
+onMounted(() => {
+
+    // 资讯推荐
+    newslists()
+    // 热点资讯
+    hotlist()
+    // 资讯推荐
+    newslist1()
+    newslist2()
+    // 热点资讯
+    newslist11()
+    newslist22()
+})
+
+//路由中间件
+definePageMeta({
+    middleware: 'auth'
+})
+
+</script>
+
+<style lang="less" scoped>
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    :deep(.el-breadcrumb) {
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    :deep(.el-breadcrumb__inner a),
+    :deep(.el-breadcrumb__inner.is-link) {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 20px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsList {
+    width: 100%;
+    height: 675px;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+
+        .innerLeft,
+        .innerRight {
+            border-top: 1px solid #139602;
+        }
+
+        .innerLeft {
+            height: 675px;
+
+            >.list {
+                height: 570px;
+                margin-bottom: 70px;
+
+                >li {
+                    width: 790px;
+                    height: 56px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: 56px;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    >a {
+                        width: 360px;
+                        height: 26px;
+
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 20px;
+                        color: #333333;
+                        line-height: 26px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                }
+
+                >li:hover>a {
+                    color: #139602;
+                }
+
+                >li:nth-child(1)::after,
+                >li:nth-child(2)::after {
+                    content: "热";
+                    margin-left: 13px;
+                    background: #FF8A37;
+                    color: #fff;
+                    font-size: 14px;
+                    padding: 0px 2px;
+                }
+            }
+
+            >.pagination {
+                width: 800px;
+                height: 34px;
+                margin-left: 141px;
+                display: flex;
+                justify-content: center;
+                margin: 0;
+
+                // 鼠标移入后字体颜色
+                .el-pagination::v-deep :hover {
+                    color: #139609;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next,
+                .el-pagination.is-background::v-deep .btn-prev {
+                    width: 70px;
+                    height: 34px;
+                    margin: 0px 10px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .el-pager li {
+                    margin: 0px 10px;
+                    width: 38px;
+                    height: 34px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next.is-active,
+                .el-pagination.is-background::v-deep .btn-prev.is-active,
+                .el-pagination.is-background::v-deep .el-pager li.is-active {
+                    background-color: #028e21;
+                    color: #fff;
+                }
+
+
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            height: 605px;
+
+        }
+    }
+}
+
+//资讯推荐
+.zixuntuijian {
+    width: 100%;
+    height: 290px;
+    margin-bottom: 70px;
+
+    .innerLeft {
+
+        // 左侧
+        .zixunLeft {
+            margin-right: 30px;
+        }
+
+        .zixunRight,
+        .zixunLeft {
+            float: left;
+            width: 380px;
+            height: 290px;
+
+            // 标题部分
+            >.title {
+                width: 380px;
+            }
+
+            >.title>h3 {
+                height: 36px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: bold;
+                font-size: 24px;
+                color: #000000;
+                line-height: 28px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                border-bottom: 1px solid #139602;
+
+            }
+
+            >.title>h3>span {
+                float: right;
+                width: 56px;
+                height: 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #999999;
+                font-style: normal;
+                text-transform: none;
+            }
+
+            .photo_text {
+
+                >li:first-child {
+                    width: 380px;
+                    height: 120px;
+                    margin-top: 20px;
+                    margin-bottom: 15px;
+                    position: relative;
+
+                    >img {
+                        float: left;
+                        width: 160px;
+                        height: 120px;
+                    }
+
+                    >div {
+                        float: left;
+                        width: 220px;
+                        height: 120px;
+                        padding-left: 15px;
+                        padding-top: 6px;
+                        box-sizing: border-box;
+                        background-color: #f6f6f6;
+
+
+                        >h5 {
+                            width: 200px;
+                            height: 54px;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 2;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            word-break: break-all;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 500;
+                            font-size: 18px;
+                            color: #333333;
+                            line-height: 26px;
+                            text-align: left;
+                            font-style: normal;
+                            text-transform: none;
+                        }
+
+                        >p {
+                            width: 200px;
+                            height: 22px;
+                            line-height: 20px;
+                            position: absolute;
+                            bottom: 5px;
+                            right: 0;
+
+                            >span {
+                                display: inline-block;
+                                // width: 100px;
+                                height: 18px;
+                                font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 400;
+                                font-size: 12px;
+                                color: #999999;
+                                text-align: left;
+                                line-height: 14px;
+                                font-style: normal;
+                                text-transform: none;
+                            }
+
+                            >span:last-child {
+                                // width: 90px;
+                                text-align: right;
+                                margin-left: 20px;
+                            }
+
+                        }
+                    }
+                }
+
+                >li {
+                    width: 380px;
+                    height: 25px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 21px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-bottom: 10px;
+
+                    em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 8px;
+                        margin-right: 10px;
+                        background-color: #d9d9d9;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+                >li:hover em {
+                    background-color: #139602;
+                }
+            }
+        }
+    }
+
+    .innerRight {
+        width: 381px;
+        height: 290px;
+        background-color: #fbfbfb;
+
+        >.title {
+            width: 380px;
+            height: 40px;
+            line-height: 40px;
+            border-top: 1px solid #139602;
+            border-bottom: 1px solid #e7e7e7;
+
+            >h4 {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                margin-left: 20px;
+                font-size: 20px;
+                color: #000000;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                >span {
+                    float: right;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    margin-right: 10px;
+                    color: #999999;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+        }
+
+        .rightList {
+            height: 540px;
+            margin-top: 20px;
+
+            >li {
+                height: 100px;
+                margin-bottom: 10px;
+
+                >img {
+                    width: 150px;
+                    height: 100px;
+                }
+
+                >p {
+                    width: 219px;
+                    height: 100px;
+                    padding-left: 12px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 22px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+
+                }
+
+                >p:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+
+    }
+}
+</style>