广告服务静态页面完成

.nuxt/components.d.ts

@@ -2,7 +2,11 @@
 import type { DefineComponent, SlotsType } from 'vue'
 type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
 interface _GlobalComponents {
-      'DetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
+      'AdvertisingBuyAD': typeof import("../components/advertising/BuyAD.vue")['default']
+    'AdvertisingFoot': typeof import("../components/advertising/Foot.vue")['default']
+    'AdvertisingHead': typeof import("../components/advertising/Head.vue")['default']
+    'AdvertisingOrderList': typeof import("../components/advertising/OrderList.vue")['default']
+    'DetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
     'DetailHotNews2': typeof import("../components/detail/HotNews2.vue")['default']
     'HomeAdvertising': typeof import("../components/home/Advertising.vue")['default']
     'HomeBanner1': typeof import("../components/home/Banner1.vue")['default']
@@ -45,7 +49,11 @@ interface _GlobalComponents {
     'Body': typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
     'NuxtIsland': typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
     'NuxtRouteAnnouncer': IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
-      'LazyDetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
+      'LazyAdvertisingBuyAD': typeof import("../components/advertising/BuyAD.vue")['default']
+    'LazyAdvertisingFoot': typeof import("../components/advertising/Foot.vue")['default']
+    'LazyAdvertisingHead': typeof import("../components/advertising/Head.vue")['default']
+    'LazyAdvertisingOrderList': typeof import("../components/advertising/OrderList.vue")['default']
+    'LazyDetailHotNews': typeof import("../components/detail/HotNews.vue")['default']
     'LazyDetailHotNews2': typeof import("../components/detail/HotNews2.vue")['default']
     'LazyHomeAdvertising': typeof import("../components/home/Advertising.vue")['default']
     'LazyHomeBanner1': typeof import("../components/home/Banner1.vue")['default']
@@ -94,6 +102,10 @@ declare module 'vue' {
   export interface GlobalComponents extends _GlobalComponents { }
 }
 
+export const AdvertisingBuyAD: typeof import("../components/advertising/BuyAD.vue")['default']
+export const AdvertisingFoot: typeof import("../components/advertising/Foot.vue")['default']
+export const AdvertisingHead: typeof import("../components/advertising/Head.vue")['default']
+export const AdvertisingOrderList: typeof import("../components/advertising/OrderList.vue")['default']
 export const DetailHotNews: typeof import("../components/detail/HotNews.vue")['default']
 export const DetailHotNews2: typeof import("../components/detail/HotNews2.vue")['default']
 export const HomeAdvertising: typeof import("../components/home/Advertising.vue")['default']
@@ -137,6 +149,10 @@ export const Html: typeof import("../node_modules/nuxt/dist/head/runtime/compone
 export const Body: typeof import("../node_modules/nuxt/dist/head/runtime/components")['Body']
 export const NuxtIsland: typeof import("../node_modules/nuxt/dist/app/components/nuxt-island")['default']
 export const NuxtRouteAnnouncer: IslandComponent<typeof import("../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+export const LazyAdvertisingBuyAD: typeof import("../components/advertising/BuyAD.vue")['default']
+export const LazyAdvertisingFoot: typeof import("../components/advertising/Foot.vue")['default']
+export const LazyAdvertisingHead: typeof import("../components/advertising/Head.vue")['default']
+export const LazyAdvertisingOrderList: typeof import("../components/advertising/OrderList.vue")['default']
 export const LazyDetailHotNews: typeof import("../components/detail/HotNews.vue")['default']
 export const LazyDetailHotNews2: typeof import("../components/detail/HotNews2.vue")['default']
 export const LazyHomeAdvertising: typeof import("../components/home/Advertising.vue")['default']

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1730093916845}
+{"id":"dev","timestamp":1730420131267}

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024-10-28T05:38:39.388Z",
+  "date": "2024-11-01T00:15:40.241Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.9.7"
   },
   "dev": {
-    "pid": 12352,
+    "pid": 16864,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-12352-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-16864-1.sock"
     }
   }
 }

.nuxt/nuxt.d.ts

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

.nuxt/types/middleware.d.ts

@@ -1,5 +1,5 @@
 import type { NavigationGuard } from 'vue-router'
