完成详情页

完成详情页

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1740529133238}
+{"id":"dev","timestamp":1740704310001}

.nuxt/manifest/meta/2c58504e-1c6f-426d-ae24-7d863133e471.json

@@ -0,0 +1 @@
+{"id":"2c58504e-1c6f-426d-ae24-7d863133e471","timestamp":1740704193785,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2025-02-26T00:19:04.085Z",
+  "date": "2025-02-28T00:58:33.745Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.10.4"
   },
   "dev": {
-    "pid": 6260,
+    "pid": 10380,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-6260-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-10380-1.sock"
     }
   }
 }

.nuxt/tsconfig.json

@@ -102,7 +102,7 @@
         "./imports"
       ],
       "#app-manifest": [
-        "./manifest/meta/dev"
+        "./manifest/meta/dev.json"
       ],
       "#components": [
         "./components"

assets/css/class.less

@@ -0,0 +1,1452 @@
+a {
+    color: #333333;
+}
+
+//农民工part1
+.farmingPartOne {
+    width: 100%;
+    height: 600px;
+
+    .inner {
+        height: 600px;
+
+        .innerLeft {
+            height: 600px;
+
+            .leftTop {
+                margin-top: 20px;
+                height: 320px;
+
+                .leftTopPhoto {
+                    width: 387px;
+                    height: 320px;
+                    position: relative;
+
+                    img {
+                        width: 387px;
+                        height: 320px;
+                    }
+
+                    span {
+                        display: inline-block;
+                        width: 387px;
+                        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;
+                        white-space: nowrap;
+                        /* 禁止换行 */
+                        overflow: hidden;
+                        /* 隐藏超出部分 */
+                        text-overflow: ellipsis;
+                        /* 超出部分显示省略号 */
+                    }
+                }
+
+                >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;
+                        white-space: nowrap;
+                        /* 禁止换行 */
+                        overflow: hidden;
+                        /* 隐藏超出部分 */
+                        text-overflow: ellipsis;
+                        /* 超出部分显示省略号 */
+                    }
+
+                    >li:hover {
+                        a {
+                            color: #088f04;
+                        }
+
+                        color: #088f04;
+                    }
+
+                    >li:hover>em {
+                        background-color: #088f04;
+                    }
+                }
+            }
+
+            .leftBottom {
+                height: 202px;
+                margin-top: 21px;
+
+                >li {
+                    float: left;
+                    width: 185px;
+                    height: 202px;
+                    margin-right: 10px;
+
+                    >a {
+                        >img {
+                            width: 185px;
+                            height: 139px;
+                        }
+                    }
+
+
+
+                    >p {
+                        width: 185px;
+                        height: 58px;
+                        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;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        /* 限制显示的行数 */
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+
+                }
+
+                >li:hover {
+                    a {
+                        color: #088f04;
+                    }
+                }
+
+                >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;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 4;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        word-break: break-all;
+                        padding-left: 12px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #333333;
+                        line-height: 24px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+
+                    }
+
+                    >p:hover {
+                        box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+
+                        a {
+                            color: #088f04;
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+//农民工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>a {
+                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;
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+                    /* 超出部分显示省略号 */
+                }
+            }
+
+            //农民工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;
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+                    /* 超出部分显示省略号 */
+
+                    >em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        background-color: #d9d9d9;
+                        border-radius: 8px;
+                        margin-left: 19px;
+                        margin-right: 10px;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+
+                    a {
+                        color: #088f04;
+                    }
+                }
+
+                >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;
+
+                .towPic {
+                    display: flex;
+                    width: 380px;
+                    height: 116px;
+                    margin-top: 20px;
+
+                    .picBox {
+                        width: 50%;
+                        text-align: center;
+                    }
+
+                    .picBox:nth-child(3),
+                    .picBox:nth-child(4),
+                    .picBox:nth-child(5) {
+                        display: none;
+                    }
+
+                    img {
+                        width: 190px;
+                        height: 120px;
+                    }
+
+                    .picBox:first-child {
+                        margin-right: 5px;
+                    }
+                }
+
+                // 标题部分
+                >.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 {
+                    article {
+                        white-space: nowrap;
+                        /* 禁止换行 */
+                        overflow: hidden;
+                        /* 隐藏超出部分 */
+                        text-overflow: ellipsis;
+
+                        /* 超出部分显示省略号 */
+                        li {
+                            white-space: nowrap;
+                            /* 禁止换行 */
+                            overflow: hidden;
+                            /* 隐藏超出部分 */
+                            text-overflow: ellipsis;
+
+                            /* 超出部分显示省略号 */
+                            a:hover {
+                                color: #088f04;
+                            }
+
+                        }
+
+                        li:hover {
+                            color: #088f04;
+
+                            a {
+                                color: #088f04;
+                            }
+                        }
+
+                        img {
+                            width: 100px;
+                        }
+                    }
+
+                    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 {
+                                width: 200px;
+                                height: 54px;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                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: 75px;
+                                    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:nth-child(1) {
+                        display: none;
+                    }
+
+                    >li:nth-child(2) {
+                        display: none;
+                    }
+                }
+
+            }
+        }
+
+        //左侧的下半部分
+        .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: 35px;
+                    line-height: 35px;
+                    color: #666666;
+                    font-size: 14px;
+                    margin-bottom: 18px;
+
+                    h4 {
+                        font-family: Source Han Sans, Source Han Sans;
+                        height: 35px;
+                        line-height: 35px;
+                        font-size: 18px;
+                        font-weight: 400;
+                        white-space: nowrap;
+                        /* 禁止换行 */
+                        overflow: hidden;
+                        /* 隐藏超出部分 */
+                        text-overflow: ellipsis;
+                        /* 超出部分显示省略号 */
+                        color: #333333;
+                        width: 260px;
+
+                        em {
+                            display: inline-block;
+                            width: 8px;
+                            height: 8px;
+                            background-color: #333333;
+                            border-radius: 8px;
+                            margin-right: 5px;
+                        }
+                    }
+
+                    p {
+                        width: 249px;
+                        height: 48px;
+                        line-height: 24px;
+                        padding-left: 14px;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        /* 限制显示的行数 */
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                >li:hover,
+                >li:hover>h4>a,
+                >li:hover>p>a {
+                    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: 49px;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        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: 20px;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 2;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        word-break: break-all;
+                        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;
+                        margin-top: 40px;
+                    }
+                }
+
+                .text:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                    background-color: #fff;
+
+                    h5 {
+                        a {
+                            color: #088f04;
+                        }
+                    }
+
+                    p {
+                        color: #088f04;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 农民工
+.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;
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+                    /* 超出部分显示省略号 */
+
+                    >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;
+
+                    a {
+                        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;
+                display: flex;
+            }
+
+            .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;
+
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+                    /* 超出部分显示省略号 */
+
+                }
+            }
+
+            .photoL {
+                margin-right: 10px;
+            }
+
+        }
+
+        .banner_text_list {
+            ul {
+                width: 380px;
+                height: 186px;
+                margin-top: 30px;
+
+                >li {
+
+                    a {
+                        height: 22px;
+                        font-size: 16px;
+
+                        &:hover {
+                            color: #139609;
+                        }
+                    }
+
+                    height: 22px;
+                    padding-bottom: 16px;
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+                    /* 超出部分显示省略号 */
+
+                    >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: 6px;
+                        height: 6px;
+                        border-radius: 10px;
+                        border: 2px solid #8CBA86;
+                        margin-right: 10px;
+                    }
+
+                    >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;
+
+
+                    }
+
+                    >span:hover {
+                        color: #139609;
+                    }
+
+                }
+            }
+        }
+
+
+    }
+}
+
+//三农科教
+.scienceEducation {
+    height: 600px;
+    margin-bottom: 76px;
+
+    .innerLeft,
+    .innerRight {
+        float: left;
+    }
+
+    // 左侧
+    .innerLeft {
+        width: 790px;
+        height: 616px;
+        margin-right: 21px;
+
+
+    }
+
+
+    // 右侧
+    .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;
+                white-space: nowrap;
+                /* 禁止换行 */
+                overflow: hidden;
+                /* 隐藏超出部分 */
+                text-overflow: ellipsis;
+                /* 超出部分显示省略号 */
+
+                >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: 6px;
+                    height: 6px;
+                    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;
+
+                    a {
+                        color: #088f04;
+                    }
+                }
+
+            }
+        }
+
+        // 轮播图
+        .banner {
+            width: 380px;
+            height: 214px;
+            margin-top: 45px;
+        }
+
+        .banner_b_img {
+
+            // 图片部分
+            .photo {
+                height: 104px;
+                margin-top: 10px;
+                display: flex;
+            }
+
+            .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;
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏超出部分 */
+                    text-overflow: ellipsis;
+
+                    /* 超出部分显示省略号 */
+                    a {
+                        color: #fff;
+                    }
+                }
+            }
+
+            .photoL {
+                margin-right: 10px;
+            }
+
+
+        }
+
+
+    }
+}
+
+// 标题
+.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;
+        display: flex;
+
+        >span {
+            display: inline-block;
+            //height: 20px;
+            line-height: 20px;
+            text-align: center;
+            margin: 4px 0px 3px;
+            padding: 0 20px;
+            //border-right: 1px solid #ccc;
+            font-weight: 500;
+            font-size: 20px;
+            cursor: pointer;
+            padding-bottom: 11px;
+
+            // >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;
+            // }
+
+            .current {
+                color: #139602;
+                border-bottom: 1px solid #139602;
+            }
+        }
+
+        >span:nth-child(4) {
+            border-right: none;
+        }
+
+        >span:hover>a {
+            color: #139602;
+            border-bottom: 1px solid #139602;
+
+        }
+    }
+}
+
+
+.box {
+    width: 790px;
+    height: 570px;
+    position: relative;
+    overflow: hidden;
+}
+
+.fade-in {
+    animation: fadeIn 1s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+    opacity: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 1s ease;
+}
+
+.scienceListBox {
+    width: 3160px;
+    height: 570px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: all 3s linear 0;
+
+}
+
+// 标题下列表
+.scienceList {
+    width: 790px;
+    height: 570px;
+    float: left;
+    margin-top: 17px;
+
+    >li {
+        width: 250px;
+        height: 276px;
+        float: left;
+        margin-right: 20px;
+        position: relative;
+
+        img {
+            width: 250px;
+            height: 220px;
+            border-top-left-radius: 40px;
+            border-bottom-right-radius: 40px;
+        }
+
+        >p {
+            height: 50px;
+            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;
+
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            /* 限制显示的行数 */
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        // >p:hover {
+        //     color: #139602;
+        // }
+    }
+
+    >li:hover {
+        color: #088f04;
+
+        >p:hover {
+            a {
+                color: #088f04;
+            }
+
+            // 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");
+    }
+}
+
+.active {
+    border-bottom: 3px solid #139602;
+    height: 36px;
+    display: inline-block;
+}
+
+.noSelect {
+    border-bottom: 3px solid #fff;
+    height: 36px;
+    display: inline-block;
+}

assets/css/detail.less

@@ -0,0 +1,198 @@
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    .el-breadcrumb::v-deep {
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    /deep/.el-breadcrumb__inner a,
+    /deep/.el-breadcrumb__inner.is-link {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 20px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsDetail {
+    width: 100%;
+    //height: 1400px;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+        //height: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+
+        .innerLeft {
+            // height: 1400px;
+            border-top: 1px solid #139602;
+
+            .LeftTop {
+                height: 522px;
+                margin-top: 50px;
+
+                >h1 {
+
+                    line-height: 40px;
+                    margin-bottom: 30px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 30px;
+                    color: #333333;
+                }
+
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+
+            .leftBottom {
+                width: 790px;
+                // height: 754px;
+                margin-top: 76px;
+                font-size: 20px;
+                line-height: 38px;
+                margin-bottom: 30px;
+
+                ul>li img{
+                    width: 790px;   
+                    height: 382px;
+                }
+
+                img{
+                    width: 790px;   
+                    height: 382px;
+                }
+                
+                p.tinymce-material {
+                    img {
+                        width: 790px;
+                    }
+                }
+
+                >h3,
+                >p {
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 38px;
+                    padding-bottom: 30px;
+
+                    img {
+                        width: 790px;
+                    }
+                }
+
+                >h3 {
+                    font-weight: 600px;
+                }
+
+                >p {
+                    font-weight: 400;
+                }
+
+            }
+
+            .disclaimer {
+                width: 790px;
+                overflow: hidden;
+                border-top: 1px solid #e6e6e6;
+                padding: 30px 0px;
+                color: #999999;
+                font-size: 17px;
+
+                p {
+                    width: 790px;
+                    line-height: 30px;
+                }
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            // height: 605px;
+            overflow: hidden;
+            border-top: 1px solid #139602;
+
+            .hotList1 {
+                margin-bottom: 50px;
+            }
+        }
+    }
+}
+
+.leftBottom::v-deep p img,
+.leftBottom::v-deep img,
+.leftBottom::v-deep video  {
+    max-width: 700px;
+}
+.leftBottom::v-deep h1,
+.leftBottom::v-deep h2,
+.leftBottom::v-deep h3,
+.leftBottom::v-deep h4,
+.leftBottom::v-deep h5,
+.leftBottom::v-deep h6 {
+    font-size: 20px;
+    font-weight: 500;
+}

assets/css/list.less

@@ -0,0 +1,410 @@
+#newsList {
+    width: 100%;
+    overflow: hidden;
+}
+
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 30px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    :deep(.el-breadcrumb) {
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    :deep(.el-breadcrumb__inner a),
+    :deep(.el-breadcrumb__inner.is-link) {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 20px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsList {
+    width: 100%;
+    // height: 675px;
+    overflow: hidden;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+
+        .innerLeft,
+        .innerRight {
+            border-top: 1px solid #139602;
+        }
+
+        .innerLeft {
+            // height: 675px;
+
+            >.list {
+                // height: 570px;
+                margin-bottom: 70px;
+
+                >li {
+                    width: 790px;
+                    height: 56px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    line-height: 56px;
+
+                    >a {
+                        width: 360px;
+                        height: 26px;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 20px;
+                        color: #333333;
+                        line-height: 26px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                }
+
+                >li:hover>a {
+                    color: #139602;
+                }
+
+                >li:nth-child(1)::after,
+                >li:nth-child(2)::after {
+                    content: "热";
+                    margin-left: 13px;
+                    background: #FF8A37;
+                    color: #fff;
+                    font-size: 14px;
+                    padding: 0px 2px;
+                }
+
+                >li:nth-child(5n) {
+                    // padding-top: 10px;
+                    // padding-bottom: 10px;
+                    border-bottom: 1px solid #D9D9D9;
+                }
+            }
+
+            >.pagination {
+                width: 800px;
+                height: 34px;
+                margin-left: 141px;
+                display: flex;
+                justify-content: center;
+                margin: 0;
+
+                // 鼠标移入后字体颜色
+                .el-pagination::v-deep :hover {
+                    color: #139609;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next,
+                .el-pagination.is-background::v-deep .btn-prev {
+                    width: 70px;
+                    height: 34px;
+                    margin: 0px 10px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .el-pager li {
+                    margin: 0px 10px;
+                    width: 38px;
+                    height: 34px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next.is-active,
+                .el-pagination.is-background::v-deep .btn-prev.is-active,
+                .el-pagination.is-background::v-deep .el-pager li.is-active {
+                    background-color: #028e21;
+                    color: #fff;
+                }
+
+
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            // height: 605px;
+        }
+    }
+}
+
+//资讯推荐
+.zixuntuijian {
+    width: 100%;
+    height: 290px;
+    margin-bottom: 70px;
+
+    .innerLeft {
+
+        // 左侧
+        .zixunLeft {
+            margin-right: 30px;
+        }
+
+        .zixunRight,
+        .zixunLeft {
+            float: left;
+            width: 380px;
+            height: 290px;
+
+            // 标题部分
+            >.title {
+                width: 380px;
+            }
+
+            >.title>h3 {
+                height: 36px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: bold;
+                font-size: 24px;
+                color: #000000;
+                line-height: 28px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                border-bottom: 1px solid #139602;
+
+            }
+
+            >.title>h3>span {
+                float: right;
+                width: 56px;
+                height: 20px;
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 14px;
+                color: #999999;
+                font-style: normal;
+                text-transform: none;
+            }
+
+            .photo_text {
+
+                >li:first-child {
+                    width: 380px;
+                    height: 120px;
+                    margin-top: 20px;
+                    margin-bottom: 15px;
+                    position: relative;
+
+                    >img {
+                        float: left;
+                        width: 160px;
+                        height: 120px;
+                    }
+
+                    >div {
+                        float: left;
+                        width: 220px;
+                        height: 120px;
+                        padding-left: 15px;
+                        padding-top: 6px;
+                        box-sizing: border-box;
+                        background-color: #f6f6f6;
+
+
+                        >h5 {
+                            width: 200px;
+                            height: 54px;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 2;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            word-break: break-all;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 500;
+                            font-size: 18px;
+                            color: #333333;
+                            line-height: 26px;
+                            text-align: left;
+                            font-style: normal;
+                            text-transform: none;
+                        }
+
+                        >p {
+                            width: 200px;
+                            height: 22px;
+                            line-height: 20px;
+                            position: absolute;
+                            bottom: 5px;
+                            right: 0;
+
+                            >span {
+                                display: inline-block;
+                                // width: 100px;
+                                height: 18px;
+                                font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 400;
+                                font-size: 12px;
+                                color: #999999;
+                                text-align: left;
+                                line-height: 14px;
+                                font-style: normal;
+                                text-transform: none;
+                            }
+
+                            >span:last-child {
+                                // width: 90px;
+                                text-align: right;
+                                margin-left: 20px;
+                            }
+
+                        }
+                    }
+                }
+
+                >li {
+                    width: 380px;
+                    height: 25px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 21px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-bottom: 10px;
+
+                    em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 8px;
+                        margin-right: 10px;
+                        background-color: #d9d9d9;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+                >li:hover em {
+                    background-color: #139602;
+                }
+            }
+        }
+    }
+
+    .innerRight {
+        width: 381px;
+        height: 290px;
+        background-color: #fbfbfb;
+
+        >.title {
+            width: 380px;
+            height: 40px;
+            line-height: 40px;
+            border-top: 1px solid #139602;
+            border-bottom: 1px solid #e7e7e7;
+
+            >h4 {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                margin-left: 20px;
+                font-size: 20px;
+                color: #000000;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                >span {
+                    float: right;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    margin-right: 10px;
+                    color: #999999;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+        }
+
+        .rightList {
+            height: 540px;
+            margin-top: 20px;
+
+            >li {
+                height: 100px;
+                margin-bottom: 10px;
+
+                >img {
+                    width: 150px;
+                    height: 100px;
+                }
+
+                >p {
+                    width: 219px;
+                    height: 100px;
+                    padding-left: 12px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 22px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+
+                }
+
+                >p:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+
+    }
+}

pages/primaryNavigation/newsList.vue → assets/css/search.less

@@ -1,195 +1,3 @@
-<template>
-    <div id="newsList">
-        <!-- 页面头部 -->
-        <HomePageHead></HomePageHead>
-        <!-- Banner1 -->
-        <HomeBanner1></HomeBanner1>
-        <!-- 面包屑导航 -->
-        <div class="breadcrumb">
-            <div class="inner">
-                <span class="location">当前位置:</span>
-                <el-breadcrumb :separator-icon="ArrowRight">
-                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                    <el-breadcrumb-item :to="{ path: '/primaryNavigation/newsList' }">三农之窗</el-breadcrumb-item>
-                </el-breadcrumb>
-            </div>
-        </div>
-        <!-- 资讯列表 -->
-        <div class="newsList">
-            <div class="inner">
-                <div class="innerLeft">
-                    <ul class="list">
-                        <li v-for="(item, index) in newsList" :key="index">
-                            <!-- <NuxtLink to="/primaryNavigation/newsDetail/newsDetail">{{ item }}</NuxtLink> -->
-                            <NuxtLink to="/primaryNavigation/newsDetail/newsDetail">{{ item.title }}</NuxtLink>
-                        </li>
-                    </ul>
-                    <!-- 分页器 -->
-                    <div class="pagination">
-                        <HomePagination @sendData="handleData"></HomePagination>
-                    </div>
-                </div>
-                <div class="innerRight">
-                    <DetailHotNews></DetailHotNews>
-                </div>
-            </div>
-        </div>
-
-        <!-- 三农资讯logo -->
-        <HomeSannongzixun></HomeSannongzixun>
-
-        <!-- 资讯推荐 -->
-        <div class="zixuntuijian">
-            <div class="inner">
-                <div class="innerLeft">
-                    <div class="zixunLeft">
-                        <!-- 标题部分 -->
-                        <div class="title">
-                            <h3>
-                                资讯推荐
-                                <span>查看更多</span>
-                            </h3>
-                        </div>
-                        <!-- 图片和文字列表 -->
-                        <ul class="photo_text">
-                            <li>
-                                <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/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>
-                <div class="innerRight">
-                    <!-- 标题部分 -->
-                    <div class="title">
-                        <h4>
-                            热点资讯
-                            <span>查看更多</span>
-                        </h4>
-                    </div>
-                    <!-- 列表 -->
-                    <ul class="rightList">
-                        <li v-for="item in 2">
-                            <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>
-
-        <!-- 页面底部 -->
-        <HomeFoot></HomeFoot>
-    </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue';
-import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
-import { ArrowRight } from '@element-plus/icons-vue'
-
-// let newsList = [
-//     '稳经济政策正朝着“稳健有效”持续发力',
-//     '布上青花 指尖非遗——千年蜡染的传承与创新',
-//     '拉萨市涉建筑垃圾、城市建设两部条例将于11月1日实施',
-//     '中国稳定股市新工具启动 5000亿规模只能投资股市',
-//     '国家数据局：建立健全公共数据产品和服务价格形成机制',
-//     '第十二届全国少数民族传统体育运动会启动火炬传递',
-//     '网信部门曝光“毒视频”“开盒挂人”等涉未成年人乱象',
-//     '辅警执勤时被闯红灯超速摩托车撞倒 浙江义乌警方通报',
-//     '接地气、心贴心 各地创新宣讲形式把全会精神送到干部群众身边',
-//     '美军火商对台军售涉抬价诈欺，台当局替美辩称“美国也是受害...'
-// ]
-
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-//关键词
-let keyWord = useState("keyWord", () => "")
-
-const route = useRoute();
-keyWord.value = route.query.keyword;
-
-// 页码
-let page = useState("page", () => 1)
-
-
-//页面组件传递数据的时间驱动函数
-const handleData = (data) => {
-    console.log(data.value)
-    page.value=data.value
-
-    //在页码发生变化时去请求响应页面的新闻数据
-    axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response=>{
-        // console.log(response.data.rows);
-        newsList.value = response.data.rows;
-    }).catch(error => {
-        console.error(error);
-    })
-}
-
-// 新闻列表
-const newsList = useState("newsList", () => '');
-const newslists = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlesList?page=${1}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`);
-        // console.log(response.data.rows);
-        newsList.value = response.data.rows;
-    } catch (error) {
-        console.error(error);
-    }
-}
-//挂载成功钩子函数
-onMounted(() => {
-    newslists()
-})
-
-//路由中间件
-definePageMeta({
-    middleware:'auth'
-})
-
-</script>
-
-<style lang="less" scoped>
 //导航条
 .breadcrumb {
     width: 100%;
@@ -204,13 +12,13 @@ definePageMeta({
     font-style: normal;
     text-transform: none;
 
-    /deep/.el-breadcrumb {
+    :deep(.el-breadcrumb) {
         display: inline-block;
         vertical-align: -4px;
     }
 
-    /deep/.el-breadcrumb__inner a,
-    /deep/.el-breadcrumb__inner.is-link {
+    :deep(.el-breadcrumb__inner a),
+    :deep(.el-breadcrumb__inner.is-link) {
         color: #666666;
         font-weight: 400;
         text-decoration: none;
@@ -247,32 +55,60 @@ definePageMeta({
     }
 }
 
+.empty {
+    div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: 200px;
+    }
+
+    width: 100%;
+    height: 600px;
+    font-size: 26px;
+    color: #CCCCCC;
+
+    img {
+        display: inline-block;
+    }
+}
+
 // 资讯列表
 .newsList {
-    width: 100%;
-    height: 675px;
+    width: 1200px;
+    margin: 0 auto;
+    //height: 675px;
     margin-bottom: 70px;
 
     .inner {
         width: 1200px;
 
+        .innerLeft {
+            width: 100%;
+        }
+
         .innerLeft,
         .innerRight {
             border-top: 1px solid #139602;
+            clear: both;
+            float: none;
         }
 
         .innerLeft {
-            height: 675px;
+            //height: 675px;
 
             >.list {
-                height: 570px;
+                //height: 570px;
                 margin-bottom: 70px;
 
                 >li {
-                    width: 790px;
+                    width: 100%;
                     height: 56px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                     line-height: 56px;
-                    border-bottom: 1px solid #D9D9D9;
+
 
                     >a {
                         width: 360px;
@@ -302,12 +138,47 @@ definePageMeta({
                     font-size: 14px;
                     padding: 0px 2px;
                 }
+
+                >li:nth-child(5n) {
+                    border-bottom: 1px solid #D9D9D9;
+                }
             }
 
             >.pagination {
-                width: 790px;
+                width: 100%;
                 height: 34px;
                 margin-left: 141px;
+                display: flex;
+                justify-content: center;
+                margin: 0;
+
+                // 鼠标移入后字体颜色
+                .el-pagination::v-deep :hover {
+                    color: #139609;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next,
+                .el-pagination.is-background::v-deep .btn-prev {
+                    width: 70px;
+                    height: 34px;
+                    margin: 0px 10px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .el-pager li {
+                    margin: 0px 10px;
+                    width: 38px;
+                    height: 34px;
+                    border-radius: 4px;
+                }
+
+                .el-pagination.is-background::v-deep .btn-next.is-active,
+                .el-pagination.is-background::v-deep .btn-prev.is-active,
+                .el-pagination.is-background::v-deep .el-pager li.is-active {
+                    background-color: #028e21;
+                    color: #fff;
+                }
+
 
             }
         }
@@ -315,7 +186,8 @@ definePageMeta({
         .innerRight {
             width: 381px;
             height: 605px;
-
+            clear: both;
+            overflow: hidden;
         }
     }
 }
@@ -396,7 +268,14 @@ definePageMeta({
 
 
                         >h5 {
+                            width: 200px;
                             height: 54px;
+                            display: -webkit-box;
+                            -webkit-box-orient: vertical;
+                            -webkit-line-clamp: 2;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            word-break: break-all;
                             font-family: Source Han Sans, Source Han Sans;
                             font-weight: 500;
                             font-size: 18px;
@@ -417,7 +296,7 @@ definePageMeta({
 
                             >span {
                                 display: inline-block;
-                                width: 100px;
+                                // width: 100px;
                                 height: 18px;
                                 font-family: Source Han Sans, Source Han Sans;
                                 font-weight: 400;
@@ -430,8 +309,9 @@ definePageMeta({
                             }
 
                             >span:last-child {
-                                width: 90px;
+                                // width: 90px;
                                 text-align: right;
+                                margin-left: 20px;
                             }
 
                         }
@@ -441,6 +321,9 @@ definePageMeta({
                 >li {
                     width: 380px;
                     height: 25px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                     font-family: PingFang SC, PingFang SC;
                     font-weight: 500;
                     font-size: 18px;
@@ -545,4 +428,44 @@ definePageMeta({
 
     }
 }
-</style>
+
+.searchBox {
+    text-align: center;
+    padding-bottom: 40px;
+}
+
+.search {
+    width: 100%;
+    height: 100px;
+    // background-color: #f5f5f5;
+
+    .inner {
+        width: 1200px;
+        height: 100px;
+        // line-height: 100px;
+        padding-top: 10px;
+        text-align: center;
+
+        input {
+            width: 582px;
+            height: 46px;
+            outline: none;
+            border: 1px solid #E6E6E6;
+            border-radius: 0;
+            padding-left: 20px;
+            vertical-align: 0px;
+            font-size: 16px;
+            color: #666666
+        }
+
+        button {
+            width: 120px;
+            height: 48px;
+            background-color: #139602;
+            color: #fff;
+            border: none;
+            border-radius: 0;
+            cursor: pointer;
+        }
+    }
+}

components/detail/HotNews.vue

@@ -17,24 +17,25 @@
 </template>
 
 <script setup>
-
-//获得axios
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-import { onMounted } from 'vue'
-
 const hotNewsList = ref([])
-
-//获取详情
-const getHotNews = async () => {
-    const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${14}&level=${4}`);
-    hotNewsList.value = response.data;
+async function getPageData() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteArticlett', {
+        method: 'GET',
+        query: {
+            'pageSize': 14,
+            'level': 4,
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            //console.log('模块1数据上部分请求成功！', mkdata.value.data);
+            hotNewsList.value = mkdata.value.data;
+        }
+    }
 }
-
-onMounted(() => {
-    getHotNews()
-})
+getPageData();
 </script>
 
 <style lang="less" scoped>

components/detail/HotNews2.vue

@@ -20,24 +20,26 @@
 </template>
 
 <script setup>
-
-//获得axios
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-import { onMounted } from 'vue'
-
 const hotNewsList = ref([])
-
-//获取详情
-const getHotNews = async () => {
-    const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${5}&level=${4}&placeid=${15}`);
-    hotNewsList.value = response.data;
+async function getPageData() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteArticlett', {
+        method: 'GET',
+        query: {
+            'pageSize': 5,
+            'level': 4,
+            'placeid': 15
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            //console.log('模块1数据上部分请求成功！', mkdata.value.data);
+            hotNewsList.value = mkdata.value.data;
+        }
+    }
 }
-
-onMounted(() => {
-    getHotNews()
-})
+getPageData();
 </script>
 
 

components/home/SecondaryHeading.vue

@@ -1,9 +1,7 @@
 <template>
-    <!-- 一级标题页导航 -->
     <div class="sannongzhichuang">
         <div class="inner">
             <h2>
-                <!-- 三农之窗 -->
                 {{ title.name }}
                 <em class="iconfont icon-xingzhuang-zhijiaosanjiaoxing-copy"></em>
             </h2>
@@ -11,8 +9,7 @@
                 <strong>频道介绍</strong>
                 <div v-for="(item,index) in titleData">
                     <span v-if="index<=7">
-                        <!-- <NuxtLink :to="`/newsList/${item.id}`" target="_blank">{{ item.name }}</NuxtLink> -->
-                        <NuxtLink :to="{ path: `/newsList/${item.category_id}`, query: { catid: item.category_id } }" target="_blank">{{ item.name }}</NuxtLink>
+                        <NuxtLink :to="{ path: `/newsList/${item.cid}`}" target="_blank">{{item.title}}</NuxtLink>
                     </span>
                 </div>
             </p>
@@ -21,37 +18,33 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-
+//设置组件数据 start---------------------------------------->
+//子导航
 const props = defineProps({
-    titleName: String,
     titleData:Array
 });
 
-//获得axios
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-//let ChannelList = ['理论前沿', '典型经验', '魅力乡村', '农民之家', '农业天地', '农村建设', '高端资讯', '实践探索']
-
-//获得跳转过来的id
+//二级标题名称
 const route = useRoute();
 const routeId = route.params.id; //获得该页面的id
 const routeName = route.query.name; //获得该页面的名称
-
 const title = ref("")
-const getTitle = async () => {
-    try {
-        const response = await axios.get(`/web/getOneWebsiteCategory?catid=${routeId}`);
-        title.value = response.data;
-    } catch (error) {
-        console.error(error);
+
+async function getPageData() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId,
+        },
+    });
+    if (mkdataError.value) {
+    } else {
+        if (mkdata.value) {
+            title.value = mkdata.value.data;
+        }
     }
 }
-
-onMounted(() => {
-    getTitle()
-})
-
+getPageData();
 </script>
 
 <style lang="less" scoped>

components/home/foot1.vue

@@ -1,22 +1,5 @@
 <template>
     <footer class="index_foot">
-        <!-- <div class="index_foot_name_box">
-            <div class="index_foot_name">YOUQING</div>
-            <div class="index_foot_name">友情链接</div>
-            <div class="index_foot_name">LIANJIE</div>		
-        </div>
-        <div class="foot_img_box"> 
-            <a :href="item.url" v-for="(item, index) in bottomLink" target="_blank">
-                <img :src="item.logo_url" alt="">
-            </a>
-        </div>
-        <div class="foot_frind_box">
-            <span>友情链接</span>	 		
-            <div>
-                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" target="_blank">{{ item.title }}</a>	
-            </div>
-        </div> -->
-        
         <div class="call_us_box">
             <span v-for="(item, index) in bottomMenu" :key="index">
                 <NuxtLink :to="{ path: `/specialList/${item.id}` }" target="_blank" v-if="item.type == 1">
@@ -54,67 +37,101 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-// const props = defineProps({
-//     bottomLink: Array,
-//     bottomMenu: Array,
-//     bottomBase: Object
-// });
+//获得底部基本信息 start---------------------------------------->
 
-//获得友情链接 图片
+//1.获得友情链接图片
 const bottomLink = ref([])
-const getBottomLink = async () => {
-    const response = await axios.get(`/web/selectWebsiteLinks?&type=${1}&num=${7}`);
-    bottomLink.value = response.data;
-    console.log(bottomLink.value)
+async function getModelData1() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteLinks', {
+        method: 'GET',
+        query: {
+            'type':1,
+            'num':7,
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            bottomLink.value = mkdata.value.data;
+        }
+    }
 }
-//文字
+getModelData1();
+//2.获得友情链接文字
 const bottomText = ref([])
-const getBottomLink2 = async () => {
-    const response = await axios.get(`/web/selectWebsiteLinks?&type=${2}&num=${8}`);
-    bottomText.value = response.data;
-    console.log(bottomLink.value)
+async function getModelData2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteLinks', {
+        method: 'GET',
+        query: {
+            'type':2,
+            'num':8,
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            bottomText.value = mkdata.value.data;
+        }
+    }
 }
-//底部
+getModelData2();
+//3.获得底部图片
 const bottomphoto = ref([])
-const getBottomLink1 = async () => {
-    const response = await axios.get(`/web/selectWebsiteLinks?&type=${3}&num=${4}`);
-    bottomphoto.value = response.data;
-    console.log(bottomphoto.value)
+async function getModelData3() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteLinks', {
+        method: 'GET',
+        query: {
+            'type':3,
+            'num':4,
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            bottomphoto.value = mkdata.value.data;
+        }
+    }
 }
-
-//获得底部导航
+getModelData3();
+//4.获得底部导航
 const bottomMenu = ref([])
-const getBottomMenu = async () => {
-    const response = await axios.get(`/web/getWebsiteFooterCategory`);
-    bottomMenu.value = response.data;
-    console.log(bottomMenu.value)
+async function getModelData4() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteFooterCategory', {
+        method: 'GET',
+        query: {
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            bottomMenu.value = mkdata.value.data;
+        }
+    }
 }
-
-//获得底部基本信息
+getModelData4();
+//5.获得底部基本信息
 const bottomBase = ref({})
-const getBottomBase = async () => {
-    const response = await axios.get(`/web/getWebsiteFootInfo`);
-    bottomBase.value = response.data.website_foot;
-    console.log(7777777)
-    console.log('bottomBase', bottomBase.value)
+async function getModelData5() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteFootInfo', {
+        method: 'GET',
+        query: {
+        },
+    });
+    if (mkdataError.value) {
+        //console.error('模块1数据上部分请求失败！', mkdataError.value);
+    } else {
+        if (mkdata.value) {
+            bottomBase.value = mkdata.value.data.website_foot;
+        }
+    }
 }
+getModelData5();
 
-
-onMounted(() => {
-    getBottomLink();
-    getBottomLink1();
-    getBottomLink2();
-    getBottomMenu();
-    getBottomBase();
-    //获取域名
-    getDomain()
-})
-
-//获取当前域名
+//6.获取当前域名
 const currentDomain = ref('')
 const currentDomainUrl = ref('')
 
@@ -125,46 +142,10 @@ const getDomain = () => {
         currentDomain.value = url.origin //协议和域名
     }
 }
+getDomain();
+//获得底部基本信息 end---------------------------------------->
 </script>
 
 <style lang="less" scoped>
-.index_foot{box-sizing:border-box;width: 1200px;margin: 0 auto;}
-.index_foot_name_box{margin:40px auto 0px; text-align:center;font-size:0px;}
-.index_foot_name{display:inline-block;height:67px;line-height:67px;color:#f2f9f4;font-size:51px;font-weight:bold;overflow:hidden;}
-.index_foot_name:nth-of-type(even){color:#333;font-size:32px;}
-.foot_img_box{overflow:hidden;display:block;margin:40px auto 0;width:100%; }
-.foot_img_box>*{float: left;width:150px;height:50px;overflow:hidden;box-sizing:border-box;border:solid 1px #D7EDD4;margin:0px 25px 10px 0px;}
-.foot_img_box>* *{display: block;width:100%;height:100%;}
-.foot_img_box>*:nth-of-type(7n){margin-right:0px; }
-.foot_frind_box{ display:block;margin:11px auto;overflow:hidden;display:flex;width:100%;border-bottom:solid 2px #49A769;padding-bottom:35px;}
-.foot_frind_box span{word-break: keep-all; white-space: nowrap;line-height:22px;font-size:16px;color:#333;font-weight:bold;}
-.foot_frind_box div{width:100%;overflow:hidden; }
-.foot_frind_box div *{float:left;line-height:22px;height:22px;color:#333;font-size:16px;margin:0 30px;}
-.call_us_box{
-    display:block;width:100%;margin:40px auto 0;overflow:hidden;text-align:center;font-size:0px;background:#49A769; 
-    a {
-        color: #fff;
-    }
-}
-.call_us_box>*{height:12px;line-height:12px;color:#fff;font-size:14px;display:inline-block;box-sizing:border-box;padding:0 19px;font-weight:bold;border-left:solid 1px #5B8D54;margin:18px 0;}
-.call_us_box>*:nth-of-type(1){border-left:0px;}
-.foot_text_box{
-    margin:40px auto 0px;text-align:center;color:#333;font-size:14px;line-height:25px;
-    p {
-        a {
-            color: #333;
-            font-size: 14px;
-        }
-    }
-}
-.foot_text_box_green{color:#40663B;}   
-.foot_text_box img{display:inline-block;height:20px;vertical-align:middle;}   
-.foot_logo_out{position:relative;margin:0px auto;width:100%;height:0px;}
-.foot_logo_out *{width:120px;display:block; }
-.foot_logo_out>*{position:absolute;top:-166px;}
-.foot_logo_out>*:nth-of-type(1){left:0px;}
-.foot_logo_out>*:nth-of-type(2){right:0px;}               
-.foot_last_img_box {margin:40px auto 10px;text-align:center;overflow:hidden;width:100%;font-size:0px;padding-bottom: 40px;}
-.foot_last_img_box>*{height:50px;width:150px;margin:0px 12px;display:inline-block;overflow:hidden;}
-.foot_last_img_box>* *{display:block;height:100%;width:100%;overflow:hidden;}
+    @import '@/assets/css/foot.less';
 </style>

components/home/pageNavigation1.vue

@@ -1,9 +1,7 @@
 <template>
-    <!-- 导航 -->
     <div class="navigate">
         <div class="partOne">
             <div class="inner">
-                <!-- 导航一 -->
                 <div class="navLeft">
                     <div class="navIndex">
                         <NuxtLink to="/" target="_blank" title="首页">
@@ -21,14 +19,11 @@
                 </div>
                 <ul class="navigationOne">
                     <li v-for="(item, index) in navigation1" :key="index">
-                        <!-- <NuxtLink :to="`/primaryNavigation/${item.alias}`" target="_blank">{{ item.alias }}</NuxtLink> -->
-                        <!-- <NuxtLink :to="{ path: `/primaryNavigation/${item.category_id}`, query: { name: item.name } }" -->
                         <NuxtLink :to="{ path: `/primaryNavigation/${item.category_id}`}"
                             target="_blank" v-if="item.children_count != 0">
                             <span class="active" v-if="item.category_id == routeId">{{ item.name }}</span>
                             <span v-else>{{ item.name }}</span>
                         </NuxtLink>
-                        <!-- <NuxtLink :to="{ path: `/newsList/${item.category_id}`, query: { name: item.name } }" -->
                         <NuxtLink :to="{ path: `/newsList/${item.category_id}` }"
                             target="_blank" v-if="item.children_count == 0 && item.is_url != 1">
                             <span class="active" v-if="item.category_id == routeId">{{ item.name }}</span>
@@ -43,8 +38,6 @@
                 </ul>
             </div>
         </div>
-
-
         <!-- 展示地区 -->
         <div class="cityBox">
             <div class="cityMain">
@@ -53,188 +46,140 @@
                 </div>
                 <ul class="cityList">
                     <li v-for="(item, index) in provinceList" :key="index" @click="goToSearch(item.id)">
-                        <!-- <NuxtLink :to="{path:`/search/search?catids=${item.id}`}" target="_blank">
-                            {{item.abbreviation}}
-                        </NuxtLink> -->
                         {{item.abbreviation}}
                     </li>
                 </ul>
             </div>
         </div>
-
-        <!-- 行政查询 -->
-        <!-- <div class="select">
-            <div class="inner">
-                <div class="role left">
-                    <div class="title">行政职能查询</div>
-                    <div class="searchRole">
-                        <el-select v-model="depValue" placeholder="职能部门" size="large" style="width: 80px">
-                            <el-option v-for="(item, index) in department" :key="index" :label="item.name"
-                                :value="item.id" />
-                        </el-select>
-                        <i></i>
-                        <input type="text" v-model="typeValue" placeholder="输入关键词" class="ipt">
-                        <em @click="searchDepartment"></em>
-                    </div>
-                </div>
-                <div class="region left">
-                    <div class="title">行政区划查询</div>
-                    <div class="searchRole">
-                        <el-select v-model="province" placeholder="请选择省" size="large" style="width: 80px">
-                            <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
-                                @click="change(item.id)" :value="item.id" />
-                        </el-select>
-                        <i></i>
-                        <el-select v-model="city" placeholder="请选择市" no-data-text="请先选择省份" size="large"
-                            style="width: 80px">
-                            <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
-                                @click="change1(item.id)" :value="item.id" />
-                        </el-select>
-                        <i></i>
-                        <el-select v-model="region" placeholder="请选择区/县" no-data-text="请先选择市" size="large"
-                            style="width: 100px">
-                            <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
-                        </el-select>
-                        <em @click="goToPrimary"></em>
-                    </div>
-                </div>
-            </div>
-        </div> -->
     </div>
 
 </template>
 
 <script setup>
+//1.加载依赖 start ---------------------------------------->
 import { ElMessage } from 'element-plus'
-
 import { ref, onMounted } from 'vue';
 import { ElSelect, ElOption } from 'element-plus'
+
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-//获得route
+
 const route = useRoute();
 const routeId = route.params.id; //获得该页面的id
-const pageName = route.query.name;//获得页面名称
+//1.加载依赖 end ---------------------------------------->
 
-//获取导航一的栏目
+//2.加载模块数据 start ---------------------------------------->
 const navigation1 = ref("");
-const navigateList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${0}&num=${35}`);
-        console.log(response.data);
-        navigation1.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-// const navigateList = async () => {
-//     try {
-//         const response = await axios.get(`/web/getWebsiteCategory?pageSize=${24}`);
-//         console.log(response.data);
-//         navigation1.value = response.data;
-//     } catch (error) {
-//         console.error(error);
-//     }
-// }
-
-//获取导航二的栏目
-const navigation2 = ref("");
-const navigate2List = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${2}&pid=${1}&num=${13}`);
-        // console.log(response.data);
-        navigation2.value = response.data;
-    } catch (error) {
-        console.error(error);
+async function getPageData2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': 0,
+            'num': 35
+        },
+    });
+    if (mkdataError.value) {
+       //console.log()
+    } else {
+        if (mkdata.value) {
+            navigation1.value = mkdata.value.data;
+        }
     }
 }
+getPageData2();
+//2.加载模块数据 end ---------------------------------------->
 
-//职能部门 搜索
+//3.职能部门 start ---------------------------------------->
 let department = ref("安全")
 const depValue = ref("")
 const typeValue = ref("")
 let departmentList = async () => {
-    try {
-        const response = await axios.get(`/web/selectWebsiteDepartment?keyword=${department.value}`);
-        // console.log(response.data.department);
-        department.value = response.data.department
-        // console.log(department.value);
-    } catch (error) {
-        console.error(error);
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteDepartment', {
+        method: 'GET',
+        query: {
+            'keyword': department.value,
+        },
+    });
+    if (mkdataError.value) {
+       //console.log()
+    } else {
+        console.log(department.value)
+        if (mkdata.value) {
+            console.log(mkdata.value.data.department)
+            department.value = mkdata.value.data.department;
+        }
     }
 }
+//获得所有部门
+departmentList();
+//3.职能部门 end ---------------------------------------->
 
-
-//获取地区各省名称
+//4.展示行政区划 start ---------------------------------------->
 let areaList = ref("")
-//获取省名称
-let province = useState("province", () => "")
-let provinceid = useState("provinceid", () => null)
-let provinceList = useState("provinceList", () => "")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+
+//选择省
 let areaArrList = async () => {
-    try {
-        const response = await axios.get('/web/getWebsiteDistrit');
-        console.log(response.data);
-        areaList.value = response.data;
-        provinceList.value = response.data
-    } catch (error) {
-        console.error(error);
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {},
+    });
+    if (mkdataError.value) {
+       //console.log()
+    } else {
+        console.log(department.value)
+        if (mkdata.value) {
+            console.log(mkdata.value)
+            areaList.value = mkdata.value.data;
+            provinceList.value = mkdata.value.data;
+        }
     }
 }
-
-// 获取城市名称
-let city = useState("city", () => "")
-let cityid = useState("cityid", () => "")
-let cityList = useState("cityList", () => "")
-
-//选择省份后省份的id
-let change = (id) => {
-    console.log(id);
-    provinceid.value = id
-    console.log(provinceid.value);
-
-    //根据省id获取对应的市名称
-    axios.get(`web/selectWebsiteArea?province=${provinceid.value}&city=0`).then(response => {
-        // console.log("response", response.data.city);
-        cityList.value = response.data.city;
-        // console.log("cityList", cityList.value);
-    }).catch(error => {
-        console.error(error);
-    })
-
+//一开始只需要获取一下省
+areaArrList();
+
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'province': id,
+            'city': 0
+        },
+    });
+    cityList.value = shengData.data.city;
 }
 
-// 获取区/县名称
-let region = useState("region", () => "")
-let regionid = useState("regionid", () => "")
-let regionList = useState("regionList", () => "")
-
-//选择市后市的id
-let change1 = (id) => {
-    console.log(id);
-    cityid.value = id
-    console.log(cityid.value);
-
-    //根据市id获取对应的区/县名称
-    axios.get(`web/selectWebsiteArea?province=${provinceid.value}&city=${cityid.value}`).then(response => {
-        // console.log("response", response.data);
-        regionList.value = response.data.region;
-        // console.log("regionList", regionList.value);
-    }).catch(error => {
-        console.error(error);
-    })
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData =  await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'province': provinceid.value,
+            'city': cityid.value
+        },
+    });
+    regionList.value = xianData.data.region;
 }
+//4.展示行政区划 end ---------------------------------------->
 
-//depValue.value 行政区划
-//二级导航id
-//province.value 省id
-//city.value 市id
-//region.value 县id
+//5.执行搜索 start ---------------------------------------->
 const getcityid = ref("")
-
-
-
+//跳转到搜索页面
 let goToSearch = (id) => {
     console.log(id)
     const route = `/search/search?catids=${id}`;
@@ -242,55 +187,41 @@ let goToSearch = (id) => {
 }
 
 //获得cityid和
-let goToPrimary = () => {
-    // console.log(depValue.value)
-    // console.log(routeId)
+let goToPrimary = async () => {
     if (province.value != "") { getcityid.value = province.value }
     if (city.value != "") { getcityid.value = city.value }
     if (region.value != "") { getcityid.value = region.value }
-    console.log(getcityid.value)
-    //console.log(pageName)
-
-    //跳转过去
-    // navigateTo({
-    //     path: `/primaryNavigation/${routeId}`,
-    //     query: {
-    //         cityid: getcityid.value,
-    //         name: pageName,
-    //         department_id: depValue.value
-    //     }
-    // })
 
     if (province.value == ""&&city.value == ""&&region.value == ""&&depValue.value=="") {
         ElMessage.error('请选择行政区划或者职能部门！')
     }else{
-        //根据市id获取对应的区/县名称
-        axios.get(`/web/selectWebsiteCategory?cityid=${getcityid.value}&department_id=${depValue.value}`).then(response => {
-            if (response.data.catid && response.data.catid.length > 0) {
-                const catids = response.data.catid.join(',');
-                const route = `/search/search?catids=${catids}`;
-                window.open(route, '_blank');
-            } else {
-                // 可以在这里处理数组为空的情况
-                console.log('没有可用的分类ID');
-                const route = `/search/search`;
-                window.open(route, '_blank');
-            }
 
-        })
-    }
-        
+        const responseStatus =  await requestDataPromise('/web/selectWebsiteCategory', {
+        method: 'GET',
+            query: {
+                'cityid': getcityid.value,
+                'department_id': depValue.value
+            },
+        });
+        if (responseStatus.data.catid && responseStatus.data.catid.length > 0) {
+            const catids = responseStatus.data.catid.join(',');
+            const route = `/search/search?catids=${catids}`;
+            window.open(route, '_blank');
+        } else {
+            // 可以在这里处理数组为空的情况
+            console.log('没有可用的分类ID');
+            const route = `/search/search`;
+            window.open(route, '_blank');
+        }
 
+    }
 }
 
 let searchDepartment = () => {
     //搜索职能部门
-    //console.log(typeValue.value)
-    //console.log(department.value)
     let status = false;
     for (let item of department.value) {
         if (item.name == typeValue.value) {
-            console.log(item.name)
             //如果有就赋值过去
             depValue.value = item.id
             status = true; //说明有可用的结果
@@ -300,25 +231,7 @@ let searchDepartment = () => {
         //弹出提示告诉用户不存在
     }
 }
-
-//挂载成功钩子函数
-onMounted(() => {
-    //导航一栏目
-    navigateList()
-
-    //导航二栏目
-    navigate2List()
-
-    //获取地区各省名称
-    areaArrList()
-
-    //获取职能部门
-    departmentList()
-
-
-})
-
-
+//5.执行搜索 end ---------------------------------------->
 </script>
 
 <style lang="less" scoped>
@@ -384,8 +297,6 @@ onMounted(() => {
         flex-wrap: wrap;
         padding-top: 20px;
         
-        //justify-content: space-around;
-
         li {
             width: 68px;
             font-family: PingFang SC;
@@ -399,9 +310,6 @@ onMounted(() => {
             margin: 0 10px;
             text-align: center;
 
-            // &:nth-last-child(1) {
-            //     margin-right: 0px;
-            // }
 
             a {
                 color: #fff;
@@ -415,9 +323,6 @@ onMounted(() => {
 
         .active{
             color: #ABE874;
-            // display: inline-block;
-            // height: 50px;
-            // border-bottom: 2px solid #139602
         }
     }
 }
@@ -518,9 +423,6 @@ onMounted(() => {
         height: 62px;
         margin-top: 10px;
         background-color: #fafafa;
-
-        
-        
     }
 
     .role,
@@ -692,13 +594,6 @@ onMounted(() => {
                 &:hover {
                     color: #ABE874;
                 }
-                // a {
-                //     color: #fff;
-                //     margin-right: 14px;
-                //     &:hover {
-                //         color: #ABE874;
-                //     }
-                // }
             }
         }
     }

composables/useSeo.ts

@@ -1,11 +1,25 @@
-import { useSeoMeta } from '#imports'; // Nuxt 3 提供的 composables
-
-const seoSetup = function(title: string, description: string, keywords: string){
-  // 使用 useSeoMeta 设置 SEO 相关的 meta 标签
-  useSeoMeta({
-    title,
-    description,
-    keywords,
+// import { useSeoMeta } from '#imports'; // Nuxt 3 提供的 composables
+
+// const seoSetup = function(title: string, description: string, keywords: string){
+//   // 使用 useSeoMeta 设置 SEO 相关的 meta 标签
+//   useSeoMeta({
+//     title,
+//     description,
+//     keywords,
+//   });
+// };
+
+// export {seoSetup};
+
+import { useHead } from '#imports'; // Nuxt 3 提供的 composables
+
+const seoSetup = (title: string, description: string, keywords: string) => {
+  useHead({
+    title: title,
+    meta: [
+      { name: 'description', content: description },
+      { name: 'keywords', content: keywords }
+    ]
   });
 };
 

nuxt.config.js

@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
-  taget: "static",
+  //taget: "static",
+  ssr: true,
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
   module: [

pages/index.vue

@@ -1183,6 +1183,7 @@ try {
     await getPageData19();
     await getPageData20();
     await getPageData20_data2();
+    await getSeo();
 } catch (error) {
     console.error('获取页面导航失败！:', error);
 }
@@ -1689,16 +1690,12 @@ async function getPageData20_data2() {
 
 //4.设置seo信息 start---------------------------------------->
 //4.1 设置seo信息
-const {data:seoData,error:seoError} = requestData('/web/getWebsiteFootInfo', {
-    method: 'GET',
-    query: {},
-});
-if (seoError.value) {
-    console.error('页面seo信息获取失败:', adError.value);
-} else {
-    if (seoData.value) {
-       seoSetup(seoData.value.data.website_head.title,seoData.value.data.website_head.description,seoData.value.data.website_head.keywords)
-    }
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteFootInfo', {
+        method: 'GET',
+        query: {},
+    });
+    seoSetup(setData.data.website_head.title,setData.data.website_head.description,setData.data.website_head.keywords)
 }
 //4.设置seo信息 end---------------------------------------->
 </script>

pages/newsDetail/[id].vue

@@ -1,13 +1,10 @@
 <template>
     <!-- 页面头部 -->
     <HomePageHead></HomePageHead>
-
     <!-- 导航栏 -->
     <HomePageNavigation1></HomePageNavigation1>
-
     <!-- 列表页广告一 -->
     <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
-
     <!-- 面包屑导航 -->
     <div class="breadcrumb">
         <div class="inner">
@@ -15,12 +12,10 @@
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                 <el-breadcrumb-item :to="{ path: `/newsList/${routLevelId}` }">{{ routLevelTitle }}</el-breadcrumb-item>
-                <!-- <el-breadcrumb-item>文章详情</el-breadcrumb-item> -->
                 <el-breadcrumb-item>{{ routeNewsTtitle }}</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
     </div>
-
     <!-- 资讯列表 -->
     <div class="newsDetail">
         <div class="inner">
@@ -31,12 +26,10 @@
                         来源: <span>{{ newsDetail.copyfrom }}</span>
                         作者: <span>{{ newsDetail.author }}</span>
                         发布时间: <span>{{ time }}</span>
-                        <!-- 浏览量: <span>{{ newsDetail.hits }}</span> -->
                     </p>
                     <img :src="newsDetail.imgurl" alt="">
                 </div>
                 <div class="leftBottom" v-html="newsDetail.content"></div>
-
                 <!-- 免责声明: -->
                 <div class="disclaimer" v-if="newsDetail.fromurl">
                     <p>原文链接：{{ newsDetail.fromurl }}</p>
@@ -55,12 +48,12 @@
             </div>
         </div>
     </div>
-
     <!-- 页面底部 -->
     <HomeFoot1></HomeFoot1>
 </template>
 
 <script setup>
+//1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
@@ -71,308 +64,74 @@ const axios = nuxtApp.$axios;
 //获得跳转过来的id
 const route = useRoute();
 const articleId = route.params.id; //获得该页面的id
-const listid = route.query.listId; //获得该页面的id
-const name = route.query.listName; //获得该页面的id
-
-// 定义响应式数据
-const seoData = ref({
-    title: '三农资讯网',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
-
-// 在 onMounted 钩子中获取数据
-onMounted(async () => {
-    try {
-        const response = await axios.get(`/web/selectWebsiteArticleInfo?articleid=${articleId}`);
-        const data = response.data; // 假设接口返回的数据在 data 字段中
-        // 更新 seoData
-        seoData.value = {
-            title: data.title,
-            description: data.seo_description,
-            keywords: data.keyword,
-            image: data.introduce
-        };
-
-    } catch (error) {
-        console.error('获取 SEO 数据失败:', error);
-        // 设置默认值
-        seoData.value = {
-            title: '三农资讯网',
-            description: '默认描述',
-            keywords: '默认关键词',
-            image: 'https://example.com/default-image.jpg'
-        };
-    }
-});
-
-// 监听 seoData 的变化，动态设置 SEO 字段
-watch(seoData, (newVal) => {
-    if (newVal.title) { // 确保 title 有值
-        useSeoMeta({
-            title: newVal.title, // 使用动态值
-            description: newVal.description,
-            ogTitle: newVal.title,
-            ogDescription: newVal.description,
-            ogImage: newVal.image,
-            twitterTitle: newVal.title,
-            twitterDescription: newVal.description,
-            twitterImage: newVal.image,
-            keywords: newVal.keywords
-        });
-    }
-}, { immediate: true });
-
-
+//1.页面依赖 end ---------------------------------------->
 
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
 const newsDetail = ref({})
 const routeNewsTtitle = ref("");
-//发布日期
+//2.2 发布日期
 const time = ref("");
-//路径
+//2.3 路径
 const routLevelTitle = ref("");
 const routLevelId = ref("");
-
-//获取详情
-const getNewsInfo = async () => {
-    const response = await axios.get(`/web/selectWebsiteArticleInfo?articleid=${articleId}`);
-    newsDetail.value = response.data;
-    routLevelTitle.value = newsDetail.value.cat_name
-    console.log(123145)
-    routLevelId.value = newsDetail.value.category_id
-    time.value = newsDetail.value.updated_at.split(' ')[0]
-    if (newsDetail.value.title.length >= 30) {
-        routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+//2.4获取详情
+async function getPageData() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
     } else {
-        routeNewsTtitle.value = newsDetail.value.title
-    }
-}
-
-function getDays(time) {
-    const date = new Date(time);
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
-    return `${month}-${day}`;
-}
-
-//获得广告
-const adList = ref("");
-const aa='DETAIL'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-onMounted(() => {
-    getNewsInfo()
-    getadList()
-})
-
-</script>
-
-<style lang="less" scoped>
-//导航条
-.breadcrumb {
-    width: 100%;
-    height: 22px;
-    margin-bottom: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: 400;
-    font-size: 20px;
-    color: #666666;
-    line-height: 23px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-
-    .el-breadcrumb::v-deep {
-        display: inline-block;
-        vertical-align: -4px;
-    }
-
-    /deep/.el-breadcrumb__inner a,
-    /deep/.el-breadcrumb__inner.is-link {
-        color: #666666;
-        font-weight: 400;
-        text-decoration: none;
-        transition: var(--el-transition-color);
-    }
-
-    span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-    span:hover {
-        color: #666666;
-    }
-
-    .location {
-        margin-right: 20px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-// 资讯列表
-.newsDetail {
-    width: 100%;
-    //height: 1400px;
-    margin-bottom: 70px;
-
-    .inner {
-        width: 1200px;
-        //height: 1400px;
-        overflow: hidden;
-        font-size: 16px;
-
-        .innerLeft {
-            // height: 1400px;
-            border-top: 1px solid #139602;
-
-            .LeftTop {
-                height: 522px;
-                margin-top: 50px;
-
-                >h1 {
-
-                    line-height: 40px;
-                    margin-bottom: 30px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: bold;
-                    font-size: 30px;
-                    color: #333333;
-                }
-
-                >p {
-                    height: 18px;
-                    line-height: 18px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: #999999;
-
-                    span {
-                        margin-right: 40px;
-                    }
-                }
-
-                >img {
-                    width: 680px;
-                    height: 382px;
-                    padding: 50px 0px 60px 55px;
-                }
+        if (mkdata.value) {
+            newsDetail.value = mkdata.value.data;
+            routLevelTitle.value = newsDetail.value.cat_name;
+            routLevelId.value = newsDetail.value.category_id;
+            time.value = newsDetail.value.updated_at.split(' ')[0]
+            if (newsDetail.value.title.length >= 30) {
+                routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+            } else {
+                routeNewsTtitle.value = newsDetail.value.title
             }
 
-            .leftBottom {
-                width: 790px;
-                // height: 754px;
-                margin-top: 76px;
-                font-size: 20px;
-                line-height: 38px;
-                margin-bottom: 30px;
-
-                ul>li img{
-                    width: 790px;   
-                    height: 382px;
-                }
-
-                img{
-                    width: 790px;   
-                    height: 382px;
-                }
-                
-                p.tinymce-material {
-                    img {
-                        width: 790px;
-                    }
-                }
-
-                >h3,
-                >p {
-                    text-indent: 2em;
-                    width: 790px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-size: 20px;
-                    color: #333333;
-                    line-height: 38px;
-                    padding-bottom: 30px;
-
-                    img {
-                        width: 790px;
-                    }
-                }
-
-                >h3 {
-                    font-weight: 600px;
-                }
-
-                >p {
-                    font-weight: 400;
-                }
-
-            }
-
-            .disclaimer {
-                width: 790px;
-                overflow: hidden;
-                border-top: 1px solid #e6e6e6;
-                padding: 30px 0px;
-                color: #999999;
-                font-size: 17px;
-
-                p {
-                    width: 790px;
-                    line-height: 30px;
-                }
-            }
-        }
-
-        .innerRight {
-            width: 381px;
-            // height: 605px;
-            overflow: hidden;
-            border-top: 1px solid #139602;
-
-            .hotList1 {
-                margin-bottom: 50px;
-            }
         }
     }
 }
-
-.leftBottom::v-deep p img,
-.leftBottom::v-deep img,
-.leftBottom::v-deep video  {
-    max-width: 700px;
+getPageData();
+
+//2.5 获得广告
+let adList = ref([]);
+const {data:adData,error:adError} = requestData('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
+if (adError.value) {
+    console.error('广告列表请求失败:', adError.value);
+} else {
+    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
+    if (adData.value && adData.value.data) {
+        console.log(6688)
+        adList.value = adData.value.data;
+        console.log(adData.value.data)
+    }
 }
-.leftBottom::v-deep h1,
-.leftBottom::v-deep h2,
-.leftBottom::v-deep h3,
-.leftBottom::v-deep h4,
-.leftBottom::v-deep h5,
-.leftBottom::v-deep h6 {
-    font-size: 20px;
-    font-weight: 500;
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid':articleId
+        },
+    });
+    seoSetup(setData.data.title,setData.data.introduce,setData.data.keywords)
 }
+getSeo();
+//4.设置seo信息 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+@import url('@/assets/css/detail.less');
 </style>

pages/newsList/[id].vue

@@ -51,119 +51,56 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+//1.页面必备依赖 start ---------------------------------------->
 import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-
 //获得跳转过来的id
 const route = useRoute();
 const articleId = route.params.id; //获得该页面的id
-// const category_id = route.query.category_id; //获得该页面的id
 const category_id = route.query.catid; //获得该页面的id
-// const name = route.query.name; //获得该页面的id
-// console.log(name);
-console.log('category_id', category_id);
-
+//当前列表名称
+const name = ref('')
+//1.页面必备依赖 end ---------------------------------------->
 
 
-// 定义响应式数据
-const seoData = ref({
-    title: '三农资讯网',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
-
-// 在 onMounted 钩子中获取数据
-onMounted(async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${articleId}`);
-        const data = response.data; // 假设接口返回的数据在 data 字段中
-        console.log(seoData.value.title)
-        // 更新 seoData
-        seoData.value = {
-            title: data.seo_title,
-            description: data.seo_description,
-            keywords: data.seo_keywords,
-            image: data.seo_image
-        };
-        console.log(seoData.value.title)
-    } catch (error) {
-        console.error('获取 SEO 数据失败:', error);
-        // 设置默认值
-        seoData.value = {
-            title: '三农资讯网',
-            description: '默认描述',
-            keywords: '默认关键词',
-            image: 'https://example.com/default-image.jpg'
-        };
-    }
-});
-
-// 监听 seoData 的变化，动态设置 SEO 字段
-watch(seoData, (newVal) => {
-    if (newVal.title) { // 确保 title 有值
-        useSeoMeta({
-            title: newVal.title, // 使用动态值
-            description: newVal.description,
-            ogTitle: newVal.title,
-            ogDescription: newVal.description,
-            ogImage: newVal.image,
-            twitterTitle: newVal.title,
-            twitterDescription: newVal.description,
-            twitterImage: newVal.image,
-            keywords: newVal.keywords
-        });
-    }
-}, { immediate: true });
-
-
-
-
-//关键词
-let keyWord = useState("keyWord", () => "")
+//2.页面数据 start ---------------------------------------->
 let id = useState("id", () => "")
 let total = useState("total", () => 0)
 let page = useState("page", () => 1)
 let pageSize = useState("pageSize", () => 20)
 
-//获得广告
-const adList = ref("");
-const aa='LIST'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
+id.value = route.query.id;
+
+//2.1 获得所有广告
+let adList = ref([]);
+const {data:adData,error:adError} = requestData('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'LIST'}});
+if (adError.value) {
+    console.error('广告列表请求失败:', adError.value);
+} else {
+    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
+    if (adData.value && adData.value.data) {
+        adList.value = adData.value.data;
     }
 }
 
-onMounted(() => {
-    id.value = route.query.id;
-    console.log('id', id.value);
-    getadList()
-})
-
-// 页码
-// //页面组件传递数据的时间驱动函数
-// const handleData = (data) => {
-//     console.log(data.value)
-//     page.value = data.value
-
-//     //在页码发生变化时去请求响应页面的新闻数据
-//     axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response => {
-//         // console.log(response.data.rows);
-//         newsList.value = response.data.rows;
-//     }).catch(error => {
-//         console.error(error);
-//     })
-// }
+//2.2新闻列表
+const newsList = ref([]);
+let newslists = async () => {
+    const listData =  await requestDataPromise('/web/getWebsiteArticleList', {
+        method: 'GET',
+        query: {
+            'page': page.value,
+            'pageSize': pageSize.value,
+            'catid':articleId
+        },
+    });
+    newsList.value = listData.data.rows;
+    total.value = listData.data.count;
+}
+//获得列表
+newslists();
 
+//分页事件
 let changePage = (value) => {
     console.log("当前页码", value);
     page.value = value
@@ -171,542 +108,37 @@ let changePage = (value) => {
     newslists()
 }
 
-// 一级导航
-const navigation1 = ref("");
-const navigateList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${0}&num=${24}`);
-        console.log('一级导航', response.data);
-        navigation1.value = response.data;
-        console.log('111111111111111111111111111', navigation1[0]?.value.category_id);
-
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-// 新闻列表
-const newsList = useState("newsList", () => '');
-const newslists = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&catid=${articleId}`);
-        // console.log(response.data.rows);
-        newsList.value = response.data.rows;
-        total.value = response.data.count;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-//热点资讯
-const hotlistall = useState("hotlistall", () => "");
-const hotlist = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${2}&level=${4}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        for (let item of response.data) {
-            console.log(item);
-            item.count = 1;
-        }
-        hotlistall.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
+//2.3获得页面名称
+let getPageName = async () => {
+    const pageName =  await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
 
-//资讯推荐1
-const news1 = useState("news1", () => "");
-const newslist1 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news1.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-const news11 = useState("news11", () => "");
-const newslist11 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news11.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-//资讯推荐2
-const news2 = useState("news2", () => "");
-const newslist2 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news2.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-const news22 = useState("news22", () => "");
-const newslist22 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news22.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
+    name.value = pageName.data.name
 }
-
-const name = useState("name", () => "");
-const name1 = async () => {
-    try {
-        const response = await axios.get(`/web/getOneWebsiteCategory?catid=${articleId}`);
-        console.log('name11111111', response.data);
-        name.value = response.data.name;
-        navigateList()
-
-    } catch (error) {
-        console.error(error);
-    }
+//获得列表
+getPageName();
+
+//2.页面数据 end ---------------------------------------->
+
+//4.设置seo信息 start---------------------------------------->
+//4.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteCategoryHead', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
+    seoSetup(setData.data.seo_title,setData.data.seo_description,setData.data.seo_keywords)
 }
-
-
-//挂载成功钩子函数
-onMounted(() => {
-
-    name1()
-    // 资讯推荐
-    newslists()
-    // 热点资讯
-    hotlist()
-    // 资讯推荐
-    newslist1()
-    newslist2()
-    // 热点资讯
-    newslist11()
-    newslist22()
-
-    // navigateList()
-
-
-})
-
-//路由中间件
-definePageMeta({
-    middleware: 'auth'
-})
-
+getSeo()
+//4.设置seo信息 end---------------------------------------->
 </script>
 
 <style lang="less" scoped>
-#newsList {
-    width: 100%;
-    overflow: hidden;
-}
-
-//导航条
-.breadcrumb {
-    width: 100%;
-    height: 22px;
-    margin-bottom: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: 400;
-    font-size: 20px;
-    color: #666666;
-    line-height: 23px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-
-    :deep(.el-breadcrumb) {
-        display: inline-block;
-        vertical-align: -4px;
-    }
-
-    :deep(.el-breadcrumb__inner a),
-    :deep(.el-breadcrumb__inner.is-link) {
-        color: #666666;
-        font-weight: 400;
-        text-decoration: none;
-        transition: var(--el-transition-color);
-    }
-
-    span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-    span:hover {
-        color: #666666;
-    }
-
-    .location {
-        margin-right: 20px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-// 资讯列表
-.newsList {
-    width: 100%;
-    // height: 675px;
-    overflow: hidden;
-    margin-bottom: 70px;
-
-    .inner {
-        width: 1200px;
-
-        .innerLeft,
-        .innerRight {
-            border-top: 1px solid #139602;
-        }
-
-        .innerLeft {
-            // height: 675px;
-
-            >.list {
-                // height: 570px;
-                margin-bottom: 70px;
-
-                >li {
-                    width: 790px;
-                    height: 56px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    line-height: 56px;
-
-                    >a {
-                        width: 360px;
-                        height: 26px;
-                        font-family: Microsoft YaHei, Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 20px;
-                        color: #333333;
-                        line-height: 26px;
-                        text-align: left;
-                        font-style: normal;
-                        text-transform: none;
-                    }
-
-                }
-
-                >li:hover>a {
-                    color: #139602;
-                }
-
-                >li:nth-child(1)::after,
-                >li:nth-child(2)::after {
-                    content: "热";
-                    margin-left: 13px;
-                    background: #FF8A37;
-                    color: #fff;
-                    font-size: 14px;
-                    padding: 0px 2px;
-                }
-
-                >li:nth-child(5n) {
-                    // padding-top: 10px;
-                    // padding-bottom: 10px;
-                    border-bottom: 1px solid #D9D9D9;
-                }
-            }
-
-            >.pagination {
-                width: 800px;
-                height: 34px;
-                margin-left: 141px;
-                display: flex;
-                justify-content: center;
-                margin: 0;
-
-                // 鼠标移入后字体颜色
-                .el-pagination::v-deep :hover {
-                    color: #139609;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next,
-                .el-pagination.is-background::v-deep .btn-prev {
-                    width: 70px;
-                    height: 34px;
-                    margin: 0px 10px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .el-pager li {
-                    margin: 0px 10px;
-                    width: 38px;
-                    height: 34px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next.is-active,
-                .el-pagination.is-background::v-deep .btn-prev.is-active,
-                .el-pagination.is-background::v-deep .el-pager li.is-active {
-                    background-color: #028e21;
-                    color: #fff;
-                }
-
-
-            }
-        }
-
-        .innerRight {
-            width: 381px;
-            // height: 605px;
-        }
-    }
-}
-
-//资讯推荐
-.zixuntuijian {
-    width: 100%;
-    height: 290px;
-    margin-bottom: 70px;
-
-    .innerLeft {
-
-        // 左侧
-        .zixunLeft {
-            margin-right: 30px;
-        }
-
-        .zixunRight,
-        .zixunLeft {
-            float: left;
-            width: 380px;
-            height: 290px;
-
-            // 标题部分
-            >.title {
-                width: 380px;
-            }
-
-            >.title>h3 {
-                height: 36px;
-                font-family: Source Han Sans, Source Han Sans;
-                font-weight: bold;
-                font-size: 24px;
-                color: #000000;
-                line-height: 28px;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-                border-bottom: 1px solid #139602;
-
-            }
-
-            >.title>h3>span {
-                float: right;
-                width: 56px;
-                height: 20px;
-                line-height: 24px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #999999;
-                font-style: normal;
-                text-transform: none;
-            }
-
-            .photo_text {
-
-                >li:first-child {
-                    width: 380px;
-                    height: 120px;
-                    margin-top: 20px;
-                    margin-bottom: 15px;
-                    position: relative;
-
-                    >img {
-                        float: left;
-                        width: 160px;
-                        height: 120px;
-                    }
-
-                    >div {
-                        float: left;
-                        width: 220px;
-                        height: 120px;
-                        padding-left: 15px;
-                        padding-top: 6px;
-                        box-sizing: border-box;
-                        background-color: #f6f6f6;
-
-
-                        >h5 {
-                            width: 200px;
-                            height: 54px;
-                            display: -webkit-box;
-                            -webkit-box-orient: vertical;
-                            -webkit-line-clamp: 2;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            word-break: break-all;
-                            font-family: Source Han Sans, Source Han Sans;
-                            font-weight: 500;
-                            font-size: 18px;
-                            color: #333333;
-                            line-height: 26px;
-                            text-align: left;
-                            font-style: normal;
-                            text-transform: none;
-                        }
-
-                        >p {
-                            width: 200px;
-                            height: 22px;
-                            line-height: 20px;
-                            position: absolute;
-                            bottom: 5px;
-                            right: 0;
-
-                            >span {
-                                display: inline-block;
-                                // width: 100px;
-                                height: 18px;
-                                font-family: Source Han Sans, Source Han Sans;
-                                font-weight: 400;
-                                font-size: 12px;
-                                color: #999999;
-                                text-align: left;
-                                line-height: 14px;
-                                font-style: normal;
-                                text-transform: none;
-                            }
-
-                            >span:last-child {
-                                // width: 90px;
-                                text-align: right;
-                                margin-left: 20px;
-                            }
-
-                        }
-                    }
-                }
-
-                >li {
-                    width: 380px;
-                    height: 25px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    font-size: 18px;
-                    color: #333333;
-                    line-height: 21px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                    margin-bottom: 10px;
-
-                    em {
-                        display: inline-block;
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 8px;
-                        margin-right: 10px;
-                        background-color: #d9d9d9;
-                    }
-                }
-
-                >li:hover {
-                    color: #139602;
-                }
-
-                >li:hover em {
-                    background-color: #139602;
-                }
-            }
-        }
-    }
-
-    .innerRight {
-        width: 381px;
-        height: 290px;
-        background-color: #fbfbfb;
-
-        >.title {
-            width: 380px;
-            height: 40px;
-            line-height: 40px;
-            border-top: 1px solid #139602;
-            border-bottom: 1px solid #e7e7e7;
-
-            >h4 {
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                margin-left: 20px;
-                font-size: 20px;
-                color: #000000;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-
-                >span {
-                    float: right;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: 400;
-                    font-size: 14px;
-                    margin-right: 10px;
-                    color: #999999;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-
-        }
-
-        .rightList {
-            height: 540px;
-            margin-top: 20px;
-
-            >li {
-                height: 100px;
-                margin-bottom: 10px;
-
-                >img {
-                    width: 150px;
-                    height: 100px;
-                }
-
-                >p {
-                    width: 219px;
-                    height: 100px;
-                    padding-left: 12px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 400;
-                    font-size: 16px;
-                    color: #333333;
-                    line-height: 22px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-
-                }
-
-                >p:hover {
-                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
-                }
-            }
-        }
-
-    }
-}
+@import url('@/assets/css/list.less');
 </style>

pages/primaryNavigation/[id].vue

@@ -7,13 +7,13 @@
         <HomePageNavigation></HomePageNavigation>
 
         <!-- 二级标题-->
-        <HomeSecondaryHeading :titleName="routeName" :titleData="pageCategory"></HomeSecondaryHeading>
+        <HomeSecondaryHeading :titleName="routeName" :titleData="pageData"></HomeSecondaryHeading>
         <!-- {{ name }} -->
 
         <!-- 第一层 -->
         <div class="farmingPartOne">
             <div class="inner">
-                <div class="innerLeft" v-if="pageData[0]">
+                <div class="innerLeft" v-if="pageData.length>=1">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[0].cid}`}" target="_blank" v-if="pageData[0]">
@@ -70,7 +70,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="innerRight" v-if="pageData[1].cid!=''">
+                <div class="innerRight" v-if="pageData.length>=2">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[1].cid}`}" target="_blank" v-if="pageData[1]">
@@ -110,9 +110,9 @@
         <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
 
         <!-- 第二层 -->
-        <div class="farmingPartTwo" v-if="pageData[2].cid!=''&&pageData[3].cid!=''&&pageData[4].cid!=''">
+        <div class="farmingPartTwo">
             <div class="inner">
-                <div class="farmer" v-if="pageData[2].cid!=''">
+                <div class="farmer"  v-if="pageData.length>=3">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[2].cid}`}" target="_blank" v-if="pageData[2]">
@@ -147,7 +147,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="farmer" v-if="pageData[3].cid!=''">
+                <div class="farmer" v-if="pageData.length>=4">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[3].cid}`}" target="_blank" v-if="pageData[3]">
@@ -182,7 +182,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="farmer" v-if="pageData[4].cid!=''">
+                <div class="farmer" v-if="pageData.length>=5">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[4].cid}`}" target="_blank" v-if="pageData[4]">
@@ -226,11 +226,11 @@
         <HomeTopTen :imgurl="adList[1]" v-if="adList[1]"></HomeTopTen>
 
         <!-- 第三层 -->
-        <div class="zixuntuijian" v-if="pageData[5].cid!=''&&pageData[6].cid!=''&&pageData[7].cid!=''&&pageData[8].cid!=''&&pageData[9].cid!=''">
+        <div class="zixuntuijian">
             <div class="inner">
                 <div class="innerLeft" >
                     <div class="zixunTop">
-                        <div class="zixunLeft" v-if="pageData[5].cid!=''">
+                        <div class="zixunLeft" v-if="pageData.length>=6">
                             <div class="title">
                                 <h3>
                                     <NuxtLink :to="{ path: `/newsList/${pageData[5].cid}`}" target="_blank" v-if="pageData[5]">
@@ -263,7 +263,7 @@
                                             </h5>
                                             <p>
                                                 <span>{{ item.author }}</span>
-                                                <span>{{ getDays(item.created_at) }}</span>
+                                                <span>{{ getTime(item.updated_at,'month',1) }}</span>
                                             </p>
                                         </div>
                                     </article>
@@ -277,7 +277,7 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="zixunRight"  v-if="pageData[6].cid!=''">
+                        <div class="zixunRight"  v-if="pageData.length>=7">
                             <div class="title">
                                 <h3>
                                     <NuxtLink :to="{ path: `/newsList/${pageData[6].cid}`}" target="_blank" v-if="pageData[6]">
@@ -318,7 +318,7 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="zixunBottom" v-if="pageData[6].cid!=''">
+                    <div class="zixunBottom" v-if="pageData.length>=8">
                         <img class="left" :src="pageData[7].data[0].imgurl"
                             v-if="pageData[7].data[0] && hoverStatus == 0">
                         <img class="left" :src="pageData[7].data[1].imgurl"
@@ -346,7 +346,7 @@
                         </ul>
                     </div>
                 </div>
-                <div class="innerRight" v-if="pageData[8].cid!=''">
+                <div class="innerRight" v-if="pageData.length>=9">
                     <div class="title">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[8].cid}`}" target="_blank" v-if="pageData[8]">
@@ -385,10 +385,10 @@
 
         <HomeTopTen :imgurl="adList[2]" v-if="adList[2]"></HomeTopTen>
 
-        <div class="farming" v-if="pageData[9].cid!=''&&pageData[10].cid!=''&&pageData[11].cid!=''">
+        <div class="farming" >
             <div class="inner">
-                <div class="innerLeft" v-if="pageData[9].cid!=''">
-                    <div class="farmer">
+                <div class="innerLeft">
+                    <div class="farmer" v-if="pageData.length>=10">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[9].cid}`}" target="_blank" v-if="pageData[9]">
                                 {{ pageData[9].title }}
@@ -411,7 +411,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="farmer">
+                    <div class="farmer" v-if="pageData.length>=11">
                         <h3>
                             <NuxtLink :to="{ path: `/newsList/${pageData[10].cid}`}" target="_blank" v-if="pageData[10]">
                                 {{ pageData[10].title }}
@@ -436,7 +436,7 @@
                         </ul>
                     </div>
                 </div>
-                <div class="innerRight" v-if="pageData[11].cid!=''">
+                <div class="innerRight"  v-if="pageData.length>=12">
                     <h3>
                         <NuxtLink :to="{ path: `/newsList/${pageData[11].cid}`}" target="_blank" v-if="pageData[11]">
                             {{ pageData[11].title }}
@@ -503,9 +503,9 @@
         <HomeTopTen :imgurl="adList[3]" v-if="adList[3]"></HomeTopTen>
 
         <!-- 第五层 -->
-        <div class="scienceEducation" v-if="pageData[12].cid!=''&&pageData[13].cid!=''">
+        <div class="scienceEducation">
             <div class="inner">
-                <div class="innerLeft" v-if="pageData[12].cid!=''">
+                <div class="innerLeft"  v-if="pageData.length>=13">
                     <div class="slider">
                         <div class="scienceTitle">
                             <h5>
@@ -593,7 +593,7 @@
                     </div>
 
                 </div>
-                <div class="innerRight" v-if="pageData[13].cid!=''">
+                <div class="innerRight" v-if="pageData.length>=14">
                     <h3>
                         <NuxtLink :to="{ path: `/newsList/${pageData[13].cid}`}" target="_blank" v-if="pageData[13]">
                             {{ pageData[13].title }}
@@ -660,1872 +660,603 @@
 </template>
 
 <script setup>
-//获取生命周期
-import { onMounted } from 'vue';
-
+//1.加载页面依赖 start ---------------------------------------->
 //获得跳转过来的id
 const route = useRoute();
 const routeId = route.params.id; //获得该页面的id
 const routeName = route.query.name; //获得该页面的名称
-//获取行政部门和地区
-const cityid = route.query.cityid;
-const depId = route.query.department_id;
-
-//获得axios
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-// 定义响应式数据
-const seoData = ref({
-    title: '三农资讯网',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
+//1.加载页面依赖 end ---------------------------------------->
 
+//2.页面交互效果 start ---------------------------------------->
+//2.1 新闻图片切换
 const hoverStatus = ref(1)
 const qhPic = function (num) {
     console.log(num)
     hoverStatus.value = num;
 }
 
-//获得所有广告
-const adList = ref("");
-const aa='CATEGORY'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
+//2.2 选项卡切换
+let showTabs = ref(1)
+let qhtabs = function (number) {
+    console.log(number)
+    showTabs.value = number
 }
-onMounted(() => {
-    getadList()
-})
-
-// 在 onMounted 钩子中获取数据
-onMounted(async () => {
-    // try {
-    //     const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${routeId}`);
-    //     const data = response.data.website_head; // 假设接口返回的数据在 data 字段中
-    //     console.log(seoData.value.title)
-    //     // 更新 seoData
-    //     seoData.value = {
-    //         title: data.seo_title,
-    //         description: data.seo_description,
-    //         keywords: data.seo_keywords,
-    //         image: data.seo_image
-    //     };
-    //     console.log(seoData.value.title)
-
-    // } catch (error) {
-    //     console.error('获取 SEO 数据失败:', error);
-    //     // 设置默认值
-    //     seoData.value = {
-    //         title: '三农资讯网',
-    //         description: '默认描述',
-    //         keywords: '默认关键词',
-    //         image: 'https://example.com/default-image.jpg'
-    //     };
-    // }
-});
-
-// 监听 seoData 的变化，动态设置 SEO 字段
-watch(seoData, (newVal) => {
-    if (newVal.title) { // 确保 title 有值
-        useSeoMeta({
-            title: newVal.title, // 使用动态值
-            description: newVal.description,
-            ogTitle: newVal.title,
-            ogDescription: newVal.description,
-            ogImage: newVal.image,
-            twitterTitle: newVal.title,
-            twitterDescription: newVal.description,
-            twitterImage: newVal.image,
-            keywords: newVal.keywords
-        });
+//2.3 展示广告
+const adList = ref([]);
+async function getadList() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteAdvertisement', {
+        method: 'GET',
+        query: {
+            'ad_tag': 'CATEGORY',
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            adList.value = mkdata.value.data;
+        }
     }
-}, { immediate: true });
-
-
+}
+getadList()
+//2.页面交互效果 end ---------------------------------------->
 
-//该页面上所有的导航池 转为动态数据
+//3.渲染页面数据 start ---------------------------------------->
+//3.1 该页面上所有的导航池 转为动态数据
 const pageCategory = ref([]);
-//该页面上需要渲染的所有数据
+//3.2 该页面上需要渲染的所有数据
 const pageData = ref([
-    { id: 0, data: [], data2: [], title: "", cid: "" },
-    { id: 1, data: [], title: "", cid: "" },
-    { id: 2, data: [], title: "", cid: "" },
-    { id: 3, data: [], title: "", cid: "" },
-    { id: 4, data: [], title: "", cid: "" },
-    { id: 5, data: [], title: "", cid: "" },
-    { id: 6, data: [], title: "", cid: "" },
-    { id: 7, data: [], title: "", cid: "" },
-    { id: 8, data: [], title: "", cid: "" },
-    { id: 9, data: [], title: "", cid: "" },
-    { id: 10, data: [], title: "", cid: "" },
-    { id: 10, data: [], title: "", cid: "" },
-    {
-        id: 11,
-        title: "",
-        data: [],
-        data1: [],
-        data2: [],
-        data3: [],
-        data4: [],
-        category_id1: "",
-        category_id2: "",
-        category_id3: "",
-        category_id4: "",
-        title1: "",
-        title2: "",
-        title3: "",
-        title4: "",
-        cid: ""
-    },
-    { id: 12, data1: [], data2: [], data3: [], cid: "" },
+    // { id: 0, data: [], data2: [], title: "", cid: "" },
+    // { id: 1, data: [], title: "", cid: "" },
+    // { id: 2, data: [], title: "", cid: "" },
+    // { id: 3, data: [], title: "", cid: "" },
+    // { id: 4, data: [], title: "", cid: "" },
+    // { id: 5, data: [], title: "", cid: "" },
+    // { id: 6, data: [], title: "", cid: "" },
+    // { id: 7, data: [], title: "", cid: "" },
+    // { id: 8, data: [], title: "", cid: "" },
+    // { id: 9, data: [], title: "", cid: "" },
+    // { id: 10, data: [], title: "", cid: "" },
+    // { id: 10, data: [], title: "", cid: "" },
+    // {
+    //     id: 11,
+    //     title: "",
+    //     data: [],
+    //     data1: [],
+    //     data2: [],
+    //     data3: [],
+    //     data4: [],
+    //     category_id1: "",
+    //     category_id2: "",
+    //     category_id3: "",
+    //     category_id4: "",
+    //     title1: "",
+    //     title2: "",
+    //     title3: "",
+    //     title4: "",
+    //     cid: ""
+    // },
+    // { id: 12, data1: [], data2: [], data3: [], cid: "" },
 ])
 
-//第一种情况 直接获得二级导航
-//第一步：获得该分类下的所有二级导航
-const newCategory = useState("getWebsiteModelCategory", () => ''); //动态数据
-//placeid 固定为1
-//pid 由上个页面带过来的1级导航id
-//num 获得多少个2级导航 取决你的页面显示 上面有几个你就请求几个
-const getWebsiteModelCategory = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${routeId}&num=${14}`);
-        pageCategory.value = response.data;
-        //给与板块标题
-        for (let index in response.data) {
-            pageData.value[index].title = response.data[index].name
-            pageData.value[index].cid = response.data[index].category_id
+const navSize = ref("");
+
+//3.3 获取所有导航
+try {
+    const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': routeId,
+            'num': 14
+        },
+    });
+    console.log("成功获取网站导航池！：", navigateData.data);
+    // 遍历可用的导航池放到页面中
+    for (let index in navigateData.data) {
+        let data = {
+            title: navigateData.data[index].name,
+            cid: navigateData.data[index].category_id,
+            children_count: navigateData.data[index].children_count,
+            alias: navigateData.data[index].alias,
+            data:[],
+            data1:[],
+            data2:[],
+            data3:[],
+            data4:[],
+            category_id1:"",
+            category_id2:"",
+            category_id3:"",
+            category_id4:"",
+            title1: "",
+            title2: "",
+            title3: "",
+            title4: ""
+        };
+        if (navigateData.data[index].is_url == 1) {
+            // 处理 URL 的逻辑
+        } else {
+            pageData.value.push(data);
         }
-        console.log(pageData.value)
-        console.log('pageCategory111111111111111', pageCategory.value)
-        renderPage();
-    } catch (error) {
-        console.error(error);
     }
+    //导航池加载完毕，开始申请模块数据
+    await getPageData1();
+    await getPageData1_data2();
+    await getPageData2();
+    await getPageData3();
+    await getPageData4();
+    await getPageData5();
+    await getPageData6();
+    await getPageData7();
+    await getPageData8();
+    await getPageData9();
+    await getPageData10();
+    await getPageData11();
+    await getPageData12();
+    await getPageData12_data2();
+    await getPageData12_data3();
+    await getPageData13();
+    if(navSize.value>=1){
+        await getPageData13_data1();
+    }
+    if(navSize.value>=2){
+        await getPageData13_data2();
+    }
+    if(navSize.value>=3){
+        await getPageData13_data3();
+    }
+    if(navSize.value>=4){
+        await getPageData13_data4();
+    }
+    await getPageData14();
+    await getPageData14_data2();
+    await getPageData14_data3();
+    await getSeo();
+} catch (error) {
+    console.error('获取页面导航失败！:', error);
 }
 
-//第二种情况 用户搜索的二级导航
-const searchCategory = useState("selectWebsiteCategory", () => ''); //动态数据
-//placeid 固定为1
-//pid 由上个页面带过来的1级导航id
-//num 获得多少个2级导航 取决你的页面显示 上面有几个你就请求几个
-const selectWebsiteCategory = async () => {
-    try {
-        const response = await axios.get(`/web/selectWebsiteCategory?pid=${routeId}&cityid=${cityid}&department_id=${depId}`);
-        pageCategory.value = response.data;
-        //给与板块标题
-        for (let index in response.data) {
-            pageData.value[index].title = response.data[index].name
+//模块1
+async function getPageData1() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[0].cid,
+            'level': 3,
+            'pagesize': 8
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[0].data = mkdata.value.data;
         }
-        console.log(pageData.value)
-        console.log(pageCategory.value)
-        renderPage2();
-    } catch (error) {
-        console.error(error);
     }
 }
-
-
-//第二步：获得对应分类下的数据
-const renderPage = function () {
-    console.log("当前获取到：" + pageCategory.value.length + "个导航")
-    //循环pageCategory.value.length的次数执行getWebsiteArticlesList
-    for (let i = 0; i <= pageCategory.value.length - 1; i++) {
-        getWebsiteArticlesList(pageCategory.value[i].category_id, i)
+async function getPageData1_data2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[0].cid,
+            'level': 3,
+            'pagesize': 4
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[0].data2 = mkdata.value.data;
+        }
     }
 }
-
-//第二步：获得搜索对应分类下的数据 - 因为字段名字不一样，这里做了一下区分
-const renderPage2 = function () {
-    console.log("当前获取到：" + pageCategory.value.length + "个导航")
-    //循环pageCategory.value.length的次数执行getWebsiteArticlesList
-    for (let i = 0; i <= pageCategory.value.length - 1; i++) {
-        getWebsiteArticlesList(pageCategory.value[i].id, i)
+//模块2
+async function getPageData2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[1].cid,
+            'level': 3,
+            'pagesize': 5
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[1].data = mkdata.value.data;
+        }
     }
 }
-
-
-
-//第三步循环获取数据
-const getWebsiteArticlesList = async (name, listType) => {
-
-    //第一层
-    //板块1 图文
-    if (listType == 0) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${8}`);
-        pageData.value[0].data = response.data
-        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}&placeid=${9}`);
-        pageData.value[0].data2 = response2.data
-    }
-    //板块2 图文
-    if (listType == 1) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
-        pageData.value[1].data = response.data;
-
-    }
-
-    //第二层
-    //板块3 图文
-    if (listType == 2) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
-        pageData.value[2].data = response.data;
-    }
-    //板块4 图文
-    if (listType == 3) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
-        pageData.value[3].data = response.data;
-    }
-    //板块5 图文
-    if (listType == 4) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
-        pageData.value[4].data = response.data;
-    }
-
-    //第三层
-    //板块6 图文
-    if (listType == 5) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}`);
-        pageData.value[5].data = response.data;
-    }
-    //板块7 图文
-    if (listType == 6) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
-        pageData.value[6].data = response.data;
-    }
-    //板块8 图文
-    if (listType == 7) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
-        pageData.value[7].data = response.data;
-    }
-    //板块9 图文
-    if (listType == 8) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}`);
-        pageData.value[8].data = response.data;
-    }
-    //第四层
-    //板块10 文字
-    if (listType == 9) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${10}`);
-        pageData.value[9].data = response.data;
-    }
-    //板块11 文字
-    if (listType == 10) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${10}`);
-        pageData.value[10].data = response.data;
-    }
-    //板块12 轮播图 图文 文字
-    if (listType == 11) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${2}&pagesize=${4}`);
-        pageData.value[11].data = response.data;
-        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${2}`);
-        pageData.value[11].data2 = response2.data;
-        const response3 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${5}`);
-        pageData.value[11].data3 = response3.data;
-    }
-
-    //第五层
-    //板块12 多级栏目 判断下面有没有子级 如果有每个取出来 6条图文
-    if (listType == 12) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${10}`);
-        pageData.value[12].data = response.data;
-        console.log("第一步获取父级id")
-        console.log(pageCategory.value[12].children_count)
-        console.log(pageCategory.value[12].category_id)
-        //判断一下里面有没有子导航
-        if (pageCategory.value[12].children_count != 0) {
-            //开始请求子导航
-            const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${pageCategory.value[12].category_id}&num=${100}`);
-            console.log("第二步获取子级数量")
-            console.log(response.data.length)
-            //获得标题
-            //判断里面有几个
-            for (let i = 1; i <= response.data.length; i++) {
-                if (i == 1) {
-                    pageData.value[12].title1 = response.data[0].name
-                    pageData.value[12].category_id1 = response.data[0].category_id
-                }
-                if (i == 2) {
-                    pageData.value[12].title2 = response.data[1].name
-                    pageData.value[12].category_id2 = response.data[1].category_id
-                }
-                if (i == 3) {
-                    pageData.value[12].title3 = response.data[2].name
-                    pageData.value[12].category_id3 = response.data[2].category_id
-                }
-                if (i == 4) {
-                    pageData.value[12].title4 = response.data[3].name
-                    pageData.value[12].category_id4 = response.data[3].category_id
-                }
-            }
-            //获得内容
-            //第三步：有几个就循环几次
-            for (let i = 1; i <= pageCategory.value[12].children_count; i++) {
-                if (i == 1) {
-                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id1}&level=${3}&pagesize=${6}`);
-                    pageData.value[12].data1 = response.data
-                }
-                if (i == 2) {
-                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id2}&level=${3}&pagesize=${6}`);
-                    pageData.value[12].data2 = response.data
-                }
-                if (i == 3) {
-                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id3}&level=${3}&pagesize=${6}`);
-                    pageData.value[12].data3 = response.data
-                }
-                if (i == 4) {
-                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id4}&level=${3}&pagesize=${6}`);
-                    pageData.value[12].data4 = response.data
-                }
-            }
+//模块3
+async function getPageData3() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[2].cid,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[2].data = mkdata.value.data;
         }
