轮播图组件和页面组件封装完成

.nuxt/components.d.ts

@@ -2,9 +2,13 @@
 import type { DefineComponent, SlotsType } from 'vue'
 type IslandComponent<T extends DefineComponent> = T & DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>>
 interface _GlobalComponents {
-      'HomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
+      'HomeBanner1': typeof import("../components/home/Banner1.vue")['default']
+    'HomeBigSwiper': typeof import("../components/home/BigSwiper.vue")['default']
+    'HomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
     'HomeMoreService': typeof import("../components/home/MoreService.vue")['default']
     'HomePageMessage': typeof import("../components/home/PageMessage.vue")['default']
+    'HomePagination': typeof import("../components/home/Pagination.vue")['default']
+    'HomeSmallSwiper': typeof import("../components/home/SmallSwiper.vue")['default']
     'HomeTopTen': typeof import("../components/home/TopTen.vue")['default']
     'HomeBigTitle': typeof import("../components/home/bigTitle.vue")['default']
     'HomeFoot': typeof import("../components/home/foot.vue")['default']
@@ -35,9 +39,13 @@ 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']>
-      'LazyHomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
+      'LazyHomeBanner1': typeof import("../components/home/Banner1.vue")['default']
+    'LazyHomeBigSwiper': typeof import("../components/home/BigSwiper.vue")['default']
+    'LazyHomeBigTitleList': typeof import("../components/home/BigTitle_List.vue")['default']
     'LazyHomeMoreService': typeof import("../components/home/MoreService.vue")['default']
     'LazyHomePageMessage': typeof import("../components/home/PageMessage.vue")['default']
+    'LazyHomePagination': typeof import("../components/home/Pagination.vue")['default']
+    'LazyHomeSmallSwiper': typeof import("../components/home/SmallSwiper.vue")['default']
     'LazyHomeTopTen': typeof import("../components/home/TopTen.vue")['default']
     'LazyHomeBigTitle': typeof import("../components/home/bigTitle.vue")['default']
     'LazyHomeFoot': typeof import("../components/home/foot.vue")['default']
@@ -74,9 +82,13 @@ declare module 'vue' {
   export interface GlobalComponents extends _GlobalComponents { }
 }
 
+export const HomeBanner1: typeof import("../components/home/Banner1.vue")['default']
+export const HomeBigSwiper: typeof import("../components/home/BigSwiper.vue")['default']
 export const HomeBigTitleList: typeof import("../components/home/BigTitle_List.vue")['default']
 export const HomeMoreService: typeof import("../components/home/MoreService.vue")['default']
 export const HomePageMessage: typeof import("../components/home/PageMessage.vue")['default']
+export const HomePagination: typeof import("../components/home/Pagination.vue")['default']
+export const HomeSmallSwiper: typeof import("../components/home/SmallSwiper.vue")['default']
 export const HomeTopTen: typeof import("../components/home/TopTen.vue")['default']
 export const HomeBigTitle: typeof import("../components/home/bigTitle.vue")['default']
 export const HomeFoot: typeof import("../components/home/foot.vue")['default']
@@ -107,9 +119,13 @@ 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 LazyHomeBanner1: typeof import("../components/home/Banner1.vue")['default']
+export const LazyHomeBigSwiper: typeof import("../components/home/BigSwiper.vue")['default']
 export const LazyHomeBigTitleList: typeof import("../components/home/BigTitle_List.vue")['default']
 export const LazyHomeMoreService: typeof import("../components/home/MoreService.vue")['default']
 export const LazyHomePageMessage: typeof import("../components/home/PageMessage.vue")['default']
+export const LazyHomePagination: typeof import("../components/home/Pagination.vue")['default']
+export const LazyHomeSmallSwiper: typeof import("../components/home/SmallSwiper.vue")['default']
 export const LazyHomeTopTen: typeof import("../components/home/TopTen.vue")['default']
 export const LazyHomeBigTitle: typeof import("../components/home/bigTitle.vue")['default']
 export const LazyHomeFoot: typeof import("../components/home/foot.vue")['default']

.nuxt/manifest/latest.json

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

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024-10-17T00:21:05.198Z",
+  "date": "2024-10-21T00:19:25.310Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.9.7"
   },
   "dev": {
-    "pid": 14404,
+    "pid": 1580,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-14404-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-1580-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" />

app.vue

@@ -1,8 +1,56 @@
 <template>
-  <div>
+  <div class="sannong">
     <NuxtLayout>
       <NuxtPage></NuxtPage>
+      <!-- <img src="./static/images/weixin 1.png" alt=""> -->
+      <ul class="kefu">
+        <li>
+          <img src="./static//images/weixin 1.png" alt="">
+          <p>微信客服</p>
+        </li>
+        <li>
+          <img src="./static//images/qq 1.png" alt="">
+          <p>QQ客服</p>
+        </li>
+        <li>
+          <img src="./static//images/dianhua 1.png" alt="">
+          <p>电话客服</p>
+        </li>
+        <li>
+          <img src="./static//images/guanbi 1.png" alt="">
+          <p>关闭</p>
+        </li>
+      </ul>
     </NuxtLayout>
-
   </div>
 </template>
+<style lang="less" scoped>
+.kefu {
+  width: 100px;
+  height: 445px;
+  position: fixed;
+  bottom: 80px;
+  right: 129px;
+
+  >li {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 15px;
+    text-align: center;
+
+    >img {
+      width: 60px;
+      height: 60px;
+      margin-top: 10px;
+    }
+
+    >p {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      color: #666666;
+      line-height: 16px;
+    }
+  }
+}
+</style>

components/home/Banner1.vue

@@ -0,0 +1,22 @@
+<template>
+    <div id="banner1">
+        <div class="inner">
+            <img src="../../static/images/banner 1.png" alt="">
+        </div>
+    </div>
+</template>
+
+<script>
+</script>
+
+<style lang="less" scoped>
+#banner1 {
+    width: 100%;
+    height: 90px;
+    margin: 40px 0 40px;
+    img{
+        width: 1200px;
+        height: 90px;
+    }
+}
+</style>

