一级标题静态页面完成

.nuxt/components.d.ts

@@ -2,14 +2,16 @@
 import type { DefineComponent, SlotsType } from 'vue'
 type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
 interface _GlobalComponents {
-      'BigTitleList': typeof import("../components/BigTitle_List.vue")['default']
-    'MoreService': typeof import("../components/MoreService.vue")['default']
-    'BigTitle': typeof import("../components/bigTitle.vue")['default']
-    'Foot': typeof import("../components/foot.vue")['default']
-    'PageHead': typeof import("../components/pageHead.vue")['default']
-    'PageNavigation': typeof import("../components/pageNavigation.vue")['default']
-    'Sannongzixun': typeof import("../components/sannongzixun.vue")['default']
-    'TopTenTitle': typeof import("../components/topTenTitle.vue")['default']
+      'HomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
+    'HomeMoreService': typeof import("../components/home/MoreService.vue")['default']
+    'HomePageMessage': typeof import("../components/home/PageMessage.vue")['default']
+    'HomeTopTen': typeof import("../components/home/TopTen.vue")['default']
+    'HomeBigTitle': typeof import("../components/home/bigTitle.vue")['default']
+    'HomeFoot': typeof import("../components/home/foot.vue")['default']
+    'HomePageHead': typeof import("../components/home/pageHead.vue")['default']
+    'HomePageNavigation': typeof import("../components/home/pageNavigation.vue")['default']
+    'HomeSannongzixun': typeof import("../components/home/sannongzixun.vue")['default']
+    'HomeTopTenTitle': typeof import("../components/home/topTenTitle.vue")['default']
     'NuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
     'NuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
     'NuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -33,14 +35,16 @@ interface _GlobalComponents {
     'Body': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
     'NuxtIsland': typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
     'NuxtRouteAnnouncer': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
-      'LazyBigTitleList': typeof import("../components/BigTitle_List.vue")['default']
-    'LazyMoreService': typeof import("../components/MoreService.vue")['default']
-    'LazyBigTitle': typeof import("../components/bigTitle.vue")['default']
-    'LazyFoot': typeof import("../components/foot.vue")['default']
-    'LazyPageHead': typeof import("../components/pageHead.vue")['default']
-    'LazyPageNavigation': typeof import("../components/pageNavigation.vue")['default']
-    'LazySannongzixun': typeof import("../components/sannongzixun.vue")['default']
-    'LazyTopTenTitle': typeof import("../components/topTenTitle.vue")['default']
+      'LazyHomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
+    'LazyHomeMoreService': typeof import("../components/home/MoreService.vue")['default']
+    'LazyHomePageMessage': typeof import("../components/home/PageMessage.vue")['default']
+    'LazyHomeTopTen': typeof import("../components/home/TopTen.vue")['default']
+    'LazyHomeBigTitle': typeof import("../components/home/bigTitle.vue")['default']
+    'LazyHomeFoot': typeof import("../components/home/foot.vue")['default']
+    'LazyHomePageHead': typeof import("../components/home/pageHead.vue")['default']
+    'LazyHomePageNavigation': typeof import("../components/home/pageNavigation.vue")['default']
+    'LazyHomeSannongzixun': typeof import("../components/home/sannongzixun.vue")['default']
+    'LazyHomeTopTenTitle': typeof import("../components/home/topTenTitle.vue")['default']
     'LazyNuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
     'LazyNuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
     'LazyNuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -70,14 +74,16 @@ declare module 'vue' {
   export interface GlobalComponents extends _GlobalComponents { }
 }
 
-export const BigTitleList: typeof import("../components/BigTitle_List.vue")['default']
-export const MoreService: typeof import("../components/MoreService.vue")['default']
-export const BigTitle: typeof import("../components/bigTitle.vue")['default']
-export const Foot: typeof import("../components/foot.vue")['default']
-export const PageHead: typeof import("../components/pageHead.vue")['default']
-export const PageNavigation: typeof import("../components/pageNavigation.vue")['default']
-export const Sannongzixun: typeof import("../components/sannongzixun.vue")['default']
-export const TopTenTitle: typeof import("../components/topTenTitle.vue")['default']
+export const HomeBigTitleList: typeof import("../components/home/BigTitle_List.vue")['default']
+export const HomeMoreService: typeof import("../components/home/MoreService.vue")['default']
+export const HomePageMessage: typeof import("../components/home/PageMessage.vue")['default']
+export const HomeTopTen: typeof import("../components/home/TopTen.vue")['default']
+export const HomeBigTitle: typeof import("../components/home/bigTitle.vue")['default']
+export const HomeFoot: typeof import("../components/home/foot.vue")['default']
+export const HomePageHead: typeof import("../components/home/pageHead.vue")['default']
+export const HomePageNavigation: typeof import("../components/home/pageNavigation.vue")['default']
+export const HomeSannongzixun: typeof import("../components/home/sannongzixun.vue")['default']
+export const HomeTopTenTitle: typeof import("../components/home/topTenTitle.vue")['default']
 export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
 export const NuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
 export const NuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -101,14 +107,16 @@ export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/compone
 export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
 export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
 export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
-export const LazyBigTitleList: typeof import("../components/BigTitle_List.vue")['default']
-export const LazyMoreService: typeof import("../components/MoreService.vue")['default']
-export const LazyBigTitle: typeof import("../components/bigTitle.vue")['default']
-export const LazyFoot: typeof import("../components/foot.vue")['default']
-export const LazyPageHead: typeof import("../components/pageHead.vue")['default']
-export const LazyPageNavigation: typeof import("../components/pageNavigation.vue")['default']
-export const LazySannongzixun: typeof import("../components/sannongzixun.vue")['default']
-export const LazyTopTenTitle: typeof import("../components/topTenTitle.vue")['default']
+export const LazyHomeBigTitleList: typeof import("../components/home/BigTitle_List.vue")['default']
+export const LazyHomeMoreService: typeof import("../components/home/MoreService.vue")['default']
+export const LazyHomePageMessage: typeof import("../components/home/PageMessage.vue")['default']
+export const LazyHomeTopTen: typeof import("../components/home/TopTen.vue")['default']
+export const LazyHomeBigTitle: typeof import("../components/home/bigTitle.vue")['default']
+export const LazyHomeFoot: typeof import("../components/home/foot.vue")['default']
+export const LazyHomePageHead: typeof import("../components/home/pageHead.vue")['default']
+export const LazyHomePageNavigation: typeof import("../components/home/pageNavigation.vue")['default']
+export const LazyHomeSannongzixun: typeof import("../components/home/sannongzixun.vue")['default']
+export const LazyHomeTopTenTitle: typeof import("../components/home/topTenTitle.vue")['default']
 export const LazyNuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
 export const LazyNuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
 export const LazyNuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1728876094196}