-
-    }
-
-    //板块13 轮播图 图文 文字
-    if (listType == 13) {
-        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${2}&pagesize=${4}`);
-        pageData.value[13].data = response.data;
-        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${2}`);
-        pageData.value[13].data2 = response2.data;
-        const response3 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${5}`);
-        pageData.value[13].data3 = response3.data;
     }
 }
-
-let scienceTitleList = [
-    {
-        id: 1,
-        title: "农产畅销"
-    },
-    {
-        id: 2,
-        title: "农业在线"
-    },
-    {
-        id: 3,
-        title: "农产行情"
-    },
-    {
-        id: 4,
-        title: "名优特产"
-    }
-]
-
-//鼠标移入标题时,下方内容会发生变化
-let changeUl = (index) => {
-    // console.log(index);
-    if (process.browser) {
-        let scienceListBox = document.querySelector('.scienceListBox');
-        let titleList = document.querySelectorAll('.title>span>a')
-        for (let i = 0; i < titleList.length; i++) {
-            titleList[i].className = ''
-        }
-        titleList[index].setAttribute('class', 'current')
-        if (index == 0) {
-            scienceListBox.style.left = 0
-        } else if (index == 1) {
-            scienceListBox.style.left = "-790px"
-        } else if (index == 2) {
-            scienceListBox.style.left = "-1580px"
-        } else if (index == 3) {
-            scienceListBox.style.left = "-2370px"
+//模块4
+async function getPageData4() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[3].cid,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[3].data = mkdata.value.data;
         }
     }
 }
-
-//显示哪个tabs
-let showTabs = ref(1)
-let qhtabs = function (number) {
-    console.log(number)
-    showTabs.value = number
-}
-
-//挂载成功钩子函数
-onMounted(() => {
-    //判断一下应该走搜索还是直接走二级分类
-    console.log(111111)
-    console.log(cityid)
-    console.log(cityid != undefined)
-    console.log(depId != undefined)
-    if (cityid != undefined || depId != undefined) {
-        console.log(7777777777)
-        console.log(cityid)
-        console.log(depId)
-        //获得用户搜索的导航
-        selectWebsiteCategory()
-
+//模块5
+async function getPageData5() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[4].cid,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
     } else {
-        console.log(888888888)
-        //直接获得所有二级导航
-        getWebsiteModelCategory()
+        if (mkdata.value) {
+            pageData.value[4].data = mkdata.value.data;
+        }
     }
-})
-
-function getDays(time) {
-    const date = new Date(time);
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
-    return `${month}-${day}`;
 }
-</script>
-
-<style lang="less" scoped>
-a {
-    color: #333333;
-}
-
-//农民工part1
-.farmingPartOne {
-    width: 100%;
-    height: 600px;
-
-    .inner {
-        height: 600px;
-
-        .innerLeft {
-            height: 600px;
-
-            .leftTop {
-                margin-top: 20px;
-                height: 320px;
-
-                .leftTopPhoto {
-                    width: 387px;
-                    height: 320px;
-                    position: relative;
-
-                    img {
-                        width: 387px;
-                        height: 320px;
-                    }
-
-                    span {
-                        display: inline-block;
-                        width: 387px;
-                        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;
-                        white-space: nowrap;
-                        /* 禁止换行 */
-                        overflow: hidden;
-                        /* 隐藏超出部分 */
-                        text-overflow: ellipsis;
-                        /* 超出部分显示省略号 */
-                    }
-                }
-
-                >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;
-                        white-space: nowrap;
-                        /* 禁止换行 */
-                        overflow: hidden;
-                        /* 隐藏超出部分 */
-                        text-overflow: ellipsis;
-                        /* 超出部分显示省略号 */
-                    }
-
-                    >li:hover {
-                        a {
-                            color: #088f04;
-                        }
-
-                        color: #088f04;
-                    }
-
-                    >li:hover>em {
-                        background-color: #088f04;
-                    }
-                }
-            }
-
-            .leftBottom {
-                height: 202px;
-                margin-top: 21px;
-
-                >li {
-                    float: left;
-                    width: 185px;
-                    height: 202px;
-                    margin-right: 10px;
-
-                    >a {
-                        >img {
-                            width: 185px;
-                            height: 139px;
-                        }
-                    }
-
-
-
-                    >p {
-                        width: 185px;
-                        height: 58px;
-                        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;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        /* 限制显示的行数 */
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-
-                }
-
-                >li:hover {
-                    a {
-                        color: #088f04;
-                    }
-                }
-
-                >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;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 4;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        word-break: break-all;
-                        padding-left: 12px;
-                        font-family: PingFang SC, PingFang SC;
-                        font-weight: 400;
-                        font-size: 16px;
-                        color: #333333;
-                        line-height: 24px;
-                        text-align: left;
-                        font-style: normal;
-                        text-transform: none;
-
-                    }
-
-                    >p:hover {
-                        box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
-
-                        a {
-                            color: #088f04;
-                        }
-                    }
-                }
-            }
-
+//模块6
+async function getPageData6() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[5].cid,
+            'level': 3,
+            'pagesize': 4
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[5].data = mkdata.value.data;
         }
     }
 }
-
-//农民工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>a {
-                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;
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-                    /* 超出部分显示省略号 */
-                }
-            }
-
-            //农民工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;
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-                    /* 超出部分显示省略号 */
-
-                    >em {
-                        display: inline-block;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #d9d9d9;
-                        border-radius: 8px;
-                        margin-left: 19px;
-                        margin-right: 10px;
-                    }
-                }
-
-                >li:hover {
-                    color: #139602;
-
-                    a {
-                        color: #088f04;
-                    }
-                }
-
-                >li:hover>em {
-                    background-color: #139602;
-                }
-            }
-        }
-
-        >.farmer:last-child {
-            margin-right: 0;
+//模块7
+async function getPageData7() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[6].cid,
+            'level': 3,
+            'pagesize': 5
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[6].data = mkdata.value.data;
         }
     }
 }
-
-//资讯推荐
-.zixuntuijian {
-    width: 100%;
-    height: 600px;
-
-    .innerLeft {
-
-        // 左侧的上半部分
-        .zixunTop {
-            height: 286px;
-
-            .zixunLeft,
-            .zixunRight {
-                float: left;
-                width: 380px;
-                height: 286px;
-
-                .towPic {
-                    display: flex;
-                    width: 380px;
-                    height: 116px;
-                    margin-top: 20px;
-
-                    .picBox {
-                        width: 50%;
-                        text-align: center;
-                    }
-
-                    .picBox:nth-child(3),
-                    .picBox:nth-child(4),
-                    .picBox:nth-child(5) {
-                        display: none;
-                    }
-
-                    img {
-                        width: 190px;
-                        height: 120px;
-                    }
-
-                    .picBox:first-child {
-                        margin-right: 5px;
-                    }
-                }
-
-                // 标题部分
-                >.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 {
-                    article {
-                        white-space: nowrap;
-                        /* 禁止换行 */
-                        overflow: hidden;
-                        /* 隐藏超出部分 */
-                        text-overflow: ellipsis;
-
-                        /* 超出部分显示省略号 */
-                        li {
-                            white-space: nowrap;
-                            /* 禁止换行 */
-                            overflow: hidden;
-                            /* 隐藏超出部分 */
-                            text-overflow: ellipsis;
-
-                            /* 超出部分显示省略号 */
-                            a:hover {
-                                color: #088f04;
-                            }
-
-                        }
-
-                        li:hover {
-                            color: #088f04;
-
-                            a {
-                                color: #088f04;
-                            }
-                        }
-
-                        img {
-                            width: 100px;
-                        }
-                    }
-
-                    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 {
-                                width: 200px;
-                                height: 54px;
-                                white-space: nowrap;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                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: 75px;
-                                    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:nth-child(1) {
-                        display: none;
-                    }
-
-                    >li:nth-child(2) {
-                        display: none;
-                    }
-                }
-
-            }
-        }
-
-        //左侧的下半部分
-        .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: 35px;
-                    line-height: 35px;
-                    color: #666666;
-                    font-size: 14px;
-                    margin-bottom: 18px;
-
-                    h4 {
-                        font-family: Source Han Sans, Source Han Sans;
-                        height: 35px;
-                        line-height: 35px;
-                        font-size: 18px;
-                        font-weight: 400;
-                        white-space: nowrap;
-                        /* 禁止换行 */
-                        overflow: hidden;
-                        /* 隐藏超出部分 */
-                        text-overflow: ellipsis;
-                        /* 超出部分显示省略号 */
-                        color: #333333;
-                        width: 260px;
-
-                        em {
-                            display: inline-block;
-                            width: 8px;
-                            height: 8px;
-                            background-color: #333333;
-                            border-radius: 8px;
-                            margin-right: 5px;
-                        }
-                    }
-
-                    p {
-                        width: 249px;
-                        height: 48px;
-                        line-height: 24px;
-                        padding-left: 14px;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        /* 限制显示的行数 */
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                    }
-                }
-
-                >li:hover,
-                >li:hover>h4>a,
-                >li:hover>p>a {
-                    color: #088f04;
-                }
-
-                >li:hover>h4>em {
-                    background-color: #088f04;
-                }
-            }
+//模块8
+async function getPageData8() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[7].cid,
+            'level': 3,
+            'pagesize': 5
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[7].data = mkdata.value.data;
         }
     }
-
-    .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: 49px;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        overflow: hidden;
-                        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: 20px;
-                        display: -webkit-box;
-                        -webkit-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        word-break: break-all;
-                        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;
-                        margin-top: 40px;
-                    }
-                }
-
-                .text:hover {
-                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
-                    background-color: #fff;
-
-                    h5 {
-                        a {
-                            color: #088f04;
-                        }
-                    }
-
-                    p {
-                        color: #088f04;
-                    }
-                }
-            }
+}
+//模块9
+async function getPageData9() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[8].cid,
+            'level': 3,
+            'pagesize': 4
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[8].data = mkdata.value.data;
         }
     }
 }
-
-// 农民工
-.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;
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-                    /* 超出部分显示省略号 */
-
-                    >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;
-
-                    a {
-                        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;
-                }
-            }
+//模块10
+async function getPageData10() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[9].cid,
+            'level': 1,
+            'pagesize': 10
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[9].data = mkdata.value.data;
         }
     }
-
-
-    // 右侧
-    .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;
-                display: flex;
-            }
-
-            .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;
-
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-                    /* 超出部分显示省略号 */
-
-                }
-            }
-
-            .photoL {
-                margin-right: 10px;
-            }
-
-        }
-
-        .banner_text_list {
-            ul {
-                width: 380px;
-                height: 186px;
-                margin-top: 30px;
-
-                >li {
-
-                    a {
-                        height: 22px;
-                        font-size: 16px;
-
-                        &:hover {
-                            color: #139609;
-                        }
-                    }
-
-                    height: 22px;
-                    padding-bottom: 16px;
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-                    /* 超出部分显示省略号 */
-
-                    >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: 6px;
-                        height: 6px;
-                        border-radius: 10px;
-                        border: 2px solid #8CBA86;
-                        margin-right: 10px;
-                    }
-
-                    >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;
-
-
-                    }
-
-                    >span:hover {
-                        color: #139609;
-                    }
-
-                }
-            }
+}
+//模块11
+async function getPageData11() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[10].cid,
+            'level': 1,
+            'pagesize': 10
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[10].data = mkdata.value.data;
         }
-
-
     }
 }
-
-//三农科教
-.scienceEducation {
-    height: 600px;
-    margin-bottom: 76px;
-
-    .innerLeft,
-    .innerRight {
-        float: left;
+//模块12
+async function getPageData12() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[11].cid,
+            'level': 2,
+            'pagesize': 4
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[11].data = mkdata.value.data;
+        }
     }
-
-    // 左侧
-    .innerLeft {
-        width: 790px;
-        height: 616px;
-        margin-right: 21px;
-
-
+}
+async function getPageData12_data2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[11].cid,
+            'level': 3,
+            'pagesize': 2
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[11].data2 = mkdata.value.data;
+        }
     }
-
-
-    // 右侧
-    .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;
-            }
+}
+async function getPageData12_data3() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[11].cid,
+            'level': 1,
+            'pagesize': 5
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[11].data3 = mkdata.value.data;
         }
+    }
+}
 
-        ul.sannongList {
-            width: 380px;
-            height: 186px;
-
-            >li {
-                height: 22px;
-                padding-top: 16px;
-                white-space: nowrap;
-                /* 禁止换行 */
-                overflow: hidden;
-                /* 隐藏超出部分 */
-                text-overflow: ellipsis;
-                /* 超出部分显示省略号 */
-
-                >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: 6px;
-                    height: 6px;
-                    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;
-
-                    a {
-                        color: #088f04;
-                    }
-                }
 
+async function getPageData13() {
+    const navData =  await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'pid': pageData.value[12].cid,
+            'placeid': 1,
+            'num': 4
+        },
+    });
+    let mkLength = navData.data.length;
+    navSize.value = navData.data.length;
+    if(mkLength != 0){
+        for (let i = 1; i <= mkLength; i++) {
+            if (i == 1) {
+                pageData.value[12].title1 = navData.data[0].name;
+                pageData.value[12].category_id1 = navData.data[0].category_id;
             }
-        }
-
-        // 轮播图
-        .banner {
-            width: 380px;
-            height: 214px;
-            margin-top: 45px;
-        }
-
-        .banner_b_img {
-
-            // 图片部分
-            .photo {
-                height: 104px;
-                margin-top: 10px;
-                display: flex;
+            if (i == 2) {
+                pageData.value[12].title2 = navData.data[1].name;
+                pageData.value[12].category_id2 = navData.data[1].category_id;
             }
-
-            .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;
-                    white-space: nowrap;
-                    /* 禁止换行 */
-                    overflow: hidden;
-                    /* 隐藏超出部分 */
-                    text-overflow: ellipsis;
-
-                    /* 超出部分显示省略号 */
-                    a {
-                        color: #fff;
-                    }
-                }
+            if (i == 3) {
+                pageData.value[12].title3 = navData.data[2].name;
+                pageData.value[12].category_id3 = navData.data[2].category_id;
             }
-
-            .photoL {
-                margin-right: 10px;
+            if (i == 4) {
+                pageData.value[12].title4 = navData.data[3].name;
+                pageData.value[12].category_id4 = navData.data[3].category_id;
             }
-
-
         }
-
-
     }
 }
 
-// 标题
-.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;
-        display: flex;
-
-        >span {
-            display: inline-block;
-            //height: 20px;
-            line-height: 20px;
-            text-align: center;
-            margin: 4px 0px 3px;
-            padding: 0 20px;
-            //border-right: 1px solid #ccc;
-            font-weight: 500;
-            font-size: 20px;
-            cursor: pointer;
-            padding-bottom: 11px;
-
-            // >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;
-            // }
-
-            .current {
-                color: #139602;
-                border-bottom: 1px solid #139602;
-            }
-        }
-
-        >span:nth-child(4) {
-            border-right: none;
-        }
-
-        >span:hover>a {
-            color: #139602;
-            border-bottom: 1px solid #139602;
-
+async function getPageData13_data1() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[12].category_id1,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        console.log(999)
+        console.log(mkdata.value)
+        if (mkdata.value) {
+            pageData.value[12].data1 = mkdata.value.data;
         }
     }
 }
-
-
-.box {
-    width: 790px;
-    height: 570px;
-    position: relative;
-    overflow: hidden;
-}
-
-.fade-in {
-    animation: fadeIn 1s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.fade-enter-to,
-.fade-leave-from {
-    opacity: 1;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 1s ease;
-}
-
-.scienceListBox {
-    width: 3160px;
-    height: 570px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: all 3s linear 0;
-
+async function getPageData13_data2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[12].category_id2,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[12].data2 = mkdata.value.data;
+        }
+    }
 }
-
-// 标题下列表
-.scienceList {
-    width: 790px;
-    height: 570px;
-    float: left;
-    margin-top: 17px;
-
-    >li {
-        width: 250px;
-        height: 276px;
-        float: left;
-        margin-right: 20px;
-        position: relative;
-
-        img {
-            width: 250px;
-            height: 220px;
-            border-top-left-radius: 40px;
-            border-bottom-right-radius: 40px;
+async function getPageData13_data3() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[12].category_id3,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[12].data3 = mkdata.value.data;
         }
-
-        >p {
-            height: 50px;
-            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;
-
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-            /* 限制显示的行数 */
-            overflow: hidden;
-            text-overflow: ellipsis;
+    }
+}
+async function getPageData13_data4() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[12].category_id4,
+            'level': 3,
+            'pagesize': 6
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[12].data4 = mkdata.value.data;
         }
-
-        // >p:hover {
-        //     color: #139602;
-        // }
     }
+}
 
-    >li:hover {
-        color: #088f04;
-
-        >p:hover {
-            a {
-                color: #088f04;
-            }
-
-            // color: #139602;
+//模块14
+async function getPageData14() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[13].cid,
+            'level': 2,
+            'pagesize': 4
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[13].data = mkdata.value.data;
         }
     }
-
-    >li:nth-child(3),
-    >li:nth-child(6) {
-        margin-right: 0;
+}
+async function getPageData14_data2() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[13].cid,
+            'level': 3,
+            'pagesize': 2
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[13].data2 = mkdata.value.data;
+        }
     }
-
-    >li::before {
-        content: "";
-        display: inline-block;
-        width: 40px;
-        height: 20px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        background-image: url("../../static/images/Component 209.png");
+}
+async function getPageData14_data3() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteModelArticles', {
+        method: 'GET',
+        query: {
+            'catid': pageData.value[13].cid,
+            'level': 1,
+            'pagesize': 5
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            pageData.value[13].data3 = mkdata.value.data;
+        }
     }
 }
-
-.active {
-    border-bottom: 3px solid #139602;
-    height: 36px;
-    display: inline-block;
+//3.渲染页面数据 end ---------------------------------------->
+
+//4.设置seo信息 start---------------------------------------->
+//4.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteCategoryHead', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    seoSetup(setData.data.seo_title,setData.data.seo_description,setData.data.seo_keywords)
 }
+//4.设置seo信息 end---------------------------------------->
+</script>
 
-.noSelect {
-    border-bottom: 3px solid #fff;
-    height: 36px;
-    display: inline-block;
-}
+<style lang="less" scoped>
+    @import '@/assets/css/class.less';
 </style>

pages/primaryNavigation/newsDetail/newsDetail.vue

@@ -1,230 +0,0 @@
-<template>
-    <!-- 页面头部 -->
-    <HomePageHead></HomePageHead>
-
-    <!-- Banner1 -->
-    <HomeBanner1></HomeBanner1>
-
-    <!-- 面包屑导航 -->
-    <div class="breadcrumb">
-        <div class="inner">
-            <span class="location">当前位置:</span>
-            <el-breadcrumb :separator-icon="ArrowRight">
-                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-                <el-breadcrumb-item :to="{ path: '/primaryNavigation/newsList' }">三农之窗</el-breadcrumb-item>
-                <el-breadcrumb-item :to="{ path: '/primaryNavigation/newsDetail/newsDetail' }">文章详情</el-breadcrumb-item>
-            </el-breadcrumb>
-        </div>
-    </div>
-
-    <!-- 资讯列表 -->
-    <div class="newsDetail">
-        <div class="inner">
-            <div class="innerLeft">
-                <div class="LeftTop">
-                    <h1>{{ newsDetail.title }}</h1>
-                    <p>
-                        来源: <span>{{ newsDetail.author }}</span>
-                        <span>{{ newsDetail.updated_at }}</span>
-                        浏览量: <span>{{ newsDetail.hits }}</span>
-                    </p>
-                    <img :src="newsDetail.imgurl" alt="">
-                </div>
-                <div class="leftBottom">
-                    {{newsDetail.content }}
-
-                    <!-- <h3>“逆周期调节”是什么？ </h3>
-                    <p>这次发布会将重点聚焦“财政政策逆周期调节力度”，那什么是逆周期调节？</p>
-                    <p>逆周期调节是指政府根据经济周期阶段，通过政策工具和措施让整个经济周期的波动性平缓‌，更好促进经济发展。财政政策就是其中的重要一类。</p>
-                    <p>当前，我国经济的基本面及市场广阔、经济韧性强、潜力大等有利条件并未改变。同
-                        时，经济运行出现一些新的情况和问题。为了更好促进经济发展，近年来，我国坚持实施 积极的财政政策，通过增加财政支出、实施减税降费等方式，实现政府投资的扩大和消费
-                        潜能的释放，促进了经济增长、增加就业和扩大内需等。 专家认为，财政政策逆周期调节对于稳定经济增长、促进就业、控制通胀和稳定金融
-                        市场具有重要意义。随着国民经济发展不断变化，相应的，财政政策也会根据经济形势的 变化来灵活调整，这样才能更好实现经济的平稳发展。</p>
-
-                    <h3>积极财政政策持续加力 推动经济高质量发展</h3>
-                    <p>今年，我国继续实施积极的财政政策，通过组合运用多种政策工具，促进经济持续回 升向好。那么，财政政策工具箱里都有哪些“宝贝” 国家的钱袋子又投向了哪些领域呢？</p>
-
-                    <h3>政策亮点——超长期特别国债</h3>
-                    <p>到财政政策工具箱，今年最大的亮点要数超长期特别国债。10000亿元超长期特别
-                        国债，专项用于“两重”，也就是国家重大战略实施和重点领域安全能力建设。截至7月底，超长期特别国债已累计发行4180亿元。</p>
-                    <p>不仅如此，为了更好支持大规模设备更新和消费品以旧换新行动，万亿超长期特别国 债中有约3000亿元加力支持重点领域设备更新，进一步提升地方消费品以旧换新的能力。</p> -->
-                </div>
-            </div>
-            <div class="innerRight">
-                <!-- 热点资讯1 -->
-                <DetailHotNews></DetailHotNews>
-                <!-- 热点资讯2 -->
-                <DetailHotNews2></DetailHotNews2>
-            </div>
-        </div>
-    </div>
-
-    <!-- 页面底部 -->
-    <HomeFoot></HomeFoot>
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
-import { ArrowRight } from '@element-plus/icons-vue'
-
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-//获取导航一的栏目
-const newsDetail = useState("newsDetail",()=>"");
-const newsDetailList = async () => {
-    try {
-        const response = await axios.get(`/web/selectWebsiteArticleInfo?articleid=${7}`);
-        console.log(response.data);
-        newsDetail.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-onMounted(()=>{
-    newsDetailList()
-})
-</script>
-
-<style lang="less" scoped>
-//导航条
-.breadcrumb {
-    width: 100%;
-    height: 22px;
-    margin-bottom: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: 400;
-    font-size: 20px;
-    color: #666666;
-    line-height: 23px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-
-    .el-breadcrumb::v-deep{
-        display: inline-block;
-        vertical-align: -4px;
-    }
-
-    /deep/.el-breadcrumb__inner a,
-    /deep/.el-breadcrumb__inner.is-link {
-        color: #666666;
-        font-weight: 400;
-        text-decoration: none;
-        transition: var(--el-transition-color);
-    }
-
-    span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-    span:hover {
-        color: #666666;
-    }
-
-    .location {
-        margin-right: 20px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-// 资讯列表
-.newsDetail {
-    width: 100%;
-    height: 1400px;
-    margin-bottom: 70px;
-
-    .inner {
-        width: 1200px;
-        height: 1400px;
-
-        .innerLeft {
-            height: 1400px;
-            border-top: 1px solid #139602;
-
-            .LeftTop {
-                height: 522px;
-                margin-top: 50px;
-
-                >h1 {
-                    height: 40px;
-                    line-height: 40px;
-                    margin-bottom: 30px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: bold;
-                    font-size: 30px;
-                    color: #333333;
-                }
-
-                >p {
-                    height: 18px;
-                    line-height: 18px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: 400;
-                    font-size: 14px;
-                    color: #999999;
-
-                    span {
-                        margin-right: 40px;
-                    }
-                }
-
-                >img {
-                    width: 680px;
-                    height: 382px;
-                    padding: 50px 0px 60px 55px;
-                }
-            }
-
-            .leftBottom {
-                width: 790px;
-                height: 754px;
-                margin-top: 76px;
-                >h3,>p{
-                    text-indent: 2em;
-                    width: 790px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-size: 20px;
-                    color: #333333;
-                    line-height: 23px;
-                    padding-bottom: 30px;
-                }
-
-                >h3 {
-                    font-weight: 600px;
-                }
-
-                >p {
-                    font-weight: 400;
-                }
-
-            }
-        }
-
-        .innerRight {
-            width: 381px;
-            height: 605px;
-            background-color: #fbfbfb;
-            border-top: 1px solid #139602;
-        }
-    }
-}
-</style>

pages/search/search.vue

@@ -4,10 +4,8 @@
         <HomePageHead></HomePageHead>
         <!-- 导航栏 -->
         <HomePageNavigation1></HomePageNavigation1>
-
         <!-- 列表页广告一 -->
         <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
-        
         <!-- 搜索框 -->
         <div class="search">
             <div class="inner">
@@ -15,7 +13,6 @@
                 <button @click="goSearch">搜索</button>
             </div>
         </div>
-        <!-- 面包屑导航 -->
         <div class="breadcrumb">
             <div class="inner">
                 <span class="location">当前位置:</span>
@@ -25,11 +22,6 @@
                 </el-breadcrumb>
             </div>
         </div>
-        <!-- <div class="searchBox">
-            <input type="text" placeholder="输入关键词" v-model="keywordInput">
-            <button @click="goSearch">搜索</button>
-        </div> -->
-        <!-- 资讯列表 -->
         <div class="newsList">
             <div class="inner">
                 <div class="innerLeft">
@@ -52,240 +44,94 @@
                     <div class="pagination">
                         <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
                             v-model:page-size="pageSize" prev-text="上一页" next-text="下一页" @change="changePage" />
-                        <!-- <HomePagination @sendData="handleData"></HomePagination> -->
                     </div>
                 </div>
-                <!-- <div class="innerRight">
-                    <DetailHotNews></DetailHotNews>
-                </div> -->
             </div>
         </div>
-
         <!-- 列表页广告二 -->
         <HomeTopTen :imgurl="adList[1]" v-if="adList[1]"></HomeTopTen>
-
-        <!--
-        <div class="zixuntuijian">
-            <div class="inner">
-                <div class="innerLeft">
-                    <div class="zixunLeft">
-                        <div class="title">
-                            <h3>
-                                资讯推荐
-                            </h3>
-                        </div>
-                        <ul class="photo_text">
-                            <li v-for="item in news1">
-                                <img :src="item.imgurl" alt="">
-                                <div>
-                                    <h5>{{ item.title }}</h5>
-                                    <p>
-                                        <span>{{ item.author }}</span>
-                                        <span>{{ item.created_at }}</span>
-                                    </p>
-                                </div>
-                            </li>
-                            <li v-for="item in news11">
-                                <em></em>
-                                {{ item.title }}
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="zixunRight">
-                        <div class="title">
-                            <h3>
-                                资讯推荐
-                            </h3>
-                        </div>
-                        <ul class="photo_text">
-                            <li v-for="item in news2">
-                                <img :src="item.imgurl" alt="">
-                                <div>
-                                    <h5>{{ item.title }}</h5>
-                                    <p>
-                                        <span>{{ item.author }}</span>
-                                        <span>{{ item.created_at }}</span>
-                                    </p>
-                                </div>
-                            </li>
-                            <li v-for="item in news22">
-                                <em></em>
-                                {{ item.title }}
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="innerRight">
-                    <div class="title">
-                        <h4>
-                            热点资讯
-                        </h4>
-                    </div>
-                    <ul class="rightList">
-                        <li v-for="item in hotlistall">
-                            <img class="left" :src="item.imgurl">
-                            <p class="left">{{ item.title }}</p>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        -->
-
         <!-- 页面底部 -->
         <HomeFoot1></HomeFoot1>
     </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+//1.页面依赖 start ---------------------------------------->
 import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
-//获得跳转过来的id
 const route = useRoute();
-const articleId = route.params.id; //获得该页面的id
 const category_id = route.query.category_id; //获得该页面的id
-const name = route.query.name; //获得该页面的id
 const searchKey = route.query.keyword
-console.log(name);
-
-//从地区跳转
 const catids = ref([]);
 
 //关键词
-let keyWord = useState("keyWord", () => "")
-let id = useState("id", () => "")
 let total = useState("total", () => 0)
 let page = useState("page", () => 1)
 let pageSize = useState("pageSize", () => 20)
-
-
-let keywordInput = ref("")
-
-//获得广告
-const adList = ref("");
-const aa='SEARCH'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 广告
+let adList = ref([]);
+const {data:adData,error:adError} = requestData('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'SEARCH'}});
+if (adError.value) {
+    console.error('广告列表请求失败:', adError.value);
+} else {
+    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
+    if (adData.value && adData.value.data) {
+        adList.value = adData.value.data;
     }
 }
-onMounted(() => {
-    getadList()
-})
-
-// 定义响应式数据
-const seoData = ref({
-    title: '搜索',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
-
-// 在 onMounted 钩子中获取数据
-onMounted(()=>{
-    seoData.value.title = '搜索';
-    seoData.value.description = '默认描述';
-    seoData.value.keywords = '默认关键词';
-})
-
-// 在 onMounted 钩子中获取数据
-// onMounted(async () => {
-//     try {
-//         const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${articleId}`);
-//         const data = response.data.website_head; // 假设接口返回的数据在 data 字段中
-//         console.log(seoData.value.title)
-//         // 更新 seoData
-//         seoData.value = {
-//             title: data.seo_title,
-//             description: data.seo_description,
-//             keywords: data.seo_keywords,
-//             image: data.seo_image
-//         };
-//         console.log(seoData.value.title)
-
-//     } catch (error) {
-//         console.error('获取 SEO 数据失败:', error);
-//         // 设置默认值
-//         seoData.value = {
-//             title: '三农资讯网',
-//             description: '默认描述',
-//             keywords: '默认关键词',
-//             image: 'https://example.com/default-image.jpg'
-//         };
-//     }
-// });
 