components/home/BigSwiper.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="swiper">
+        <el-carousel :interval="5000" arrow="always" height="440px" indicator-class="custom-indicator">
+            <el-carousel-item v-for="item in 5" :key="item">
+                <img src="../../static/images/image.png" alt="">
+                <span>高邮市周山镇开展渔业安全生产应急演练...</span>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+
+</template>
+
+<script setup>
+
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+</script>
+
+<style lang="less" scoped>
+.swiper {
+    width: 790px;
+    height: 440px;
+    position: relative;
+
+    span {
+        display: inline-block;
+        width: 790px;
+        height: 118px;
+        padding-top: 20px;
+        padding-left: 23px;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 800;
+        font-size: 24px;
+        color: #FFFFFF;
+        background:  linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+        
+    }
+}
+
+.el-carousel {
+    /deep/.el-carousel__arrow i {
+        font-size: 68px !important;
+    }
+
+    /deep/ .el-carousel__indicators {
+        // 指示器
+        left: unset;
+        transform: unset;
+        right: 45%;
+    }
+
+    /deep/ .el-carousel__button {
+        // 指示器按钮
+        width: 10px;
+        height: 10px;
+        border: none;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        background-color:transparent;
+    }
+
+    /deep/ .is-active .el-carousel__button {
+        // 指示器激活按钮
+        background: #fff;
+    }
+
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+}
+
+.custom-indicator button {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    opacity: 0.7;
+}
+
+.custom-indicator button.is-active {
+    background-color: #333;
+    border-color: #333;
+    opacity: 1;
+}
+</style>

components/home/PageMessage.vue

@@ -4,7 +4,9 @@
         <div class="inner">
             <div class="messageLeft">
                 <!-- 轮播图 -->