+{"id":"dev","timestamp":1729124459553}

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024-10-14T03:21:36.455Z",
+  "date": "2024-10-17T00:21:05.198Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.9.7"
   },
   "dev": {
-    "pid": 6540,
+    "pid": 14404,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-6540-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-14404-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 types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />
 /// <reference path="types/plugins.d.ts" />

api/index.js

@@ -1,11 +1,11 @@
 //这里引入我们封装的axios,看你自己的路径
-// import request from '@/plugins/request'
-// export default {
-//     findByDict(object) {
-//         return request({
-//             url: "/web/getWebsiteCategory",
-//             method: 'get',
-//             data: object
-//         })
-//     },
-// }
+import request from '@/plugins/request'
+export default {
+    findByDict(object) {
+        return request({
+            url: "/web/getWebsiteCategory",
+            method: 'get',
+            data: object
+        })
+    },
+}

app.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
-    <NuxtPage></NuxtPage>
+    <NuxtLayout>
+      <NuxtPage></NuxtPage>
+    </NuxtLayout>
+
   </div>
 </template>

assets/css/font.css

@@ -1,9 +1,9 @@
 @font-face {
     font-family: "iconfont";
     /* Project id 4707101 */
-    src: url('//at.alicdn.com/t/c/font_4707101_p30x7m4y64s.woff2?t=1728617344555') format('woff2'),
-        url('//at.alicdn.com/t/c/font_4707101_p30x7m4y64s.woff?t=1728617344555') format('woff'),
-        url('//at.alicdn.com/t/c/font_4707101_p30x7m4y64s.ttf?t=1728617344555') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_4707101_861amuhly0c.woff2?t=1728982590887') format('woff2'),
+        url('//at.alicdn.com/t/c/font_4707101_861amuhly0c.woff?t=1728982590887') format('woff'),
+        url('//at.alicdn.com/t/c/font_4707101_861amuhly0c.ttf?t=1728982590887') format('truetype');
 }
 
 .iconfont {
@@ -14,11 +14,15 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xingzhuang-zhijiaosanjiaoxing-copy:before {
+    content: "\ec55";
+}
+
 .icon-youjiantou:before {
     content: "\e624";
 }
 
 .icon-zhijiao-triangle:before {
     content: "\e600";
-    color: #e1e1e1;
+    /* color: #e1e1e1; */
 }

assets/css/global.css

@@ -20,7 +20,7 @@ input {
     margin: 0;
 }
 
-body{
+body {
     font-size: 14px;
     font-family: PingFang SC, PingFang SC;
 }
@@ -37,7 +37,9 @@ a {
     text-decoration: none;
 }
 
-ul,ol,li{
+ul,
+ol,
+li {
     list-style: none;
 }
 
@@ -55,69 +57,64 @@ ul,ol,li{
 .innerLeft {
     width: 790px;
     margin-right: 20px;
+}
 
-    >.title {
-        width: 790px;
-
-        >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;
-
-            >span {
-                float: right;
-                width: 56px;
-                height: 20px;
-                line-height: 24px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #999999;
-                font-style: normal;
-                text-transform: none;
-            }
-        }
-    }
+.innerLeft>.title {
+    width: 790px;
 
+}
+
+.innerLeft>.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;
 
+}
 
+.innerLeft>.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;
 }
 
 .innerRight {
     width: 390px;
+}
 
-    >.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;
-
-            >span {
-                float: right;
-                width: 56px;
-                height: 20px;
-                line-height: 24px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #999999;
-                font-style: normal;
-                text-transform: none;
-            }
-        }
-    }
+.innerRight>.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;
+}
+
+.innerRight>.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;
 }

components/MoreService.vue → components/home/MoreService.vue

@@ -9,9 +9,9 @@
             <ul class="serviceList">
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -21,9 +21,9 @@
                 </li>
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -33,9 +33,9 @@
                 </li>
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -45,9 +45,9 @@
                 </li>
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -57,9 +57,9 @@
                 </li>
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -69,9 +69,9 @@
                 </li>
                 <li>
                     <img class="left"
-                        src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
+                        src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_1ba32eee-c498-4dd7-9cd9-013568c09db7@2x(2).png">
                     <div class="left detail">
-                        <img src="../static/images/Group 1560@2x.png" alt="">
+                        <img src="../../static/images/Group 1560@2x.png" alt="">
                         <h3>会员服务</h3>
                         <p>查看详情
                             <span class="iconfont icon-youjiantou"></span>
@@ -130,7 +130,7 @@
             left: 34px;
             width: 366px;
             height: 23px;