-// 监听 seoData 的变化，动态设置 SEO 字段
-// watch(seoData, (newVal) => {
-//     if (newVal.title) { // 确保 title 有值
-//         useSeoMeta({
-//             title: newVal.title, // 使用动态值
-//             description: newVal.description,
-//             ogTitle: newVal.title,
-//             ogDescription: newVal.description,
-//             ogImage: newVal.image,
-//             twitterTitle: newVal.title,
-//             twitterDescription: newVal.description,
-//             twitterImage: newVal.image,
-//             keywords: newVal.keywords
-//         });
-//     }
-// }, { immediate: true });
+// 新闻列表
+const newsList = ref([]);
+let keywordInput = ref("");
 
-//点击搜索按钮
+//直接搜索
 let goSearch = async () => {
-    const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&keyword=${keywordInput.value}`);
-    // console.log(response.data.rows);
-    newsList.value = response.data.rows;
-    total.value = response.data.count;
+    const listData =  await requestDataPromise('/web/getWebsiteArticleList', {
+        method: 'GET',
+        query: {
+            'page': page.value,
+            'pageSize': pageSize.value,
+            'keyword':keywordInput.value
+        },
+    });
+    newsList.value = listData.data.rows;
+    total.value = listData.data.count;
 }
 
+//基于导航池搜索
+let goSearchFont = async (font) => {
+    const listData =  await requestDataPromise('/web/getWebsiteArticleList', {
+        method: 'GET',
+        query: {
+            'page': page.value,
+            'pageSize': pageSize.value,
+            'catid': font
+        },
+    });
+    newsList.value = listData.data.rows;
+    total.value = listData.data.count;
+}
 
-onMounted(() => {
-    id.value = route.query.id;
-    console.log('id', id.value);
-})
-
-// 页码
-// //页面组件传递数据的时间驱动函数
-// const handleData = (data) => {
-//     console.log(data.value)
-//     page.value = data.value
-
-//     //在页码发生变化时去请求响应页面的新闻数据
-//     axios.get(`/web/getWebsiteArticlesList?page=${page.value}&pageSize=${10}&catid=${14}&keyword=${keyWord.value}`).then(response => {
-//         // console.log(response.data.rows);
-//         newsList.value = response.data.rows;
-//     }).catch(error => {
-//         console.error(error);
-//     })
-// }
-
-let changePage = (value) => {
-    console.log("当前页码", value);
-    page.value = value
-    console.log(page.value);
-    newslists()
+//基于导航池与关键词搜索
+let goSearchFontandCid = async (font) => {
+    const listData =  await requestDataPromise('/web/getWebsiteArticleList', {
+        method: 'GET',
+        query: {
+            'page': page.value,
+            'pageSize': pageSize.value,
+            'catid': category_id,
+            'keyword':searchKey
+        },
+    });
+    newsList.value = listData.data.rows;
+    total.value = listData.data.count;
 }
 
-// 新闻列表
-const newsList = useState("newsList", () => '');
 const newslists = async () => {
     try {
-
-        // const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&keyword=${searchKey}`);
-        // // console.log(response.data.rows);
-        // newsList.value = response.data.rows;
-        // total.value = response.data.count;
-
         // 从地区跳转
         if (route.query.catids && route.query.catids.length > 0) {
             // 将字符串转换回数组，并过滤掉可能的空值
@@ -296,592 +142,50 @@ const newslists = async () => {
                 console.log('接收到的分类ID数组：', catids.value);
                 let font = catids.value.join(",")
                 font = "[" + font + "]"
-                //console.log(font);
-
-                const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&catid=${font}`);
-                console.log(response.data.rows);
-                newsList.value = response.data.rows;
-                total.value = response.data.count;
 
+                goSearchFont(font);
             } else {
                 // 处理空数组情况
                 console.log('未接收到有效的分类ID');
             }
         } else {
-
             if (category_id == undefined) {
-                const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&keyword=${searchKey}`);
-                // console.log(response.data.rows);
-                newsList.value = response.data.rows;
-                total.value = response.data.count;
-
+                //直接搜索 默认进来没有导航池的话 不执行搜索
+                //goSearch();
             } else {
-                const response = await axios.get(`/web/getWebsiteArticleList?page=${page.value}&pageSize=${pageSize.value}&catid=${category_id}&keyword=${searchKey}`);
-                // console.log(response.data.rows);
-                newsList.value = response.data.rows;
-                total.value = response.data.count;
+                goSearchFontandCid();
             }
         }