-                <img src="../../static/images/image.png" alt="">
+                <!-- <img src="../../static/images/image.png" alt=""> -->
+                <HomeBigSwiper></HomeBigSwiper>
+
                 <!-- 小图列表 -->
                 <ul class="smallList">
                     <li>

components/home/Pagination.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="pagination">
+        <el-pagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" prev-text="上一页"
+            next-text="下一页" />
+    </div>
+</template>
+
+<script setup>
+import { ElPagination } from 'element-plus'
+</script>
+
+<style lang="less" scoped>
+.pagination {
+    width: 508px;
+    height: 34px;
+
+    /deep/.el-pagination.is-background .btn-next,
+    /deep/.el-pagination.is-background .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+    }
+
+    /deep/.el-pagination.is-background .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+    }
+
+    /deep/.el-pagination.is-background .btn-next.is-active,
+    /deep/.el-pagination.is-background .btn-prev.is-active,
+    /deep/.el-pagination.is-background .el-pager li.is-active {
+        background-color: #028e21;
+        color: #fff;
+    }
+
+    /deep/.el-pager li.is-active,
+    /deep/.el-pager li:hover {
+        color: #028e21;
+    }
+
+    /deep/.el-pagination button.is-active,
+    /deep/.el-pagination button:hover {
+        color: #028e21;
+    }
+}
+</style>

components/home/SmallSwiper.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="swiper">
+        <el-carousel :interval="5000" arrow="always" height="214px" indicator-class="custom-indicator">
+            <el-carousel-item v-for="item in 4" :key="item">
+                <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f@2x.png"
+                    alt="">
+                <span>高邮市周山镇开展渔业安全生产应急...</span>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+
+</template>
+
+<script setup>
+
+import { ElCarousel, ElCarouselItem } from 'element-plus'
+
+</script>
+
+<style lang="less" scoped>
+.swiper {
+    width: 380px;
+    height: 214px;
+    position: relative;
+
+    img {
+        width: 380px;
+        height: 214px;
+    }
+
+    span {
+        display: inline-block;
+        width: 380px;
+        height: 30px;
+        line-height: 30px;
+        padding-left: 13px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: 20px;
+        color: #FFFFFF;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+}
+
+.el-carousel {
+    /deep/.el-carousel__arrow i {
+        font-size: 30px !important;
+    }
+
+    /deep/.el-carousel__arrow--left {
+        left: 16px;
+        width: 35px;
+        height: 57px;
+        color: #616358;
+        background: #dcdedc;
+        position: absolute;
+        left: 0px;
+        border: none;
+        border-radius: 0;
+    }
+
+    /deep/.el-carousel__arrow--right {
+        right: 16px;
+        width: 35px;
+        height: 57px;
+        color: #616358;
+        background: #dcdedc;
+        position: absolute;
+        right: 0;
+        border: none;
+        border-radius: 0;
+    }
+
+    /deep/ .el-carousel__indicators {
+        // 指示器
+        left: unset;
+        transform: unset;
+        right: 41%;
+    }
+
+    /deep/ .el-carousel__button {
+        // 指示器按钮
+        width: 10px;
+        height: 10px;
+        border: none;
+        border-radius: 50%;
+        border: 1px solid #fff;
+        background-color: transparent;
+    }
+
+    /deep/ .is-active .el-carousel__button {
+        // 指示器激活按钮
+        background: #fff;
+    }
+
+    /deep/ .el-carousel__container {
+        height: 100%;
+    }
+}
+
+.custom-indicator button {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    opacity: 0.7;
+}
+
+.custom-indicator button.is-active {
+    background-color: #333;
+    border-color: #333;
+    opacity: 1;
+}
+</style>

components/home/pageNavigation.vue

@@ -43,7 +43,6 @@
                 </p>
             </div>
         </div>
-
         <!-- 导航栏下的大图 -->
         <div class="logo">
             <div class="inner">
@@ -96,7 +95,6 @@ onMounted(async () => {
     try {
         const response = await axios.get('/web/getWebsiteCategory');
         console.log(response.data.data);
-
         data.value = response.data.data;
     } catch (error) {
         console.error(error);
@@ -143,6 +141,9 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
                 color: #333;
             }
         }
+        >li:hover a{
+            color: #139602;
+        }
 
     }
 }
@@ -206,12 +207,10 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
 
     }
 