-            background: url("../static/images/Frame 486.png") no-repeat;
+            background: url("../../static/images/Frame 486.png") no-repeat;
         }
 
         .title::after {
@@ -141,7 +141,7 @@
             right: 34px;
             width: 366px;
             height: 23px;
-            background: url("../static/images/Frame 485.png") no-repeat;
+            background: url("../../static/images/Frame 485.png") no-repeat;
         }
 
         >.serviceList {

components/home/PageMessage.vue

@@ -0,0 +1,263 @@
+<!-- 资讯 -->
+<template>
+    <div class="message">
+        <div class="inner">
+            <div class="messageLeft">
+                <!-- 轮播图 -->
+                <img src="../../static/images/image.png" alt="">
+                <!-- 小图列表 -->
+                <ul class="smallList">
+                    <li>
+                        <img src="../../static/images/tonny00255@2x.png" alt="">
+                        <p>高邮市周山镇开展渔业安全生产</p>
+                    </li>
+                    <li>
+                        <img src="../../static/images/tonny00255_On@2x.png" alt="">
+                        <p>高邮市周山镇开展渔业安全生产</p>
+                    </li>
+                    <li>
+                        <img src="../../static/images/tonny00255@2x.png" alt="">
+                        <p>高邮市周山镇开展渔业安全生产</p>
+                    </li>
+                </ul>
+            </div>
+            <div class="messageRight">
+                <!-- 列表 -->
+                <div class="hotTop">
+                    <h3>
+                        热点资讯
+                        <span>查看更多</span>
+                    </h3>
+                    <ul>
+                        <li>
+                            <strong>1</strong>
+                            <span>高邮市周山镇开展渔业安全生产应急演</span>
+                        </li>
+                        <li>
+                            <strong>2</strong>
+                            <span>拉萨市扎实推进春耕备耕农资打假春…</span>
+                        </li>
+                        <li>
+                            <strong>3</strong>
+                            <span>市农业农村局关于印发连云港市市级…</span>
+                        </li>
+                        <li>
+                            <strong>4</strong>
+                            <span>仪征市农村农业局召开党的十九届全…</span>
+                        </li>
+                        <li>
+                            <strong>5</strong>
+                            <span>我省2021年中国农民丰收节庆祝活动…</span>
+                        </li>
+                        <li>
+                            <strong>6</strong>
+                            <span>我省2021年中国农民丰收节庆祝活动…</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="suggest">
+                    <h3>
+                        资讯推荐
+                        <span>查看更多</span>
+                    </h3>
+                    <ul>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演</span>
+                        </li>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演</span>
+                        </li>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演</span>
+                        </li>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演</span>
+                        </li>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演活动</span>
+                        </li>
+                        <li>
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演活动</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+// 资讯
+.message {
+    width: 100%;
+    height: 600px;
+
+    .messageLeft,
+    .messageRight {
+        float: left;
+    }
+
+    // 左侧
+    .messageLeft {
+
+        // 轮播图
+        >img {
+            width: 790px;
+            height: 440px;
+        }
+
+        // 轮播图下小图列表
+        .smallList {
+            width: 790px;
+            height: 140px;
+            margin-top: 16px;
+
+            img {
+                width: 250px;
+                height: 140px;
+            }
+
+            >li {
+                width: 250px;
+                height: 140px;
+                float: left;
+                padding-right: 20px;
+                position: relative;
+
+                >p {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: 250px;
+                    height: 30px;
+                    line-height: 30px;
+                    padding-left: 4px;
+                    box-sizing: border-box;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 16px;
+                    color: #FFFFFF;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    background: rgba(0, 0, 0, 0.5);
+                    border-radius: 0px 0px 2px 2px;
+                }
+            }
+
+            >li:nth-child(3) {
+                padding-right: 0px;
+            }
+        }
+    }
+
+    // 右侧
+    .messageRight {
+        width: 380px;
+        height: 600px;
+        margin-left: 30px;
+
+        .hotTop,
+        .suggest {
+            >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;
+
+                >span {
+                    float: right;
+                    width: 56px;
+                    height: 20px;
+                    line-height: 24px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+            ul {
+                >li {
+                    height: 25px;
+                    padding-top: 16px;
+
+                    >strong {
+                        display: inline-block;
+                        width: 24px;
+                        height: 24px;
+                        line-height: 24px;
+                        background-color: #cecece;
+                        padding-left: 6px;
+                        box-sizing: border-box;
+                        font-family: Source Han Sans, Source Han Sans;
+                        font-weight: 500;
+                        font-size: 18px;
+                        color: #FFFFFF;
+                        font-style: normal;
+                        text-transform: none;
+
+                    }
+
+                    &:nth-child(1)>strong {
+                        background-color: #00C524;
+                    }
+
+                    &:nth-child(2)>strong {
+                        background-color: #FFDF27;
+                    }
+
+                    &:nth-child(3)>strong {
+                        background-color: #F3C57F;
+                    }
+
+                    >em {
+                        display: inline-block;
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 10px;
+                        border: 2px solid #8CBA86;
+                    }
+
+                    >span {
+                        width: 320px;
+                        height: 25px;
+                        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;
+                        padding-left: 9px;
+                    }
+
+                    >span:hover {
+                        color: #139609;
+                    }
+
+                }
+            }
+        }
+
+        .suggest {
+            margin-top: 32px;
+        }
+    }
+}
+</style>

components/home/TopTen.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="topTenTitle">
+        <div class="inner">
+            <img src="../../static/images/Group 1816.png" alt="">
+        </div>
+    </div>
+</template>
+
+<script setup>
+    // defineProps(['logoSrc'])
+</script>
+
+<style lang="less">
+// 十强称号logo
+.topTenTitle {
+    width: 100%;
+    height: 90px;
+    margin: 34px 0 33px;
+
+    img {
+        width: 1200px;
+        height: 90px;
+    }
+}
+</style>

components/bigTitle.vue → components/home/bigTitle.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="bigTitle">
         <div class="inner">
-            <img src="../static/images/Group 1550@2x.png" alt="" class="left">
+            <img src="../../static/images/Group 1550@2x.png" alt="" class="left">
             <h1 class="left">扬州市在第23届江苏农业国际合作洽谈</h1>
         </div>
     </div>

components/foot.vue → components/home/foot.vue

@@ -4,7 +4,7 @@
             <!-- 图片列表 -->
             <ul class="logoList">
                 <li v-for="item in 7" class="left">
-                    <img src="../static/images/image 44@2x.png" alt="">
+                    <img src="../../static/images/image 44@2x.png" alt="">
                 </li>
             </ul>
             <!-- 友情链接 -->
@@ -44,7 +44,7 @@
             <!-- 图片列表 -->
             <ul class="logoList1">
                 <li v-for="item in 4" class="left">
-                    <img src="../static/images/image 50@2x.png" alt="">
+                    <img src="../../static/images/image 50@2x.png" alt="">
                 </li>
             </ul>
 
@@ -192,7 +192,7 @@ let serviceList = ["三农资讯网", "地方频道", "政务频道", "友情链
                 display: inline-block;
                 width: 20px;
                 height: 20px;
-                background-image: url("../static/images/beian 1.png");
+                background-image: url("../../static/images/beian 1.png");
                 vertical-align: middle;
 
             }

components/pageHead.vue → components/home/pageHead.vue

@@ -30,7 +30,7 @@
         <!-- 头部logo -->
         <div class="headerLogo">
             <div class="inner">
-                <img src="../static/images/image 36@2x.png" alt="" class="left">
+                <img src="../../static/images/image 36@2x.png" alt="" class="left">
                 <div class="search">
                     <em></em>
                     <input type="text" placeholder="输入关键词">
@@ -38,11 +38,11 @@
                 </div>
                 <ul class="serve">
                     <li>
-                        <img src="../static/images/huiyuan 1.png" alt="">
+                        <img src="../../static/images/huiyuan 1.png" alt="">
                         <p>会员服务</p>
                     </li>
                     <li>
-                        <img src="../static/images/lingquguanggao 1.png" alt="">
+                        <img src="../../static/images/lingquguanggao 1.png" alt="">
                         <p>广告服务</p>
                     </li>
                 </ul>
@@ -60,7 +60,7 @@ let goRegister = () => {
 }
 </script>
 
-<style>
+<style lang="less" scoped>
 /* 页面头部 */
 header {
     width: 100%;
@@ -68,7 +68,7 @@ header {
     font-size: 12px;
     font-family: PingFang SC-Regular;
     color: #666666;
-    background: url("../static/images/Group 1505.png") no-repeat;
+    background: url("../../static/images/Group 1505.png") no-repeat;
 }
 
 .headerNav {
@@ -121,11 +121,11 @@ header {
     }
 
     .home {
-        background-image: url(../static/images/Iconly／Light／Home.png);
+        background-image: url("../../static/images/Iconly／Light／Home.png");
     }
 
     .collection {
-        background-image: url(../static/images/Iconly／Light／Star.png);
+        background-image: url("../../static/images/Iconly／Light／Star.png");
     }
 }
 
@@ -134,6 +134,7 @@ header {
     height: 156px;
     border-bottom: 3px solid #006616;
 
+
     .inner>img {
         width: 342px;
         height: 72px;
@@ -155,7 +156,7 @@ header {
             display: inline-block;
             width: 30px;
             height: 30px;
-            background: url("../static/images/Iconly／Broken／Search.png") no-repeat;
+            background: url("../../static/images/Iconly／Broken／Search.png") no-repeat;
             position: absolute;
             top: 5px;
             left: 15px;

components/pageNavigation.vue → components/home/pageNavigation.vue

@@ -5,18 +5,9 @@
             <div class="inner">
                 <!-- 导航一 -->
                 <ul class="navigationOne">
-                    <li>贴身宝贝</li>
-                    <li>新农村</li>
-                    <li>政策法规</li>
-                    <li>三农之窗</li>
-                    <li>区域经济</li>
-                    <li>三农投资</li>
-                    <li>农贸资讯</li>
-                    <li>三农科教</li>
-                    <li>文化生活</li>
-                    <li>三农探索</li>
-                    <li>三农人物</li>
-                    <li>三农专题</li>
+                    <li v-for="(item,index) in data" :key="index">
+                        <NuxtLink to="/primaryNavigation/1">{{item.name }}</NuxtLink>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -56,7 +47,7 @@
         <!-- 导航栏下的大图 -->
         <div class="logo">
             <div class="inner">
-                <img src="../static/images/banner 1.png" alt="">
+                <img src="../../static/images/banner 1.png" alt="">
             </div>
         </div>
 
@@ -97,6 +88,20 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+const data = ref("");
+onMounted(async () => {
+    try {
+        const response = await axios.get('/web/getWebsiteCategory');
+        console.log(response.data.data);
+
+        data.value = response.data.data;
+    } catch (error) {
+        console.error(error);
+    }
+})
 let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '香港', '澳门', '台湾']
 
 </script>
@@ -128,11 +133,15 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
             text-align: left;
             font-style: normal;
             text-transform: none;
-            margin-right: 23px;
+            margin-right: 14px;
 
             &:nth-last-child(1) {
                 margin-right: 0px;
             }
+
+            a {
+                color: #333;
+            }
         }
 
     }
@@ -241,7 +250,11 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
 
 .logo {
     margin-top: 5px;
-    height: 130px;
+    height: 90px;
+    img{
+        width: 1200px;
+        height: 90px;
+    }
 }
 
 // 行政查询(未完成)
@@ -297,7 +310,7 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
                 height: 29px;
                 margin: 4px 21px 4px 22px;
                 vertical-align: middle;
-                background: url('../static/images/Iconly／Broken／Search.png');
+                background: url('../../static/images/Iconly／Broken／Search.png');
             }
 
             input {
@@ -320,7 +333,7 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
                 height: 24px;
                 margin-right: 19px;
                 vertical-align: middle;
-                background: url("../static/images/Iconly／Two-tone／Arrow - Down 3.png");
+                background: url("../../static/images/Iconly／Two-tone／Arrow - Down 3.png");
             }
 
             span {
@@ -346,7 +359,7 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
             height: 29px;
             margin: 4px 21px 4px 22px;
             vertical-align: middle;
-            background: url('../static/images/Iconly／Broken／Search.png');
+            background: url('../../static/images/Iconly／Broken／Search.png');
         }
 
         i {
@@ -355,7 +368,7 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
             height: 24px;
             margin-right: 11px;
             vertical-align: middle;
-            background: url("../static/images/Iconly／Two-tone／Arrow - Down 3.png");
+            background: url("../../static/images/Iconly／Two-tone／Arrow - Down 3.png");
         }
 
         span {

components/sannongzixun.vue → components/home/sannongzixun.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="sannongzixun">
         <div class="inner">
-            <img src="../static/images/Group 1548.png" alt="">
+            <img src="../../static/images/Group 1548.png" alt="">
         </div>
     </div>
 </template>
@@ -14,12 +14,12 @@
 // 十强称号logo
 .sannongzixun {
     width: 100%;
-    height: 84px;
+    height: 90px;
     margin: 34px 0 33px;
 
     img {
         width: 1200px;
-        height: 84px;
+        height: 90px;
     }
 }
 </style>

components/topTenTitle.vue → components/home/topTenTitle.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="topTenTitle">
         <div class="inner">
-            <img src="../static/images/Group 1503.png" alt="">
+            <img src="../../static/images/Group1503.png" alt="">
         </div>
     </div>
 </template>
@@ -14,12 +14,12 @@
 // 十强称号logo
 .topTenTitle {
     width: 100%;
-    height: 84px;
+    height: 90px;
     margin: 34px 0 33px;
 
     img {
         width: 1200px;
-        height: 84px;
+        height: 90px;
     }
 }
 </style>

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
+    "start": "nuxt start",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -23,4 +24,4 @@
   "devDependencies": {
     "nuxt-vite": "^0.3.5"
   }
-}
+}

pages/index.vue

@@ -1,118 +1,28 @@
 <template>
     <div>
         <!-- 页面头部 -->
-        <pageHead></pageHead>
+        <HomePageHead></HomePageHead>
 
         <!-- 页面导航 -->
-        <pageNavigation></pageNavigation>
+        <HomePageNavigation></HomePageNavigation>
 
         <!-- 大标题 -->
-        <BigTitle></BigTitle>
+        <HomeBigTitle></HomeBigTitle>
 
         <!-- 大标题下的列表 -->
-        <BigTitle_List></BigTitle_List>
+        <HomeBigTitleList></HomeBigTitleList>
 
         <!-- 资讯 -->
-        <div class="message">
-            <div class="inner">
-                <div class="messageLeft">
-                    <!-- 轮播图 -->
-                    <img src="../static/images/image.png" alt="">
-                    <!-- 小图列表 -->
-                    <ul class="smallList">
-                        <li>
-                            <img src="../static/images/tonny00255@2x.png" alt="">
-                            <p>高邮市周山镇开展渔业安全生产</p>
-                        </li>
-                        <li>
-                            <img src="../static/images/tonny00255_On@2x.png" alt="">
-                            <p>高邮市周山镇开展渔业安全生产</p>
-                        </li>
-                        <li>
-                            <img src="../static/images/tonny00255@2x.png" alt="">
-                            <p>高邮市周山镇开展渔业安全生产</p>
-                        </li>
-                    </ul>
-                </div>
-                <div class="messageRight">
-                    <!-- 列表 -->
-                    <div class="hotTop">
-                        <h3>
-                            热点资讯
-                            <span>查看更多</span>
-                        </h3>
-                        <ul>
-                            <li>
-                                <strong>1</strong>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <strong>2</strong>
-                                <span>拉萨市扎实推进春耕备耕农资打假春…</span>
-                            </li>
-                            <li>
-                                <strong>3</strong>
-                                <span>市农业农村局关于印发连云港市市级…</span>
-                            </li>
-                            <li>
-                                <strong>4</strong>
-                                <span>仪征市农村农业局召开党的十九届全…</span>
-                            </li>
-                            <li>
-                                <strong>5</strong>
-                                <span>我省2021年中国农民丰收节庆祝活动…</span>
-                            </li>
-                            <li>
-                                <strong>6</strong>
-                                <span>我省2021年中国农民丰收节庆祝活动…</span>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="suggest">
-                        <h3>
-                            资讯推荐
-                            <span>查看更多</span>
-                        </h3>
-                        <ul>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演活动</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演活动</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <HomePageMessage></HomePageMessage>
 
         <!-- 十强称号logo -->
-        <topTenTitle></topTenTitle>
+        <HomeTopTenTitle></HomeTopTenTitle>
 
         <!-- 更多服务 -->
-        <MoreService></MoreService>
+        <HomeMoreService></HomeMoreService>
 
         <!-- 农副产品十强光荣称号logo -->
-        <!-- 图片需要修改 -->
-        <topTenTitle></topTenTitle>
+        <HomeTopTen></HomeTopTen>
 
         <!-- 农民工 -->
         <div class="farming">
@@ -203,7 +113,7 @@
         </div>
 
         <!-- 十强称号logo -->
-        <topTenTitle></topTenTitle>
+        <HomeTopTenTitle></HomeTopTenTitle>
 
 
         <!-- 三农科教 -->
@@ -265,23 +175,7 @@
                             </div>
                         </div>
                         <ul>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演</span>
-                            </li>
-                            <li>
-                                <em></em>
-                                <span>高邮市周山镇开展渔业安全生产应急演活动</span>
-                            </li>
-                            <li>
+                            <li v-for="item in 5">
                                 <em></em>
                                 <span>高邮市周山镇开展渔业安全生产应急演活动</span>
                             </li>
@@ -293,7 +187,7 @@
         </div>
 
         <!-- 三农资讯logo -->
-        <sannongzixun></sannongzixun>
+        <HomeSannongzixun></HomeSannongzixun>
 
         <!--打假维权 动态 -->
         <div class="dynamic">
@@ -358,7 +252,7 @@
 
 
         <!-- 三农资讯logo -->
-        <sannongzixun></sannongzixun>
+        <HomeSannongzixun></HomeSannongzixun>
 
         <!--政策法规 -->
         <div class="policy">
@@ -435,200 +329,15 @@
         </div>
 
         <!-- 页面底部 -->
-        <foot></foot>
+        <HomeFoot></HomeFoot>
     </div>
 </template>
 
 <script setup>
-import MoreService from '~/components/MoreService.vue';
-import topTenTitle from '../components/topTenTitle.vue';
-import Sannongzixun from '~/components/sannongzixun.vue';
-
-const logoSrc = "../static/images/Group 1548.png"
-// const logoSrc=require("../static/images/Group 1548.png")
 
 </script>
 
 <style lang="less" scoped>
-// 资讯
-.message {
-    width: 100%;
-    height: 600px;
-
-    .messageLeft,
-    .messageRight {
-        float: left;
-    }
-
-    // 左侧
-    .messageLeft {
-
-        // 轮播图
-        >img {
-            width: 790px;
-            height: 440px;
-        }
-
-        // 轮播图下小图列表
-        .smallList {
-            width: 790px;
-            height: 140px;
-            margin-top: 16px;
-
-            img {
-                width: 250px;
-                height: 140px;
-            }
-
-            >li {
-                width: 250px;
-                height: 140px;
-                float: left;
-                padding-right: 20px;
-                position: relative;
-
-                >p {
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    width: 250px;
-                    height: 30px;
-                    line-height: 30px;
-                    padding-left: 4px;
-                    box-sizing: border-box;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    font-size: 16px;
-                    color: #FFFFFF;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                    background: rgba(0, 0, 0, 0.5);
-                    border-radius: 0px 0px 2px 2px;
-                }
-            }
-
-            >li:nth-child(3) {
-                padding-right: 0px;
-            }
-        }
-    }
-
-    // 右侧
-    .messageRight {
-        width: 380px;
-        height: 600px;
-        margin-left: 30px;
-
-        .hotTop,
-        .suggest {
-            >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;
-
-                >span {
-                    float: right;
-                    width: 56px;
-                    height: 20px;
-                    line-height: 24px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: #999999;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-
-            ul {
-                >li {
-                    height: 25px;
-                    padding-top: 16px;
-
-                    >strong {
-                        display: inline-block;
-                        width: 24px;
-                        height: 24px;
-                        line-height: 24px;
-                        background-color: #cecece;
-                        padding-left: 6px;
-                        box-sizing: border-box;
-                        font-family: Source Han Sans, Source Han Sans;
-                        font-weight: 500;
-                        font-size: 18px;
-                        color: #FFFFFF;
-                        font-style: normal;
-                        text-transform: none;
-
-                    }
-
-                    &:nth-child(1)>strong {
-                        background-color: #00C524;
-                    }
-
-                    &:nth-child(2)>strong {
-                        background-color: #FFDF27;
-                    }
-
-                    &:nth-child(3)>strong {
-                        background-color: #F3C57F;
-                    }
-
-                    >em {
-                        display: inline-block;
-                        width: 10px;
-                        height: 10px;
-                        border-radius: 10px;
-                        border: 2px solid #8CBA86;
-                    }
-
-                    >span {
-                        width: 320px;
-                        height: 25px;
-                        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;
-                        padding-left: 9px;
-                    }
-
-                    >span:hover {
-                        color: #139609;
-                    }
-
-                }
-            }
-        }
-
-        .suggest {
-            margin-top: 32px;
-        }
-    }
-}
-
-// 十强称号logo
-.topTenTitle {
-    width: 100%;
-    height: 84px;
-    margin: 34px 0 33px;
-
-    img {
-        width: 1200px;
-        height: 84px;
-    }
-}
 
 // 农民工
 .farming {

pages/login.vue

@@ -1,29 +1,29 @@
 <template>
-    <!-- 登录页面 -->
-    <div class="login">
-        <h1>登录</h1>
-        <!-- <img src="../assets/images/image 36.png" alt="" width="200px"> -->
+  <!-- 登录页面 -->
+  <div class="login">
+    <h1>登录</h1>
 
+    <div v - if="data">
+      <h2>{{ data.code }}</h2>
+      <p>{{ data.content }}</p>
     </div>
+    <button @click="getData">按钮</button>
+
+  </div>
 </template>
 
 <script setup>
-const { data, pending, error, refresh } = await useFetch('/api/index', {
-  onRequest({ request, options }) {
-    // 设置请求头
-    options.headers = options.headers || {}
-    options.headers.authorization = '...'
-  },
-  onRequestError({ request, options, error }) {
-    // 处理请求错误
-  },
-  onResponse({ request, response, options }) {
-    // 处理响应数据
-    localStorage.setItem('token', response._data.token)
-  },
-  onResponseError({ request, response, options }) {
-    // 处理响应错误
-  }
-})
+const getData = async () => {
+    try {
+        const response = await axios.get('/web/getWebsiteCategory');
+        console.log(response.data);
+
+        data.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+
 
 </script>

pages/primaryNavigation/[id].vue

@@ -0,0 +1,1627 @@
+<template>
+    <div>
+        <!-- 页面头部 -->
+        <HomePageHead></HomePageHead>
+
+        <!-- 页面导航 -->
+        <HomePageNavigation></HomePageNavigation>
+
+        <!-- 三农之窗 -->
+        <div class="sannongzhichuang">
+            <div class="inner">
+                <h2>三农之窗
+                    <em class="iconfont icon-xingzhuang-zhijiaosanjiaoxing-copy"></em>
+                </h2>
+                <p class="introduction">
+                    <strong>频道介绍</strong>
+                    <span v-for="item in ChannelList">
+                        <NuxtLink to="">{{ item }}</NuxtLink>
+                    </span>
+                </p>
+
+            </div>
+        </div>
+
+        <!-- 农民工part1 -->
+        <div class="farmingPartOne">
+            <div class="inner">
+                <div class="innerLeft">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <div class="leftTop">
+                        <div class="leftTopPhoto left">
+                            <img src="../../static/images/tonny00255(1).png" alt="">
+                            <span></span>
+                        </div>
+                        <ul class="left">
+                            <li v-for="item in 8">
+                                <em></em>
+                                高邮市周山镇开展渔业安全生产应急演练
+                            </li>
+                        </ul>
+                    </div>
+                    <ul class="leftBottom">
+                        <li v-for="item in 4">
+                            <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_a23e4b96-a6d7-49e1-a283-68c395f277f9.png"
+                                alt="">
+                            <p>扬州市邗江区开展2021年度下半年…</p>
+                        </li>
+                    </ul>
+                </div>
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <!-- 列表 -->
+                    <ul class="rightList">
+                        <li v-for="item in 5">
+                            <img class="left"
+                                src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_0e341355-f4d5-4796-b6cd-bdc87996f81b(1).png"
+                                alt="">
+                            <p class="left">高邮市周山镇开展渔业安全生产应急演练</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- 三农资讯logo -->
+        <HomeSannongzixun></HomeSannongzixun>
+
+        <!-- 农民工part2 -->
+        <div class="farmingPartTwo">
+            <div class="inner">
+                <div class="farmer">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <div class="PartTwoPhoto">
+                        <img src="../../static/images/tonny00255_On@2x(1).png" alt="">
+                        <span>高邮市周山镇开展渔业安全生产应急...</span>
+                    </div>
+                    <ul class="PartTwoList">
+                        <li v-for="item in 6">
+                            <em></em>
+                            高邮市周山镇开展渔业安全生产应急
+                        </li>
+                    </ul>
+                </div>
+                <div class="farmer">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <div class="PartTwoPhoto">
+                        <img src="../../static/images/tonny00255_On@2x(1).png" alt="">
+                        <span>高邮市周山镇开展渔业安全生产应急...</span>
+                    </div>
+                    <ul class="PartTwoList">
+                        <li v-for="item in 6">
+                            <em></em>
+                            高邮市周山镇开展渔业安全生产应急
+                        </li>
+                    </ul>
+                </div>
+                <div class="farmer">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <div class="PartTwoPhoto">
+                        <img src="../../static/images/tonny00255_On@2x(1).png" alt="">
+                        <span>高邮市周山镇开展渔业安全生产应急...</span>
+                    </div>
+                    <ul class="PartTwoList">
+                        <li v-for="item in 6">
+                            <em></em>
+                            高邮市周山镇开展渔业安全生产应急
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- 三农资讯logo -->
+        <HomeSannongzixun></HomeSannongzixun>
+
+        <!-- 资讯推荐 -->
+        <div class="zixuntuijian">
+            <div class="inner">
+                <div class="innerLeft">
+                    <div class="zixunTop">
+                        <div class="zixunLeft">
+                            <!-- 标题部分 -->
+                            <div class="title">
+                                <h3>
+                                    资讯推荐
+                                    <span>查看更多</span>
+                                </h3>
+                            </div>
+                            <!-- 图片和文字列表 -->
+                            <ul class="photo_text">
+                                <li>
+                                    <img src="../../static/images/tonny00255_On(1).png" alt="">
+                                    <div>
+                                        <h5>高邮市周山镇开展渔业安全生产应急</h5>
+                                        <p>
+                                            <span>王某某</span>
+                                            <span>2024-8-6</span>
+                                        </p>
+                                    </div>
+                                </li>
+                                <li v-for="item in 3">
+                                    <em></em>
+                                    高邮市周山镇开展渔业安全生产应急
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="zixunRight">
+                            <!-- 标题部分 -->
+                            <div class="title">
+                                <h3>
+                                    资讯推荐
+                                    <span>查看更多</span>
+                                </h3>
+                            </div>
+                            <!-- 图片和文字列表 -->
+                            <ul class="photo_text">
+                                <li>
+                                    <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b@2x(2).png"
+                                        alt="">
+                                    <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f@2x.png"
+                                        alt="">
+                                </li>
+                                <li v-for="item in 3">
+                                    <em></em>
+                                    高邮市周山镇开展渔业安全生产应急
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                    <div class="zixunBottom">
+                        <img class="left"
+                            src="../../static/images/rgmezdvz_19982_A_Chinese_farmer_carrying_a_hoe_is_hoeing_the_fi_a036c7b3-b05e-4d3d-a371-0bed91ec1ff8.png"
+                            alt="">
+                        <ul class="leftList left">
+                            <li>
+                                <h4>
+                                    <em></em>
+                                    仪征市农业农村局召开
+                                </h4>
+                                <p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
+                            </li>
+                            <li>
+                                <h4>
+                                    <em></em>
+                                    仪征市农业农村局召开
+                                </h4>
+                                <p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
+                            </li>
+                            <li>
+                                <h4>
+                                    <em></em>
+                                    仪征市农业农村局召开
+                                </h4>
+                                <p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <div class="title">
+                        <h3>
+                            资讯推荐
+                            <span>查看更多</span>
+                        </h3>
+                    </div>
+                    <ul class="information">
+                        <li v-for="item in 4">
+                            <img src="../../static/images/rgmezdvz_19982_On_a_vast_and_boundless_wheat_field_many_harvest_5b5cfeda-ef17-4551-a935-5f8e3f799b69@2x(1).png"
+                                alt="">
+                            <div class="text">
+                                <h5>高邮市周山镇来战雨夜安全演练</h5>
+                                <p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- 十强称号logo -->
+        <HomeTopTen></HomeTopTen>
+
+        <!-- 农民工 -->
+        <div class="farming">
+            <div class="inner">
+                <div class="innerLeft">
+                    <div class="farmer">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                        <ul>
+                            <li v-for="item in 10">
+                                <em></em>
+                                <span>高邮市周山镇开展渔业安全生产应急演</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="farmer">
+                        <h3>
+                            农民工
+                            <span>查看更多</span>
+                        </h3>
+                        <ul>
+                            <li v-for="item in 10">
+                                <em></em>
+                                <span>高邮市周山镇开展渔业安全生产应急演</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <h3>
+                        农民工
+                        <span>查看更多</span>
+                    </h3>
+                    <!-- 轮播图 -->
+                    <div class="banner">
+                        <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
+                            alt="">
+                    </div>
+                    <!-- 轮播图下小图列表 及内容列表 -->
+                    <div class="banner_b_img">
+                        <div class="photo">
+                            <div class="photoL">
+                                <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b.png"
+                                    alt="">
+                                <span>高邮市周山镇开展渔业</span>
+                            </div>
+                            <div class="photoR">
+                                <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f.png"
+                                    alt="">
+                                <span>高邮市周山镇开展渔业</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="banner_text_list">
+                        <ul>
+                            <li v-for="item in 5">
+                                <em></em>
+                                <span>高邮市周山镇开展渔业安全生产应急演练活动</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 十强称号logo -->
+        <HomeTopTenTitle></HomeTopTenTitle>
+
+        <!-- 三农科教 -->
+        <div class="scienceEducation">
+            <div class="inner">
+                <!-- 左侧 -->
+                <div class="innerLeft">
+                    <!-- 标题部分 -->
+                    <div class="scienceTitle">
+                        <h5>三农科教</h5>
+                        <p>
+                            <span>
+                                <a href="#">农产畅销</a>
+                            </span>
+                            <span>
+                                <a href="#">农业在线</a>
+                            </span>
+                            <span>
+                                <a href="#">农产行情</a>
+                            </span>
+                            <span>
+                                <a href="#">名优特产</a>
+                            </span>
+                        </p>
+
+                    </div>
+                    <ul class="scienceList">
+                        <li v-for="item in 6">
+                            <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_a23e4b96-a6d7-49e1-a283-68c395f277f9.png"
+                                alt="">
+                            <p>市农业农村局关于印发连云港市市级…</p>
+                        </li>
+                    </ul>
+                </div>
+                <!-- 右侧 -->
+                <div class="innerRight">
+                    <!-- 标题部分 -->
+                    <h3>
+                        三农之窗
+                        <span>查看更多</span>
+                    </h3>
+                    <ul class="sannongList">
+                        <li v-for="item in 5">
+                            <em></em>
+                            <span>高邮市周山镇开展渔业安全生产应急演活动</span>
+                        </li>
+                    </ul>
+                    <!-- 轮播图 -->
+                    <div class="banner">
+                        <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
+                            alt="">
+                    </div>
+                    <!-- 轮播图下小图列表 及内容列表 -->
+                    <div class="banner_b_img">
+                        <div class="photo">
+                            <div class="photoL">
+                                <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b.png"
+                                    alt="">
+                                <span>高邮市周山镇开展渔业</span>
+                            </div>
+                            <div class="photoR">
+                                <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f.png"
+                                    alt="">
+                                <span>高邮市周山镇开展渔业</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <!-- 页脚部分 -->
+        <HomeFoot></HomeFoot>
+    </div>
+</template>
+
+<script setup>
+
+let ChannelList = ['理论前沿', '典型经验', '魅力乡村', '农民之家', '农业天地', '农村建设', '高端资讯', '实践探索']
+
+</script>
+
+<style lang="less" scoped>
+// 三农之窗
+.sannongzhichuang {
+    margin: 30px 0 40px;
+
+    .inner {
+        width: 1200px;
+        height: 67px;
+        position: relative;
+
+    }
+
+    h2 {
+        display: inline-block;
+        background-color: #129502;
+        width: 156px;
+        height: 43px;
+        padding: 14px 31px 10px 25px;
+        font-family: STXingkai, STXingkai;
+        font-weight: 400;
+        font-size: 39px;
+        color: #FFFFFF;
+        line-height: 46px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+        -webkit-text-stroke: 1px #3C6C47;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 99;
+
+        em {
+            position: absolute;
+            top: -16px;
+            right: -12px;
+            color: #185410;
+            display: inline-block;
+            width: 13px;
+            height: 13px;
+        }
+    }
+
+    p.introduction {
+        display: inline-block;
+        width: 1003px;
+        height: 56px;
+        line-height: 56px;
+        background-color: #fafafa;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+
+        >strong:first-child {
+            margin-left: 40px;
+            display: inline-block;
+            vertical-align: middle;
+            width: 28px;
+            height: 36px;
+            padding: 3px 7px;
+            border: 0.5px solid #129502;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: bold;
+            font-size: 14px;
+            color: #139602;
+            line-height: 18px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+
+        }
+
+        >span {
+            width: 64px;
+            height: 21px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #000000;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            margin-top: 17px;
+            padding: 0 24px;
+            border-right: 1px solid #ccc;
+
+            a {
+                color: #000;
+            }
+        }
+
+        >span:last-child {
+            border: none;
+        }
+    }
+}
+
+//农民工part1
+.farmingPartOne {
+    width: 100%;
+    height: 600px;
+
+    .inner {
+        height: 600px;
+
+        .innerLeft {
+            height: 600px;
+
+            .leftTop {
+                margin-top: 20px;
+                height: 320px;
+
+                .leftTopPhoto {
+                    width: 387px;
+                    height: 320px;
+                }
+
+                >ul.left {
+                    margin-left: 25px;
+                    width: 362px;
+                    height: 320px;
+                    margin-top: 5px;
+
+                    >li {
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 8px;
+                            background-color: #d9d9d9;
+                            margin-right: 8px;
+                            vertical-align: middle;
+                        }
+
+                        width: 362px;
+                        height: 22px;
+                        font-family: PingFang SC,
+                        PingFang SC;
+                        font-weight: 500;
+                        font-size: 18px;
+                        color: #333333;
+                        line-height: 22px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                        margin-bottom: 19px;
+                    }
+
+                    >li:hover {
+                        color: #088f04;
+                    }
+
+                    >li:hover>em {
+                        background-color: #088f04;
+                    }
+                }
+            }
+
+            .leftBottom {
+                height: 202px;
+                margin-top: 21px;
+
+                >li {
+                    float: left;
+                    width: 185px;
+                    height: 202px;
+                    margin-right: 10px;
+
+                    >img {
+                        width: 185px;
+                        height: 139px;
+                    }
+
+                    >p {
+                        width: 185px;
+                        height: 63px;
+                        padding: 8px 5px 12px;
+                        box-sizing: border-box;
+                        background-color: #f5f5f5;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 500;
+                        font-size: 18px;
+                        color: #333333;
+                        line-height: 24px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+                }
+
+                >li:last-child {
+                    margin: 0;
+                }
+            }
+        }
+
+        .innerRight {
+            .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;
+
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+//农民工part2
+.farmingPartTwo {
+    width: 100%;
+    height: 600px;
+
+    .inner {
+        width: 1200px;
+        height: 600px;
+
+        >.farmer {
+            float: left;
+            width: 380px;
+            height: 600px;
+            margin-right: 29px;
+
+            // 农民工part2标题
+            >.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;
+            }
+
+            // 农民工part2图片
+            .PartTwoPhoto {
+                width: 380px;
+                height: 280px;
+                margin-top: 20px;
+                position: relative;
+
+                img {
+                    width: 380px;
+                    height: 280px;
+                }
+
+                >span {
+                    display: inline-block;
+                    width: 380px;
+                    height: 50px;
+                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
+                    color: #FFFFFF;
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    font-family: Source Han Sans, Source Han Sans;
+                    font-weight: 500;
+                    font-size: 20px;
+                    line-height: 23px;
+                    padding-top: 11px;
+                    padding-left: 13px;
+                    box-sizing: border-box;
+                }
+            }
+
+            //农民工part2文字列表
+            .PartTwoList {
+                width: 380px;
+                height: 263px;
+                background-color: #fff;
+                box-shadow: 0px 4px 30px 1px rgba(174, 174, 174, 0.25);
+                padding-top: 20px;
+                box-sizing: border-box;
+
+                >li {
+                    width: 380px;
+                    height: 25px;
+                    line-height: 25px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    margin-bottom: 16px;
+
+                    >em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        background-color: #d9d9d9;
+                        border-radius: 8px;
+                        margin-left: 19px;
+                        margin-right: 10px;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+                >li:hover>em {
+                    background-color: #139602;
+                }
+            }
+        }
+
+        >.farmer:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+//资讯推荐
+.zixuntuijian {
+    width: 100%;
+    height: 600px;
+
+    .innerLeft {
+
+        // 左侧的上半部分
+        .zixunTop {
+            height: 286px;
+
+            .zixunLeft,
+            .zixunRight {
+                float: left;
+                width: 380px;
+                height: 286px;
+
+                // 标题部分
+                >.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 {
+                        width: 380px;
+                        height: 25px;
+                        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: 9px;
+
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 8px;
+                            margin-right: 10px;
+                            background-color: #d9d9d9;
+                        }
+                    }
+                }
+            }
+
+            // 左侧的资讯推荐的左半部分
+            .zixunLeft {
+                margin-right: 30px;
+
+                .photo_text {
+                    >li:first-child {
+                        width: 380px;
+                        height: 120px;
+                        margin-top: 20px;
+                        margin-bottom: 16px;
+                        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 {
+                                height: 54px;
+                                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;
+                                }
+
+                            }
+                        }
+                    }
+
+                    >li {
+                        width: 380px;
+                        height: 25px;
+                        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: 9px;
+
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 8px;
+                            margin-right: 10px;
+                            background-color: #d9d9d9;
+                        }
+                    }
+                }
+            }
+
+            // 左侧的资讯推荐的右半部分
+            .zixunRight {
+                width: 380px;
+                height: 229px;
+
+                .photo_text {
+                    margin-top: 20px;
+
+                    >li:first-child {
+                        width: 380px;
+                        height: 120px;
+                        margin-bottom: 16px;
+
+                        >img {
+                            width: 185px;
+                            height: 120px;
+                        }
+
+                        >img:first-child {
+                            margin-right: 10px;
+                        }
+                    }
+                }
+
+            }
+        }
+
+        //左侧的下半部分
+        .zixunBottom {
+            width: 790px;
+            height: 280px;
+            margin-top: 40px;
+
+            img {
+                width: 498px;
+                height: 280px;
+            }
+
+            >.leftList {
+                width: 290px;
+                height: 280px;
+                background-color: #f6f6f6;
+                padding: 11px 26px 6px 20px;
+                box-sizing: border-box;
+
+                >li {
+                    width: 296px;
+                    height: 75px;
+                    color: #666666;
+                    font-size: 14px;
+                    margin-bottom: 18px;
+
+                    h4 {
+                        font-family: Source Han Sans, Source Han Sans;
+                        height: 27px;
+                        line-height: 21px;
+                        font-size: 18px;
+                        color: #333333;
+
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            background-color: #333333;
+                            border-radius: 8px;
+                        }
+                    }
+
+                    p {
+                        width: 249px;
+                        height: 48px;
+                        line-height: 24px;
+                        padding-left: 14px;
+                    }
+                }
+
+                >li:hover,
+                >li:hover>h4 {
+                    color: #088f04;
+                }
+
+                >li:hover>h4>em {
+                    background-color: #088f04;
+                }
+            }
+        }
+    }
+
+    .innerRight {
+        .information {
+            width: 380px;
+            margin-top: 20px;
+
+            >li {
+                width: 380px;
+                height: 120px;
+                margin-bottom: 21px;
+
+                img {
+                    float: left;
+                    width: 160px;
+                    height: 120px;
+                }
+
+                .text {
+                    float: left;
+                    width: 220px;
+                    height: 120px;
+                    padding-left: 15px;
+                    box-sizing: border-box;
+
+                    >h5 {
+                        width: 199px;
+                        height: 43px;
+                        padding-top: 6px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 600;
+                        font-size: 18px;
+                        color: #333333;
+                        line-height: 26px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                    >p {
+                        width: 198px;
+                        height: 46px;
+                        margin-top: 16px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #666666;
+                        line-height: 24px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+                }
+
+                .text:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+}
+
+// 农民工
+.farming {
+    width: 100%;
+    height: 605px;
+
+    // 左侧
+    .innerLeft {
+        width: 790px;
+        height: 605px;
+        margin-right: 21px;
+        // background-color: #ccc;
+
+        .farmer {
+            width: 790px;
+            height: 312px;
+
+            >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;
+
+                >span {
+                    float: right;
+                    width: 56px;
+                    height: 20px;
+                    line-height: 24px;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+            >ul {
+                margin-top: 20px;
+
+                >li {
+                    float: left;
+                    width: 362px;
+                    height: 22px;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 21px;
+                    text-align: left;
+                    margin-bottom: 29px;
+                    margin-right: 27px;
+
+                    >em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        background-color: #d9d9d9;
+                        border-radius: 4px;
+                        margin: 5px 8px 6px;
+                        vertical-align: middle;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+            }
+        }
+
+        .farmerbottom {
+            width: 790px;
+            height: 280px;
+
+            img {
+                width: 498px;
+                height: 280px;
+            }
+
+            >.leftList {
+                width: 290px;
+                height: 280px;
+                background-color: #f6f6f6;
+                padding: 11px 26px 6px 20px;
+                box-sizing: border-box;
+
+                >li {
+                    width: 296px;
+                    height: 75px;
+                    color: #666666;
+                    font-size: 14px;
+                    margin-bottom: 18px;
+
+                    h4 {
+                        font-family: Source Han Sans, Source Han Sans;
+                        height: 27px;
+                        line-height: 21px;
+                        font-size: 18px;
+                        color: #333333;
+
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            background-color: #333333;
+                            border-radius: 8px;
+                        }
+                    }
+
+                    p {
+                        width: 249px;
+                        height: 48px;
+                        line-height: 24px;
+                        padding-left: 14px;
+                    }
+                }
+
+                >li:hover,
+                >li:hover>h4 {
+                    color: #088f04;
+                }
+
+                >li:hover>h4>em {
+                    background-color: #088f04;
+                }
+            }
+        }
+    }
+
+
+    // 右侧
+    .innerRight {
+        width: 380px;
+        height: 605px;
+
+        // 标题部分
+        >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;
+
+            >span {
+                float: right;
+                width: 56px;
+                height: 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #999999;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+
+        // 轮播图
+        .banner {
+            width: 380px;
+            height: 214px;
+            margin-top: 20px;
+        }
+
+        .banner_b_img {
+
+            // 图片部分
+            .photo {
+                height: 104px;
+                margin-top: 10px;
+            }
+
+            .photoL,
+            .photoR {
+                float: left;
+                width: 185px;
+                height: 104px;
+                position: relative;
+
+                img {
+                    width: 185px;
+                    height: 104px;
+                }
+
+                span {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: inline-block;
+                    padding-left: 7px;
+                    box-sizing: border-box;
+                    width: 185px;
+                    height: 22px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    font-weight: 500px;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 22px;
+
+                }
+            }
+
+            .photoL {
+                margin-right: 10px;
+            }
+
+        }
+
+        .banner_text_list {
+            ul {
+                width: 380px;
+                height: 186px;
+                margin-top: 30px;
+
+                >li {
+                    height: 22px;
+                    padding-bottom: 16px;
+
+                    >strong {
+                        display: inline-block;
+                        width: 24px;
+                        height: 24px;
+                        line-height: 24px;
+                        background-color: #cecece;
+                        padding-left: 6px;
+                        box-sizing: border-box;
+                        font-family: Source Han Sans, Source Han Sans;
+                        font-weight: 500;
+                        font-size: 18px;
+                        color: #FFFFFF;
+                        font-style: normal;
+                        text-transform: none;
+
+                    }
+
+                    >em {
+                        display: inline-block;
+                        width: 10px;
+                        height: 10px;
+                        border-radius: 10px;
+                        border: 2px solid #8CBA86;
+                    }
+
+                    >span {
+                        width: 380px;
+                        height: 22px;
+                        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;
+                        padding-left: 6px;
+                    }
+
+                    >span:hover {
+                        color: #139609;
+                    }
+
+                }
+            }
+        }
+
+
+    }
+}
+
+//三农科教
+.scienceEducation {
+    height: 600px;
+    margin-bottom: 76px;
+
+    .innerLeft,
+    .innerRight {
+        float: left;
+    }
+
+    // 左侧
+    .innerLeft {
+        width: 790px;
+        height: 616px;
+        margin-right: 21px;
+
+        // 标题
+        .scienceTitle {
+            height: 37px;
+
+            h5 {
+                float: left;
+                width: 96px;
+                height: 34px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 600;
+                font-size: 24px;
+                color: #000000;
+                line-height: 28px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                margin-right: 20px;
+            }
+
+            >p {
+                float: left;
+                height: 37px;
+                line-height: 30px;
+
+                >span {
+                    display: inline-block;
+                    height: 20px;
+                    line-height: 20px;
+                    text-align: center;
+                    margin: 4px 0px 3px;
+                    padding: 0 20px;
+                    border-right: 1px solid #ccc;
+
+                    >a {
+                        display: inline-block;
+                        padding-bottom: 11px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 500;
+                        font-size: 20px;
+                        color: #666666;
+                        line-height: 20px;
+                        font-style: normal;
+                        text-transform: none;
+                        box-sizing: border-box;
+                    }
+                }
+
+                >span:nth-child(4) {
+                    border-right: none;
+                }
+
+                >span:hover>a {
+                    color: #139602;
+                    border-bottom: 1px solid #139602;
+
+                }
+            }
+        }
+
+        // 标题下列表
+        .scienceList {
+            margin-top: 17px;
+
+            >li {
+                width: 250px;
+                height: 276px;
+                float: left;
+                margin-right: 20px;
+                position: relative;
+
+                >img {
+                    width: 250px;
+                    height: 220px;
+                }
+
+                >p {
+                    height: 56px;
+                    width: 248px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 600;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 24px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+
+                >p:hover {
+                    color: #139602;
+                }
+            }
+
+            >li:nth-child(3),
+            >li:nth-child(6) {
+                margin-right: 0;
+            }
+
+            >li::before {
+                content: "";
+                display: inline-block;
+                width: 40px;
+                height: 20px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                background-image: url("../../static/images/Component 209.png");
+            }
+        }
+
+    }
+
+
+    // 右侧
+    .innerRight {
+        width: 380px;
+        height: 600px;
+
+        // 标题部分
+        >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;
+
+            >span {
+                float: right;
+                width: 56px;
+                height: 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #999999;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+
+        ul.sannongList {
+            width: 380px;
+            height: 186px;
+
+            >li {
+                height: 22px;
+                padding-top: 16px;
+
+                >strong {
+                    display: inline-block;
+                    width: 24px;
+                    height: 24px;
+                    line-height: 24px;
+                    background-color: #cecece;
+                    padding-left: 6px;
+                    box-sizing: border-box;
+                    font-family: Source Han Sans, Source Han Sans;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #FFFFFF;
+                    font-style: normal;
+                    text-transform: none;
+
+                }
+
+                >em {
+                    display: inline-block;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 10px;
+                    border: 2px solid #8CBA86;
+                }
+
+                >span {
+                    width: 380px;
+                    height: 22px;
+                    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;
+                    padding-left: 9px;
+                }
+
+                >span:hover {
+                    color: #139609;
+                }
+
+            }
+        }
+
+        // 轮播图
+        .banner {
+            width: 380px;
+            height: 214px;
+            margin-top: 45px;
+        }
+
+        .banner_b_img {
+
+            // 图片部分
+            .photo {
+                height: 104px;
+                margin-top: 10px;
+            }
+
+            .photoL,
+            .photoR {
+                float: left;
+                width: 185px;
+                height: 104px;
+                position: relative;
+
+                img {
+                    width: 185px;
+                    height: 104px;
+                }
+
+                span {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: inline-block;
+                    padding-left: 7px;
+                    box-sizing: border-box;
+                    width: 185px;
+                    height: 22px;
+                    background-color: rgba(0, 0, 0, 0.5);
+                    font-weight: 500px;
+                    font-size: 14px;
+                    color: #FFFFFF;
+                    line-height: 22px;
+
+                }
+            }
+
+            .photoL {
+                margin-right: 10px;
+            }
+
+
+        }
+
+
+    }
+}
+</style>

pages/primaryNavigation/newsList[id].vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        11
-    </div>
-</template>

plugins/request.js

@@ -1,33 +1,41 @@
-// import axios from "axios";// 创建一个axios实例
-// const service = axios.create({
-//     baseURL:"http://192.168.1.201:9501", // url = base url + request url
-//     withCredentials: true, // send cookies when cross-domain requests
-//     timeout: 10000, // request timeout 10s
-// });
+import { defineNuxtPlugin } from '#app'
+import axios from 'axios'
 
-// // 请求拦截器
-// service.interceptors.request.use(config => {
-//     // do something before request is sent
-//     return config;
-// },error => {
-//     // do something with request error
-//     console.log(error) // for debug
-//     return Promise.reject(error);
-// });
+export default defineNuxtPlugin(nuxtApp => {
+    const service = axios.create({
+        baseURL: 'http://192.168.1.201:9501' // 这里替换为你的实际基础URL
+    });
 
-// // 响应拦截器
-// service.interceptors.response.use(response => {
-//     //do something before response
-//     if (response.status >= 200 && response.status <= 210) {
-//         return response;
-//     } else if(response.status == 404){
-//         console.error(response.data.errmsg);
-//     }else{
-//         // 不走
-//     }
-// },
-// error => {
-//     console.log('err' + error); // for debugreturn Promise.reject(error);
-// })
+    // 请求拦截器
+    service.interceptors.request.use(config => {
+        console.log("请求拦截器",config);
+        
+        return config;
+    }, error => {
+        console.log(error) 
+        return Promise.reject(error);
+    });
+
+    // 响应拦截器
+    service.interceptors.response.use(response => {
+        if (response.status >= 200 && response.status <= 210) {
+            return response;
+        } else if (response.status == 404) {
+            console.error(response.data.errmsg);
+        } else {
+            
+        }
+    },
+        error => {
+            console.log(1);
+            
+            console.log('err' + error); 
+        })
+
+    return {
+        provide: {
+            axios: service
+        }
+    }
+});
 
-// export default service;