-
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-//热点资讯
-const hotlistall = useState("hotlistall", () => "");
-const hotlist = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${2}&level=${4}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        for (let item of response.data) {
-            console.log(item);
-            item.count = 1;
-        }
-        hotlistall.value = response.data;
     } catch (error) {
         console.error(error);
     }
 }
 
-//资讯推荐1
-const news1 = useState("news1", () => "");
-const newslist1 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news1.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-const news11 = useState("news11", () => "");
-const newslist11 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news11.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-//资讯推荐2
-const news2 = useState("news2", () => "");
-const newslist2 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${1}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news2.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-const news22 = useState("news22", () => "");
-const newslist22 = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${3}&level=${5}&placeid=${1}`);
-        console.log('热点资讯', response.data);
-        news22.value = response.data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-
-
+newslists();
 
-//挂载成功钩子函数
-onMounted(() => {
-
-    // 资讯推荐
+//分页事件
+let changePage = (value) => {
+    console.log("当前页码", value);
+    page.value = value
+    console.log(page.value);
     newslists()
-    // 热点资讯
-    hotlist()
-    // 资讯推荐
-    newslist1()
-    newslist2()
-    // 热点资讯
-    newslist11()
-    newslist22()
-})
-
-//路由中间件
-definePageMeta({
-    middleware: 'auth'
-})
-
-</script>
-
-<style lang="less" scoped>
-//导航条
-.breadcrumb {
-    width: 100%;
-    height: 22px;
-    margin-bottom: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: 400;
-    font-size: 20px;
-    color: #666666;
-    line-height: 23px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-
-    :deep(.el-breadcrumb) {
-        display: inline-block;
-        vertical-align: -4px;
-    }
-
-    :deep(.el-breadcrumb__inner a),
-    :deep(.el-breadcrumb__inner.is-link) {
-        color: #666666;
-        font-weight: 400;
-        text-decoration: none;
-        transition: var(--el-transition-color);
-    }
-
-    span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-    span:hover {
-        color: #666666;
-    }
-
-    .location {
-        margin-right: 20px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
 }
+//2.页面数据 end ---------------------------------------->
 
-.empty {
-    div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-top: 200px;
-    }
-
-    width: 100%;
-    height: 600px;
-    font-size: 26px;
-    color: #CCCCCC;
 
-    img {
-        display: inline-block;
-    }
+//4.设置seo信息 start---------------------------------------->
+//4.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteFootInfo', {
+        method: 'GET',
+        query: {},
+    });
+    seoSetup(setData.data.website_head.title,setData.data.website_head.description,setData.data.website_head.keywords)
 }
+getSeo();
+//4.设置seo信息 end---------------------------------------->
+</script>
 
-// 资讯列表
-.newsList {
-    width: 1200px;
-    margin: 0 auto;
-    //height: 675px;
-    margin-bottom: 70px;
-
-    .inner {
-        width: 1200px;
-
-        .innerLeft {
-            width: 100%;
-        }
-
-        .innerLeft,
-        .innerRight {
-            border-top: 1px solid #139602;
-            clear: both;
-            float: none;
-        }
-
-        .innerLeft {
-            //height: 675px;
-
-            >.list {
-                //height: 570px;
-                margin-bottom: 70px;
-
-                >li {
-                    width: 100%;
-                    height: 56px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    line-height: 56px;
-
-
-                    >a {
-                        width: 360px;
-                        height: 26px;
-                        font-family: Microsoft YaHei, Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 20px;
-                        color: #333333;
-                        line-height: 26px;
-                        text-align: left;
-                        font-style: normal;
-                        text-transform: none;
-                    }
-
-                }
-
-                >li:hover>a {
-                    color: #139602;
-                }
-
-                >li:nth-child(1)::after,
-                >li:nth-child(2)::after {
-                    content: "热";
-                    margin-left: 13px;
-                    background: #FF8A37;
-                    color: #fff;
-                    font-size: 14px;
-                    padding: 0px 2px;
-                }
-
-                >li:nth-child(5n) {
-                    border-bottom: 1px solid #D9D9D9;
-                }
-            }
-
-            >.pagination {
-                width: 100%;
-                height: 34px;
-                margin-left: 141px;
-                display: flex;
-                justify-content: center;
-                margin: 0;
-
-                // 鼠标移入后字体颜色
-                .el-pagination::v-deep :hover {
-                    color: #139609;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next,
-                .el-pagination.is-background::v-deep .btn-prev {
-                    width: 70px;
-                    height: 34px;
-                    margin: 0px 10px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .el-pager li {
-                    margin: 0px 10px;
-                    width: 38px;
-                    height: 34px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next.is-active,
-                .el-pagination.is-background::v-deep .btn-prev.is-active,
-                .el-pagination.is-background::v-deep .el-pager li.is-active {
-                    background-color: #028e21;
-                    color: #fff;
-                }
-
-
-            }
-        }
-
-        .innerRight {
-            width: 381px;
-            height: 605px;
-            clear: both;
-            overflow: hidden;
-        }
-    }
-}
-
-//资讯推荐
-.zixuntuijian {
-    width: 100%;
-    height: 290px;
-    margin-bottom: 70px;
-
-    .innerLeft {
-
-        // 左侧
-        .zixunLeft {
-            margin-right: 30px;
-        }
-
-        .zixunRight,
-        .zixunLeft {
-            float: left;
-            width: 380px;
-            height: 290px;
-
-            // 标题部分
-            >.title {
-                width: 380px;
-            }
-
-            >.title>h3 {
-                height: 36px;
-                font-family: Source Han Sans, Source Han Sans;
-                font-weight: bold;
-                font-size: 24px;
-                color: #000000;
-                line-height: 28px;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-                border-bottom: 1px solid #139602;
-
-            }
-
-            >.title>h3>span {
-                float: right;
-                width: 56px;
-                height: 20px;
-                line-height: 24px;
-                font-weight: 400;
-                font-size: 14px;
-                color: #999999;
-                font-style: normal;
-                text-transform: none;
-            }
-
-            .photo_text {
-
-                >li:first-child {
-                    width: 380px;
-                    height: 120px;
-                    margin-top: 20px;
-                    margin-bottom: 15px;
-                    position: relative;
-
-                    >img {
-                        float: left;
-                        width: 160px;
-                        height: 120px;
-                    }
-
-                    >div {
-                        float: left;
-                        width: 220px;
-                        height: 120px;
-                        padding-left: 15px;
-                        padding-top: 6px;
-                        box-sizing: border-box;
-                        background-color: #f6f6f6;
-
-
-                        >h5 {
-                            width: 200px;
-                            height: 54px;
-                            display: -webkit-box;
-                            -webkit-box-orient: vertical;
-                            -webkit-line-clamp: 2;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            word-break: break-all;
-                            font-family: Source Han Sans, Source Han Sans;
-                            font-weight: 500;
-                            font-size: 18px;
-                            color: #333333;
-                            line-height: 26px;
-                            text-align: left;
-                            font-style: normal;
-                            text-transform: none;
-                        }
-
-                        >p {
-                            width: 200px;
-                            height: 22px;
-                            line-height: 20px;
-                            position: absolute;
-                            bottom: 5px;
-                            right: 0;
-
-                            >span {
-                                display: inline-block;
-                                // width: 100px;
-                                height: 18px;
-                                font-family: Source Han Sans, Source Han Sans;
-                                font-weight: 400;
-                                font-size: 12px;
-                                color: #999999;
-                                text-align: left;
-                                line-height: 14px;
-                                font-style: normal;
-                                text-transform: none;
-                            }
-
-                            >span:last-child {
-                                // width: 90px;
-                                text-align: right;
-                                margin-left: 20px;
-                            }
-
-                        }
-                    }
-                }
-
-                >li {
-                    width: 380px;
-                    height: 25px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    font-size: 18px;
-                    color: #333333;
-                    line-height: 21px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                    margin-bottom: 10px;
-
-                    em {
-                        display: inline-block;
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 8px;
-                        margin-right: 10px;
-                        background-color: #d9d9d9;
-                    }
-                }
-
-                >li:hover {
-                    color: #139602;
-                }
-
-                >li:hover em {
-                    background-color: #139602;
-                }
-            }
-        }
-    }
-
-    .innerRight {
-        width: 381px;
-        height: 290px;
-        background-color: #fbfbfb;
-
-        >.title {
-            width: 380px;
-            height: 40px;
-            line-height: 40px;
-            border-top: 1px solid #139602;
-            border-bottom: 1px solid #e7e7e7;
-
-            >h4 {
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                margin-left: 20px;
-                font-size: 20px;
-                color: #000000;
-                text-align: left;
-                font-style: normal;
-                text-transform: none;
-
-                >span {
-                    float: right;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-weight: 400;
-                    font-size: 14px;
-                    margin-right: 10px;
-                    color: #999999;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                }
-            }
-
-        }
-
-        .rightList {
-            height: 540px;
-            margin-top: 20px;
-
-            >li {
-                height: 100px;
-                margin-bottom: 10px;
-
-                >img {
-                    width: 150px;
-                    height: 100px;
-                }
-
-                >p {
-                    width: 219px;
-                    height: 100px;
-                    padding-left: 12px;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 400;
-                    font-size: 16px;
-                    color: #333333;
-                    line-height: 22px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-
-                }
-
-                >p:hover {
-                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
-                }
-            }
-        }
-
-    }
-}
-
-.searchBox {
-    text-align: center;
-    padding-bottom: 40px;
-}
-
-.search {
-    width: 100%;
-    height: 100px;
-    // background-color: #f5f5f5;
-
-    .inner {
-        width: 1200px;
-        height: 100px;
-        // line-height: 100px;
-        padding-top: 10px;
-        text-align: center;
-
-        input {
-            width: 582px;
-            height: 46px;
-            outline: none;
-            border: 1px solid #E6E6E6;
-            border-radius: 0;
-            padding-left: 20px;
-            vertical-align: 0px;
-            font-size: 16px;
-            color: #666666
-        }
-
-        button {
-            width: 120px;
-            height: 48px;
-            background-color: #139602;
-            color: #fff;
-            border: none;
-            border-radius: 0;
-            cursor: pointer;
-        }
-    }
-}
+<style lang="less" scoped>
+@import url('@/assets/css/search.less');
 </style>

pages/speciaArticle/[id].vue

@@ -1,15 +1,10 @@
 <template>
     <!-- 页面头部 -->
     <HomePageHead></HomePageHead>
-
     <!-- 导航栏 -->
     <HomePageNavigation1></HomePageNavigation1>
-
     <!-- Banner1 -->
     <HomeBanner1></HomeBanner1>
-    <!-- 列表页广告一 -->
-    <!-- <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen> -->
-
     <!-- 面包屑导航 -->
     <div class="breadcrumb">
         <div class="inner">
@@ -22,16 +17,12 @@
             </el-breadcrumb>
         </div>
     </div>
-
     <!-- 资讯列表 -->
     <div class="newsDetail">
         <div class="inner">
             <div class="innerLeft">
-                <!-- <div class="LeftTop">
-                    <h1>{{ newsDetail.list_title }}</h1>
-                </div> -->
                 <div class="leftBottomTitle">{{ newsDetail.con_title }}</div>
-                <div class="leftBottom" v-html="newsDetail.content"></div>
+                <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div>
             </div>
             <div class="innerRight">
                 <div class="rightMenuTitle">导航列表</div>
@@ -54,19 +45,15 @@
             <div style="clear: both;"></div>
         </div>
     </div>
-
     <!-- 页面底部 -->
     <HomeFoot1></HomeFoot1>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+//1.页面依赖 start ---------------------------------------->
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
-
 //获得跳转过来的id
 const route = useRoute();
 const articleId = route.params.id; //获得该页面的id
@@ -74,110 +61,72 @@ const listid = route.query.listId; //获得该页面的id
 const name = route.query.listName; //获得该页面的id
 const pageId = route.params.id; //获得该页面的id
 const routeHref = route.href;
-console.log(333333)
-console.log(route.href)
-
+//1.页面依赖 end ---------------------------------------->
 
+//2.页面数据 start ---------------------------------------->
 const newsDetail = ref({})
-console.log(articleId)
-
-const routeNewsTtitle = ref("");
-
-//获得广告
-const adList = ref("");
-const aa = 'page'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
+const bottomMenu = ref([]);
+
+async function getPageData() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteFooterCategoryInfo', {
+        method: 'GET',
+        query: {
+            'fcat_id': articleId
+        },
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            newsDetail.value = mkdata.value.data;
+            console.log(101010)
+            console.log(newsDetail.value)
+        }
     }
 }
-onMounted(() => {
-    //获得广告
-    getadList()
-})
-
-// 定义响应式数据
-const seoData = ref({
-    title: '三农资讯网',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
-
-// 在 onMounted 钩子中获取数据
-onMounted(async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${articleId}`);
-        const data = response.data.website_head; // 假设接口返回的数据在 data 字段中
-        console.log(seoData.value.title)
-        // 更新 seoData
-        seoData.value = {
-            title: data.seo_title,
-            description: data.seo_description,
-            keywords: data.seo_keywords,
-            image: data.seo_image
-        };
-        console.log(seoData.value.title)
-
-    } catch (error) {
-        console.error('获取 SEO 数据失败:', error);
-        // 设置默认值
-        seoData.value = {
-            title: '三农资讯网',
-            description: '默认描述',
-            keywords: '默认关键词',
-            image: 'https://example.com/default-image.jpg'
-        };
-    }
-});
-
-// 监听 seoData 的变化，动态设置 SEO 字段
-watch(seoData, (newVal) => {
-    if (newVal.title) { // 确保 title 有值
-        useSeoMeta({
-            title: newVal.title, // 使用动态值
-            description: newVal.description,
-            ogTitle: newVal.title,
-            ogDescription: newVal.description,
-            ogImage: newVal.image,
-            twitterTitle: newVal.title,
-            twitterDescription: newVal.description,
-            twitterImage: newVal.image,
-            keywords: newVal.keywords
-        });
-    }
-}, { immediate: true });
-
-//获取详情
-const getNewsInfo = async () => {
-    const response = await axios.get(`/web/getWebsiteFooterCategoryInfo?fcat_id=${articleId}`);
-    newsDetail.value = response.data;
-
-    console.log(newsDetail.value.title)
-    if (newsDetail.value.title.length > 30) {
-        routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+getPageData();
+
+async function getPageMenu() {
+    const { data: mkdata, error: mkdataError } =  requestData('/web/getWebsiteFooterCategory', {
+        method: 'GET',
+        query: {},
+    });
+    if (mkdataError.value) {
+        //console.log()
+    } else {
+        if (mkdata.value) {
+            bottomMenu.value = mkdata.value.data;
+        }
     }
 }
-
-//获得底部导航
-const bottomMenu = ref([]);
-const getBottomMenu = async () => {
-    const response = await axios.get(`/web/getWebsiteFooterCategory`);
-    bottomMenu.value = response.data;
+getPageMenu();
+
+//2.3 获得广告
+let adList = ref([]);
+const {data:adData,error:adError} = requestData('/web/getWebsiteFooterCategory',{method:'GET',query:{'ad_tag':'page'}});
+if (adError.value) {
+    console.error('广告列表请求失败:', adError.value);
+} else {
+    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
+    if (adData.value && adData.value.data) {
+        adList.value = adData.value.data;
+        console.log(adData.value.data)
+    }
 }
+//2.页面数据 end ---------------------------------------->
 
 
-
-onMounted(() => {
-    //获得详情
-    getNewsInfo()
-    // 获得左侧导航
-    getBottomMenu()
-})
-
+//4.设置seo信息 start---------------------------------------->
+//4.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteFootInfo', {
+        method: 'GET',
+        query: {},
+    });
+    seoSetup(setData.data.website_head.title,setData.data.website_head.description,setData.data.website_head.keywords)
+}
+getSeo();
+//4.设置seo信息 end---------------------------------------->
 </script>
 
 <style lang="less" scoped>