-    .areaChannel {
-        width: 1122px;
-        margin-left: 14px
-    }
 
     .areaChannel {
+        width: 1122px;
+        margin-left: 14px;
         >span {
             display: inline-block;
             width: 49px;
@@ -245,6 +244,9 @@ let areaList = ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '
             border-right: none;
 
         }
+        >span:hover a{
+            color: #139602;
+        }
     }
 }
 

nuxt.config.js

@@ -1,11 +1,10 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default({
   taget:"static",
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
   module:[
     '@nuxtjs/style-resources',
-    '@element-plus/nuxt'
+    '@element-plus/nuxt',
   ],
   css:[
     '~/assets/css/global.css',

package-lock.json

@@ -7,10 +7,12 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
+        "@element-plus/nuxt": "^1.0.10",
         "@nuxtjs/style-resources": "^1.2.2",
         "add": "^2.0.6",
         "axios": "^1.7.7",
-        "element-plus": "^2.8.4",
+        "element-plus": "^2.8.5",
         "less": "^4.2.0",
         "less-loader": "^12.2.0",
         "nuxt": "^3.13.0",
@@ -597,6 +599,33 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@element-plus/nuxt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmmirror.com/@element-plus/nuxt/-/nuxt-1.0.10.tgz",
+      "integrity": "sha512-jz8kWXr0cBc/9fN2fWdoiTVFWGVzltobZ0FIIEyG0AoXsNl2BJr7urvvscJS3UFy+zjVuFxB4FULLpx9RcwQLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.12.3",
+        "magic-string": "^0.27.0",
+        "unplugin": "^1.11.0"
+      },
+      "peerDependencies": {
+        "@element-plus/icons-vue": ">=0.2.6",
+        "element-plus": ">=2"
+      }
+    },
+    "node_modules/@element-plus/nuxt/node_modules/magic-string": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.27.0.tgz",
+      "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.23.1",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
@@ -4863,9 +4892,9 @@
       "license": "ISC"
     },
     "node_modules/element-plus": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.4.tgz",
-      "integrity": "sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==",
+      "version": "2.8.5",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.5.tgz",
+      "integrity": "sha512-Px+kPbRTVvn5oa5+9saa7QEOnUweKXm0JVI7yJHzKF/doQGixwcFMsQEF2+3Fy62EA/7dRRKVuhsNGGZYNk3cw==",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",

package.json

@@ -11,10 +11,12 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@element-plus/nuxt": "^1.0.10",
     "@nuxtjs/style-resources": "^1.2.2",
     "add": "^2.0.6",
     "axios": "^1.7.7",
-    "element-plus": "^2.8.4",
+    "element-plus": "^2.8.5",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "nuxt": "^3.13.0",
@@ -24,4 +26,4 @@
   "devDependencies": {
     "nuxt-vite": "^0.3.5"
   }
-}
+}

pages/index.vue

@@ -102,11 +102,20 @@
                             <span>查看更多</span>
                         </h3>
                         <p>郑州17名警察因出警慢被关禁闭,你怎么看?</p>
-                        <!-- <el-checkbox-group v-model="checkList">
-                            <el-checkbox label="Option A" value="Value A" />
-                            <el-checkbox label="Option B" value="Value B" />
-                            <el-checkbox label="Option C" value="Value C" />
-                        </el-checkbox-group> -->
+
+                        <div class="radio">
+                            <el-radio-group v-model="radio1" text-color="#33B023">
+                                <el-radio value="1" size="large">支持，警察不关心百姓应惩罚</el-radio>
+                                <el-radio value="2" size="large">反对，这件事就关禁闭不合理</el-radio>
+                                <el-radio value="3" size="large">建议其他部门效仿此做法</el-radio>
+                            </el-radio-group>
+                        </div>
+
+                        <div class="btn">
+                            <button class="voting">投票</button>
+                            <button class="look">查看</button>
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -157,8 +166,7 @@
                     </h3>
                     <!-- 轮播图 -->
                     <div class="banner">