-export type MiddlewareKey = never
+export type MiddlewareKey = "auth"
 declare module "../../node_modules/nuxt/dist/pages/runtime/composables" {
   interface PageMeta {
     middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

api/index.js

@@ -1,30 +1,9 @@
 import request from '@/plugins/request';
 import proxy from '@/utils/proxy';
 
-// export function repeatUserName(param){
-// //用户名验重  false为不重复  true为重复  测试接口
-//     return new Promise(resolve=>{
-//         request({
-//             url:proxy.lipeng+`/api/1/user/repeat/username?userOrgId=${param.userOrgId}&username=${param.username}`,
-//             method:"GET",
-//             params:null
-//         }).then(res=>{
-//             if(res.data.code==0){
-//                 resolve(res.data.data)
-//             }else{
-//                 console.error(res.data.message);
-//             }
-//         }).catch(err=>{
-//             console.error(err);
-//         })
-//     });
-// }
+
 export const getWebsiteCategory = (params) => {
-    // return request({
-    //     url: "/web/getWebsiteCategory",
-    //     method: "GET",
-    //     params
-    // })
+
     return new Promise(resolve => {
         request({
             url: "/web/getWebsiteCategory",

app.vue

@@ -3,7 +3,7 @@
     <NuxtLayout>
       <NuxtPage></NuxtPage>
       <!-- <img src="./static/images/weixin 1.png" alt=""> -->
-      <ul class="kefu">
+      <!-- <ul class="kefu">
         <li>
           <img src="./static//images/weixin 1.png" alt="">
           <p>微信客服</p>
@@ -20,10 +20,15 @@
           <img src="./static//images/guanbi 1.png" alt="">
           <p>关闭</p>
         </li>
-      </ul>
+      </ul> -->
     </NuxtLayout>
   </div>
 </template>
+
+<script setup>
+
+</script>
+
 <style lang="less" scoped>
 .kefu {
   width: 100px;

components/advertising/BuyAD.vue

@@ -0,0 +1,598 @@
+<template>
+    <!-- 购买广告 -->
+    <div class="buyAD">
+        <div class="inner">
+            <!-- tab栏标题 -->
+            <div class="tabTitle">
+                <span class="title">
+                    <span class="number">1</span>
+                    填写广告信息
+                </span>
+                <span class="title">
+                    <span class="icon">
+                        <el-icon>
+                            <DArrowRight />
+                        </el-icon>
+                    </span>
+                    <span class="number">2</span>
+                    选择相应网站
+                </span>
+                <span class="title">
+                    <span class="icon">
+                        <el-icon>
+                            <DArrowRight />
+                        </el-icon>
+                    </span>
+                    <span class="number">3</span>
+                    提交工单信息
+                </span>
+            </div>
+
+            <!-- 填写广告信息内容 -->
+            <div class="textOne" v-show="ad == 1">
+                <p>
+                    <label for="">广告名称:</label>
+                    <el-input v-model="input" style="width: 980px;height: 44px;" placeholder="请输入广告名称" />
+                    <span>请输入广告名称。</span>
+                </p>
+                <p>
+
+                    <label for="">广告链接:</label>
+                    <el-input v-model="input1" style="width: 980px;height: 44px;" placeholder="请输入广告链接" />
+                    <span>请输入广告链接。</span>
+                </p>
+                <P>
+                    <label for="">广告持续时间:</label>
+                    <el-date-picker v-model="value1" type="date" placeholder="请选择开始时间" :size="size" />
+                    <strong>至</strong>
+                    <el-date-picker v-model="value2" type="date" placeholder="请选择结束时间" :size="size" />
+                    <span>请选择广告开始时间和结束时间</span>
+                </P>
+                <P>
+                    <label for="">广告尺寸:</label>
+                    <el-radio-group v-model="radio">
+                        <el-radio :value="3"> 1200 x 90px </el-radio>
+                        <el-radio :value="6"> 420 x 560px </el-radio>
+                    </el-radio-group>
+                    <span>请选择广告尺寸。</span>
+                </P>
+                <P>
+                    <label for="">广告图:</label>
+                    <el-upload class="upload-demo" drag
+                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
+                        <el-icon class="el-icon--upload">
+                            <Plus />
+                        </el-icon>
+                        <div class="el-upload__text">
+                            选择图片
+                        </div>
+                    </el-upload>
+                    <span>请添加广告图，不大于500k。</span>
+                </P>
+
+
+            </div>
+
+            <!-- 选择相应网站的内容 -->
+            <div class="textTwo" v-show="ad == 2">
+                <div class="inner">
+                    <!-- 搜索部分 -->
+                    <div class="pageTop">
+                        <div class="left">
+                            网站：
+                            <el-select v-model="value" placeholder="请选择网站名称" size="large"
+                                style="width: 244px;height: 44px;">
+                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                                    :value="item.value" />
+                            </el-select>
+                            <a href="#">查看示意图</a>
+                        </div>
+                        <div class="right">
+                            <button class="reset">重置</button>
+                            <button class="search">搜索</button>
+                        </div>
+                    </div>
+
+                    <!-- 表格部分 -->
+                    <div class="pageTable">
+                        <el-table :data="tableData" border select-on-indeterminate style="width: 100%"
+                            :header-row-style="{ height: '60px' }" :row-style="{ height: '74px' }"
+                            :header-cell-style="{ backgroundColor: '#fafafa', color: '#666' }">
+                            <el-table-column type="selection" width="152" align="center" />
+                            <el-table-column prop="网站" label="网站" width="240" />
+                            <el-table-column prop="广告位名称" label="广告位名称" width="240" />
+                            <el-table-column prop="广告尺寸" label="广告尺寸" width="268" />
+                            <el-table-column prop="金额" label="金额 (元) / 天" />
+                        </el-table>
+                    </div>
+
+                    <!-- 页码部分 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 提交工单信息 -->
+            <div class="submit" v-show="ad == 3">
+                <div class="inner">
+                    <h1>广告信息已提交成功，请等待审核......</h1>
+                    <p>
+                        工单编号:
+                        <span>21323411</span>
+                    </p>
+                    <div class="btn">
+                        <button class="check">查看工单</button>
+                        <button class="apply">再次申请</button>
+                    </div>
+                    <span>如有疑问，可联系客服人员。</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElRadioGroup, ElRadio, ElDatePicker, ElInput, ElUpload, ElIcon, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-plus'
+import { Plus, DArrowRight } from '@element-plus/icons-vue'
+
+// 通过变量ad控制tab栏标题的颜色及每一步下的不同的内容
+let ad = useState("ad", () => 1)
+
+let radio = ref("")
+const size = ref<'default' | 'large' | 'small'>('default')
+
+const value1 = ref('')
+const value2 = ref('')
+const input = ref('')
+const input1 = ref('')
+
+const value = ref('')
+const options = [
+    {
+        value: 'Option1',
+        label: 'Option1',
+    },
+    {
+        value: 'Option2',
+        label: 'Option2',
+    },
+    {
+        value: 'Option3',
+        label: 'Option3',
+    },
+    {
+        value: 'Option4',
+        label: 'Option4',
+    },
+    {
+        value: 'Option5',
+        label: 'Option5',
+    },
+]
+
+// 表格中的数据
+const tableData = [
+    {
+        id: 1,
+        网站: '三农资讯网',
+        广告位名称: '一号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 2,
+        网站: '三农资讯网',
+        广告位名称: '二号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 3,
+        网站: '三农资讯网',
+        广告位名称: '三号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 4,
+        网站: '三农资讯网',
+        广告位名称: '一号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 5,
+        网站: '三农资讯网',
+        广告位名称: '二号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 6,
+        网站: '三农资讯网',
+        广告位名称: '三号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 7,
+        网站: '三农资讯网',
+        广告位名称: '三号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 8,
+        网站: '三农资讯网',
+        广告位名称: '一号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 9,
+        网站: '三农资讯网',
+        广告位名称: '二号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+    {
+        id: 10,
+        网站: '三农资讯网',
+        广告位名称: '三号广告位',
+        广告尺寸: '1200 x 90 px',
+        金额: '260'
+    },
+]
+
+</script>
+
+<style lang="less" scoped>
+// 广告购买
+.buyAD {
+    width: 1200px;
+    overflow: hidden;
+
+    .inner {
+        width: 1200px;
+        overflow: hidden;
+        position: relative;
+
+        // 填写信息页tab标题
+        .tabTitle {
+            width: 1100px;
+            height: 80px;
+            padding-top: 26px;
+            margin: 0 auto;
+            box-sizing: border-box;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+            .icon,
+            .title {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: bold;
+                font-size: 16px;
+                color: #D5D5D5;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+            }
+
+            .number {
+                display: inline-block;
+                width: 32px;
+                height: 32px;
+                line-height: 32px;
+                color: #ffffff;
+                background-color: #d5d5d5;
+                border-radius: 50%;
+
+            }
+
+            .bgc {
+                background-color: #139602;
+            }
+
+            .color {
+                color: #139602;
+            }
+
+            // 填写广告信息字体及背景颜色
+            .title:first-child {
+                color: #139602;
+            }
+
+            .title:first-child .number {
+                background-color: #139602;
+            }
+
+            // 图标>>
+            .icon {
+                padding: 0 165px;
+            }
+
+        }
+
+        // 1.填写信息内容
+        .textOne {
+            width: 1100px;
+            height: 515px;
+            margin-top: 30px;
+            margin-left: 50px;
+            // display: none;
+
+            >p {
+                width: 1110px;
+                height: 75px;
+
+                strong {
+                    font-weight: 500;
+                    color: #333333;
+                    padding: 0 14px;
+                }
+
+                label {
+                    display: inline-block;
+                    width: 125px;
+                    text-align: right;
+                    padding-right: 10px;
+                    box-sizing: border-box;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 19px;
+                    font-style: normal;
+                    text-transform: none;
+                }
+
+                >label::before {
+                    content: "*";
+                    display: inline-block;
+                    width: 10px;
+                    height: 2px;
+                    color: #fe0101;
+                }
+
+                span {
+                    color: #fe0101;
+                    display: block;
+                    padding-left: 135px;
+                    height: 30px;
+                }
+
+                .upload-demo {
+                    display: inline-block;
+                    width: 112px;
+                    height: 112px;
+                    vertical-align: -93px;
+
+                }
+
+                /deep/.el-date-editor.el-input,
+                .el-date-editor.el-input__wrapper {
+                    height: 44px;
+                    width: 470px;
+                }
+
+                /deep/.el-input__inner {
+                    font-size: 16px;
+                }
+
+                /deep/.el-upload-dragger {
+                    padding: 0;
+                    margin: 0;
+                    border: 1px solid #ededed;
+                }
+
+                /deep/.el-upload-dragger .el-icon--upload {
+                    font-size: 67px;
+                    line-height: 50px;
+                    padding: 0;
+                    margin: 0;
+                }
+
+                /deep/.el-upload-dragger .el-upload__text {
+                    font-size: 18px;
+                    font-weight: 400;
+                    color: #999;
+                    text-align: center;
+                    margin-bottom: 14px;
+                    margin-top: 5px;
+                }
+
+                /deep/.el-icon svg {
+                    width: 34px;
+                    height: 34px;
+                }
+            }
+
+        }
+
+        // 2.选择相应网站
+        .textTwo {
+            width: 1200px;
+            overflow: hidden;
+            // display: none;
+
+            // 页面头部搜索和按钮
+            .pageTop {
+                width: 1150px;
+                height: 44px;
+                margin: 30px 0 40px 50px;
+
+                >.left {
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 19px;
+
+                    >a {
+                        width: 80px;
+                        height: 21px;
+                        padding-left: 30px;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #47ACFF;
+                        line-height: 19px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                    /deep/.el-select__wrapper.is-focused {
+                        box-shadow: 0 0 0 1px var(--el-border-color) inset;
+                    }
+
+                }
+
+                >.right {
+                    button {
+                        width: 94px;
+                        height: 36px;
+                        line-height: 36px;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #33B023;
+                        line-height: 19px;
+                        text-align: center;
+                        border: none;
+                        border-radius: 7px;
+                    }
+
+                    .reset {
+                        border: 1px solid #33B023;
+                        color: #33B023;
+                        background-color: #fff;
+                        margin-right: 25px;
+                    }
+
+                    .search {
+                        background-color: #33B023;
+                        color: #ffffff;
+                    }
+                }
+
+            }
+
+            // 页面中的表格
+            .pageTable {
+                width: 100%;
+                overflow: hidden;
+                padding-bottom: 60px;
+
+
+                /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+                    background-color: #333;
+                    border-color: #333;
+                }
+
+                /deep/.el-table tr {
+                    background-color: #fafafa;
+                    height: 74px;
+                }
+
+                /deep/.el-table .cell {
+                    text-align: center;
+                    box-sizing: border-box;
+                    line-height: 23px;
+                    overflow-wrap: break-word;
+                    padding: 0 12px;
+                    text-overflow: ellipsis;
+                    white-space: normal;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 19px;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+            // 页码
+            .pagination {
+                height: 34px;
+                text-align: center;
+                padding-bottom: 90px;
+            }
+        }
+
+        // 3.提交工单信息
+        .submit {
+            width: 1200px;
+            overflow: hidden;
+            text-align: center;
+
+            .inner {
+                width: 1100px;
+                padding-left: 50px;
+                padding-bottom: 130px;
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-style: normal;
+                text-transform: none;
+
+                // 标题
+                >h1 {
+                    margin-top: 80px;
+                    margin-bottom: 30px;
+                    font-weight: bold;
+                    font-size: 26px;
+                    color: #333333;
+                    line-height: 30px;
+                    text-align: center;
+                }
+
+                // 工单编号
+                >p {
+                    margin-bottom: 257px;
+                    font-weight: 400;
+                    font-size: 22px;
+                    color: #333333;
+                    text-align: center;
+                }
+
+                // 按钮
+                >.btn {
+                    margin-bottom: 30px;
+
+                    button {
+                        width: 134px;
+                        height: 50px;
+                        border: none;
+                        font-weight: 400;
+                        font-size: 16px;
+                        text-align: center;
+                        border-radius: 7px;
+                    }
+
+                    .check {
+                        background-color: #fff;
+                        color: #33B023;
+                        border: 1px solid #33B023;
+                        margin-right: 160px;
+                    }
+
+                    .apply {
+                        background-color: #33B023;
+                        color: #fff;
+                    }
+                }
+
+                // 提示文字
+                >span {
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                }
+
+            }
+
+        }
+    }
+}
+</style>

components/advertising/Foot.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="footer">
+        <div class="inner">
+            <div class="tips">
+                <p>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农资讯网对此不承担任何保证责任。</p>
+                <p>本网部分转载文章、图片等无法联系到权利人，请相关权利人联系本网站索取稿酬。</p>
+            </div>
+
+            <div class="tipsList">
+                <p>政讯通·全国三农调研中心行业百网成员站--全国三农信息一体化应用平台--中农兴业工程指定网站•农业百强网站</p>
+                <p>北京中农兴业网络技术有限公司主办--三农资讯网 snzxwt.org 版权所有。</p>
+                <p>
+                    <em></em>
+                    京ICP备11020904号-14 京公网安备11010202007231号
+                </p>
+                <p>联系邮箱：qgsndy@163.com</p>
+                <p>地址：第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</p>
+                <p>联系电话：010-80440269、010-69945235、010-56019387，监督电话：18516948318，违法和不良信息举报电话：010-57028685</p>
+            </div>
+            <!-- 图片列表 -->
+            <ul class="logoList1">
+                <li  v-for="(item,index) in bottomImg":key=index class="left">
+                    <img :src="item" alt="">
+                </li>
+            </ul>
+
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+let bottomImg=["/images/image50.png","/images/image51.png","/images/image52.png","/images/image53.png"]
+
+
+</script>
+
+<style lang="less" scoped>
+.footer {
+    width: 100%;
+    height: 400px;
+    background-color: #40663b;
+    overflow: hidden;
+
+    .inner {
+        width: 1200px;
+        height: 100%;
+
+        // 图片列表
+        .logoList {
+            height: 50px;
+            margin-top: 43px;
+
+            >li {
+                width: 150px;
+                height: 50px;
+                margin-right: 25px;
+
+                img {
+                    width: 150px;
+                    height: 50px;
+
+                }
+            }
+
+            >li:nth-child(7) {
+                margin-right: 0;
+            }
+
+        }
+
+        .link,
+        .service {
+            width: 1200px;
+            height: 26px;
+            padding-left: 40px;
+            box-sizing: border-box;
+
+            >h5 {
+                width: 48px;
+                height: 18px;
+                line-height: 18px;
+                font-family: Source Han Sans, Source Han Sans;
+                font-weight: bold;
+                font-size: 12px;
+                color: #FFFFFF;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+            }
+        }
+
+        //友情链接
+        .link {
+            margin-top: 47px;
+            width: 1200px;
+            border-bottom: 1px solid #fff;
+
+            h5 {
+                margin-right: 109px;
+            }
+
+            >ul>li {
+                margin-right: 40px;
+            }
+
+            ul>li {
+                float: left;
+
+                >a {
+                    font-family: Source Han Sans, Source Han Sans;
+                    font-weight: 500;
+                    font-size: 12px;
+                    color: #FFFFFF;
+                    line-height: 18px;
+                    text-align: center;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+
+        }
+
+        //快捷服务
+        .service {
+            width: 1200px;
+            margin-top: 8px;
+
+            h5 {
+                margin-right: 80px;
+            }
+
+            >p {
+                >span {
+                    border-right: 1px solid #fff;
+
+                    >a {
+                        font-family: Source Han Sans, Source Han Sans;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #FFFFFF;
+                        line-height: 18px;
+                        text-align: center;
+                        font-style: normal;
+                        text-transform: none;
+                        padding: 0 13px;
+                    }
+                }
+
+                >span:last-child {
+                    border: none;
+                }
+            }
+
+
+        }
+
+        p {
+            font-family: Inter, Inter;
+            font-weight: bold;
+            font-size: 12px;
+            color: #FFFFFF;
+            line-height: 14px;
+            text-align: center;
+            font-style: normal;
+            text-transform: none;
+
+            >em {
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background-image: url("../../static/images/beian 1.png");
+                vertical-align: middle;
+
+            }
+        }
+
+        .tips {
+            width: 759px;
+            height: 30px;
+            margin: 70px auto 30px;
+
+        }
+
+        .tipsList {
+            margin: 0 auto;
+            width: 722px;
+            height: 108px;
+        }
+
+        .logoList1 {
+            width: 445px;
+            height: 40px;
+            margin: 70px auto 57px;
+
+            >li {
+                width: 96px;
+                height: 40px;
+                margin-right: 20px;
+
+                >img {
+                    width: 96px;
+                    height: 40px;
+                }
+            }
+
+            >li:last-child {
+                margin-right: 0px;
+            }
+
+        }
+    }
+}
+</style>

components/advertising/Head.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <div class="head">
+            <div class="inner">
+                <div class="headLogo left">
+                    <img src="../../static/images/image 36.png" alt="">
+                    <span>广告中心</span>
+                </div>
+                <div class="right">
+                    <span>
+                        <em class="home"></em>
+                        设为首页
+                    </span>
+                    <span>
+                        <em class="collection"></em>
+                        加入收藏
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="tips">
+            <div class="inner">
+                <p v-show="false">注意：广告购买需提交信息，用户与商务人员进行线下金额交易，交易成功后由商务人员后台审核。审核通过，即广告投放成功。</p>
+            </div>
+        </div>
+    </div>
+
+</template>
+<script>
+</script>
+
+<style lang="less" scoped>
+
+// 广告页面头部
+.head {
+    width: 100%;
+    height: 27px;
+    line-height: 27px;
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    .inner{
+        width: 1200px;
+        height: 27px;
+    }
+
+    .headLogo {
+        >img {
+            width: 127px;
+            height: 27px;
+            padding-right: 15px;
+            vertical-align: -10px;
+            border-right: 1px solid #999;
+
+        }
+
+        >span {
+            display: inline-block;
+            width: 72px;
+            padding-left: 15px;
+            vertical-align: middle;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 18px;
+            color: #333333;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+    }
+
+    .right {
+        span {
+            margin-left: 26px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            font-size: 12px;
+            color: #666666;
+            line-height: 14px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+        }
+
+        .home,
+        .collection {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            vertical-align: -3px;
+        }
+
+        .home {
+            background-image: url("../../static/images/Iconly／Light／Home.png");
+        }
+
+        .collection {
+            background-image: url("../../static/images/Iconly／Light／Star.png");
+        }
+    }
+}
+
+//提示信息
+.tips {
+    width: 100%;
+    height: 70px;
+    line-height: 70px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    .inner{
+        width: 1200px;
+        height: 70px;
+    }
+
+    p {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FE0101;
+        // line-height: 19px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+</style>

components/advertising/OrderList.vue

@@ -0,0 +1,537 @@
+<template>
+    <!-- 工单列表 -->
+    <div class="orderList">
+        <div class="inner">
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                <el-tab-pane label="全部" name="first">
+                    <!-- 工单列表 -->
+                    <div class="order" v-for="item in 2">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">待审核</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>取消工单</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="order2" v-for="item in 2">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">已通过</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>再次申请</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="order3" v-for="item in 2">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">已驳回</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>再次申请</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 分页 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="待审核" name="second">
+                    <!-- 工单列表 -->
+                    <div class="order1" v-for="item in 4">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">待审核</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>取消工单</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 分页 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="已通过" name="third">
+                    <!-- 工单列表 -->
+                    <div class="order2" v-for="item in 3">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">已通过</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>再次申请</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 分页 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="已驳回" name="fourth">
+                    <!-- 工单列表 -->
+                    <div class="order3" v-for="item in 2">
+                        <!-- 工单头部 -->
+                        <div class="title">
+                            <span class="status left">已驳回</span>
+                            <span class="code left">
+                                工单编号:
+                                <span>34211345632</span>
+                            </span>
+                            <span class="createTime right">2024-09-01 13：21：23</span>
+                        </div>
+                        <!-- 工单内容 -->
+                        <div class="text">
+                            <!-- 开始时间和结束时间 -->
+                            <div class="time">
+                                <p>
+                                    开始时间:
+                                    <span>2024-11-01</span>
+                                </p>
+                                <p>
+                                    结束时间:
+                                    <span>2024-11-11</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告的天数与个数 -->
+                            <div class="num">
+                                <p>
+                                    天数:
+                                    <span>11个</span>
+                                </p>
+                                <p>
+                                    广告个数:
+                                    <span>15个</span>
+                                </p>
+                            </div>
+
+                            <!-- 广告状态及总价格 -->
+                            <div class="state">
+                                <p>
+                                    广告状态:
+                                    <span>已过期</span>
+                                </p>
+                                <p>
+                                    <span class="price">243,210,900</span>
+                                    元
+                                </p>
+                            </div>
+
+                            <!-- 按钮 -->
+                            <div class="btn">
+                                <button>再次申请</button>
+                                <button>查看详情</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 分页 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ElTabs, ElTabPane } from 'element-plus'
+
+const activeName = ref('first')
+
+const handleClick = (tab, event) => {
+    console.log(tab, event)
+}
+</script>
+
+<style lang="less" scoped>
+.orderList {
+    width: 1200px;
+
+    .inner {
+        overflow: hidden;
+
+        .demo-tabs>.el-tabs__content {
+            padding: 32px;
+            color: #6b778c;
+            font-size: 32px;
+            font-weight: 600;
+        }
+
+        .order1,
+        .order2,
+        .order3,
+        .order {
+            width: 1196px;
+            height: 210px;
+            border: 1px solid #e1e1e1;
+            margin-top: 30px;
+
+            .title {
+                height: 60px;
+                line-height: 30px;
+                border-bottom: 1px solid #e1e1e1;
+                padding: 15px 24px 15px 50px;
+                box-sizing: border-box;
+                background-color: #fafafa;
+
+
+
+                >span {
+                    display: inline-block;
+                    text-align: center;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                }
+
+                .status {
+                    width: 70px;
+                    height: 32px;
+                    line-height: 32px;
+                    margin-right: 50px;
+                    background: #fbebd5;
+                    color: #FFAA33;
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+
+                .code {
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                }
+
+                .createTime {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #333333;
+                }
+            }
+
+            .text {
+                display: flex;
+                padding: 35px 70px 35px 50px;
+                justify-content: space-between;
+
+                .state,
+                .num,
+                .time {
+                    height: 80px;
+                    padding: 2px 0;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+
+                    >p:first-child {
+                        margin-bottom: 30px;
+                    }
+                }
+
+                .state,
+                .num {
+                    span {
+                        font-weight: 600;
+                    }
+                }
+
+                .state {
+
+                    >p:first-child {
+                        margin-bottom: 22px;
+                    }
+
+                    .price {
+                        font-weight: bold;
+                        font-size: 24px;
+                        color: #028E21;
+                    }
+                }
+
+                .btn {
+                    height: 85px;
+
+                    button {
+                        display: block;
+                        width: 82px;
+                        height: 34px;
+                        border: none;
+                        border-radius: 4px;
+                    }
+
+                    >button:first-child {
+                        border: 1px solid #33b023;
+                        color: #33b023;
+                        background-color: #fff;
+                        margin-bottom: 15px;
+                    }
+
+                    >button:last-child {
+                        background-color: #33b023;
+                        color: #fff;
+                    }
+                }
+
+            }
+        }
+
+        .order1>.title>.status {
+            background: #fbebd5;
+            color: #FFAA33;
+        }
+
+        .order2>.title>.status {
+            background: #d5ecd2;
+            color: #33B023;
+        }
+
+        .order3>.title>.status {
+            background: #e8e8e8;
+            color: #999999;
+        }
+
+        .pagination {
+            margin-top: 60px;
+            margin-bottom: 90px;
+        }
+
+    }
+
+}
+</style>

components/home/Advertising.vue

@@ -22,7 +22,7 @@ let getWebsiteAdvertisement = async () => {
     try {
         const response = await axios.get(`/web/getWebsiteAdvertisement?adPlace=${9}`);
         console.log(response);
-        // image.value = response.data;
+        image.value = response.data;
     } catch (error) {
         console.error(error);
     }

components/home/Banner1.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 第一个广告位 -->
     <div id="banner1">
         <div class="inner">
             <img src="../../static/images/banner 1.png" alt="">

components/home/BigSwiper.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 首页大的轮播图 -->
     <div class="swiper">
         <el-carousel :interval="5000" arrow="always" height="440px" indicator-class="custom-indicator"
             class="custom-carousel" @change="handleIndicatorChange">

components/home/BigTitle_List.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 首页头条下面的新闻列表 -->
     <div class="list">
         <div class="inner">
             <ul>

components/home/MoreService.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 更多服务 -->
+    <!-- 首页更多服务 -->
     <div class="moreServices">
         <div class="inner">
             <div class="title">

components/home/Pagination.vue

@@ -1,18 +1,38 @@
 <template>
+    <!-- 新闻详情页 页码 -->
     <div class="pagination">
-        <el-pagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" prev-text="上一页"
-            next-text="下一页" />
+        <el-pagination size="small" background layout="prev, pager, next" :total="40" class="mt-4" prev-text="上一页"
+            next-text="下一页" @change="change" />
     </div>
 </template>
 
 <script setup>
 import { ElPagination } from 'element-plus'
+
+// 当前页码
+const emit = defineEmits(['sendData'])
+
+let page = useState("page", () => 1)
+let change = (value) => {
+    // console.log(value);
+    page.value = value
+    console.log(page.value);
+
+    const data = { value: page.value }
+
+    // 触发自定义事件
+    emit('sendData', data)
+}
+
+
+
 </script>
 
 <style lang="less" scoped>
 .pagination {
     width: 508px;
     height: 34px;
+    margin: 0 auto;
 
     // 鼠标移入后字体颜色
     .el-pagination::v-deep :hover {

components/home/SecondaryHeading.vue

@@ -37,7 +37,7 @@ const props = defineProps({
 
     h2 {
         display: inline-block;
-        background-image: url("../../static/images/bg.png");
+        background-image: url("../../static/images/bg1.png");
         width: 156px;
         height: 43px;
         padding: 14px 31px 10px 25px;

components/home/bigTitle.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 首页头条 -->
     <div class="bigTitle">
         <div class="inner">
             <img src="../../static/images/Group 1550@2x.png" alt="" class="left">

components/home/foot.vue

@@ -53,10 +53,35 @@
 </template>
 
 <script setup>
-let linkList = ["政府网", "工信部", "劳动保障局", "农业农村部", "商务部", "发展改革委员会", "(山西) 现代农业博览会", "来买地网"]
+import { onMounted } from 'vue';
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+// 友情链接
+// let linkList = ["政府网", "工信部", "劳动保障局", "农业农村部", "商务部", "发展改革委员会", "(山西) 现代农业博览会", "来买地网"]
+// 快捷服务
 let serviceList = ["三农资讯网", "地方频道", "政务频道", "友情链接", "网站地图", "网站简介", "广告服务", "关于我们", "联系我们", "本网概况", "会员服务"]
+
 let topImg=["/images/image44.png","/images/image45.png","/images/image48.png","/images/image46.png","/images/image47.png","/images/image48.png","/images/image49.png"]
 let bottomImg=["/images/image50.png","/images/image51.png","/images/image52.png","/images/image53.png"]
+
+let type=useState("type",()=>2)
+let num =useState("num",()=>8)
+
+//获取友情链接
+let linkList = useState("linkList",()=>"")
+const linkList1 = async () => {
+    try {
+        const response = await axios.get(`/web/selectWebsiteLinks?type=${type.value}&num=${num.value}`);
+        console.log(response.data);
+        linkList1.value = response.data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+onMounted(()=>{
+    linkList1()
+})
 </script>
 
 <style lang="less" scoped>

components/home/pageHead.vue

@@ -38,12 +38,16 @@
                 </div>
                 <ul class="serve">
                     <li>
-                        <img src="../../static/images/huiyuan 1.png" alt="">
-                        <p>会员服务</p>
+                        <NuxtLink to="">
+                            <img src="../../static/images/huiyuan 1.png" alt="">
+                            <p>会员服务</p>
+                        </NuxtLink>
                     </li>
                     <li>
-                        <img src="../../static/images/lingquguanggao 1.png" alt="">
-                        <p>广告服务</p>
+                        <NuxtLink to="/advertising" target="_blank">
+                            <img src="../../static/images/lingquguanggao 1.png" alt="">
+                            <p>广告服务</p>
+                        </NuxtLink>
                     </li>
                 </ul>
             </div>
@@ -59,8 +63,8 @@ import { ref, onMounted } from 'vue'
 //     keyword: String
 // });
 
-const nuxtApp = useNuxtApp();
-const axios = nuxtApp.$axios;
+// const nuxtApp = useNuxtApp();
+// const axios = nuxtApp.$axios;
 
 let keyword = ref('')
 
@@ -79,28 +83,11 @@ let goSearch = () => {
     navigateTo({
         path: '/primaryNavigation/newsList',
         query: {
-            keyword:keyword.value
+            keyword: keyword.value
         }
     })
 }
 
-// //新闻列表
-// 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()
-// })
-
-
 </script>
 
 <style lang="less" scoped>
@@ -246,13 +233,18 @@ header {
             margin-left: 48px;
         }
 
-        >li>img {
+        >li>a {
+            display: inline-block;
+            height: 64px;
+        }
+
+        >li img {
             width: 29px;
             height: 29px;
             padding: 8px 14px;
         }
 
-        >li>p {
+        >li p {
             height: 28px;
             text-align: center;
             color: #666666;

components/home/pageNavigation.vue

@@ -1,26 +1,24 @@
 <template>
+    <!-- 导航 -->
     <div class="navigate">
-        <!-- 导航 -->
         <div class="partOne">
             <div class="inner">
                 <!-- 导航一 -->
                 <ul class="navigationOne">
                     <li v-for="(item, index) in navigation1" :key="index">
-                        <!-- target="_blank" -->
-                        <!-- <a href="/primaryNavigation/1">{{ item.name }}</a> -->
                         <NuxtLink :to="`/primaryNavigation/${item.name}`" target="_blank">{{ item.name }}</NuxtLink>
                     </li>
                 </ul>
             </div>
         </div>
 
-        <div class="partTwo">
+        <!-- <div class="partTwo">
             <div class="inner">
                 <ul class="navigationTwo">
                     <li v-for="(item,index) in navigation2" :key="index">{{ item.name }}</li>
                 </ul>
             </div>
-        </div>
+        </div> -->
 
         <div class="partThree">
             <!-- 地方频道 -->
@@ -95,7 +93,7 @@ const axios = nuxtApp.$axios;
 const navigation1 = ref("");
 const navigateList = async () => {
     try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${0}&num=${13}`);
+        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${0}&num=${24}`);
         // console.log(response.data);
         navigation1.value = response.data;
     } catch (error) {
@@ -107,7 +105,7 @@ const navigateList = async () => {
 const navigation2 = ref("");
 const navigate2List = async () => {
     try {
-        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${1}&num=${13}`);
+        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${2}&pid=${1}&num=${13}`);
         // console.log(response.data);
         navigation2.value = response.data;
     } catch (error) {
@@ -227,14 +225,20 @@ onMounted(() => {
 
 .partOne {
     width: 100%;
-    height: 66px;
-    line-height: 66px;
+    height: 130px;
+    line-height: 65px;
     background-color: #fff;
     font-size: 20px;
     font-family: PingFang SC-Semibold;
+    border-bottom: 1px solid #e3e3e3;
 
     .navigationOne {
+        width: 1200px;
+        height: 130px;
         color: #333;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
 
         li {
             font-family: PingFang SC;
@@ -243,11 +247,11 @@ onMounted(() => {
             text-align: left;
             font-style: normal;
             text-transform: none;
-            margin-right: 14px;
+            margin: 0 10px;
 
-            &:nth-last-child(1) {
-                margin-right: 0px;
-            }
+            // &:nth-last-child(1) {
+            //     margin-right: 0px;
+            // }
 
             a {
                 color: #333;
@@ -261,36 +265,36 @@ onMounted(() => {
     }
 }
 
-.partTwo {
-    width: 100%;
-    height: 57px;
-    line-height: 57px;
-    border-bottom: 1px solid #e3e3e3;
-
-    .navigationTwo {
-        width: 1207px;
-        height: 57px;
-        color: #333333;
-        border-bottom: 1px solid #e3e3e3;
-
-        li {
-            font-weight: 600;
-            font-size: 20px;
-            height: 56px;
-            margin-right: 21px;
-
-            &:nth-last-child(1) {
-                margin-right: 0px;
-            }
-        }
-
-        li:hover {
-            color: #139602;
-            border-bottom: 2px solid #139602;
-        }
-
-    }
-}
+// .partTwo {
+//     width: 100%;
+//     height: 57px;
+//     line-height: 57px;
+//     border-bottom: 1px solid #e3e3e3;
+
+//     .navigationTwo {
+//         width: 1207px;
+//         height: 57px;
+//         color: #333333;
+//         border-bottom: 1px solid #e3e3e3;
+
+//         li {
+//             font-weight: 600;
+//             font-size: 20px;
+//             height: 56px;
+//             margin-right: 21px;
+
+//             &:nth-last-child(1) {
+//                 margin-right: 0px;
+//             }
+//         }
+
+//         li:hover {
+//             color: #139602;
+//             border-bottom: 2px solid #139602;
+//         }
+
+//     }
+// }
 
 .partThree {
     width: 100%;
@@ -364,6 +368,7 @@ onMounted(() => {
     }
 }
 
+
 .logo {
     margin-top: 5px;
     height: 90px;

components/home/sannongzixun.vue

@@ -1,4 +1,5 @@
 <template>
+    <!-- 三农资讯广告位 -->
     <div class="sannongzixun">
         <div class="inner">
             <img src="../../static/images/Group 1548.png" alt="">

composables/getData.ts

@@ -52,7 +52,7 @@ function createUseFetchRequest(method: HttpMethod) {
     
     const requestUrl = new URL(
       url,
-      options.customBaseURL || baseURL
+      // options.customBaseURL || baseURL
     ).toString();
  
     return await useFetch(requestUrl, {

middleware/auth.js

@@ -0,0 +1,4 @@
+export default function (to, from) {
+    // to是目标路由对象，from是来源路由对象
+    console.log('进入路由中间件，目标路由：', to.path,"当前路由:",from.path);
+  }

nuxt.config.js

@@ -14,6 +14,9 @@ export default defineNuxtConfig({
     'element-plus/dist/index.css',
     'element-plus/theme-chalk/display.css'
   ],
+  router: {
+    middleware: ['auth']
+  },
   nitro: {
     output: {
       publicDir: "dist",

pages/advertising/adDetail.vue

@@ -0,0 +1,264 @@
+<template>
+    <!-- 广告服务 -->
+    <div>
+        <!-- 广告页面头部 -->
+        <AdvertisingHead></AdvertisingHead>
+        <div class="adDetail">
+            <div class="inner">
+                <!-- 标题 -->
+                <h3>广告基本信息</h3>
+                <!-- 工单头部 -->
+                <div class="order">
+                    <div class="title">
+                        <span class="status left">已通过</span>
+                        <span class="code left">
+                            工单编号:
+                            <span>34211345632</span>
+                        </span>
+                        <span class="createTime right">2024-09-01 13：21：23</span>
+                    </div>
+                    <!-- 工单内容 -->
+                    <div class="text">
+                        <span>开始时间:2024-11-01</span>
+                        <span>结束时间:2024-11-11</span>
+                        <span>
+                            <span class="money">243,210,900</span>
+                            元
+                        </span>
+                        <button>再次申请</button>
+                    </div>
+                </div>
+
+                <div class="detail">
+                    <el-table :data="tableData" style="width: 100%">
+                        <el-table-column prop="图片信息" label="图片信息">
+                            <template #default="scope">
+                                <div class="content">
+                                    <img src="" alt="" class="left">
+                                    <div class="left">
+                                        <!-- <h5>{{ scope.row.date?.title }}</h5> -->
+                                        <h5>一号广告位</h5>
+                                        <p>习近平关于“三农”工作的 重要概述</p>
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="网址" label="网址" width="200px" align="center" />
+                        <el-table-column prop="天数" label="天数" width="200px" align="center" />
+                        <el-table-column prop="审核状态" label="审核状态" width="200px" align="center" />
+                        <el-table-column prop="广告状态" label="广告状态" width="200px" align="center" />
+                    </el-table>
+                </div>
+
+                <div class="pagination">
+                    <HomePagination></HomePagination>
+                </div>
+            </div>
+
+        </div>
+        <!-- 广告页面底部 -->
+        <AdvertisingFoot></AdvertisingFoot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTable, ElTableColumn } from 'element-plus'
+
+const tableData = [
+    {
+        图片信息: {
+            img: "",
+            title: "一号广告位",
+            desc: "习近平关于“三农”工作的 重要概述"
+
+        },
+        网址: '三农资讯网',
+        天数: '11天',
+        审核状态: '已通过',
+        广告状态: '已失效',
+    },
+    {
+        图片信息: {
+            img: "",
+            title: "一号广告位",
+            desc: "习近平关于“三农”工作的 重要概述"
+        },
+        网址: '三农资讯网',
+        天数: '11天',
+        审核状态: '已通过',
+        广告状态: '已失效',
+    },
+    {
+        图片信息: {
+            img: "",
+            title: "一号广告位",
+            desc: "习近平关于“三农”工作的 重要概述"
+        },
+        网址: '三农资讯网',
+        天数: '11天',
+        审核状态: '已通过',
+        广告状态: '已失效',
+    },
+    {
+        图片信息: {
+            img: "",
+            title: "一号广告位",
+            desc: "习近平关于“三农”工作的 重要概述"
+        },
+        网址: '三农资讯网',
+        天数: '11天',
+        审核状态: '已通过',
+        广告状态: '已失效',
+    },
+]
+
+</script>
+
+<style lang="less" scoped>
+.adDetail {
+    width: 100%;
+    overflow: hidden;
+
+    .inner {
+        width: 1200px;
+        // height: 900px;
+        overflow: hidden;
+
+        h3 {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 20px;
+            color: #333333;
+            margin: 40px 0;
+        }
+
+        .order {
+            width: 1200px;
+            height: 160px;
+            border: 1px solid #e1e1e1;
+
+            .title {
+                height: 60px;
+                line-height: 30px;
+                border-bottom: 1px solid #e1e1e1;
+                padding: 15px 24px 15px 50px;
+                box-sizing: border-box;
+                background-color: #fafafa;
+
+                >span {
+                    display: inline-block;
+                    text-align: center;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                }
+
+                .status {
+                    width: 70px;
+                    height: 32px;
+                    line-height: 32px;
+                    margin-right: 50px;
+                    background: #d5ecd2;
+                    color: #33B023;
+                    font-weight: 400;
+                    font-size: 16px;
+                }
+
+                .code {
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                }
+
+                .createTime {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #333333;
+                }
+            }
+
+            .text {
+                padding: 33px 70px 33px 50px;
+
+                span {
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+
+                    .money {
+                        font-weight: bold;
+                        font-size: 24px;
+                        color: #028E21;
+                        padding-right: 10px;
+                    }
+                }
+
+                >span:first-child {
+                    padding-right: 80px;
+                }
+
+                >span:nth-child(2) {
+                    padding-right: 223px;
+                }
+
+                >span:nth-child(3) {
+                    padding-right: 183px;
+                }
+
+                button {
+                    width: 82px;
+                    height: 34px;
+                    font-size: 13px;
+                    background: #33B023;
+                    color: #fff;
+                    border: none;
+                    border-radius: 4px;
+                }
+
+            }
+
+        }
+
+        .detail {
+            width: 1200px;
+            overflow: hidden;
+            border-right: 1px solid #e1e1e1;
+            border-left: 1px solid #e1e1e1;
+
+            .content {
+                width: 400px;
+
+                img {
+                    width: 150px;
+                    height: 95px;
+                    margin: 40px 20px;
+                }
+
+                >div.left {
+                    margin-top: 40px;
+                    width: 170px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+
+                    h5 {
+                        margin-bottom: 20px;
+                        font-weight: 400;
+                        font-size: 16px;
+                    }
+                }
+            }
+
+        }
+
+        .pagination {
+            margin-top: 60px;
+            margin-bottom: 90px;
+        }
+
+
+
+
+    }
+
+}
+</style>

pages/advertising/index.vue

@@ -0,0 +1,200 @@
+<template>
+    <!-- 广告服务 -->
+    <div>
+        <!-- 广告页面头部 -->
+        <AdvertisingHead></AdvertisingHead>
+        <div class="advertising">
+            <div class="inner">
+
+                <!-- 左侧tab导航 -->
+                <ul class="nav">
+                    <li>广告购买</li>
+                    <li>工单列表</li>
+                </ul>
+
+                <!-- 广告购买 -->
+                <div id="buyAd" v-show="false">
+                    <AdvertisingBuyAD></AdvertisingBuyAD>
+                </div>
+
+                <!-- 工单列表 -->
+                <div id="orderList">
+                    <AdvertisingOrderList></AdvertisingOrderList>
+                </div>
+
+
+            </div>
+
+            <div class="bottom" v-show="ad != 3 && false">
+                <div class="inner">
+                    <!-- 总金额 -->
+                    <div class="amount" v-show="ad == 2">
+                        总金额:
+                        <span>243,210,910</span>
+                        元
+                    </div>
+
+                    <!-- 按钮 -->
+                    <button class="btn" @click="nextStep">{{ ad == 1 ? '下一步' : '提交工单' }}</button>
+                </div>
+            </div>
+        </div>
+        <!-- 广告页面底部 -->
+        <AdvertisingFoot></AdvertisingFoot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+
+
+
+// 通过变量ad控制tab栏标题的颜色及每一步下的不同的内容
+let ad = useState("ad", () => 1)
+
+// 点击
+let nextStep = () => {
+    ad.value++
+    let icon = document.querySelectorAll(".icon")
+    let number = document.querySelectorAll(".number")
+    let title = document.querySelectorAll(".title")
+    // console.log(icon[0]);
+    // console.log(number[1]);
+    // console.log(title[1]);
+
+    if (ad.value == 2) {
+        icon[0].classList.add('color')
+        number[1].classList.add('bgc')
+        title[1].classList.add('color')
+    }
+
+    if (ad.value >= 3) {
+        ad.value = 3
+        icon[1].classList.add('color')
+        number[2].classList.add('bgc')
+        title[2].classList.add('color')
+    }
+    // console.log(ad.value);
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+.advertising {
+    width: 100%;
+    overflow: hidden;
+
+    .inner {
+        width: 1520px;
+        // height: 900px;
+        overflow: hidden;
+        position: relative;
+
+        // 左侧tab导航
+        .nav {
+            width: 120px;
+            height: 80px;
+            position: absolute;
+            top: 54px;
+            left: 0;
+            border-right: 1px solid #d9d9d9;
+
+            >li {
+                width: 120px;
+                height: 30px;
+                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;
+                margin-bottom: 20px;
+
+            }
+
+            .current {
+                font-weight: bold;
+                color: #333;
+                border-right: 2px solid #139602;
+            }
+
+            // >li:hover {
+            //     font-weight: bold;
+            //     color: #333;
+            //     border-right: 2px solid #139602;
+
+            // }
+        }
+
+
+
+        // 广告购买
+        #buyAd{
+            width: 1200px;
+            margin: 0 auto;
+        }
+
+        //工单列表
+        #orderList{
+            width: 1200px;
+            margin: 0 auto;
+        }
+
+
+    }
+
+    //广告页面底部部分
+    .bottom {
+        width: 100%;
+        height: 145px;
+        background-color: #ecf5ee;
+        // display: none;
+
+        .inner {
+            width: 1200px;
+            height: 145px;
+            padding: 0;
+
+            .amount {
+                float: left;
+                padding-top: 52px;
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                line-height: 19px;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                span {
+                    padding: 0 15px 0 25px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #028E21;
+                    line-height: 28px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+            .btn {
+                float: right;
+                width: 115px;
+                height: 40px;
+                font-size: 16px;
+                background-color: #028e21;
+                color: #ffffff;
+                border: none;
+                border-radius: 6px;
+                margin: 53px 0;
+            }
+        }
+    }
+}
+</style>

pages/login.vue

@@ -3,27 +3,10 @@
   <div class="login">
     <h1>登录</h1>
 
-    <div v-if="data">
-      <h2>{{ data.code }}</h2>
-      <p>{{ data.content }}</p>
-    </div>
-    <button @click="getData">按钮</button>
-
   </div>
 </template>
 
 <script setup>
-const getData = async () => {
-  try {
-    const response = await axios.get('/web/getWebsiteCategory');
-    console.log(response.data);
-
-    data.value = response.data;
-  } catch (error) {
-    console.error(error);
-  }
-}
-
 
 
 </script>

pages/primaryNavigation/newsDetail/newsDetail.vue

@@ -22,17 +22,18 @@
         <div class="inner">
             <div class="innerLeft">
                 <div class="LeftTop">
-                    <h1>财政政策的逆周期调节是什么？财政部准备“聊”这个</h1>
+                    <h1>{{ newsDetail.title }}</h1>
                     <p>
-                        来源: <span>新华网</span>
-                        <span>2024-10-10 17:14:20</span>
-                        浏览量: <span>1763</span>
+                        来源: <span>{{ newsDetail.author }}</span>
+                        <span>{{ newsDetail.updated_at }}</span>
+                        浏览量: <span>{{ newsDetail.hits }}</span>
                     </p>
-                    <img src="../../../static/images/image.png" alt="">
+                    <img :src="newsDetail.imgurl" alt="">
                 </div>
                 <div class="leftBottom">
+                    {{newsDetail.content }}
 
-                    <h3>“逆周期调节”是什么？ </h3>
+                    <!-- <h3>“逆周期调节”是什么？ </h3>
                     <p>这次发布会将重点聚焦“财政政策逆周期调节力度”，那什么是逆周期调节？</p>
                     <p>逆周期调节是指政府根据经济周期阶段，通过政策工具和措施让整个经济周期的波动性平缓‌，更好促进经济发展。财政政策就是其中的重要一类。</p>
                     <p>当前，我国经济的基本面及市场广阔、经济韧性强、潜力大等有利条件并未改变。同
@@ -46,7 +47,7 @@
                     <h3>政策亮点——超长期特别国债</h3>
                     <p>到财政政策工具箱，今年最大的亮点要数超长期特别国债。10000亿元超长期特别
                         国债，专项用于“两重”，也就是国家重大战略实施和重点领域安全能力建设。截至7月底，超长期特别国债已累计发行4180亿元。</p>
-                    <p>不仅如此，为了更好支持大规模设备更新和消费品以旧换新行动，万亿超长期特别国 债中有约3000亿元加力支持重点领域设备更新，进一步提升地方消费品以旧换新的能力。</p>
+                    <p>不仅如此，为了更好支持大规模设备更新和消费品以旧换新行动，万亿超长期特别国 债中有约3000亿元加力支持重点领域设备更新，进一步提升地方消费品以旧换新的能力。</p> -->
                 </div>
             </div>
             <div class="innerRight">
@@ -63,8 +64,28 @@
 </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>
@@ -82,7 +103,7 @@ import { ArrowRight } from '@element-plus/icons-vue'
     font-style: normal;
     text-transform: none;
 
-    /deep/.el-breadcrumb {
+    .el-breadcrumb::v-deep{
         display: inline-block;
         vertical-align: -4px;
     }
@@ -202,7 +223,7 @@ import { ArrowRight } from '@element-plus/icons-vue'
             width: 381px;
             height: 605px;
             background-color: #fbfbfb;
-
+            border-top: 1px solid #139602;
         }
     }
 }

pages/primaryNavigation/newsList.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="newsList">
         <!-- 页面头部 -->
-        <HomePageHead :keyword="keyWord"></HomePageHead>
+        <HomePageHead></HomePageHead>
         <!-- Banner1 -->
         <HomeBanner1></HomeBanner1>
         <!-- 面包屑导航 -->
@@ -19,14 +19,14 @@
             <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 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></HomePagination>
+                        <HomePagination @sendData="handleData"></HomePagination>
                     </div>
                 </div>
                 <div class="innerRight">
@@ -126,38 +126,66 @@ import { onMounted } from 'vue';
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 
-let keyWord=useState("keyWord",()=>"")
-let newsList = [
-    '稳经济政策正朝着“稳健有效”持续发力',
-    '布上青花 指尖非遗——千年蜡染的传承与创新',
-    '拉萨市涉建筑垃圾、城市建设两部条例将于11月1日实施',
-    '中国稳定股市新工具启动 5000亿规模只能投资股市',
-    '国家数据局：建立健全公共数据产品和服务价格形成机制',
-    '第十二届全国少数民族传统体育运动会启动火炬传递',
-    '网信部门曝光“毒视频”“开盒挂人”等涉未成年人乱象',
-    '辅警执勤时被闯红灯超速摩托车撞倒 浙江义乌警方通报',
-    '接地气、心贴心 各地创新宣讲形式把全会精神送到干部群众身边',
-    '美军火商对台军售涉抬价诈欺，台当局替美辩称“美国也是受害...'
-]
+// let newsList = [
+//     '稳经济政策正朝着“稳健有效”持续发力',
+//     '布上青花 指尖非遗——千年蜡染的传承与创新',
+//     '拉萨市涉建筑垃圾、城市建设两部条例将于11月1日实施',
+//     '中国稳定股市新工具启动 5000亿规模只能投资股市',
+//     '国家数据局：建立健全公共数据产品和服务价格形成机制',
+//     '第十二届全国少数民族传统体育运动会启动火炬传递',
+//     '网信部门曝光“毒视频”“开盒挂人”等涉未成年人乱象',
+//     '辅警执勤时被闯红灯超速摩托车撞倒 浙江义乌警方通报',
+//     '接地气、心贴心 各地创新宣讲形式把全会精神送到干部群众身边',
+//     '美军火商对台军售涉抬价诈欺，台当局替美辩称“美国也是受害...'
+// ]
 
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
 
-//新闻列表
-// const newsList = useState("newsList",()=>'');
-// const newslists = async () => {
-//     try {
-//         const response = await axios.get(`/web/getWebsiteArticlesList?page=${1}&pageSize=${10}&catid=${14}&keyword=${""}`);
-//         // console.log(response.data.rows);
-//         newsList.value = response.data.rows;
-//     } catch (error) {
-//         console.error(error);
-//     }
-// }
-
-// onMounted(()=>{
-//     newslists()
-// })
+//关键词
+let keyWord = useState("keyWord", () => "")
+
+const route = useRoute();
+keyWord.value = route.query.keyword;
+
+// 页码
+let page = useState("pageSize", () => 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>
 

plugins/element-plus.js

@@ -10,4 +10,8 @@
 //   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 //     nuxtApp.vueApp.component(key, component);
 //   }
-// });
+// });
+
+export default defineNuxtPlugin(() => {
+    
+})

plugins/request.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 
 export default defineNuxtPlugin(nuxtApp => {
     const service = axios.create({
-        baseURL: 'http://192.168.1.114:9501' // 这里替换为你的实际基础URL
+        baseURL: 'http://183.131.25.186:9501' // 这里替换为你的实际基础URL
     });
 
     // 请求拦截器