pages/specialList/[id].vue

@@ -6,7 +6,6 @@
         <HomePageNavigation1></HomePageNavigation1>
         <!-- 列表页广告一 -->
         <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>
-
         <!-- 面包屑导航 -->
         <div class="breadcrumb">
             <div class="inner">
@@ -17,20 +16,14 @@
                 </el-breadcrumb>
             </div>
         </div>
-
         <div class="projectMoreBox">
-            <!-- <div class="projectMoreInfo">项目介绍</div> -->
             <div class="projectMoreTitle">社会保障在线网</div>
             <div class="projectMoreText">
                 <p><b>政讯通·全国文化旅游项目</b>网络平台由<b>政讯通-全国政务信息一体化办公室</b>主管，联合30多家企事业单位组成，由北京政讯通文化传播有限公司对外牵头运营。</p>
-                <p><b>政讯通·全国文化旅游项目</b>网络平台有政务、行业独立域名网站各<b>100</b>个和<b>4</b>个综合管理网站共<b>204</b>个网站，按照不同的行业和功能分类为用户提供大体系、广领域、全方位、全过程，有针对性的全国性文化旅游法制综合服务平台。
-                </p>
-                <p><b>政讯通·全国旅游资讯发布中心</b>是<b>政讯通·全国文化旅游项目</b>网络平台的4个综合管理网站之一，目前开设了栏目上千个，地市中心可全面覆盖我国334个地级市，<b>业务范围</b>涵盖旅游资讯、與情监测、法律咨询、旅游调研、法律宣传、群众监督、旅游安全等领域，日均会员访问量超过万次，累计完成文化旅游领域法制调研课题千余件，网络信息化会员遍布全国各地，实施<b>行业、区域</b>全覆盖，是我国具有广泛传播力、影响力的新型主流媒体。
-                </p>
+                <p><b>政讯通·全国文化旅游项目</b>网络平台有政务、行业独立域名网站各<b>100</b>个和<b>4</b>个综合管理网站共<b>204</b>个网站，按照不同的行业和功能分类为用户提供大体系、广领域、全方位、全过程，有针对性的全国性文化旅游法制综合服务平台。</p>
+                <p><b>政讯通·全国旅游资讯发布中心</b>是<b>政讯通·全国文化旅游项目</b>网络平台的4个综合管理网站之一，目前开设了栏目上千个，地市中心可全面覆盖我国334个地级市，<b>业务范围</b>涵盖旅游资讯、與情监测、法律咨询、旅游调研、法律宣传、群众监督、旅游安全等领域，日均会员访问量超过万次，累计完成文化旅游领域法制调研课题千余件，网络信息化会员遍布全国各地，实施<b>行业、区域</b>全覆盖，是我国具有广泛传播力、影响力的新型主流媒体。</p>
             </div>
         </div>