-                        <img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
-                            alt="">
+                        <HomeSmallSwiper></HomeSmallSwiper>
                     </div>
                     <!-- 轮播图下小图列表 及内容列表 -->
                     <div class="banner_b_img">
@@ -284,8 +292,7 @@
                     </div>
                     <!-- 轮播图 -->
                     <div class="banner">
-                        <img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
-                            alt="">
+                        <HomeSmallSwiper></HomeSmallSwiper>
                     </div>
                     <!-- 轮播图下小图列表 及内容列表 -->
                     <div class="banner_b_img">
@@ -334,11 +341,16 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import { ElRadio, ElRadioGroup } from 'element-plus'
+
+const radio1 = ref('1')
+
+
 
 </script>
 
 <style lang="less" scoped>
-
 // 农民工
 .farming {
     width: 100%;
@@ -617,6 +629,61 @@
                 padding: 12px 20px 0 32px;
 
             }
+
+            .radio {
+                .el-radio-group {
+                    align-items: center;
+                    display: inline-flex;
+                    flex-wrap: wrap;
+                    font-size: 0;
+                    padding-left: 35px;
+                }
+
+                .el-radio.el-radio--large {
+                    height: 29px;
+                }
+
+                .el-radio.el-radio--large .el-radio__label {
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                }
+
+                .el-radio.el-radio--large .el-radio__inner {
+                    height: 16px;
+                    width: 16px;
+                }
+
+                .el-radio__input.is-checked+.el-radio__label {
+                    color: #27881a;
+                }
+            }
+
+            .btn {
+                width: 188px;
+                height: 32px;
+                margin: 20px auto;
+
+                button {
+                    width: 70px;
+                    height: 32px;
+                    line-height: 32px;
+                    border-radius: 6px;
+                    border: none;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #999999;
+                }
+                .voting{
+                    background-color: #33b023;
+                    color: #fff;
+                    margin-right: 44px;
+                }
+            }
+
+
         }
 
     }

pages/primaryNavigation/[id].vue

@@ -15,7 +15,7 @@
                 <p class="introduction">
                     <strong>频道介绍</strong>
                     <span v-for="item in ChannelList">
-                        <NuxtLink to="">{{ item }}</NuxtLink>
+                        <NuxtLink to="/primaryNavigation/newsList">{{ item }}</NuxtLink>
                     </span>
                 </p>
 
@@ -289,8 +289,7 @@
                     </h3>
                     <!-- 轮播图 -->
                     <div class="banner">
-                        <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
-                            alt="">
+                        <HomeSmallSwiper></HomeSmallSwiper>
                     </div>
                     <!-- 轮播图下小图列表 及内容列表 -->
                     <div class="banner_b_img">
@@ -369,8 +368,7 @@
                     </ul>
                     <!-- 轮播图 -->
                     <div class="banner">
-                        <img src="../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
-                            alt="">
+                        <HomeSmallSwiper></HomeSmallSwiper>
                     </div>
                     <!-- 轮播图下小图列表 及内容列表 -->
                     <div class="banner_b_img">
@@ -495,6 +493,10 @@ let ChannelList = ['理论前沿', '典型经验', '魅力乡村', '农民之家
             }
         }
 
+        >span:hover a {
+            color: #139602;
+        }
+
         >span:last-child {
             border: none;
         }
@@ -628,6 +630,11 @@ let ChannelList = ['理论前沿', '典型经验', '魅力乡村', '农民之家
                         text-transform: none;
 
                     }
+
+                    >p:hover {
+                        box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+
+                    }
                 }
             }
 

pages/primaryNavigation/newsDetail/newsDetail.vue

@@ -1,3 +1,317 @@
 <template>