-
-
         <!-- 资讯列表 -->
         <div class="newsList">
             <div class="inner">
@@ -49,106 +42,30 @@
                     <div class="pagination">
                         <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
                             prev-text="上一页" next-text="下一页" @change="changePage" />
-                        <!-- <HomePagination @sendData="handleData"></HomePagination> -->
                     </div>
                 </div>
                 <div class="innerRight">
-                    <!-- <DetailHotNews></DetailHotNews> -->
                     <div class="rightMenuTitle">导航列表</div>
                     <ul>
                         <li v-for="(item, index) in bottomMenu" :key="index">
-                            <NuxtLink :to="`/speciaArticle/${item.id}`" target="_blank"
-                                v-if="item.id == pageId && item.id != 7" class="active">{{ item.name }}</NuxtLink>
-                            <NuxtLink :to="`/speciaArticle/${item.id}`" target="_blank"
-                                v-else-if="item.id != pageId && item.id != 7">{{ item.name }}</NuxtLink>
-                            <NuxtLink :to="`/specialList/${item.id}`" target="_blank"
-                                v-if="item.id == 7 && pageId == 7 && routeHref == '/specialList/7'" class="active">{{
-                                    item.name }}
-                            </NuxtLink>
-                            <NuxtLink :to="`/specialList/${item.id}`" target="_blank" v-else-if="item.id == 7">{{
-                                item.name }}</NuxtLink>
+                            <NuxtLink :to="`/speciaArticle/${item.id}`" target="_blank" v-if="item.id == pageId && item.id != 7" class="active">{{ item.name }}</NuxtLink>
+                            <NuxtLink :to="`/speciaArticle/${item.id}`" target="_blank" v-else-if="item.id != pageId && item.id != 7">{{ item.name }}</NuxtLink>
+                            <NuxtLink :to="`/specialList/${item.id}`" target="_blank" v-if="item.id == 7 && pageId == 7 && routeHref == '/specialList/7'" class="active">{{item.name}}</NuxtLink>
+                            <NuxtLink :to="`/specialList/${item.id}`" target="_blank" v-else-if="item.id == 7">{{item.name}}</NuxtLink>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>
-
         <!-- 列表页广告二 -->
         <HomeTopTen :imgurl="adList[1]" v-if="adList[1]"></HomeTopTen>
-
-        <!-- 资讯推荐 -->
-        <!-- <div class="zixuntuijian">
-            <div class="inner">
-                <div class="innerLeft">
-                    <div class="zixunLeft">
-                        <div class="title">
-                            <h3>
-                                资讯推荐
-                            </h3>
-                        </div>
-                        <ul class="photo_text">
-                            <li v-for="item in news1">
-                                <img :src="item.imgurl" alt="">
-                                <div>
-                                    <h5>{{ item.title }}</h5>
-                                    <p>
-                                        <span>{{ item.author }}</span>
-                                        <span>{{ item.created_at }}</span>
-                                    </p>
-                                </div>
-                            </li>
-                            <li v-for="item in news11">
-                                <em></em>
-                                {{ item.title }}
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="zixunRight">
-                        <div class="title">
-                            <h3>
-                                资讯推荐
-                            </h3>
-                        </div>
-                        <ul class="photo_text">
-                            <li v-for="item in news2">
-                                <img :src="item.imgurl" alt="">
-                                <div>
-                                    <h5>{{ item.title }}</h5>
-                                    <p>
-                                        <span>{{ item.author }}</span>
-                                        <span>{{ item.created_at }}</span>
-                                    </p>
-                                </div>
-                            </li>
-                            <li v-for="item in news22">
-                                <em></em>
-                                {{ item.title }}
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="innerRight">
-                    <div class="title">
-                        <h4>
-                            热点资讯
-                        </h4>
-                    </div>
-                    <ul class="rightList">
-                        <li v-for="item in hotlistall">
-                            <img class="left" :src="item.imgurl">
-                            <p class="left">{{ item.title }}</p>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div> -->
-
         <!-- 页面底部 -->
         <HomeFoot1></HomeFoot1>
     </div>
 </template>
 
 <script setup>