-    <PageHead></PageHead>
-</template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+
+    <!-- Banner1 -->
+    <HomeBanner1></HomeBanner1>
+
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb">
+        <div class="inner">
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
+                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                <el-breadcrumb-item>三农之窗</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+
+    <!-- 资讯列表 -->
+    <div class="newsDetail">
+        <div class="inner">
+            <div class="innerLeft">
+                <div class="LeftTop">
+                    <h1>财政政策的逆周期调节是什么？财政部准备“聊”这个</h1>
+                    <p>
+                        来源: <span>新华网</span>
+                        <span>2024-10-10 17:14:20</span>
+                        浏览量: <span>1763</span>
+                    </p>
+                    <img src="../../../static/images/image.png" alt="">
+                </div>
+                <div class="leftBottom">
+
+                </div>
+            </div>
+            <div class="innerRight">
+                <div class="title">
+                    <h4>
+                        热点资讯
+                        <span>查看更多</span>
+                    </h4>
+                </div>
+                <ul class="messageList">
+                    <li v-for="item in 14">
+                        <span>{{ item }}</span>
+                        <NuxtLink>数说新中国75年｜人民文化生活日益丰富 文...</NuxtLink>
+                    </li>
+                </ul>
+                <div class="title">
+                    <h4>
+                        热点资讯
+                        <span>查看更多</span>
+                    </h4>
+                </div>
+                <!-- 列表 -->
+                <ul class="rightList">
+                    <li v-for="item in 5">
+                        <img class="left"
+                            src="../../../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_0e341355-f4d5-4796-b6cd-bdc87996f81b(1).png"
+                            alt="">
+                        <p class="left">高邮市周山镇开展渔业安全生产应急演练</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+</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;
+}
+
+// 资讯列表
+.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;
+                background-color: #ccc;
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            height: 605px;
+            background-color: #fbfbfb;
+
+            >.title {
+                width: 380px;
+                height: 40px;
+                line-height: 40px;
+                border-top: 1px solid #139602;
+                border-bottom: 1px solid #e7e7e7;
+                background-color: #fbfbfb;
+
+
+                >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;
+                    }
+                }
+
+            }
+
+            .messageList {
+                height: 563px;
+                padding-top: 15px;
+                margin-bottom: 30px;
+                background-color: #fbfbfb;
+
+                >li {
+                    height: 24px;
+                    margin-bottom: 16px;
+
+                    >span {
+                        display: inline-block;
+                        width: 24px;
+                        height: 24px;
+                        margin-left: 22px;
+                        line-height: 24px;
+                        vertical-align: middle;
+                        text-align: center;
+                        background-color: #cecece;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 18px;
+                        color: #FFFFFF;
+                        text-align: center;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                    >a {
+                        width: 256px;
+                        height: 21px;
+                        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;
+                        padding-left: 10px;
+
+                    }
+
+                }
+
+                >li:nth-child(1)>span {
+                    background-color: #00c524;
+                }
+
+                >li:nth-child(2)>span {
+                    background-color: #ffdf27;
+                }
+
+                >li:nth-child(3)>span {
+                    background-color: #f3c57f;
+                }
+            }
+
+            // >.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;
+                padding-top: 20px;
+                background-color: #fbfbfb;
+
+                >li {
+                    height: 100px;
+                    margin-bottom: 10px;
+
+                    >img {
+                        width: 150px;
+                        height: 100px;
+                        border-radius: 4px;
+                    }
+
+                    >p {
+                        width: 219px;
+                        height: 100px;
+                        padding-left: 12px;
+                        font-family: PingFang SC, PingFang SC;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #333333;
+                        line-height: 22px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+
+                    }
+
+                    >p:hover {
+                        box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

pages/primaryNavigation/newsList.vue

@@ -0,0 +1,557 @@
+<template>
+    <div id="newsList">
+        <!-- 页面头部 -->
+        <HomePageHead></HomePageHead>
+        <!-- Banner1 -->
+        <HomeBanner1></HomeBanner1>
+        <!-- 面包屑导航 -->
+        <div class="breadcrumb">
+            <div class="inner">
+
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
+                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+                    <el-breadcrumb-item>三农之窗</el-breadcrumb-item>
+                </el-breadcrumb>
+
+            </div>
+        </div>
+        <!-- 资讯列表 -->
+        <div class="newsList">
+            <div class="inner">
+                <div class="innerLeft">
+                    <ul class="list">
+                        <li v-for="item in newsList">
+                            <NuxtLink to="/primaryNavigation/newsDetail/newsDetail">{{ item }}</NuxtLink>
+                        </li>
+                    </ul>
+                    <!-- 分页器 -->
+                    <div class="pagination">
+                        <HomePagination></HomePagination>
+                    </div>
+                </div>
+                <div class="innerRight">
+                    <div class="title">
+                        <h4>
+                            热点资讯
+                            <span>查看更多</span>
+                        </h4>
+                    </div>
+                    <ul class="messageList">
+                        <li v-for="item in 14">
+                            <span>{{ item }}</span>
+                            <NuxtLink>数说新中国75年｜人民文化生活日益丰富 文...</NuxtLink>
+                        </li>
+                    </ul>
+                </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 lang="ts" setup>
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+let newsList = [
+    '稳经济政策正朝着“稳健有效”持续发力',
+    '布上青花 指尖非遗——千年蜡染的传承与创新',
+    '拉萨市涉建筑垃圾、城市建设两部条例将于11月1日实施',
+    '中国稳定股市新工具启动 5000亿规模只能投资股市',
+    '国家数据局：建立健全公共数据产品和服务价格形成机制',
+    '第十二届全国少数民族传统体育运动会启动火炬传递',
+    '网信部门曝光“毒视频”“开盒挂人”等涉未成年人乱象',
+    '辅警执勤时被闯红灯超速摩托车撞倒 浙江义乌警方通报',
+    '接地气、心贴心 各地创新宣讲形式把全会精神送到干部群众身边',
+    '美军火商对台军售涉抬价诈欺，台当局替美辩称“美国也是受害...'
+]
+</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;
+}
+
+// 资讯列表
+.newsList {
+    width: 100%;
+    height: 675px;
+    margin-bottom: 70px;
+
+    .inner {
+        width: 1200px;
+
+        .innerLeft,
+        .innerRight {
+            border-top: 1px solid #139602;
+        }
+
+        .innerLeft {
+            height: 675px;
+            >.list {
+                height: 570px;
+                margin-bottom: 70px;
+
+                >li {
+                    width: 790px;
+                    height: 56px;
+                    line-height: 56px;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    >a {
+                        width: 360px;
+                        height: 26px;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 20px;
+                        color: #333333;
+                        line-height: 26px;
+                        text-align: left;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                }
+
+                >li:hover>a {
+                    color: #139602;
+                }
+
+                >li:nth-child(1)::after,
+                >li:nth-child(2)::after {
+                    content: "热";
+                    margin-left: 13px;
+                    background: #FF8A37;
+                    color: #fff;
+                    font-size: 14px;
+                    padding: 0px 2px;
+                }
+            }
+
+            >.pagination{
+                width: 790px;
+                height: 34px;
+                margin-left: 141px;
+                
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            height: 605px;
+
+            >.title {
+                width: 380px;
+                height: 40px;
+                line-height: 40px;
+                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;
+                    }
+                }
+
+            }
+
+            .messageList {
+                height: 563px;
+                padding-top: 15px;
+                background-color: #fbfbfb;
+
+                >li {
+                    height: 24px;
+                    margin-bottom: 16px;
+
+                    >span {
+                        display: inline-block;
+                        width: 24px;
+                        height: 24px;
+                        margin-left: 22px;
+                        line-height: 24px;
+                        vertical-align: middle;
+                        text-align: center;
+                        background-color: #cecece;
+                        font-family: Microsoft YaHei, Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 18px;
+                        color: #FFFFFF;
+                        text-align: center;
+                        font-style: normal;
+                        text-transform: none;
+                    }
+
+                    >a {
+                        width: 256px;
+                        height: 21px;
+                        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;
+                        padding-left: 10px;
+
+                    }
+
+                }
+
+                >li:hover a {
+                    color: #139602;
+                }
+
+                >li:nth-child(1)>span {
+                    background-color: #00c524;
+                }
+
+                >li:nth-child(2)>span {
+                    background-color: #ffdf27;
+                }
+
+                >li:nth-child(3)>span {
+                    background-color: #f3c57f;
+                }
+            }
+        }
+    }
+}
+
+//资讯推荐
+.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 {
+                            height: 54px;
+                            font-family: Source Han Sans, Source Han Sans;
+                            font-weight: 500;
+                            font-size: 18px;
+                            color: #333333;
+                            line-height: 26px;
+                            text-align: left;
+                            font-style: normal;
+                            text-transform: none;
+                        }
+
+                        >p {
+                            width: 200px;
+                            height: 22px;
+                            line-height: 20px;
+                            position: absolute;
+                            bottom: 5px;
+                            right: 0;
+
+                            >span {
+                                display: inline-block;
+                                width: 100px;
+                                height: 18px;
+                                font-family: Source Han Sans, Source Han Sans;
+                                font-weight: 400;
+                                font-size: 12px;
+                                color: #999999;
+                                text-align: left;
+                                line-height: 14px;
+                                font-style: normal;
+                                text-transform: none;
+                            }
+
+                            >span:last-child {
+                                width: 90px;
+                                text-align: right;
+                            }
+
+                        }
+                    }
+                }
+
+                >li {
+                    width: 380px;
+                    height: 25px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 18px;
+                    color: #333333;
+                    line-height: 21px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-bottom: 10px;
+
+                    em {
+                        display: inline-block;
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 8px;
+                        margin-right: 10px;
+                        background-color: #d9d9d9;
+                    }
+                }
+
+                >li:hover {
+                    color: #139602;
+                }
+
+                >li:hover em {
+                    background-color: #139602;
+                }
+            }
+        }
+    }
+
+    .innerRight {
+        width: 381px;
+        height: 290px;
+        background-color: #fbfbfb;
+
+        >.title {
+            width: 380px;
+            height: 40px;
+            line-height: 40px;
+            border-top: 1px solid #139602;
+            border-bottom: 1px solid #e7e7e7;
+
+            >h4 {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: 400;
+                margin-left: 20px;
+                font-size: 20px;
+                color: #000000;
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+
+                >span {
+                    float: right;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    margin-right: 10px;
+                    color: #999999;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                }
+            }
+
+        }
+
+        .rightList {
+            height: 540px;
+            margin-top: 20px;
+
+            >li {
+                height: 100px;
+                margin-bottom: 10px;
+
+                >img {
+                    width: 150px;
+                    height: 100px;
+                }
+
+                >p {
+                    width: 219px;
+                    height: 100px;
+                    padding-left: 12px;
+                    font-family: PingFang SC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #333333;
+                    line-height: 22px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+
+                }
+
+                >p:hover {
+                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+
+    }
+}
+</style>

plugins/element-plus.js

@@ -1,7 +1,13 @@
-// import Vue from 'vue'
-// import ElementPlus from 'element-plus'
-// import 'element-plus/lib/theme-chalk/index.css'
- 
-// Vue.use(ElementPlus)
+// import { defineNuxtPlugin } from '#app';
+// import ElementPlus from 'element - plus';
+// import 'element - plus/dist/index.css';
+// // 如果安装了图标相关插件，还需导入并注册图标
+// import * as ElementPlusIconsVue from '@element - plus/icons - vue';
 
-export default defineNuxtPlugin(() => {}) 
+// export default defineNuxtPlugin((nuxtApp) => {
+//   nuxtApp.vueApp.use(ElementPlus);
+//   // 注册图标
+//   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+//     nuxtApp.vueApp.component(key, component);
+//   }
+// });