+//1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue';
 import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
@@ -158,80 +75,60 @@ const axios = nuxtApp.$axios;
 
 //获得跳转过来的id
 const route = useRoute();
-const pageId = route.params.id; //获得该页面的id
-console.log(pageId);
+const pageId = route.params.id;
 const routeHref = route.href;
-
-//获得广告
-const adList = ref("");
-const aa = 'PAGE'
-const getadList = async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
-        adList.value = response.data;
-    } catch (error) {
-        console.error(error);
+//1.页面依赖 end ---------------------------------------->
+
+
+//2.页面数据 start ---------------------------------------->
+let adList = ref([]);
+const {data:adData,error:adError} = requestData('/web/getWebsiteFooterCategory',{method:'GET',query:{'ad_tag':'page'}});
+if (adError.value) {
+    console.error('广告列表请求失败:', adError.value);
+} else {
+    //当有值了以后再放进去，万恶之源，也是nuxt2和3都存在的一个问题，也许nuxt4会解决这个问题
+    if (adData.value && adData.value.data) {
+        adList.value = adData.value.data;
+        console.log(adData.value.data)
     }
 }
-onMounted(() => {
-    getadList()
-})
+//2.页面数据 end ---------------------------------------->
 
-// 定义响应式数据
-const seoData = ref({
-    title: '三农资讯网',
-    description: '默认描述',
-    keywords: '默认关键词',
-    image: 'https://example.com/default-image.jpg'
-});
 
-// 在 onMounted 钩子中获取数据
-onMounted(async () => {
-    try {
-        const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${articleId}`);
-        const data = response.data.website_head; // 假设接口返回的数据在 data 字段中
-        console.log(seoData.value.title)
-        // 更新 seoData
-        seoData.value = {
-            title: data.seo_title,
-            description: data.seo_description,
-            keywords: data.seo_keywords,
-            image: data.seo_image
-        };
-        console.log(seoData.value.title)
+//4.1 设置seo信息
+async function getSeo() {
+    const setData =  await requestDataPromise('/web/getWebsiteFootInfo', {
+        method: 'GET',
+        query: {},
+    });
+    seoSetup(setData.data.website_head.title,setData.data.website_head.description,setData.data.website_head.keywords)
+}
+getSeo();
+//4.设置seo信息 end---------------------------------------->
 
-    } catch (error) {
-        console.error('获取 SEO 数据失败:', error);
-        // 设置默认值
-        seoData.value = {
-            title: '三农资讯网',
-            description: '默认描述',
-            keywords: '默认关键词',
-            image: 'https://example.com/default-image.jpg'
-        };
-    }
-});
-
-// 监听 seoData 的变化，动态设置 SEO 字段
-watch(seoData, (newVal) => {
-    if (newVal.title) { // 确保 title 有值
-        useSeoMeta({
-            title: newVal.title, // 使用动态值
-            description: newVal.description,
-            ogTitle: newVal.title,
-            ogDescription: newVal.description,
-            ogImage: newVal.image,
-            twitterTitle: newVal.title,
-            twitterDescription: newVal.description,
-            twitterImage: newVal.image,
-            keywords: newVal.keywords
-        });
-    }
-}, { immediate: true });
 
-onMounted(() => {
 
-})
+
+
+
+
+
+//获得广告
+// const adList = ref("");
+// const aa = 'PAGE'
+// const getadList = async () => {
+//     try {
+//         const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
+//         adList.value = response.data;
+//     } catch (error) {
+//         console.error(error);
+//     }
+// }
+// onMounted(() => {
+//     getadList()
+// })
+
+
 
 let changePage = (value) => {
     console.log("当前页码", value);