完成首页移动端自适应

完成首页移动端自适应

.nuxt/components.d.ts

@@ -25,6 +25,11 @@ interface _GlobalComponents {
     'NewsDetail': typeof import("../components/news/detail.vue")['default']
     'NewsList': typeof import("../components/news/list.vue")['default']
     'PageNavigation': typeof import("../components/pageNavigation.vue")['default']
+    'ZoomCheliangchaxun': typeof import("../components/zoom/cheliangchaxun.vue")['default']
+    'ZoomDiaoyanxuanti': typeof import("../components/zoom/diaoyanxuanti.vue")['default']
+    'ZoomDishizhongxin': typeof import("../components/zoom/dishizhongxin.vue")['default']
+    'ZoomJieshaoxinchaxun': typeof import("../components/zoom/jieshaoxinchaxun.vue")['default']
+    'ZoomRenyuanchaxun': typeof import("../components/zoom/renyuanchaxun.vue")['default']
     'NuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
     'NuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
     'NuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -71,6 +76,11 @@ interface _GlobalComponents {
     'LazyNewsDetail': typeof import("../components/news/detail.vue")['default']
     'LazyNewsList': typeof import("../components/news/list.vue")['default']
     'LazyPageNavigation': typeof import("../components/pageNavigation.vue")['default']
+    'LazyZoomCheliangchaxun': typeof import("../components/zoom/cheliangchaxun.vue")['default']
+    'LazyZoomDiaoyanxuanti': typeof import("../components/zoom/diaoyanxuanti.vue")['default']
+    'LazyZoomDishizhongxin': typeof import("../components/zoom/dishizhongxin.vue")['default']
+    'LazyZoomJieshaoxinchaxun': typeof import("../components/zoom/jieshaoxinchaxun.vue")['default']
+    'LazyZoomRenyuanchaxun': typeof import("../components/zoom/renyuanchaxun.vue")['default']
     'LazyNuxtWelcome': typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
     'LazyNuxtLayout': typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
     'LazyNuxtErrorBoundary': typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -123,6 +133,11 @@ export const HomePageNavigation: typeof import("../components/home/pageNavigatio
 export const NewsDetail: typeof import("../components/news/detail.vue")['default']
 export const NewsList: typeof import("../components/news/list.vue")['default']
 export const PageNavigation: typeof import("../components/pageNavigation.vue")['default']
+export const ZoomCheliangchaxun: typeof import("../components/zoom/cheliangchaxun.vue")['default']
+export const ZoomDiaoyanxuanti: typeof import("../components/zoom/diaoyanxuanti.vue")['default']
+export const ZoomDishizhongxin: typeof import("../components/zoom/dishizhongxin.vue")['default']
+export const ZoomJieshaoxinchaxun: typeof import("../components/zoom/jieshaoxinchaxun.vue")['default']
+export const ZoomRenyuanchaxun: typeof import("../components/zoom/renyuanchaxun.vue")['default']
 export const NuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
 export const NuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
 export const NuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']
@@ -169,6 +184,11 @@ export const LazyHomePageNavigation: typeof import("../components/home/pageNavig
 export const LazyNewsDetail: typeof import("../components/news/detail.vue")['default']
 export const LazyNewsList: typeof import("../components/news/list.vue")['default']
 export const LazyPageNavigation: typeof import("../components/pageNavigation.vue")['default']
+export const LazyZoomCheliangchaxun: typeof import("../components/zoom/cheliangchaxun.vue")['default']
+export const LazyZoomDiaoyanxuanti: typeof import("../components/zoom/diaoyanxuanti.vue")['default']
+export const LazyZoomDishizhongxin: typeof import("../components/zoom/dishizhongxin.vue")['default']
+export const LazyZoomJieshaoxinchaxun: typeof import("../components/zoom/jieshaoxinchaxun.vue")['default']
+export const LazyZoomRenyuanchaxun: typeof import("../components/zoom/renyuanchaxun.vue")['default']
 export const LazyNuxtWelcome: typeof import("../node_modules/nuxt/dist/app/components/welcome.vue")['default']
 export const LazyNuxtLayout: typeof import("../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
 export const LazyNuxtErrorBoundary: typeof import("../node_modules/nuxt/dist/app/components/nuxt-error-boundary")['default']

.nuxt/dev/index.mjs

@@ -180,7 +180,7 @@ const _NJioM9A97U = (function(nitro) {
 
 const rootDir = "G:/gogs/fzxfb_org_cn";
 
-const appHead = {"meta":[{"charset":"utf-8"},{"name":"description","content":""},{"name":"keywords","content":""},{"name":"viewport","content":"width=device-width,initial-scale=1,user-scalable=no","tagPriority":10}],"link":[],"style":[],"script":[],"noscript":[],"title":""};
+const appHead = {"meta":[{"charset":"utf-8"},{"name":"description","content":""},{"name":"keywords","content":""},{"name":"viewport","content":"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover","tagPriority":10}],"link":[],"style":[],"script":[],"noscript":[],"title":"","viewport":"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"};
 
 const appRootTag = "div";
 

.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1767513558630}
+{"id":"dev","timestamp":1767745021351}

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2026-01-04T07:59:21.806Z",
+  "date": "2026-01-07T00:17:15.751Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.10.4"
   },
   "dev": {
-    "pid": 25372,
+    "pid": 15940,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-25372-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-15940-1.sock"
     }
   }
 }

.nuxt/types/plugins.d.ts

@@ -22,6 +22,7 @@ type NuxtAppInjections =
   InjectionType<typeof import("../../node_modules/nuxt/dist/app/plugins/check-if-layout-used.js")> &
   InjectionType<typeof import("../../plugins/element-plus.js")> &
   InjectionType<typeof import("../../plugins/request.js")> &
+  InjectionType<typeof import("../../plugins/flexible.client.js")> &
   InjectionType<typeof import("../../plugins/globals.js")> &
   InjectionType<typeof import("../../plugins/pinia.js")>
 

assets/css/global.css

@@ -24,9 +24,19 @@ body {
     font-size: 14px;
     font-family: PingFang SC, PingFang SC;
     background: url("../../public/header/banner.jpg") no-repeat center top;
-    background-size: auto 500px;
+    background-size: auto 500PX;
 }
 
+@media screen and (max-width: 800px) {
+    body {
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        background: url("../../public/header/banner.jpg") no-repeat center 40PX;
+        background-size: 100% 140PX;
+    }
+}
+
+
 .left {
     float: left;
 }
@@ -119,4 +129,4 @@ li {
     color: #999999;
     font-style: normal;
     text-transform: none;
-}
+}

components/home/foot.vue

@@ -31,26 +31,14 @@
             <p v-html="bottomBase.statement" class="foot_text_html_css"></p>
             <p v-html="bottomBase.organizer" class="foot_text_html_css foot_color_red"></p>
             <p v-html="bottomBase.copyright_information" class="foot_text_html_css"></p>
-            <p><span v-html="bottomBase.icp_number" class="foot_text_html_css"></span><span
-                    v-html="bottomBase.record_number" class="foot_text_html_css"></span></p>
+            <p>
+                <span v-html="bottomBase.icp_number" class="foot_text_html_css"></span>
+                <span v-html="bottomBase.record_number" class="foot_text_html_css"></span>
+            </p>
             <p v-html="bottomBase.contact_number" class="foot_text_html_css"></p>
             <p v-html="bottomBase.company_address" class="foot_text_html_css "></p>
             <p v-html="bottomBase.email" class="foot_text_html_css "></p>
         </div>
-        <!-- <div class="foot_logo_out" v-if="bottomBase">
-            <a :href="'http://' + bottomBase.project_url" :title="bottomBase.project_name" v-if="bottomBase.project_logo!=''&&bottomBase.project_url!=''">
-                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
-            </a>
-            <span v-else-if="bottomBase.project_logo!=''&&bottomBase.project_url==''">
-                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
-            </span>
-            <a :href="'http://' + bottomBase.company_url" :title="bottomBase.company_name" v-if="bottomBase.company_logo!=''&&bottomBase.company_url!=''">
-                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
-            </a>
-            <span v-else-if="bottomBase.company_logo!=''&&bottomBase.company_url==''">
-                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
-            </span>
-        </div> -->
         <div class="foot_last_img_box">
             <a :href="item.url" v-for="(item, index) in bottomphoto" :title="item.title">
                 <!-- <img :src="item.logo_url" :alt="item.title"> -->
@@ -64,30 +52,6 @@
                     <p>在线客服</p>
                 </a>
             </div>
-            <!-- <div class="kefu_itemQQ">
-                <img src="https://img.bjzxtw.org.cn/pre/public/image/qq1.png">
-                <p>QQ客服</p>
-                <div class="kefu_item_content_QQ">
-                    <div @click="addQQFriend(qq1)" class="qqadd">
-                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao1.png" width="100">
-                        <div class="qqfs">{{ bottomBase.customer_service_qq }}</div>
-                    </div>
-                    <div @click="addQQFriend(qq2)" class="qqadd">
-                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao2.png" width="100">
-                        <div class="qqfs">{{ bottomBase.communications }}</div>
-                    </div>
-                    <div class="arrow"></div>
-                </div>
-            </div>
-            <div class="kefu_itemPhone">
-                <img src="https://img.bjzxtw.org.cn/pre/public/image/dianhua1.png">
-                <p>电话客服</p>
-                <div class="kefu_item_content_phone">
-                    <div class="kefu_item_content_phone_title">联系电话：</div>
-                    <div>{{ bottomBase.customer_service }}</div>
-                    <div class="arrow"></div>
-                </div>
-            </div> -->
         </div>
         <!--右侧悬浮-->
         <div class="foot_right_float">
@@ -105,7 +69,7 @@
                 <li>
                     <div>
                         <span class="new_wen">问</span>
-                        <span><a href="/">政讯通•全国法制项目官网有几个，承担的职能是什么</a></span>
+                        <a class="wenda_view_text" href="#">政讯通•全国法制项目官网有几个，承担的职能是什么</a>
                     </div>
                     <div>
                         <span class="new_da">答</span>
@@ -121,7 +85,7 @@
                 <li>
                     <div>
                         <span class="new_wen">问</span>
-                        <span><a href="/">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a></span>
+                        <a class="wenda_view_text" href="#">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a>
                     </div>
                     <div>
                         <span class="new_da">答</span>
@@ -215,738 +179,1576 @@ function toggleWenda() {
 </script>
 
 <style lang="less" scoped>
-//PC端 start ---------------------------------------->
-.foot_title {
-    width: 100%;
-    overflow: hidden;
-    background: #fff;
-
-    .foot_title_text {
-        display: block;
-        width: 100px;
-        height: 40px;
-        line-height: 40px;
-        text-align: center;
-        font-size: 18px;
-        border-bottom: 2px solid #158d91;
-        color: #001996;
-    }
-}
-
-.index_foot {
-    box-sizing: border-box;
-    width: 1400px;
-    margin: 0 auto;
-}
-
-.index_foot_name_box {
-    margin: 10px auto 0px;
-    text-align: center;
-    font-size: 0px;
-}
-
-.index_foot_name {
-    display: inline-block;
-    height: 67px;
-    line-height: 67px;
-    color: #f2f9f4;
-    font-size: 51px;
-    font-weight: bold;
-    overflow: hidden;
-}
-
-.index_foot_name:nth-of-type(even) {
-    color: #333;
-    font-size: 32px;
-}
-
-.foot_img_box {
-    overflow: hidden;
-    display: block;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    border-top: 1px solid #ccc;
-    background: #f1f1f1;
-    padding: 0 10px 0 10px;
-}
-
-.foot_img_box a {
-    width: 14.25%;
-    height: 57px;
-    display: block;
-    padding: 0 10px;
-    box-sizing: border-box;
-    margin-top: 20px;
-}
-
-.foot_img_box img {
-    float: left;
-    width: 100%;
-    height: 57px;
-    overflow: hidden;
-    box-sizing: border-box;
-    display: block;
-    margin: 0 auto;
-    background: #fff;
-}
-
-.foot_img_box>* * {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.foot_img_box>*:nth-of-type(7n) {
-    margin-right: 0px;
-}
-
-.foot_frind_box {
-    display: block;
-    overflow: hidden;
-    display: flex;
-    border-bottom: solid 3px #158d91;
-    padding: 20px;
-    background: #f1f1f1;
-
-    a {
-        font-size: 16px;
-    }
-}
-
-// .foot_frind_box span{
-//     word-break: keep-all;
-//     white-space: nowrap;
-//     line-height:22px;
-//     font-size:16px;
-//     color:#333;
-//     font-weight:bold;
-// }
-.foot_frind_box div {
-    width: 100%;
-    overflow: hidden;
-}
-
-.foot_frind_box div * {
-    float: left;
-    line-height: 22px;
-    height: 22px;
-    color: #333;
-    font-size: 16px;
-    margin: 0 10px;
-}
-
-.call_us_box {
-    display: block;
-    width: 100%;
-    margin: 25px auto 0;
-    overflow: hidden;
-    text-align: center;
-    font-size: 0px;
-    background: #158d91;
-
-    a {
-        color: #fff;
-        font-size: 18px;
-        font-weight: normal;
-    }
-}
-
-.call_us_box>* {
-    height: 12px;
-    line-height: 12px;
-    color: #fff;
-    font-size: 14px;
-    display: inline-block;
-    box-sizing: border-box;
-    padding: 0 19px;
-    font-weight: bold;
-    border-left: solid 1px #fff;
-    margin: 18px 0;
-}
-
-.call_us_box>*:nth-of-type(1) {
-    border-left: 0px;
-}
-
-.foot_text_box {
-    margin: 20px auto 0px;
-    text-align: center;
-    color: #333;
-    font-size: 16px;
-    line-height: 25px;
-
-    a {
-        color: #333;
-        font-size: 14px;
-    }
-}
-
-.foot_text_box_green {
-    color: #40663B;
-}
-
-.foot_text_box img {
-    display: inline-block;
-    height: 20px;
-    vertical-align: middle;
-}
-
-.foot_logo_out {
-    position: relative;
-    margin: 0px auto;
-    width: 100%;
-    height: 0px;
-}
-
-.foot_logo_out * {
-    width: 120px;
-    display: block;
-}
-
-.foot_logo_out>* {
-    position: absolute;
-    top: -166px;
-}
-
-.foot_logo_out>*:nth-of-type(1) {
-    left: 0px;
-}
-
-.foot_logo_out>*:nth-of-type(2) {
-    right: 0px;
-}
-
-.foot_last_img_box {
-    margin: 10px auto 10px;
-    text-align: center;
-    overflow: hidden;
-    width: 100%;
-    font-size: 0px;
-    padding-bottom: 10px;
-}
-
-.foot_last_img_box>* {
-    height: 50px;
-    width: 120px;
-    display: inline-block;
-    overflow: hidden;
-    margin-right: 5px;
-}
-
-.foot_last_img_box img {
-    width: 120px;
-    height: 50px;
-    background: #fff;
-}
-
-.foot_text_html_css {
-    line-height: 30px;
-    font-size: 16px;
-}
-
-.foot_text_html_css :deep(a) {
-    color: #333;
-}
-
-.foot_color_red {
-    color: red;
-}
-
-.foot_color_red :deep(a) {
-    color: red;
-}
-
-.foot_text_html_css :deep(img) {
-    margin: 0 5px;
-}
-
-//添加在线客服
-.kefu {
-    position: fixed;
-    bottom: 100px;
-    top: 40%;
-    right: 11px;
-    width: 64px;
-
-    .kefu_itemKf {
-        background-color: #0099cc;
-        border-radius: 10px;
-        box-shadow: 0 4px 16px #0000001a;
-        width: 64px;
-        height: 64px;
-        padding: 8px;
-        text-align: center;
-        box-sizing: border-box;
-        position: relative;
-        cursor: pointer;
-
-        a {
-            >p {
-                color: #fff;
-                font-size: 12px;
-            }
-
-            >img {
-                width: 30px;
-                height: 30px;
-                margin-bottom: 5px;
-                display: block;
-                margin: 0 auto;
-            }
+//自适应 start ---------------------------------------->
+@media screen and (min-width: 1401px) {
+    .foot_title {
+        width: 100%;
+        overflow: hidden;
+        background: #fff;
+        .foot_title_text {
+            display: block;
+            width: 100PX;
+            height: 40PX;
+            line-height: 40PX;
+            text-align: center;
+            font-size: 18PX;
+            border-bottom: 2PX solid #158d91;
+            color: #001996;
         }
     }
-
-    .kefu_itemQQ {
-        background-color: #fff;
-        border-radius: 10px;
-        box-shadow: 0 4px 16px #0000001a;
-        height: 100px;
-        margin-bottom: 15px;
-        text-align: center;
-        width: 100px;
+    .index_foot {
         box-sizing: border-box;
-        position: relative;
-        cursor: pointer;
-
-        >p {
-            color: #666;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 16px;
-        }
-
-        >img {
-            margin-top: 10px;
-            width: 60px;
-            height: 60px;
-        }
-
-        &:hover {
-            .kefu_item_content_QQ {
-                display: block;
-            }
-        }
+        width: 1400PX;
+        margin: 0 auto;
     }
-
-    .kefu_itemPhone {
-        background-color: #fff;
-        border-radius: 10px;
-        box-shadow: 0 4px 16px #0000001a;
-        height: 100px;
-        margin-bottom: 15px;
+    .index_foot_name_box {
+        margin: 10PX auto 0PX;
         text-align: center;
-        width: 100px;
-        box-sizing: border-box;
-        position: relative;
-        cursor: pointer;
-
-        >p {
-            color: #666;
-            font-size: 14px;
-            font-weight: 500;
-            line-height: 16px;
-        }
-
-        >img {
-            margin-top: 10px;
-            width: 60px;
-            height: 60px;
-        }
-
-        &:hover {
-            .kefu_item_content_phone {
-                display: block;
-            }
-        }
+        font-size: 0PX;
     }
-
-    .kefu_item_content_QQ {
-        position: absolute;
-        top: -100px;
-        right: 100px;
-        background: #fff;
-        border-radius: 10px;
-        display: none;
-        width: 190px;
-        height: 330px;
-        background: #fff;
-        box-shadow: 0 4px 16px #0000001a;
-        z-index: 99;
-        box-sizing: border-box;
-        padding: 20px;
-
-        img {
-            margin-bottom: 10px;
-        }
-
-        .qqfs {
-            margin-bottom: 20px;
-            font-size: 14px;
-            color: #333;
-        }
-
-        .arrow {
-            width: 0;
-            height: 0;
-            width: 0;
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-left: 20px solid #fff;
-            position: absolute;
-            top: 120px;
-            right: -20px;
-            transform: translateX(-50%);
-            z-index: 100;
-        }
+    .index_foot_name {
+        display: inline-block;
+        height: 67PX;
+        line-height: 67PX;
+        color: #f2f9f4;
+        font-size: 51PX;
+        font-weight: bold;
+        overflow: hidden;
     }
-
-    .kefu_item_content_phone {
-        position: absolute;
-        top: 0;
-        right: 100px;
-        background: #fff;
-        border-radius: 10px;
-        display: none;
-        width: 190px;
-        height: 80px;
-        background: #fff;
-        box-shadow: 0 4px 16px #0000001a;
-        z-index: 99;
-        box-sizing: border-box;
-        padding: 20px;
-        text-align: left;
+    .index_foot_name:nth-of-type(even) {
         color: #333;
-        .kefu_item_content_phone_title {
-            margin-bottom: 5px;
-            font-weight: bold;
-        }
-        .arrow {
-            width: 0;
-            height: 0;
-            width: 0;
-            border-top: 20px solid transparent;
-            border-bottom: 20px solid transparent;
-            border-left: 20px solid #fff;
-            position: absolute;
-            top: 20px;
-            right: -20px;
-            transform: translateX(-50%);
-            z-index: 100;
-        }
+        font-size: 32PX;
     }
-}
-.foot_right_float {
-    position: fixed;
-    z-index: 200;
-    left: 2%;
-    bottom: 10px;
-    a {
+    .foot_img_box {
+        overflow: hidden;
         display: block;
-        margin-bottom: 4px;
-        border: 1px solid #dee3eb;
-        width: 220px;
-        height: 30px;
-        font-size: 14px;
-        line-height: 30px;
-        color: #EE6363;
-        cursor: pointer;
-        background: #fff;
-        text-align: center;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+        border-top: 1PX solid #ccc;
+        background: #f1f1f1;
+        padding: 0 10PX 0 10PX;
     }
-}
-//在线问答
-.wenda {
-    width: 300px;
-    height: auto;
-    overflow: hidden;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    background: #fff;
-    border: 1px solid #7ab9dd;
-    padding: 10px;
-    box-shadow: 0px 1px 8px #888;
-    z-index: 99999999;
-    box-sizing: border-box;
-    .wenda_tlt {
+    .foot_img_box a {
+        width: 14.25%;
+        height: 57PX;
+        display: block;
+        padding: 0 10PX;
+        box-sizing: border-box;
+        margin-top: 20PX;
+    }
+    .foot_img_box img {
+        float: left;
         width: 100%;
-        height: 40px;
-        line-height: 40px;
+        height: 57PX;
         overflow: hidden;
-        border-bottom: 2px solid #ccc;
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        background: #fff;
     }
-    .wenda_tlt h3 {
-        float: left;
-        height: 40px;
-        line-height: 40px;
-        font-size: 22px;
-        color: #0a78d7;
-        a {
-            color: #337ab7;
-            text-decoration: none;
-        }
+    .foot_img_box>* * {
+        display: block;
+        width: 100%;
+        height: 100%;
     }
-    .wenda_tlt span {
-        float: right;
-        width: 40px;
-        height: 40px;
-        background: url('public/index/jt.png') no-repeat center center;
-        transform: rotateZ(180deg);
-        font-size: 40px;
-        color: #000;
-        cursor: pointer;
+    .foot_img_box>*:nth-of-type(7n) {
+        margin-right: 0PX;
     }
-    .wenda_view li {
-        width: 100%;
-        height: auto;
+    .foot_frind_box {
+        display: block;
         overflow: hidden;
-        margin: 10px 0;
-        padding: 10px 0;
-        border-bottom: 1px solid #222;
+        display: flex;
+        border-bottom: solid 3PX #158d91;
+        padding: 20PX;
         background: #f1f1f1;
-        border-radius: 10px;
+
+        a {
+            font-size: 16PX;
+        }
     }
-    .wenda_view li div span.new_wen {
-        text-align: center;
-        line-height: 22px;
-        float: left;
-        width: 22px;
-        height: 22px;
-        font-size: 20px;
-        color: #fff;
-        background: #fb4;
-        border-radius: 5px;
-        margin: 3px 5px 3px 0;
-        padding: 0;
+    .foot_frind_box div {
+        width: 100%;
+        overflow: hidden;
     }
-    .wenda_view li div span.new_da {
-        text-align: center;
-        line-height: 22px;
+    .foot_frind_box div * {
         float: left;
-        width: 22px;
-        height: 22px;
-        font-size: 20px;
-        color: #fff;
-        background: #8ac03b;
-        border-radius: 5px;
-        margin: 3px 5px 3px 0;
-        padding: 0;
+        line-height: 22PX;
+        height: 22PX;
+        color: #333;
+        font-size: 16PX;
+        margin: 0 10PX;
     }
-    .wenda_view li div {
+    .call_us_box {
+        display: block;
         width: 100%;
-        height: auto;
+        margin: 25PX auto 0;
         overflow: hidden;
-        padding: 0 10px;
+        text-align: center;
+        font-size: 0PX;
+        background: #158d91;
+
+        a {
+            color: #fff;
+            font-size: 18PX;
+            font-weight: normal;
+        }
+    }
+    .call_us_box>* {
+        height: 12PX;
+        line-height: 12PX;
+        color: #fff;
+        font-size: 14PX;
+        display: inline-block;
         box-sizing: border-box;
+        padding: 0 19PX;
+        font-weight: bold;
+        border-left: solid 1PX #fff;
+        margin: 18PX 0;
     }
-    .wenda_view li div span a {
-        color: #222;
+    .call_us_box>*:nth-of-type(1) {
+        border-left: 0PX;
     }
-    .wenda_view li div span {
-        height: auto;
-        overflow: hidden;
-        line-height: 30px;
-        font-size: 16px;
-        color: #222;
-        border-radius: 10px;
-        padding: 0 10px;
+    .foot_text_box {
+        margin: 20PX auto 0PX;
+        text-align: center;
+        color: #333;
+        font-size: 16PX;
+        line-height: 25PX;
+
+        a {
+            color: #333;
+            font-size: 14PX;
+        }
     }
-    .wenda_view li div {
-        width: 100%;
-        height: auto;
-        overflow: hidden;
-        padding: 0 10px;
+    .foot_text_box_green {
+        color: #40663B;
     }
-    .wenda_view li b {
-        display: block;
-        font-size: 14px;
-        color: #7b838a;
-        line-height: 30px;
-        border-radius: 10px;
-        font-weight: 100;
-        max-height: 90px;
+    .foot_text_box img {
+        display: inline-block;
+        height: 20PX;
+        vertical-align: middle;
     }
-    .wenda_view {
+    .foot_logo_out {
+        position: relative;
+        margin: 0PX auto;
         width: 100%;
-        min-height: 0px;
-        max-height: 38vh;
-        overflow: auto;
-        margin: 0px auto 0;
-        padding-right: 10px;
+        height: 0PX;
     }
-}
-.wenda_style {
-    height: 40px;
-    overflow: hidden;
-    padding: 0 10px;
-    span {
-        transform: rotateZ(0deg) !important;
+    .foot_logo_out * {
+        width: 120PX;
+        display: block;
     }
-}
-
-//PC端 end ---------------------------------------->
-
-//移动端 start ---------------------------------------->
-@media screen and (max-width:800px) {
-    .phone_none {
-        display: none !important;
+    .foot_logo_out>* {
+        position: absolute;
+        top: -166PX;
     }
-
-    .index_foot {
-        width: 92%;
-        margin: 0px auto;
-        overflow: hidden;
+    .foot_logo_out>*:nth-of-type(1) {
+        left: 0PX;
     }
-
-    .foot_img_box {
-        display: block;
-        margin-top: 0px;
+    .foot_logo_out>*:nth-of-type(2) {
+        right: 0PX;
     }
-
-    .foot_img_box a {
+    .foot_last_img_box {
+        margin: 10PX auto 10PX;
+        text-align: center;
         overflow: hidden;
-        width: 30%;
-        margin: 1.3% !important;
-        height: 11vw;
-        float: left;
-    }
-
-    .foot_img_box img {
-        display: block;
         width: 100%;
-        height: 100%;
+        font-size: 0PX;
+        padding-bottom: 10PX;
     }
-
-    .foot_frind_box div * {
-        margin: 0px 10px 10px;
-        font-size: 14px;
+    .foot_last_img_box>* {
+        height: 50PX;
+        width: 120PX;
+        display: inline-block;
+        overflow: hidden;
+        margin-right: 5PX;
     }
-
-    .call_us_box {
-        margin-top: 0px;
-        padding: 4px 0px;
+    .foot_last_img_box img {
+        width: 120PX;
+        height: 50PX;
+        background: #fff;
     }
-
-    .call_us_box>* {
-        border: none;
-        margin: 8px 0px;
-        float: left;
-        padding: 0px 4vw;
+    .foot_text_html_css {
+        line-height: 30PX;
+        font-size: 16PX;
     }
-
-    .foot_logo_out {
-        display: none;
+    .foot_text_html_css :deep(a) {
+        color: #333;
     }
-
+    .foot_color_red {
+        color: red;
+    }
+    .foot_color_red :deep(a) {
+        color: red;
+    }
+    .foot_text_html_css :deep(img) {
+        margin: 0 5PX;
+    }
+    //添加在线客服
     .kefu {
-        left: 0px;
-        bottom: 0px;
+        position: fixed;
+        bottom: 100PX;
+        top: 40%;
+        right: 11PX;
+        width: 64PX !important;
+        z-index: 9999;
+        .kefu_itemKf {
+            background-color: #0099cc;
+            border-radius: 10PX !important;
+            box-shadow: 0 4PX 16PX #0000001a;
+            width: 64PX !important;
+            height: 64PX !important;
+            padding: 8PX !important;
+            text-align: center;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            a {
+                >p {
+                    color: #fff;
+                    font-size: 12PX !important;
+                }
+
+                >img {
+                    width: 30PX !important;
+                    height: 30PX !important;
+                    margin-bottom: 5PX !important;
+                    display: block;
+                    margin: 0 auto;
+                }
+            }
+        }
+        .kefu_itemQQ {
+            background-color: #fff;
+            border-radius: 10PX;
+            box-shadow: 0 4PX 16PX #0000001a;
+            height: 100PX;
+            margin-bottom: 15PX;
+            text-align: center;
+            width: 100PX;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14PX;
+                font-weight: 500;
+                line-height: 16PX;
+            }
+            >img {
+                margin-top: 10PX;
+                width: 60PX;
+                height: 60PX;
+            }
+            &:hover {
+                .kefu_item_content_QQ {
+                    display: block;
+                }
+            }
+        }
+        .kefu_itemPhone {
+            background-color: #fff;
+            border-radius: 10PX;
+            box-shadow: 0 4PX 16PX #0000001a;
+            height: 100PX;
+            margin-bottom: 15PX;
+            text-align: center;
+            width: 100PX;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14PX;
+                font-weight: 500;
+                line-height: 16PX;
+            }
+            >img {
+                margin-top: 10PX;
+                width: 60PX;
+                height: 60PX;
+            }
+            &:hover {
+                .kefu_item_content_phone {
+                    display: block;
+                }
+            }
+        }
+        .kefu_item_content_QQ {
+            position: absolute;
+            top: -100PX;
+            right: 100PX;
+            background: #fff;
+            border-radius: 10PX;
+            display: none;
+            width: 190PX;
+            height: 330PX;
+            background: #fff;
+            box-shadow: 0 4PX 16PX #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20PX;
+            img {
+                margin-bottom: 10PX;
+            }
+            .qqfs {
+                margin-bottom: 20PX;
+                font-size: 14PX;
+                color: #333;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20PX solid transparent;
+                border-bottom: 20PX solid transparent;
+                border-left: 20PX solid #fff;
+                position: absolute;
+                top: 120PX;
+                right: -20PX;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+        .kefu_item_content_phone {
+            position: absolute;
+            top: 0;
+            right: 100PX;
+            background: #fff;
+            border-radius: 10PX;
+            display: none;
+            width: 190PX;
+            height: 80PX;
+            background: #fff;
+            box-shadow: 0 4PX 16PX #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20PX;
+            text-align: left;
+            color: #333;
+            .kefu_item_content_phone_title {
+                margin-bottom: 5PX;
+                font-weight: bold;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20PX solid transparent;
+                border-bottom: 20PX solid transparent;
+                border-left: 20PX solid #fff;
+                position: absolute;
+                top: 20PX;
+                right: -20PX;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+    }
+    .foot_right_float {
+        position: fixed;
+        z-index: 200;
+        left: 2%;
+        bottom: 10PX;
+        a {
+            display: block;
+            margin-bottom: 4PX;
+            border: 1PX solid #dee3eb;
+            width: 220PX;
+            height: 30PX;
+            font-size: 14PX;
+            line-height: 30PX;
+            color: #EE6363;
+            cursor: pointer;
+            background: #fff;
+            text-align: center;
+        }
+    }
+    //在线问答
+    .wenda {
+        width: 300PX !important;
+        height: auto;
+        overflow: hidden;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: #fff;
+        border: 1PX solid #7ab9dd;
+        padding: 10PX !important;
+        box-shadow: 0PX 1PX 8PX #888 !important;
+        z-index: 99999999;
+        box-sizing: border-box;
+        .wenda_tlt {
+            width: 100%;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            overflow: hidden;
+            border-bottom: 2PX solid #ccc !important;
+        }
+        .wenda_tlt h3 {
+            float: left;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            font-size: 22PX !important;
+            color: #0a78d7;
+            a {
+                color: #337ab7;
+                text-decoration: none;
+            }
+        }
+        .wenda_tlt span {
+            float: right;
+            width: 40PX !important;
+            height: 40PX !important;
+            background: url('public/index/jt.png') no-repeat center center;
+            transform: rotateZ(180deg);
+            font-size: 40PX !important;
+            color: #000;
+            cursor: pointer;
+        }
+        .wenda_view li {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            margin: 10PX 0 !important;
+            padding: 10PX 0 !important;
+            border-bottom: 1PX solid #222 !important;
+            background: #f1f1f1;
+            border-radius: 10PX !important;
+        }
+        .wenda_view li div span.new_wen {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #fb4;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0 !important;
+            padding: 0 !important;
+        }
+        .wenda_view li div a.wenda_view_text {
+            font-size: 16PX !important;
+            line-height: 16PX !important;
+            line-height: 30PX !important;
+            color: #333 !important;
+            display: block !important;
+        }
+        .wenda_view li div span.new_da {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #8ac03b;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0;
+            padding: 0 !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+            box-sizing: border-box;
+        }
+        .wenda_view li div span a {
+            color: #222;
+        }
+        .wenda_view li div span {
+            height: auto;
+            overflow: hidden;
+            line-height: 30PX !important;
+            font-size: 16PX !important;
+            color: #222;
+            border-radius: 10PX !important;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li b {
+            display: block;
+            font-size: 14PX !important;
+            color: #7b838a;
+            line-height: 30PX !important;
+            border-radius: 10PX !important;
+            font-weight: 100;
+            max-height: 90PX !important;
+        }
+        .wenda_view {
+            width: 100%;
+            min-height: 0PX !important;
+            max-height: 38VH !important;
+            overflow: auto;
+            margin: 0px auto 0;
+            padding-right: 10PX !important;
+        }
+    }
+    .wenda_style {
+        height: 40PX !important;
+        overflow: hidden;
+        padding: 0 10PX !important;
+        span {
+            transform: rotateZ(0deg) !important;
+        }
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .foot_title {
         width: 100%;
-        height: 66px;
+        overflow: hidden;
+        background: #fff;
+        .foot_title_text {
+            display: block;
+            width: 100PX;
+            height: 40PX;
+            line-height: 40PX;
+            text-align: center;
+            font-size: 18PX;
+            border-bottom: 2px solid #158d91;
+            color: #001996;
+        }
+    }
+    .index_foot {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0 auto;
+    }
+    .index_foot_name_box {
+        margin: 10px auto 0px;
         text-align: center;
-        line-height: 66px;
-        z-index: 1111;
-        position: relative;
+        font-size: 0px;
     }
-
-    .kefu>div {
+    .index_foot_name {
         display: inline-block;
-        margin: 0px 10px !important;
-        height: 55px !important;
-        width: 90px !important;
+        height: 67px;
+        line-height: 67px;
+        color: #f2f9f4;
+        font-size: 51px;
+        font-weight: bold;
+        overflow: hidden;
     }
-
-    .kefu>div a {
+    .index_foot_name:nth-of-type(even) {
+        color: #333;
+        font-size: 32px;
+    }
+    .foot_img_box {
+        overflow: hidden;
         display: block;
-        height: 55px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+        border-top: 1px solid #ccc;
+        background: #f1f1f1;
+        padding: 0 10px 0 10px;
     }
-
-    .kefu>div>img {
+    .foot_img_box a {
+        width: 16.6%;
         display: block;
-        margin: 3px auto 0 !important;
-        width: 33px !important;
-        height: 33px !important;
+        padding: 0 10px;
+        box-sizing: border-box;
+        margin-top: 20px;
     }
-
-    .kefu>div>a>img {
+    .foot_img_box img {
+        float: left;
+        width: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
         display: block;
-        margin: 3px auto 0 !important;
-        width: 33px !important;
-        height: 33px !important;
+        margin: 0 auto;
+        background: #fff;
     }
-
-    .kefu .kefu_item_content_QQ img {
-        margin-bottom: 0px;
+    .foot_img_box>* * {
+        display: block;
+        width: 100%;
+        height: 100%;
     }
-
-    .kefu .kefu_item_content_QQ .qqfs {
-        margin-bottom: 0px;
-        height: 22px;
-        line-height: 22px;
+    .foot_img_box>*:nth-of-type(7n) {
+        margin-right: 0px;
     }
-
-    .kefu .kefu_itemKf a>p {
-        word-break: keep-all;
-        white-space: nowrap;
+    .foot_frind_box {
+        display: block;
+        overflow: hidden;
+        display: flex;
+        border-bottom: solid 3px #158d91;
+        padding: 20px;
+        background: #f1f1f1;
+        a {
+            font-size: 16PX;
+        }
     }
-
-    .kefu .kefu_item_content_QQ {
-        right: -95px;
-        margin-right: 50%;
+    .foot_frind_box div {
+        width: 100%;
         overflow: hidden;
-        top: auto;
-        bottom: 100px;
-        line-height: normal;
     }
-
-    .qqadd:nth-of-type(1) {
-        margin-bottom: 22px;
+    .foot_frind_box div * {
+        float: left;
+        line-height: 22PX;
+        height: 22PX;
+        color: #333;
+        font-size: 16PX;
+        margin: 0 10PX;
     }
-
-    .kefu .kefu_item_content_phone {
-        right: 20px;
-        margin-right: 50%;
+    .call_us_box {
+        display: block;
+        width: 100%;
+        margin: 25px auto 0;
         overflow: hidden;
-        top: auto;
-        bottom: 100px;
-        line-height: normal;
+        text-align: center;
+        font-size: 0px;
+        background: #158d91;
+
+        a {
+            color: #fff;
+            font-size: 18PX;
+            font-weight: normal;
+        }
     }
+    .call_us_box>* {
+        height: 12px;
+        line-height: 12px;
+        color: #fff;
+        font-size: 14px;
+        display: inline-block;
+        box-sizing: border-box;
+        padding: 0 19px;
+        font-weight: bold;
+        border-left: solid 1px #fff;
+        margin: 18px 0;
+    }
+    .call_us_box>*:nth-of-type(1) {
+        border-left: 0px;
+    }
+    .foot_text_box {
+        margin: 20px auto 0px;
+        text-align: center;
+        color: #333;
+        font-size: 16PX;
+        line-height: 25px;
 
+        a {
+            color: #333;
+            font-size: 14px;
+        }
+    }
+    .foot_text_box_green {
+        color: #40663B;
+    }
+    .foot_text_box img {
+        display: inline-block;
+        height: 20px;
+        vertical-align: middle;
+    }
+    .foot_logo_out {
+        position: relative;
+        margin: 0px auto;
+        width: 100%;
+        height: 0px;
+    }
+    .foot_logo_out * {
+        width: 120px;
+        display: block;
+    }
+    .foot_logo_out>* {
+        position: absolute;
+        top: -166px;
+    }
+    .foot_logo_out>*:nth-of-type(1) {
+        left: 0px;
+    }
+    .foot_logo_out>*:nth-of-type(2) {
+        right: 0px;
+    }
     .foot_last_img_box {
-        margin-top: 11px;
-        padding-bottom: 11px;
+        margin: 10px auto 10px;
+        text-align: center;
+        overflow: hidden;
+        width: 100%;
+        font-size: 0px;
+        padding-bottom: 10px;
     }
-
-    .foot_last_img_box a {
-        width: auto;
-        height: 8vw;
-        margin: 0px 1vw;
+    .foot_last_img_box>* {
+        height: 50PX;
+        width: 120PX;
+        display: inline-block;
+        overflow: hidden;
+        margin-right: 5px;
     }
-
     .foot_last_img_box img {
-        width: auto;
+        width: 120PX;
+        height: 50PX;
+        background: #fff;
+    }
+    .foot_text_html_css {
+        line-height: 30px;
+        font-size: 16PX;
+    }
+    .foot_text_html_css :deep(a) {
+        color: #333;
+    }
+    .foot_color_red {
+        color: red;
+    }
+    .foot_color_red :deep(a) {
+        color: red;
+    }
+    .foot_text_html_css :deep(img) {
+        margin: 0 5px;
+    }
+    //添加在线客服
+    .kefu {
+        position: fixed;
+        bottom: 100px;
+        top: 40%;
+        right: 11px;
+        width: 64PX !important;
+        z-index: 9999;
+        .kefu_itemKf {
+            background-color: #0099cc;
+            border-radius: 10PX !important;
+            box-shadow: 0 4px 16px #0000001a;
+            width: 64PX !important;
+            height: 64PX !important;
+            padding: 8PX !important;
+            text-align: center;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            a {
+                >p {
+                    color: #fff;
+                    font-size: 12PX !important;
+                }
+
+                >img {
+                    width: 30PX !important;
+                    height: 30PX !important;
+                    margin-bottom: 5PX !important;
+                    display: block;
+                    margin: 0 auto;
+                }
+            }
+        }
+        .kefu_itemQQ {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 16px #0000001a;
+            height: 100px;
+            margin-bottom: 15px;
+            text-align: center;
+            width: 100px;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 16px;
+            }
+            >img {
+                margin-top: 10px;
+                width: 60px;
+                height: 60px;
+            }
+            &:hover {
+                .kefu_item_content_QQ {
+                    display: block;
+                }
+            }
+        }
+        .kefu_itemPhone {
+            background-color: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 16px #0000001a;
+            height: 100px;
+            margin-bottom: 15px;
+            text-align: center;
+            width: 100px;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 16px;
+            }
+            >img {
+                margin-top: 10px;
+                width: 60px;
+                height: 60px;
+            }
+            &:hover {
+                .kefu_item_content_phone {
+                    display: block;
+                }
+            }
+        }
+        .kefu_item_content_QQ {
+            position: absolute;
+            top: -100px;
+            right: 100px;
+            background: #fff;
+            border-radius: 10px;
+            display: none;
+            width: 190px;
+            height: 330px;
+            background: #fff;
+            box-shadow: 0 4px 16px #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20px;
+            img {
+                margin-bottom: 10px;
+            }
+            .qqfs {
+                margin-bottom: 20px;
+                font-size: 14px;
+                color: #333;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20px solid transparent;
+                border-bottom: 20px solid transparent;
+                border-left: 20px solid #fff;
+                position: absolute;
+                top: 120px;
+                right: -20px;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+        .kefu_item_content_phone {
+            position: absolute;
+            top: 0;
+            right: 100px;
+            background: #fff;
+            border-radius: 10px;
+            display: none;
+            width: 190px;
+            height: 80px;
+            background: #fff;
+            box-shadow: 0 4px 16px #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20px;
+            text-align: left;
+            color: #333;
+            .kefu_item_content_phone_title {
+                margin-bottom: 5px;
+                font-weight: bold;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20px solid transparent;
+                border-bottom: 20px solid transparent;
+                border-left: 20px solid #fff;
+                position: absolute;
+                top: 20px;
+                right: -20px;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+    }
+    .foot_right_float {
+        position: fixed;
+        z-index: 9999;
+        left: 2%;
+        bottom: 10PX;
+        a {
+            display: block;
+            margin-bottom: 4PX;
+            border: 1PX solid #dee3eb;
+            width: 220PX;
+            height: 30PX;
+            font-size: 14PX;
+            line-height: 30PX;
+            color: #EE6363;
+            cursor: pointer;
+            background: #fff;
+            text-align: center;
+        }
+    }
+    //在线问答
+    .wenda {
+        width: 300PX !important;
+        height: auto;
+        overflow: hidden;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: #fff;
+        border: 1px solid #7ab9dd;
+        padding: 10PX !important;
+        box-shadow: 0px 1PX 8PX #888 !important;
+        z-index: 99999999;
+        box-sizing: border-box;
+        .wenda_tlt {
+            width: 100%;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            overflow: hidden;
+            border-bottom: 2PX solid #ccc !important;
+        }
+        .wenda_tlt h3 {
+            float: left;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            font-size: 22PX !important;
+            color: #0a78d7;
+            a {
+                color: #337ab7;
+                text-decoration: none;
+            }
+        }
+        .wenda_tlt span {
+            float: right;
+            width: 40PX !important;
+            height: 40PX !important;
+            background: url('public/index/jt.png') no-repeat center center;
+            transform: rotateZ(180deg);
+            font-size: 40PX !important;
+            color: #000;
+            cursor: pointer;
+        }
+        .wenda_view li {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            margin: 10PX 0 !important;
+            padding: 10PX 0 !important;
+            border-bottom: 1PX solid #222 !important;
+            background: #f1f1f1;
+            border-radius: 10PX !important;
+        }
+        .wenda_view li div span.new_wen {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #fb4;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0 !important;
+            padding: 0 !important;
+        }
+        .wenda_view li div a.wenda_view_text {
+            font-size: 16PX !important;
+            line-height: 16PX !important;
+            line-height: 30PX !important;
+            color: #333 !important;
+            display: block !important;
+        }
+        .wenda_view li div span.new_da {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #8ac03b;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0;
+            padding: 0 !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+            box-sizing: border-box;
+        }
+        .wenda_view li div span a {
+            color: #222;
+        }
+        .wenda_view li div span {
+            height: auto;
+            overflow: hidden;
+            line-height: 30PX !important;
+            font-size: 16PX !important;
+            color: #222;
+            border-radius: 10PX !important;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li b {
+            display: block;
+            font-size: 14PX !important;
+            color: #7b838a;
+            line-height: 30PX !important;
+            border-radius: 10PX !important;
+            font-weight: 100;
+            max-height: 90PX !important;
+        }
+        .wenda_view {
+            width: 100%;
+            min-height: 0PX !important;
+            max-height: 38VH !important;
+            overflow: auto;
+            margin: 0px auto 0;
+            padding-right: 10PX !important;
+        }
+    }
+    .wenda_style {
+        height: 40PX !important;
+        overflow: hidden;
+        padding: 0 10PX !important;
+        span {
+            transform: rotateZ(0deg) !important;
+        }
+    }
+}
+@media screen and (max-width: 800px) {
+    .foot_title {
+        width: 100%;
+        overflow: hidden;
+        background: #fff;
+        .foot_title_text {
+            display: block;
+            width: 200px;
+            height: 40PX;
+            line-height: 40PX;
+            text-align: center;
+            font-size: 18PX;
+            border-bottom: 2PX solid #158d91;
+            color: #001996;
+        }
+    }
+    .index_foot {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 0 auto;
+    }
+    .index_foot_name_box {
+        margin: 10PX auto 0PX;
+        text-align: center;
+        font-size: 0PX;
+    }
+    .index_foot_name {
+        display: inline-block;
+        height: 67PX;
+        line-height: 67PX;
+        color: #f2f9f4;
+        font-size: 51PX;
+        font-weight: bold;
+        overflow: hidden;
+    }
+    .index_foot_name:nth-of-type(even) {
+        color: #333;
+        font-size: 32PX;
+    }
+    .foot_img_box {
+        overflow: hidden;
+        display: block;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-start;
+        border-top: 1PX solid #ccc;
+        background: #f1f1f1;
+        padding: 0 10PX 0 10PX;
+    }
+    .foot_img_box a {
+        width: 50%;
+        display: block;
+        padding: 0 10PX;
+        box-sizing: border-box;
+        margin-top: 20PX;
+    }
+    .foot_img_box img {
+        float: left;
+        width: 100%;
+        height: 57PX;
+        overflow: hidden;
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        background: #fff;
+    }
+    .foot_img_box>* * {
+        display: block;
+        width: 100%;
         height: 100%;
     }
-
-    .foot_text_box>p {
-        margin-top: 2px;
+    .foot_img_box>*:nth-of-type(7n) {
+        margin-right: 0PX;
     }
-
     .foot_frind_box {
         display: block;
-    }
+        overflow: hidden;
+        display: flex;
+        border-bottom: solid 3PX #158d91;
+        padding: 20PX;
+        background: #f1f1f1;
 
-    .foot_frind_box span {
-        margin: 0px 0px 10px 2%;
+        a {
+            font-size: 16PX;
+        }
+    }
+    .foot_frind_box div {
+        width: 100%;
+        overflow: hidden;
+    }
+    .foot_frind_box div * {
+        float: left;
+        line-height: 22PX;
+        height: 22PX;
+        color: #333;
+        font-size: 16PX;
+        margin: 0 10PX;
+    }
+    .call_us_box {
         display: block;
-        font-size: 14px;
+        width: 100%;
+        margin: 25PX auto 0;
+        overflow: hidden;
+        text-align: center;
+        background: #158d91;
+        display: flex;
+        flex-wrap: wrap;
+        a {
+            color: #fff;
+            font-size: 16PX;
+            font-weight: normal;
+        }
     }
-
     .call_us_box>* {
-        font-size: 14px;
+        height: 12PX;
+        line-height: 12PX;
+        color: #fff;
+        display: inline-block;
+        box-sizing: border-box;
+        padding: 0 19PX;
+        font-weight: bold;
+        //border-left: solid 1PX #fff;
+        margin: 18PX 0;
+        width: 33%;
+        font-size: 12px;
     }
-}
+    .call_us_box>*:nth-of-type(1) {
+        border-left: 0PX;
+    }
+    .foot_text_box {
+        margin: 20PX auto 0PX;
+        text-align: center;
+        color: #333;
+        font-size: 16PX;
+        line-height: 25PX;
 
-//移动端 end ----------------------------------------></style>
+        a {
+            color: #333;
+            font-size: 14PX;
+        }
+    }
+    .foot_text_box_green {
+        color: #40663B;
+    }
+    .foot_text_box img {
+        display: inline-block;
+        height: 20PX;
+        vertical-align: middle;
+    }
+    .foot_logo_out {
+        position: relative;
+        margin: 0PX auto;
+        width: 100%;
+        height: 0PX;
+    }
+    .foot_logo_out * {
+        width: 120PX;
+        display: block;
+    }
+    .foot_logo_out>* {
+        position: absolute;
+        top: -166PX;
+    }
+    .foot_logo_out>*:nth-of-type(1) {
+        left: 0PX;
+    }
+    .foot_logo_out>*:nth-of-type(2) {
+        right: 0PX;
+    }
+    .foot_last_img_box {
+        margin: 10PX auto 10PX;
+        text-align: center;
+        overflow: hidden;
+        width: 100%;
+        font-size: 0PX;
+        padding-bottom: 10PX;
+    }
+    .foot_last_img_box>* {
+        height: 50PX;
+        width: 130PX;
+        margin-bottom: 10PX;
+        display: inline-block;
+        overflow: hidden;
+        margin-right: 5PX;
+        text-align: center;
+    }
+    .foot_last_img_box img {
+        width: 120PX;
+        height: 50PX;
+        background: #fff;
+    }
+    .foot_text_html_css {
+        line-height: 30PX;
+        font-size: 16PX;
+    }
+    .foot_text_html_css :deep(a) {
+        color: #333;
+    }
+    .foot_color_red {
+        color: red;
+    }
+    .foot_color_red :deep(a) {
+        color: red;
+    }
+    .foot_text_html_css :deep(img) {
+        margin: 0 5PX;
+    }
+    //添加在线客服
+    .kefu {
+        position: fixed;
+        bottom: 100PX;
+        top: 40%;
+        right: 11PX;
+        width: 64PX !important;
+        z-index: 9999;
+        .kefu_itemKf {
+            background-color: #0099cc;
+            border-radius: 10PX !important;
+            box-shadow: 0 4PX 16PX #0000001a;
+            width: 64PX !important;
+            height: 64PX !important;
+            padding: 8PX !important;
+            text-align: center;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            a {
+                >p {
+                    color: #fff;
+                    font-size: 12PX !important;
+                }
+
+                >img {
+                    width: 30PX !important;
+                    height: 30PX !important;
+                    margin-bottom: 5PX !important;
+                    display: block;
+                    margin: 0 auto;
+                }
+            }
+        }
+        .kefu_itemQQ {
+            background-color: #fff;
+            border-radius: 10PX;
+            box-shadow: 0 4PX 16PX #0000001a;
+            height: 100PX;
+            margin-bottom: 15PX;
+            text-align: center;
+            width: 100PX;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14PX;
+                font-weight: 500;
+                line-height: 16PX;
+            }
+            >img {
+                margin-top: 10PX;
+                width: 60PX;
+                height: 60PX;
+            }
+            &:hover {
+                .kefu_item_content_QQ {
+                    display: block;
+                }
+            }
+        }
+        .kefu_itemPhone {
+            background-color: #fff;
+            border-radius: 10PX;
+            box-shadow: 0 4PX 16PX #0000001a;
+            height: 100PX;
+            margin-bottom: 15PX;
+            text-align: center;
+            width: 100PX;
+            box-sizing: border-box;
+            position: relative;
+            cursor: pointer;
+            >p {
+                color: #666;
+                font-size: 14PX;
+                font-weight: 500;
+                line-height: 16PX;
+            }
+            >img {
+                margin-top: 10PX;
+                width: 60PX;
+                height: 60PX;
+            }
+            &:hover {
+                .kefu_item_content_phone {
+                    display: block;
+                }
+            }
+        }
+        .kefu_item_content_QQ {
+            position: absolute;
+            top: -100PX;
+            right: 100PX;
+            background: #fff;
+            border-radius: 10PX;
+            display: none;
+            width: 190PX;
+            height: 330PX;
+            background: #fff;
+            box-shadow: 0 4PX 16PX #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20PX;
+            img {
+                margin-bottom: 10PX;
+            }
+            .qqfs {
+                margin-bottom: 20PX;
+                font-size: 14PX;
+                color: #333;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20PX solid transparent;
+                border-bottom: 20PX solid transparent;
+                border-left: 20PX solid #fff;
+                position: absolute;
+                top: 120PX;
+                right: -20PX;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+        .kefu_item_content_phone {
+            position: absolute;
+            top: 0;
+            right: 100PX;
+            background: #fff;
+            border-radius: 10PX;
+            display: none;
+            width: 190PX;
+            height: 80PX;
+            background: #fff;
+            box-shadow: 0 4PX 16PX #0000001a;
+            z-index: 99;
+            box-sizing: border-box;
+            padding: 20PX;
+            text-align: left;
+            color: #333;
+            .kefu_item_content_phone_title {
+                margin-bottom: 5PX;
+                font-weight: bold;
+            }
+            .arrow {
+                width: 0;
+                height: 0;
+                width: 0;
+                border-top: 20PX solid transparent;
+                border-bottom: 20PX solid transparent;
+                border-left: 20PX solid #fff;
+                position: absolute;
+                top: 20PX;
+                right: -20PX;
+                transform: translateX(-50%);
+                z-index: 100;
+            }
+        }
+    }
+    .foot_right_float {
+        position: fixed;
+        z-index: 200;
+        left: 2%;
+        bottom: 10PX;
+        display: none;
+        a {
+            display: block;
+            margin-bottom: 4PX;
+            border: 1PX solid #dee3eb;
+            width: 220PX;
+            height: 30PX;
+            font-size: 14PX;
+            line-height: 30PX;
+            color: #EE6363;
+            cursor: pointer;
+            background: #fff;
+            text-align: center;
+        }
+    }
+    //在线问答
+    .wenda {
+        width: 300PX !important;
+        height: auto;
+        overflow: hidden;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        background: #fff;
+        border: 1PX solid #7ab9dd;
+        padding: 10PX !important;
+        box-shadow: 0PX 1PX 8PX #888 !important;
+        z-index: 99999999;
+        box-sizing: border-box;
+        display: none;
+        .wenda_tlt {
+            width: 100%;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            overflow: hidden;
+            border-bottom: 2PX solid #ccc !important;
+        }
+        .wenda_tlt h3 {
+            float: left;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            font-size: 22PX !important;
+            color: #0a78d7;
+            a {
+                color: #337ab7;
+                text-decoration: none;
+            }
+        }
+        .wenda_tlt span {
+            float: right;
+            width: 40PX !important;
+            height: 40PX !important;
+            background: url('public/index/jt.png') no-repeat center center;
+            transform: rotateZ(180deg);
+            font-size: 40PX !important;
+            color: #000;
+            cursor: pointer;
+        }
+        .wenda_view li {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            margin: 10PX 0 !important;
+            padding: 10PX 0 !important;
+            border-bottom: 1PX solid #222 !important;
+            background: #f1f1f1;
+            border-radius: 10PX !important;
+        }
+        .wenda_view li div span.new_wen {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #fb4;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0 !important;
+            padding: 0 !important;
+        }
+        .wenda_view li div a.wenda_view_text {
+            font-size: 16PX !important;
+            line-height: 16PX !important;
+            line-height: 30PX !important;
+            color: #333 !important;
+            display: block !important;
+        }
+        .wenda_view li div span.new_da {
+            text-align: center;
+            line-height: 22PX !important;
+            float: left;
+            width: 22PX !important;
+            height: 22PX !important;
+            font-size: 20PX !important;
+            color: #fff;
+            background: #8ac03b;
+            border-radius: 5PX !important;
+            margin: 3PX 5PX 3PX 0;
+            padding: 0 !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+            box-sizing: border-box;
+        }
+        .wenda_view li div span a {
+            color: #222;
+        }
+        .wenda_view li div span {
+            height: auto;
+            overflow: hidden;
+            line-height: 30PX !important;
+            font-size: 16PX !important;
+            color: #222;
+            border-radius: 10PX !important;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li div {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            padding: 0 10PX !important;
+        }
+        .wenda_view li b {
+            display: block;
+            font-size: 14PX !important;
+            color: #7b838a;
+            line-height: 30PX !important;
+            border-radius: 10PX !important;
+            font-weight: 100;
+            max-height: 90PX !important;
+        }
+        .wenda_view {
+            width: 100%;
+            min-height: 0PX !important;
+            max-height: 38VH !important;
+            overflow: auto;
+            margin: 0px auto 0;
+            padding-right: 10PX !important;
+        }
+    }
+    .wenda_style {
+        height: 40PX !important;
+        overflow: hidden;
+        padding: 0 10PX !important;
+        span {
+            transform: rotateZ(0deg) !important;
+        }
+    }
+}
+//自适应 end ---------------------------------------->
+</style>

components/home/pageHead.vue

@@ -415,455 +415,306 @@ const togglePanel = () => {
 </script>
 
 <style lang="less" scoped>
-//PC端 start ---------------------------------------->
-.headerContainer {
-    width: 100%;
-}
-.headerBox {
-    width: 100%;
-    height: 40px;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, .6);
-    .headerMain {
+//自适应 start ---------------------------------------->
+//大于1400px
+@media screen and (min-width: 1401px) {
+    .headerContainer {
+        width: 100%;
+    }
+    .headerBox {
+        width: 100%;
+        height: 40PX !important;
+        margin-bottom: 20PX !important;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        width: 1400px;
-        .headerBox_left {
-            font-size: 18px;
-            color:#0f50d5;
-        }
-        .headerBox_right {
+        justify-content: center;
+        background: rgba(255, 255, 255, .6);
+        .headerMain {
             display: flex;
             align-items: center;
-            justify-content: flex-end;
-            a {
-                font-size: 18px;
+            justify-content: space-between;
+            width: 1400PX !important;
+            .headerBox_left {
+                font-size: 18PX !important;
                 color:#0f50d5;
-                margin-left: 6px;
             }
-            span {
-                margin-left: 6px;
+            .headerBox_right {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                a {
+                    font-size: 18PX !important;
+                    color:#0f50d5;
+                    margin-left: 6PX !important;
+                }
+                span {
+                    font-size: 14PX !important;
+                    margin-left: 6PX !important;
+                }
             }
         }
     }
-}
-.logoBox {
-    width: 1300px;
-    height: 190px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .logoBox_left {
-        width: 180px;
-        img {
-            width: 180px;
-            height: 145px;
-            margin-top: 40px;
-        }
-    }
-    .logoBox_right {
-        width: 1000px;
-        height: 190px;
-        .logoBox_right_top {
-            text-align: right;
-            a {
-                font-size: 22px;
-                color: #0828bb;
-                font-weight: bold;
-                padding-left: 2%;
-                -webkit-text-stroke: 1px #FFF;
+    .logoBox {
+        width: 1300PX !important;
+        height: 190PX !important;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .logoBox_left {
+            width: 180PX !important;
+            img {
+                width: 180PX !important;
+                height: 145PX !important;
+                margin-top: 40PX !important;
             }
         }
-        .logoBox_right_center {
-            h2 {
-                width: 100%;
-                height: 120px;
-                line-height: 120px;
+        .logoBox_right {
+            width: 1000PX !important;
+            height: 215PX !important;
+            .logoBox_right_top {
+                text-align: right;
+                a {
+                    font-size: 22PX !important;
+                    color: #0828bb;
+                    font-weight: bold;
+                    padding-left: 2%;
+                    -webkit-text-stroke: 1PX #FFF !important;
+                }
             }
-            a {
-                font-size: 81px;
-                color: #0828bb;
-                font-weight: bold;
-                -webkit-text-stroke: 3px #FFF;
+            .logoBox_right_center {
+                h2 {
+                    width: 100%;
+                    height: 120PX !important;
+                    line-height: 120PX !important;
+                }
+                a {
+                    font-size: 81PX !important;
+                    color: #0828bb;
+                    font-weight: bold;
+                    -webkit-text-stroke: 3PX #FFF !important;
+                }
+            }
+            .logoBox_right_bottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                h4 {
+                    height: 40PX !important;
+                    line-height: 40PX !important;
+                    a {
+                        font-size: 22PX !important;
+                        color: #0828bb;
+                        font-weight: bold;
+                        -webkit-text-stroke: .5px #FFF !important;
+                    }
+                }
             }
         }
-        .logoBox_right_bottom {
+    }
+}
+
+//大于800px小于等于1400px
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .headerContainer {
+        width: 100%;
+    }
+    .headerBox {
+        width: 100%;
+        //height: 40px;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, .6);
+        box-sizing: border-box;
+        padding: 10px;
+        .headerMain {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            h4 {
-                height: 40px;
-                line-height: 40px;
+            width: 100%;
+            .headerBox_left {
+                font-size: 18PX;
+                color:#0f50d5;
+            }
+            .headerBox_right {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
                 a {
-                    font-size: 22px;
+                    font-size: 18PX;
+                    color:#0f50d5;
+                    margin-left: 6px;
+                }
+                span {
+                    font-size: 14PX;
+                    margin-left: 6px;
+                }
+            }
+        }
+    }
+    .logoBox {
+        width: 100%;
+        height: 190PX;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0 20px;
+        .logoBox_left {
+            width: 20%;
+            img {
+                width: 80%;
+                height: 100%;
+                //margin-top: 40px;
+            }
+        }
+        .logoBox_right {
+            width: 80%;
+            //height: 190px;
+            .logoBox_right_top {
+                text-align: right;
+                a {
+                    font-size: 14px;
                     color: #0828bb;
                     font-weight: bold;
-                    -webkit-text-stroke: .5px #FFF;
+                    padding-left: 2%;
+                    -webkit-text-stroke: 1PX #FFF;
+                }
+            }
+            .logoBox_right_center {
+                h2 {
+                    width: 100%;
+                    height: 60px;
+                    line-height: 60px;
+                    white-space: nowrap;
+                    text-align: right;
+                    overflow: hidden;
+                }
+                a {
+                    font-size: 40px;
+                    color: #0828bb;
+                    font-weight: bold;
+                    -webkit-text-stroke: 3PX #FFF;
+                }
+            }
+            .logoBox_right_bottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                h4 {
+                    height: 35px;
+                    line-height: 35px;
+                    a {
+                        font-size: 18px;
+                        color: #0828bb;
+                        font-weight: bold;
+                        -webkit-text-stroke: .5px #FFF;
+                    }
                 }
             }
         }
     }
 }
-//PC端 end ---------------------------------------->
-
-// .userInfo11 {
-//     width: 100px;
-//     height: 80px;
-//     background-color: #fff;
-//     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-//     border-radius: 3px;
-//     position: absolute;
-//     top: 40px;
-//     right: 35px;
-//     font-size: 14px;
-//     z-index: 999;
-//     li {
-//         height: 40px;
-//         line-height: 40px;
-//         color: #333333;
-//         padding-left: 10px;
-//     }
-//     >li:hover {
-//         color: #028E21;
-//     }
-// }
-// .tips {
-//     padding: 20px 0;
-//     text-align: center;
-//     font-size: 20px;
-//     color: #40663B;
-//     font-weight: bold;
-//     img {
-//         width: 78px;
-//         height: 78px;
-//         vertical-align: middle;
-//         margin-right: 20px;
-//         p {
-//             line-height: 30px;
-//         }
-//     }
-//     p {
-//         line-height: 40px;
-//     }
-//     >p:first-child {
-//         margin-bottom: 30px;
-//     }
-// }
-// /* 页面头部 */
-// header {
-//     width: 100%;
-//     // height: 201px;
-//     font-size: 12px;
-//     font-family: PingFang SC-Regular;
-//     color: #666666;
-//     background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/headtopbg.png") repeat-x;
-// }
-// .headerNav {
-//     width: 100%;
-//     height: 33px;
-//     line-height: 33px;
-// }
-// .headerNav .left>span {
-//     margin-right: 20px;
-//     a {
-//         color: #666666;
-//     }
-// }
-// .headerNav .right {
-//     display: flex;
-//     margin-right: 10px;
-//     position: relative;
-//     button {
-//         font-size: 12px;
-//         color: #666666;
-//         border: none;
-//         background: none;
-//         cursor: pointer;
-//     }
-//     .login {
-//         width: 36px;
-//         height: 19px;
-//         color: #fff;
-//         border-radius: 4px;
-//         background-color: #028E21;
-//         margin-right: 15px;
-//         cursor: pointer;
-//     }
-//     .menu,.right-top-menu {
-//         display: flex;
-//     }
-//     .reg {
-//         margin-right: 20px;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         height: 33px;
-//         img {
-//             margin-right: 5px;
-//         }
-//     }
-// }
-// .headerNav .right {
-//     float: right;
-//     font-size: 12px;
-//     span {
-//         margin-right: 20px;
-//     }
-//     .home,.collection {
-//         display: inline-block;
-//         width: 16px;
-//         height: 16px;
-//         vertical-align: -3px;
-//     }
-//     .home {
-//         background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
-//     }
-//     .collection {
-//         background-image: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
-//     }
-//     .exit {
-//         line-height: 30px;
-//     }
-// }
-// // 头部logo
-// .headerLogo {
-//     height: 145px;
-//     position: relative;
-//     .titlead {
-//         position: absolute;
-//         bottom: 5px;
-//         right: 0;
-//         width: 830px;
-//         height: 120px;
-//         overflow: hidden;
-//         a {
-//             display: block;
-//             height: 110px;
-//             overflow: hidden;
-//         }
-//         img {
-//             width: 100%;
-//             height: 110px;
-//         }
-//     }
-//     .inner {
-//         position: relative;
-//         height: 145px;
-//     }
-//     .inner>img {
-//         margin-top: 22px;
-//         cursor: pointer;
-//     }
-//     // 搜索框部分
-//     .search {
-//         float: left;
-//         width: 440px;
-//         height: 40px;
-//         background-color: #fff;
-//         line-height: 40px;
-//         margin-left: 39px;
-//         margin: 71px 39px 48px;
-//         position: relative;
-//         em {
-//             display: inline-block;
-//             width: 30px;
-//             height: 30px;
-//             background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png") no-repeat;
-//             position: absolute;
-//             top: 5px;
-//             left: 15px;
-//         }
-//         input {
-//             float: left;
-//             width: 351px;
-//             height: 40px;
-//             border: none;
-//             outline: none;
-//             padding-left: 65px;
-//             box-sizing: border-box;
-//             border: 1px solid #028E21;
-//             border-right: none;
-//             border-radius: 4px 0px 0px 4px;
-//         }
-//         button {
-//             float: right;
-//             width: 89px;
-//             height: 40px;
-//             background-color: #028E21;
-//             border-radius: 0px 4px 4px 0px;
-//             border: none;
-//             font-size: 14px;
-//             color: #fff;
-//             font-family: PingFang SC, PingFang SC;
-//             font-weight: 500;
-//         }
-//     }
-//     // 右侧小图标
-//     .serve {
-//         float: right;
-//         height: 60px;
-//         margin-top: 60px;
-//         margin-right: 60px;
-//         >li {
-//             float: left;
-//             height: 64px;
-//             margin-left: 48px;
-//         }
-//         >li>a {
-//             display: inline-block;
-//             height: 64px;
-//         }
-//         >li img {
-//             width: 29px;
-//             height: 29px;
-//             padding: 8px 14px;
-//         }
-//         >li p {
-//             height: 28px;
-//             text-align: center;
-//             color: #666666;
-//         }
-//     }
-// }
-
-//移动端 start ---------------------------------------->
-@media screen and (min-width:801px){
-    .logo_right_box{display:none;}
-    .phone_head_btn{display:none;}
-    .menu_phone{display:none;}
-    .pc_none{display:none;}
-}
-@media screen and (max-width:800px){/*ipad_phone*/
-    .headerNav .inner .left{width:100%;}
-    .phone_head_btn{display:block;float:right;width:26px;height:26px; margin-top:4px;
-        background:url(../../public/image/2.png) no-repeat 0 0px;background-size:100% 100%;
-    }
-    .headerNav{overflow:hidden;height:auto; padding:5px 0px;background:#f7f7f7;}
-    .headerNav .left > span{margin-right:0px;}
-    .headerNav .left > span:nth-of-type(1){margin-right:8px;}
-    .headerLogo{
-        height:auto;
-        margin-top:8px;
-    }
-    .headerLogo .left{
-        float:none;
-    }
-    .headerLogo .inner{
-        display: flex;margin:4px auto; height:auto;
-        justify-content: space-between;
+//小于等于800px
+@media screen and (max-width: 800px) {
+    .headerContainer {
+        width: 100%;
+        margin-top: 80px;
     }
-    .headerLogo .titlead{
-        position:relative;bottom:auto;right:auto;height:auto;
-        width:100%;
+    .headerBox {
+        width: 100%;
+        height: 40px;
+        margin-bottom: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
+        background: rgba(255, 255, 255, .6);
+        display: none;
+        .headerMain {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            .headerBox_left {
+                font-size: 18px;
+                color:#0f50d5;
+            }
+            .headerBox_right {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                a {
+                    font-size: 18px;
+                    color:#0f50d5;
+                    margin-left: 6px;
+                }
+                span {
+                    margin-left: 6px;
+                }
+            }
+        }
     }
-    .headerLogo .titlead img{
-        height:100%;
-    }
-    .headerLogo .titlead a{
-        height:100%;
-    }
-    .headerLogo .inner>img{ 
-        height:40px;
-        margin:0px 10px 0px 0px;
-    }
-    .headerNav .right{
-        margin-right:0px;
-        width:100%;
-        display:block;
-        text-align:center;
-    }                    
-    .headerNav .right .menu{
-        display:block;
-        width:100%;
-        word-break: keep-all; 
-        white-space: nowrap;  
-    }
-    .headerNav .right .menu .reg:nth-of-type(1){
-        float:left;
-        margin:0px!important;
-    }
-    .headerNav .right .menu .reg:nth-last-of-type(1){
-        float:right;
-        margin:0px!important;
-    }
-    .headerNav .right .reg{
-        margin:0px 4.2vw!important;width:auto;font-size:3vw;
-        display:inline-block!important;line-height:33px;
-    } 
-    .headerLogo .titlead {
-        display:none;
-    }
-    .logo_right_box{ 
-        .logo_right_btn{
-            float:left; 
-            width:10vw;
-            margin-left:7vw;
-            text-align:center;
-        }    
-        .logo_right_btn:nth-of-type(1){
-            margin-left:0px;
-        }    
-        .logo_right_btn_img{
-            width:6vw; 
-            display:inline-block; 
-        }    
-        .logo_right_btn_text{
-            display:block;
-            width:100%;
-            height:16px;
-            color:#333;
-            text-align:center;
-            line-height:16px;
-            font-size:3vw;
-        }    
-    }   
-    .tips{
-        font-size:16px;
-    }
-    .tips img{
-        width:60px;
-        height:60px;
-        margin-right:7px;
-    }
-    .tips p{
-        line-height:28px;
-    }
-    .tips > p:first-child(1){
-        margin-bottom:13px;
-    }
-    .dialog_load_btn{
-        line-height:33px;
-        width:111px;
-        margin:40px auto 0;
-        border-radius:4px; 
-        height:33px;text-align:center;
-        background: #40663B;
-        font-size: 14px;
-        color: #fff; 
-    }
-    .inner .right{
-        display:none!important;
-    }
-    .phone_none{display:none;}
-}
-.el-overlay{ 
-    width:100%;
-    .el-overlay-dialog{
-        width:90%;
-        left:5%;
-    }
-    .el-dialog{
-        width:100%;
+    .logoBox {
+        width: 100%;
+        padding: 20PX 10PX;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        .logoBox_left {
+            width: 20%;
+            img {
+                width: 100%;
+                display: block;
+                height: auto;
+            }
+        }
+        .logoBox_right {
+            width: 78%;
+            .logoBox_right_top {
+                display: none;
+                text-align: right;
+                a {
+                    font-size: 22px;
+                    color: #0828bb;
+                    font-weight: bold;
+                    padding-left: 2%;
+                    -webkit-text-stroke: 1px #FFF;
+                }
+            }
+            .logoBox_right_center {
+                h2 {
+                    width: 100%;
+                    height: 80px;
+                    line-height: 80px;
+                }
+                a {
+                    font-size: 45px;
+                    color: #0828bb;
+                    font-weight: bold;
+                    -webkit-text-stroke: 1px #FFF;
+                }
+            }
+            .logoBox_right_bottom {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                h4 {
+                    a {
+                        font-size: 22px;
+                        color: #0828bb;
+                        font-weight: bold;
+                        -webkit-text-stroke: .1px #FFF;
+                    }
+                }
+            }
+        }
     }
 }
-//移动端 end ---------------------------------------->
+//自适应 end ---------------------------------------->
 </style>
 

components/home/pageNavigation.vue

@@ -1,212 +1,143 @@
 <template>
     <div class="headerNavBox">
-        <NuxtLink to="http://fzxfb.org.cn/list-renyuanchaxun.html">人员查询</NuxtLink>
-        <NuxtLink to="http://fzxfb.org.cn/list-cheliangchaxun.html">车辆查询</NuxtLink>
-        <NuxtLink to="http://fzxfb.org.cn/list-dishizhongxin.html">地市中心</NuxtLink>
-        <NuxtLink to="http://fzxfb.org.cn/list-diaoyanxuanti.html">调研选题</NuxtLink>
-        <NuxtLink to="http://fzxfb.org.cn/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink>
+        <NuxtLink to="/list-renyuanchaxun.html">人员查询</NuxtLink>
+        <NuxtLink to="/list-cheliangchaxun.html">车辆查询</NuxtLink>
+        <NuxtLink to="/list-dishizhongxin.html">地市中心</NuxtLink>
+        <NuxtLink to="/list-diaoyanxuanti.html">调研选题</NuxtLink>
+        <NuxtLink to="/list-jieshaoxinchaxun.html">介绍信查询</NuxtLink>
     </div>
-    <div class="headerNavMainBox">
-        <div class="headerNavTop">
-            <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
-            <ul>
-                <li><NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink></li>
-                <li><NuxtLink to="/">政策法规</NuxtLink></li>
-                <li><NuxtLink to="/">各地动态</NuxtLink></li>
-                <li><NuxtLink to="/">廉政时讯</NuxtLink></li>
-                <li><NuxtLink to="/">政策解读</NuxtLink></li>
-                <li><NuxtLink to="/">百家争鸣</NuxtLink></li>
-                <li><NuxtLink to="/">经济与法</NuxtLink></li>
-                <li><NuxtLink to="/">法治建设</NuxtLink></li>
-                <li><NuxtLink to="/">法纪通报</NuxtLink></li>
-                <li><NuxtLink to="/">社会调研</NuxtLink></li>
-                <li><NuxtLink to="/">法制文化</NuxtLink></li>
-                <li><NuxtLink to="/">特别关注</NuxtLink></li>
-                <li><NuxtLink to="/">媒体视点</NuxtLink></li>
-                <li><NuxtLink to="/">重点播报</NuxtLink></li>
-                <li><NuxtLink to="/">今日说法</NuxtLink></li>
-                <li><NuxtLink to="/">法制技术</NuxtLink></li>
-                <li><NuxtLink to="/">执法在线</NuxtLink></li>
-                <li><NuxtLink to="/">举报投诉</NuxtLink></li>
-                <li><NuxtLink to="/">法制观察</NuxtLink></li>
-                <li><NuxtLink to="/">典型案例</NuxtLink></li>
-                <li><NuxtLink to="/">百姓话题</NuxtLink></li>
-                <li><NuxtLink to="/">法制活动</NuxtLink></li>
-            </ul>
-        </div>
-        <div class="headerNavCenter">
-            <div class="first"><NuxtLink to="/">互动</NuxtLink></div>
-            <ul>
-                <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink></li>
-                <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink></li>
-                <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink></li>
-                <li><NuxtLink to="/">志愿服务</NuxtLink></li>
-                <li><NuxtLink to="/">公益活动</NuxtLink></li>
-                <li><NuxtLink to="/">在线服务</NuxtLink></li>
-                <li><NuxtLink to="/">网民留言</NuxtLink></li>
-                <li><NuxtLink to="/">法制知识</NuxtLink></li>
-                <li><NuxtLink to="/">法律咨询</NuxtLink></li>
-                <li><NuxtLink to="/">通知公告</NuxtLink></li>
-                <li><NuxtLink to="/">官网导航</NuxtLink></li>
-            </ul>
-        </div>
-        <div class="headerNavBottom">
-            <div class="first"><NuxtLink to="/">查询</NuxtLink></div>
-            <ul>
-                <li><NuxtLink to="/">人员查询</NuxtLink></li>
-                <li><NuxtLink to="/">车辆查询</NuxtLink></li>
-                <li><NuxtLink to="/">地市中心</NuxtLink></li>
-                <li><NuxtLink to="/">调研选题</NuxtLink></li>
-                <li><NuxtLink to="/">介绍信查询</NuxtLink></li>
-                <li><NuxtLink to="/">核心网站</NuxtLink></li>
-                <li><NuxtLink to="/">政务百网</NuxtLink></li>
-                <li><NuxtLink to="/">行业百网</NuxtLink></li>
-                <li><NuxtLink to="/">规章制度</NuxtLink></li>
-                <li><NuxtLink to="/">申请加入</NuxtLink></li>
-                <li><NuxtLink to="/">项目官网</NuxtLink></li>
-            </ul>
-        </div>
-    </div>
-    <!-- <div class="navigate">
-        <div class="partOne">
-            <div class="inner">
-                <div class="navLeft">
-                    <div class="navIndex phone_none">
-                        <NuxtLink :to="'/'"> 首页</NuxtLink>
-                    </div> 
-                    <div class="navIndex pc_none">
-                        <NuxtLink 
-                            to="/" title="首页" 
-                            class="phone_nav_index"
-                            :class="{ 'phone_nav_index_only': $route.path === '/' }"
-                            >
-                            首页
-                        </NuxtLink>
-                    </div> 
-                    <div class="navClass">
-                        <div>主题资讯</div>
-                        <div>互动资讯</div>
-                    </div>
-                </div>
-                <ul class="navigationOne">
-                    <div class="nav_in clearfix phone_none">
-                        <li v-for="(item, index) in navigation1" :key="index">
-                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
-                                :target="item.is_url == 1 ? '_blank' : '_self'">
-                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
-                                <span v-else>{{ item.alias }}</span>
-                            </NuxtLink>
-                        </li>
-                    </div>
-                    <div class="nav_in clearfix pc_none">
-                        <li v-for="(item, index) in navigation1" :key="index">
-                            <NuxtLink :href="getLinkPath(item)" :title="item.alias" v-if="index <= 23"
-                                :target="item.is_url == 1 ? '_blank' : '_self'">
-                                <span class="active" v-if="item.category_id == routeId">{{ item.alias }}</span>
-                                <span v-else>{{ item.alias }}</span>
-                            </NuxtLink>
-                        </li>
-                    </div>
+    <div class="headerNav-pc">
+        <div class="headerNavMainBox">
+            <div class="headerNavTop">
+                <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
+                <ul>
+                    <li><NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink></li>
+                    <li><NuxtLink to="/sannongzixunzhifuxinxi/list-1.html">政策法规</NuxtLink></li>
+                    <li><NuxtLink to="/">各地动态</NuxtLink></li>
+                    <li><NuxtLink to="/">廉政时讯</NuxtLink></li>
+                    <li><NuxtLink to="/">政策解读</NuxtLink></li>
+                    <li><NuxtLink to="/">百家争鸣</NuxtLink></li>
+                    <li><NuxtLink to="/">经济与法</NuxtLink></li>
+                    <li><NuxtLink to="/">法治建设</NuxtLink></li>
+                    <li><NuxtLink to="/">法纪通报</NuxtLink></li>
+                    <li><NuxtLink to="/">社会调研</NuxtLink></li>
+                    <li><NuxtLink to="/">法制文化</NuxtLink></li>
+                    <li><NuxtLink to="/">特别关注</NuxtLink></li>
+                    <li><NuxtLink to="/">媒体视点</NuxtLink></li>
+                    <li><NuxtLink to="/">重点播报</NuxtLink></li>
+                    <li><NuxtLink to="/">今日说法</NuxtLink></li>
+                    <li><NuxtLink to="/">法制技术</NuxtLink></li>
+                    <li><NuxtLink to="/">执法在线</NuxtLink></li>
+                    <li><NuxtLink to="/">举报投诉</NuxtLink></li>
+                    <li><NuxtLink to="/">法制观察</NuxtLink></li>
+                    <li><NuxtLink to="/">典型案例</NuxtLink></li>
+                    <li><NuxtLink to="/">百姓话题</NuxtLink></li>
+                    <li><NuxtLink to="/">法制活动</NuxtLink></li>
                 </ul>
             </div>
-        </div>
-        <div class="cityBox">
-            <div class="cityMain">
-                <div class="cityTitle">地方频道</div>
-                <ul class="cityList" v-if="provinceList.length > 0">
-                    <li v-for="item in provinceList">
-                        <NuxtLink :to="{ path: `/search/${item.id}` }">
-                            {{ item.abbreviation }}
-                        </NuxtLink>
-                    </li>
+            <div class="headerNavCenter">
+                <div class="first"><NuxtLink to="/">互动</NuxtLink></div>
+                <ul>
+                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink></li>
+                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink></li>
+                    <li><NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink></li>
+                    <li><NuxtLink to="/">志愿服务</NuxtLink></li>
+                    <li><NuxtLink to="/">公益活动</NuxtLink></li>
+                    <li><NuxtLink to="/">在线服务</NuxtLink></li>
+                    <li><NuxtLink to="/">网民留言</NuxtLink></li>
+                    <li><NuxtLink to="/">法制知识</NuxtLink></li>
+                    <li><NuxtLink to="/">法律咨询</NuxtLink></li>
+                    <li><NuxtLink to="/">通知公告</NuxtLink></li>
+                    <li><NuxtLink to="/">官网导航</NuxtLink></li>
                 </ul>
             </div>
-        </div>
-        <div class="select" >
-            <div class="inner">
-                <div class="role left">
-                    <div class="title">行政职能查询  </div>
-                    <div class="searchRole">
-                        <El-select v-model="depValue" placeholder="职能部门" filterable size="large" style="width: 330px">
-                            <El-option v-for="(item, index) in department" :key="index" :label="item.name"
-                                :value="item.id" />
-                        </El-select>
-                        <em @click="goToPrimary"></em>
-                    </div>
-                </div>
-                <div class="region left">
-                    <div class="title">行政区划查询</div>
-                    <div class="searchRole" v-if="provinceList.length > 0">
-                        <El-select v-model="province" placeholder="请选择省" size="large" style="width: 80px">
-                            <El-option v-for="item in provinceList" :key="item.id" :label="item.name"
-                                @click="change(item.id)" :value="item.id" />
-                        </El-select>
-                        <i></i>
-                        <El-select v-model="city" placeholder="请选择市" no-data-text="请先选择省份" size="large"
-                            style="width: 80px">
-                            <El-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
-                                @click="change1(item.id)" :value="item.id" />
-                        </El-select>
-                        <i></i>
-                        <El-select v-model="region" placeholder="请选择区/县" no-data-text="请先选择市" size="large"
-                            style="width: 100px">
-                            <El-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
-                        </El-select>
-                        <em @click="goToPrimary"></em>
-                    </div>
-                </div>
+            <div class="headerNavBottom">
+                <div class="first"><NuxtLink to="/">查询</NuxtLink></div>
+                <ul>
+                    <li><NuxtLink to="/">人员查询</NuxtLink></li>
+                    <li><NuxtLink to="/">车辆查询</NuxtLink></li>
+                    <li><NuxtLink to="/">地市中心</NuxtLink></li>
+                    <li><NuxtLink to="/">调研选题</NuxtLink></li>
+                    <li><NuxtLink to="/">介绍信查询</NuxtLink></li>
+                    <li><NuxtLink to="/">核心网站</NuxtLink></li>
+                    <li><NuxtLink to="/">政务百网</NuxtLink></li>
+                    <li><NuxtLink to="/">行业百网</NuxtLink></li>
+                    <li><NuxtLink to="/">规章制度</NuxtLink></li>
+                    <li><NuxtLink to="/">申请加入</NuxtLink></li>
+                    <li><NuxtLink to="/">项目官网</NuxtLink></li>
+                </ul>
             </div>
         </div>
     </div>
-    <section class="navigate_phone" v-if="false">
-        <div class="nav_select_btn_box">
-            <div class="nav_select_btn nav_department_btn_box" >
-                行政职能查询
-                <div class="nav_department_drop_box">
-                    <a class="nav_department_drop_a" title="" v-for="(per_obj,per_index) in department" :key="per_obj" @click="nav_department_drop_a_fun(per_obj.id)">
-                        {{per_obj.name}}
-                    </a>
-                </div>
-            </div>
-            <div class="nav_select_btn" @click="showZonePanel = true">行政区划查询</div>
+    <div class="headerNavBox-mobile">
+        <div class="headerNavBox-mobile-welcome">
+            欢迎来到全国法制资讯发布中心!
         </div>
-        <div class="nav_department_panel" v-show="showZonePanel">
-            <div class="panel_head_box">
-                <span class="panel_head_btn nav_department_btn" @click="close_panel_fun"></span>
-                <h4 class="panel_head_h4">行政区划查询</h4>
-            </div>
-            <div class="nav_department_panel_in">
-                <div class="nav_department_panel_ul">
-                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in provinceList"
-                     :key="per_obj" @click="change(per_obj.id)"  
-                     :class="{'nav_department_panel_ul_a_only':provinceid == per_obj.id}" >
-                     {{ per_obj.name}} 
-                    </a>
-                </div>   
-                <div class="nav_department_panel_ul nav_department_panel_ul_2">
-                    <a class="nav_department_panel_ul_a" title="" v-for="(per_obj,per_index) in cityList" :key="per_obj"
-                        @click="change1(per_obj.id)"
-                        :class="{'nav_department_panel_ul_a_only':cityid == per_obj.id}" >
-
-                        {{ per_obj.name}} 
-                    </a>
-                </div>   
-                <div class="nav_department_panel_ul nav_department_panel_ul_3">
-                    <a class="nav_department_panel_ul_a" title="" 
-                        v-for="(per_obj,per_index) in regionList" :key="per_obj"
-                        @click="change2(per_obj.id)"
-                        :class="{'nav_department_panel_ul_a_only':regionid == per_obj.id}"
-                    >
-                        {{ per_obj.name}} 
-                    </a>
-                </div>   
-                <div class="nav_department_panel_foot clearfix">
-                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_clear" @click="foot_btn_clear_fun">清空</div>
-                    <div class="nav_department_panel_foot_btn nav_department_panel_foot_btn_sure" @click="goToPrimary">确定</div>
+        <div class="headerNavBox-mobile-btn">
+            首页
+            <img src="@/public/index/btn.png" alt="" @click="openTopMenu = 2">
+        </div>
+        <div v-if="openTopMenu == 2" class="headerNavBox-mobile-menu">
+            <div>
+                <div class="headerNavBox-mobile-menu-list">
+                    <NuxtLink to="/" target="_blank">用户登录</NuxtLink>
+                </div>
+                <div class="headerNavBox-mobile-menu-list">
+                    <NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink>
+                    <NuxtLink to="/sannongzixunzhifuxinxi/list-1.html">政策法规</NuxtLink>
+                    <NuxtLink to="/">各地动态</NuxtLink>
+                    <NuxtLink to="/">廉政时讯</NuxtLink>
+                    <NuxtLink to="/">政策解读</NuxtLink>
+                    <NuxtLink to="/">百家争鸣</NuxtLink>
+                    <NuxtLink to="/">经济与法</NuxtLink>
+                    <NuxtLink to="/">法治建设</NuxtLink>
+                    <NuxtLink to="/">法纪通报</NuxtLink>
+                    <NuxtLink to="/">社会调研</NuxtLink>
+                    <NuxtLink to="/">法制文化</NuxtLink>
+                    <NuxtLink to="/">特别关注</NuxtLink>
+                    <NuxtLink to="/">媒体视点</NuxtLink>
+                    <NuxtLink to="/">重点播报</NuxtLink>
+                    <NuxtLink to="/">今日说法</NuxtLink>
+                    <NuxtLink to="/">法制技术</NuxtLink>
+                    <NuxtLink to="/">执法在线</NuxtLink>
+                    <NuxtLink to="/">举报投诉</NuxtLink>
+                    <NuxtLink to="/">法制观察</NuxtLink>
+                    <NuxtLink to="/">典型案例</NuxtLink>
+                    <NuxtLink to="/">百姓话题</NuxtLink>
+                    <NuxtLink to="/">法制活动</NuxtLink>
                 </div>
+                <div class="headerNavBox-mobile-menu-list">
+                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=ldxx&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">领导信箱</NuxtLink>
+                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=jbts&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">投诉举报</NuxtLink>
+                    <NuxtLink to="http://zwptfz.znxyw.org.cn/?s=wszw&amp;web_name=全国法制资讯发布中心&amp;web_url=fzxfb.org.cn" target="_blank">网上政务</NuxtLink>
+                    <NuxtLink to="/">志愿服务</NuxtLink>
+                    <NuxtLink to="/">公益活动</NuxtLink>
+                    <NuxtLink to="/">在线服务</NuxtLink>
+                    <NuxtLink to="/">网民留言</NuxtLink>
+                    <NuxtLink to="/">法制知识</NuxtLink>
+                    <NuxtLink to="/">法律咨询</NuxtLink>
+                    <NuxtLink to="/">通知公告</NuxtLink>
+                    <NuxtLink to="/">官网导航</NuxtLink>
+                </div>
+                <div class="headerNavBox-mobile-menu-list">
+                    <NuxtLink to="/">人员查询</NuxtLink>
+                    <NuxtLink to="/">车辆查询</NuxtLink>
+                    <NuxtLink to="/">地市中心</NuxtLink>
+                    <NuxtLink to="/">调研选题</NuxtLink>
+                    <NuxtLink to="/">介绍信查询</NuxtLink>
+                    <NuxtLink to="/">核心网站</NuxtLink>
+                    <NuxtLink to="/">政务百网</NuxtLink>
+                    <NuxtLink to="/">行业百网</NuxtLink>
+                    <NuxtLink to="/">规章制度</NuxtLink>
+                    <NuxtLink to="/">申请加入</NuxtLink>
+                    <NuxtLink to="/">项目官网</NuxtLink>
+                </div>
+            </div>
+            <div class="headerNavBox-mobile-menu-button">
+                <img src="@/public/index/no.png" alt="" @click="openTopMenu = 1">
             </div>
         </div>
-    </section> -->
+    </div>
 </template>
 
 <script setup>
@@ -215,7 +146,6 @@ import { ElMessage } from 'element-plus'
 import { ref, onMounted } from 'vue';
 import { ElSelect, ElOption } from 'element-plus'
 import { useRoute } from 'vue-router'; 
-
 const showZonePanel = ref(false)
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
@@ -238,18 +168,6 @@ async function getPageData2() {
     navigation1.value = mkdata.data;
 }
 getPageData2();
-//格式化跳转路径
-// const getLinkPath = (item) => {
-//     if(item.is_url==1){
-//         return `${item.web_url}`;
-//     }else if(item.children_count == 0){
-//         //return `/${item.aLIas_pinyin}/`;
-//         return `/newsList/${item.category_id}?page=1`;
-//     }else{
-//         //return `/${item.aLIas_pinyin}/`;
-//         return `/primaryNavigation/${item.category_id}`;
-//     }
-// }
 const getLinkPath = (item) => {
     if (item.is_url == 1) {
         return `${item.web_url}`;
@@ -265,24 +183,6 @@ const getLinkPath = (item) => {
 let department = ref("")
 const depValue = ref("")
 const typeValue = ref("")
-// let departmentList = async () => {
-//     const mkdata = await requestDataPromise('/web/selectWebsiteDepartment', {
-//         method: 'GET',
-//         query: {
-//             'keyword': department.value,
-//         },
-//     });
-//     if(mkdata.code == 200){
-//         department.value = mkdata.data;
-//     }else{
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//         console.log("错误位置：获取职能部门")
-//         console.log("后端错误反馈：",mkdata.message)
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//     }
-// }
-// //获得所有部门
-// departmentList();
 //3.职能部门 end ---------------------------------------->
 
 //4.展示行政区划 start ---------------------------------------->
@@ -299,24 +199,6 @@ let cityList = ref("")
 let region = ref("")
 let regionid = ref("")
 let regionList = ref("")
-//选择省
-// let areaArrList = async () => {
-//     const mkdata =  await requestDataPromise('/web/selectWebsiteArea', {
-//         method: 'GET',
-//         query: {},
-//     });
-//     if(mkdata.code == 200){
-//         provinceList.value = mkdata.data;
-//     }else{
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//         console.log("错误位置：获取行政区划")
-//         console.log("后端错误反馈：",mkdata.message)
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//     }
-// }
-// //一开始只需要获取一下省
-// areaArrList();
-
 //选择市
 let change = async (id) => {
     provinceid.value = id;
@@ -348,12 +230,6 @@ let change2 = async (id) => {
 
 //5.执行搜索 start ---------------------------------------->
 const getcityid = ref("")
-//跳转到搜索页面
-// let goToSearch = (id) => {
-//     console.log(id)
-//     const route = `/search/search?catids=${id}`;
-//     window.location.href = route;
-// }
 //获得cityid和11
 let goToPrimary = async () => {
     if (province.value != "") { getcityid.value = province.value }
@@ -365,23 +241,6 @@ let goToPrimary = async () => {
     } else {
         const route = `/search/search?catids=${getcityid.value}&department_id=${depValue.value}`;
         window.location.href = route;
-        // const responseStatus =  await requestDataPromise('/web/selectWebsiteCategory', {
-        // method: 'GET',
-        //     query: {
-        //         'cityid': getcityid.value,
-        //         'department_id': depValue.value
-        //     },
-        // });
-        // if (responseStatus.data.catid && responseStatus.data.catid.length > 0) {
-        //     const catids = responseStatus.data.catid.join(',');
-        //     const route = `/search/search?catids=${catids}`;
-        //     window.location.href = route;
-        // } else {
-        //     // 可以在这里处理数组为空的情况
-        //     console.log('没有可用的分类ID');
-        //     const route = `/search/search`;
-        //     window.location.href = route;
-        // }
     }
 }
 const close_panel_fun = () => {
@@ -461,801 +320,410 @@ onMounted(async () => {
         }
     }             
 })
+
+//打开顶部菜单 start ---------------------------------------->
+const openTopMenu = ref(1)
+//打开顶部菜单 end ---------------------------------------->
 </script>
 
 <style lang="less" scoped>
-//PC端 start ---------------------------------------->
-.headerNavBox {
-    text-align: center;
-    a {
-        width: 100px;
-        margin: 0 10px;
-        display: inline-block;
-        height: 40px;
-        line-height: 40px;
-        background: #158d91;
+//自适应 start ---------------------------------------->
+@media screen and (min-width: 1401px) {
+    .headerNavBox-mobile {
+        display: none;
+    }
+    .headerNav-pc {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        width: 100%;
+    }
+    .headerNavBox {
         text-align: center;
-        font-size: 18px;
-        color: #fff;
+        a {
+            width: 100PX !important;
+            margin: 0 10PX !important;
+            display: inline-block;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            background: #158d91;
+            text-align: center;
+            font-size: 18PX !important;
+            color: #fff;
+        }
     }
-}
-.headerNavMainBox {
-    max-width: 1400px;
-    width: 100%;
-    overflow: hidden;
-    margin: 20px auto 0;
-    .headerNavTop,.headerNavCenter,.headerNavBottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        ul {
-            width: 95%;
+    .headerNavMainBox {
+        max-width: 1400PX !important;
+        width: 100%;
+        overflow: hidden;
+        margin: 20px auto 0;
+        background: #fff;
+        .headerNavTop,.headerNavCenter,.headerNavBottom {
             display: flex;
-            flex-wrap: wrap;
-            li {
-                width: 120px;
-                height: 35px;
-                line-height: 35px;
+            align-items: center;
+            justify-content: space-between;
+            ul {
+                width: 95%;
+                display: flex;
+                flex-wrap: wrap;
+                li {
+                    width: 120PX !important;
+                    height: 35PX !important;
+                    line-height: 35PX !important;
+                    text-align: center;
+                    display: flex;
+                    a {
+                        font-size: 16PX !important;
+                        color: #fff;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+        .headerNavTop {
+            width: 100%;
+            overflow: hidden;
+            background: #158d91;
+            .first {
+                width: 5%;
+                height: 70PX !important;
+                line-height: 58PX !important;
+                overflow: hidden;
+                float: left;
                 text-align: center;
                 a {
-                    font-size: 16px;
+                    font-size: 16PX !important;
                     color: #fff;
                     font-weight: bold;
                 }
             }
         }
-    }
-    .headerNavTop {
-        width: 100%;
-        //height: 70px;
-        overflow: hidden;
-        background: #158d91;
-        .first {
-            width: 5%;
-            height: 70px;
-            line-height: 70px;
+        .headerNavCenter {
+            width: 100%;
             overflow: hidden;
-            float: left;
-            text-align: center;
-            a {
-                font-size: 16px;
+            background: #0072ff;
+            margin-top: 4PX !important;
+            .first {
+                width: 5%;
+                height: 40PX !important;
+                line-height: 40PX !important;
+                float: left;
+                color: #fff;
+                font-size: 16PX !important;
+                font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 16PX !important;
+                    color: #fff;
+                    font-weight: bold;
+                }
+            }
+        }
+        .headerNavBottom {
+            background: #f90;
+            margin-top: 4PX !important;
+            overflow: hidden;
+            .first {
+                width: 5%;
+                height: 40PX !important;
+                line-height: 40PX !important;
+                float: left;
                 color: #fff;
+                font-size: 16PX !important;
                 font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 16PX !important;
+                    color: #fff;
+                    font-weight: bold;
+                }
             }
         }
     }
-    .headerNavCenter {
+    
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .headerNavBox-mobile {
+        display: none;
+    }
+    .headerNav-pc {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
         width: 100%;
-        //height: 40px;
-        overflow: hidden;
-        background: #0072ff;
-        margin-top: 4px;
-        .first {
-            width: 5%;
-            height: 40px;
-            line-height: 40px;
-            float: left;
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
+        background: #fff;
+    }
+    .headerNavBox {
+        text-align: center;
+        a {
+            width: 100PX;
+            margin: 0 10px;
+            display: inline-block;
+            height: 40PX;
+            line-height: 40PX;
+            background: #158d91;
             text-align: center;
-            a {
-                font-size: 16px;
+            font-size: 12px;
+            color: #fff;
+        }
+    }
+    .headerNavMainBox {
+        width: 100%;
+        overflow: hidden;
+        margin: 20px auto 0;
+        .headerNavTop,.headerNavCenter,.headerNavBottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            ul {
+                width: 95%;
+                display: flex;
+                flex-wrap: wrap;
+                li {
+                    width: 12.5%;
+                    height: 30PX;
+                    line-height: 30PX;
+                    text-align: center;
+                    a {
+                        font-size: 11px;
+                        color: #fff;
+                        font-weight: bold;
+                        display: block;
+                    }
+                }
+            }
+        }
+        .headerNavTop {
+            width: 100%;
+            //height: 70px;
+            overflow: hidden;
+            background: #158d91;
+            .first {
+                //height: 70px;
+                padding-left: 5px;
+                overflow: hidden;
+                float: left;
+                text-align: center;
+                a {
+                    font-size: 14px;
+                    color: #fff;
+                    font-weight: bold;
+                }
+            }
+        }
+        .headerNavCenter {
+            width: 100%;
+            overflow: hidden;
+            background: #0072ff;
+            margin-top: 4px;
+            .first {
+                padding-left: 5px;
+                float: left;
                 color: #fff;
                 font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 14px;
+                    color: #fff;
+                    font-weight: bold;
+                }
             }
         }
-    }
-    .headerNavBottom {
-        background: #f90;
-        //height: 40px;
-        margin-top: 4px;
-        overflow: hidden;
-        .first {
-            width: 5%;
-            height: 40px;
-            line-height: 40px;
-            float: left;
-            color: #fff;
-            font-size: 16px;
-            font-weight: bold;
-            text-align: center;
-            a {
-                font-size: 16px;
+        .headerNavBottom {
+            background: #f90;
+            margin-top: 4px;
+            overflow: hidden;
+            .first {
+                padding-left: 5px;
+                float: left;
                 color: #fff;
+                font-size: 16px;
                 font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 14px;
+                    color: #fff;
+                    font-weight: bold;
+                }
             }
         }
     }
 }
-//PC端 end ---------------------------------------->
-
-// 导航部分
-// .partOne .navigationOne,
-// .partOne .navigationOne>li,
-// .partTwo .navigationTwo,
-// .partTwo .navigationTwo>li {
-//     float: left;
-// }
-// .partOne {
-//     width: 100%;
-//     height: 110px;
-//     margin-bottom: 10px;
-//     background-color: #fff;
-//     font-size: 20px;
-//     font-family: PingFang SC-Semibold;
-//     background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/head/menubg.png") no-repeat center;
-//     .inner {
-//         display: flex;
-//         justify-content: space-between;
-//         .navLeft {
-//             width:160px;
-//             font-size: 16px;
-//             display: flex;
-//         }
-//         .navIndex {
-//             height: 100px;
-//             line-height: 120px;
-//             a {
-//                 font-size: 16px;
-//                 color: #fff;
-//                 font-weight: bold;
-//                 &:hover {
-//                     color: #ABE874;
-//                 }
-//             }
-//         }
-//         .navClass {
-//             padding-top: 29px;
-//             padding-left: 30px;
-//             font-weight: bold;
-//             color: #fff;
-//             a {
-//                 color: #fff; 
-//                 &:hover {
-//                     color: #ABE874;
-//                 }
-//             }
-//             div:nth-child(2){
-//                 padding-top:20px;
-//             }
-//         }
-//     }
-//     .navigationOne {
-//         width: 1200px;
-//         color: #333;
-//         display: flex;
-//         flex-wrap: wrap;
-//         padding-top: 20px;
-//         li {
-//             width: 68px;
-//             font-family: PingFang SC;
-//             height: 40px;
-//             line-height: 40px;
-//             font-size: 16px;
-//             text-align: left;
-//             font-style: normal;
-//             text-transform: none;
-//             margin: 0 10px;
-//             text-align: center;
-//             a {
-//                 color: #fff;
-//                 display: block;
-//             }
-//         }
-//         >li:hover a {
-//             color: #ABE874;
-//         }
-//         .active{
-//             color: #ABE874;
-//         }
-//     }
-// }
-// .partThree {
-//     width: 100%;
-//     height: 105px;
-//     .inner {
-//         margin-bottom: 5px;
-//         display: flex;
-//     }
-//     .channel,.areaChannel {
-//         float: left;
-//         margin-top: 17px;
-//     }
-//     .channel {
-//         width: 56px;
-//         height: 20px;
-//         font-family: PingFang SC, PingFang SC;
-//         font-weight: 600;
-//         font-size: 14px;
-//         color: #666666;
-//         line-height: 20px;
-//         text-align: left;
-//         font-style: normal;
-//         text-transform: none;
-//     }
-//     .areaChannel {
-//         width: 1122px;
-//         margin-left: 14px;
-//         >span {
-//             display: inline-block;
-//             height: 16px;
-//             line-height: 16px;
-//             margin-bottom: 10px;
-//             padding: 0 8px;
-//             text-align: center;
-//             font-family: PingFang SC, PingFang SC;
-//             font-weight: 400;
-//             font-size: 14px;
-//             text-align: center;
-//             font-style: normal;
-//             text-transform: none;
-//             border-right: 1px solid #e6e6e6;
-//             a {
-//                 display: inline-block;
-//                 height: 16px;
-//                 color: #868686;
-//             }
-//             a:hover {
-//                 color: #868686;
-//             }
-//         }
-//         >span:last-child,
-//         >span:nth-child(18),
-//         >span:nth-child(32) {
-//             border-right: none;
-//         }
-//         >span:hover a {
-//             color: #139602;
-//         }
-//     }
-// }
-// .logo {
-//     margin-top: 5px;
-//     height: 90px;
-//     img {
-//         width: 1200px;
-//         height: 90px;
-//     }
-// }
-// // 行政查询
-// .select {
-//     width: 100%;
-//     height: 62px;
-//     line-height: 62px;
-//     margin-top: 10px;
-//     .inner {
-//         width: 1200px;
-//         height: 62px;
-//         margin-top: 10px;
-//         background-color: #fafafa;
-//     }
-//     .role,.region {
-//         float: left;
-//         height: 62px;
-//         .el-select--large::v-deep .el-select__wrapper {
-//             font-size: 14px;
-//             gap: 6px;
-//             line-height: 24px;
-//             min-height: 35px;
-//             padding: 0;
-//             border: none;
-//             box-shadow: none;
-//         }
-//         .el-select__placeholder::v-deep.is-transparent {
-//             color: #999999;
-//             font-weight: 600;
-//         }
-//         >.title {
-//             float: left;
-//             width: 120px;
-//             font-family: PingFang SC, PingFang SC;
-//             font-weight: 600;
-//             font-size: 20px;
-//             color: #666666;
-//             text-align: left;
-//             font-style: normal;
-//             text-transform: none;
-//         }
-//         .searchRole {
-//             float: left;
-//             padding-left: 20px;
-//             box-sizing: border-box;
-//             i {
-//                 display: inline-block;
-//                 width: 1px;
-//                 height: 12px;
-//                 background-color: #d9d9d9;
-//                 margin: 0 10px;
-//                 vertical-align: middle;
-//             }
-//         }
-//     }
-//     .role {
-//         padding-left: 16px;
-//         .searchRole {
-//             width: 440px;
-//             height: 40px;
-//             line-height: 35px;
-//             background-color: #fff;
-//             border: 1px solid #ededed;
-//             margin: 10px 20px 12px 22px;
-//             border-radius: 25px;
-//             em {
-//                 display: inline-block;
-//                 width: 29px;
-//                 height: 29px;
-//                 margin: 4px;
-//                 margin-right: 25px;
-//                 margin-left: 20px;
-//                 vertical-align: -13px;
-//                 background: url('http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png');
-//                 cursor: pointer;
-//             }
-//             >.ipt {
-//                 width: 245px;
-//                 font-family: PingFang SC, PingFang SC;
-//                 font-weight: 600;
-//                 font-size: 14px;
-//                 color: #666;
-//                 line-height: 16px;
-//                 padding-left: 22px;
-//                 box-sizing: border-box;
-//                 text-align: left;
-//                 font-style: normal;
-//                 text-transform: none;
-//                 border: none;
-//                 outline: none;
-//             }
-//             >.ipt::placeholder {
-//                 color: #cccccc;
-//             }
-//             span {
-//                 color: #999999;
-//             }
-//         }
-//     }
-//     .region {
-//         .searchRole {
-//             width: 440px;
-//             height: 40px;
-//             line-height: 35px;
-//             background-color: #fff;
-//             border: 1px solid #ededed;
-//             margin: 10px 0px 12px 16px;
-//             border-radius: 25px;
-//         }
-//         em {
-//             display: inline-block;
-//             width: 29px;
-//             height: 29px;
-//             margin-left: 48px;
-//             vertical-align: middle;
-//             background: url('http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png');
-//             cursor: pointer;
-//         }
-//         i {
-//             display: inline-block;
-//             width: 24px;
-//             height: 24px;
-//             margin-right: 11px;
-//             vertical-align: middle;
-//             background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/image/search.png");
-//         }
-//         span {
-//             color: #999999;
-//             margin-right: 22px;
-//         }
-//     }
-// }
-// .cityBox {
-//     height: 60px;
-//     background: #9CD26B;
-//     display: flex;
-//     margin: 0 auto;
-//     .cityMain {
-//         width: 1200px;
-//         height: 60px;
-//         line-height: 60px;
-//         margin: 0 auto;
-//         display: flex;
-//         justify-content: flex-start;
-//         .cityTitle {
-//             font-size: 16px;
-//             color: #fff;
-//             font-weight: bold;
-//             padding-left: 60px;
-//             margin-right: 30px;
-//             width: 76px;
-//         }
-//         .cityList {
-//             li {
-//                 font-size: 16px;
-//                     float: left;
-//                     color: #fff;
-//                     margin-right: 14px;
-//                     cursor: pointer;
-//                 a {
-//                     font-size: 16px;
-//                     color: #fff;
-//                     cursor: pointer;
-//                     &:hover {
-//                         color: #ABE874;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
-
-// 移动端 start ---------------------------------------->
-@media screen and (min-width:801px){
-    .nav_in{ 
-        display:flex;
-        width:100%;
-        flex-wrap: wrap;
-    }
-    .pc_none{
-        display:none;
+@media screen and (max-width: 800px) {
+    .headerNav-pc {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        width: 100%;
+        display: none;
     }
-}
-@media screen and (max-width:800px){
-    /*ipad_phone*/
-    .partOne{
-        height:auto;
-        background:#49a769;
-        margin-top:11px;
-        padding:6px 0px;
+    .headerNavBox {
+        width: 100%;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 0 5px;
+        a {
+            width: 19%;
+            display: inline-block;
+            height: 60px;
+            line-height: 60px;
+            background: #158d91;
+            text-align: center;
+            font-size: 24px;
+            color: #fff;
+            text-align: center;
+        }
     }
-    .partOne .inner{ 
+    .headerNavMainBox {
+        width: 100%;
         overflow: hidden;
-        position:relative;
-    }
-    .partOne .inner .navLeft{
-        display:flex;
-        overflow:hidden;
-        word-break: keep-all; 
-        white-space: nowrap;
-        height:33px;
-        text-align:left;
-        width:auto;
-        float:left;
-        font-weight:bold;
-        margin-right:20px;
-    }
-    .partOne .inner .navIndex{ 
-        line-height:31px;
-        height:33px;
-        overflow:hidden;
-        width:auto; 
-    } 
-    .partOne .inner .navClass{ 
-        line-height:33px;
-        height:33px;
-        padding:0px;
-        word-break: keep-all; 
-        white-space: nowrap;
-        overflow:hidden;
-        display:none;
-    }
-    .partOne .inner .navClass div{
-        margin-left:8px;
-        float:left;
-    }
-    .partOne .inner .navClass div:nth-child(2){
-        padding:0px;
-    }
-    .partOne .navigationOne{ 
-        height:33px; 
-        display:block;  
-        width:auto;        
-        flex:1;
-        padding:0;
-        margin:0;
-        box-sizing:border-box;
-        overflow-y: hidden;// 改为 overlay 模式
-        overflow-x: auto;// 改为 overlay 模式
-        /* 新增滚动条样式 */
-        &::-webkit-scrollbar {
-            // width: 10;
-            height: 4px;
+        margin: 20px auto 0;
+        .headerNavTop,.headerNavCenter,.headerNavBottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            ul {
+                width: 95%;
+                display: flex;
+                flex-wrap: wrap;
+                li {
+                    width: 120px;
+                    height: 35px;
+                    line-height: 35px;
+                    text-align: center;
+                    a {
+                        font-size: 16px;
+                        color: #fff;
+                        font-weight: bold;
+                    }
+                }
+            }
         }
-        // 隐藏滚动条轨道
-        &::-webkit-scrollbar-track {
-            background: transparent;
-            // width: 10;
-            height: 4;
+        .headerNavTop {
+            width: 100%;
+            //height: 70px;
+            overflow: hidden;
+            background: #158d91;
+            .first {
+                height: 70px;
+                padding-left: 5px;
+                overflow: hidden;
+                float: left;
+                text-align: center;
+                a {
+                    font-size: 16px;
+                    color: #fff;
+                    font-weight: bold;
+                }
+            }
         }
-        // 隐藏滚动条滑块
-        &::-webkit-scrollbar-thumb {
-            background: transparent;
+        .headerNavCenter {
+            width: 100%;
+            //height: 40px;
+            overflow: hidden;
+            background: #0072ff;
+            margin-top: 4px;
+            .first {
+                height: 40px;
+                padding-left: 5px;
+                float: left;
+                color: #fff;
+                font-size: 16px;
+                font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 16px;
+                    color: #fff;
+                    font-weight: bold;
+                }
+            }
         }
-    }
-    .nav_in{
-        height:100%;
-        word-break: keep-all; 
-        white-space: nowrap; 
-        box-sizing:border-box;
-    }
-    .partOne .navigationOne li{
-        width:auto;
-        display:inline-block;
-        height:100%;
-        line-height:33px;
-        overflow:hidden;
-        font-size:16px; 
-    }                           
-    .partOne .navigationOne li:nth-of-type(1){
-        margin-left:0px;
-        
-    }                              
-    .cityBox{
-        display: block;
-        overflow:hidden;
-        height:auto;
-        display:none;
-    }
-    .cityBox .cityMain{
-        display: block;
-        overflow:hidden;
-        height:auto;
-        width:100%;
-    }
-    .cityBox .cityMain .cityTitle{
-        line-height: 22px;
-        padding:0;
-        margin:10px 0px 0px 10px;
-        width:auto;
-    }
-    .cityList{
-        overflow:hidden;
-    }
-    .cityBox .cityMain .cityList li{
-        line-height:22px;
-        margin:11px;
-    }
-    .select{
-        overflow:hidden;
-        height:auto;
-        line-height:normal;
-    }
-    .select .inner{
-        width:96%;
-        margin:0px auto;
-        overflow:hidden;
-        height:auto; 
-    }
-    .select .role{
-        padding:0;
-        height:auto;
-        overflow:hidden;
-        float:none;
-    } 
-    .select .role .searchRole{
-        box-sizing:border-box;
-        width:333px; 
-        float:left;
-        margin-left:0px;
-    }
-    .select .el-select{
-        width:230px!important;
-    }
-    .select .role .searchRole em{
-        margin:4px 10px;
-        float:right;
-    }
-    .select .role > .title, .select .region > .title{
-        float:none;
-        font-size:18px;
-    }
-    .select .region{
-        overflow:hidden;
-        height:auto;
-        float:none;
-    }
-    .select .region .searchRole{
-        float:none;
-        padding:10px 0;
-        width:90%;
-        margin:5px;
-        height:auto;
-    }
-    .select .region .el-select{
-        margin-left:17px;
-    }
-    .select .region em{
-        margin-left:22px;
-    }
-    .nav_select_btn_box{
-        padding:5px 0px;
-        border-bottom:1px solid #ededed;
-        width:92%;margin:0px auto;
-    }
-    .nav_select_btn_box::after{
-        content: '';
-        display: block;
-        height: 0;
-        visibility: hidden;
-        clear: both;
-    }
-    .nav_select_btn{
-        height: 33px;
-        line-height: 33px;
-        color: #333;font-size:14px;
-        padding:0px 30px 0px 6px;
-        float:left;margin:0px 20px 5px 0px;
-        background:url(../../public/image/Iconly.png) no-repeat right center;
-        background-size:auto 20px;
-    } 
-    .nav_department_btn_box{
-        position:relative;
-        .nav_department_select{
-            width:100%;
-            height:100%;
-            position:absolute;
-            left:0px;
-            top:0px;
-            border:0; 
+        .headerNavBottom {
+            background: #f90;
+            //height: 40px;
+            margin-top: 4px;
+            overflow: hidden;
+            .first {
+                //width: 5%;
+                height: 40px;
+                padding-left: 5px;
+                float: left;
+                color: #fff;
+                font-size: 16px;
+                font-weight: bold;
+                text-align: center;
+                a {
+                    font-size: 16px;
+                    color: #fff;
+                    font-weight: bold;
+                }
+            }
         }
     }
-    .nav_department_drop_box{
-        position:absolute;
-        left:0px;
-        top:33px;
-        z-index:111;
-        width:100%;
-        height:333px;
-        border:1px solid #ededed;
-        background:#fff;
-        overflow:auto;
-        border-radius:6px;
-        box-sizing:border-box;
-        display:none;
-    }
-    .nav_department_btn_box:hover .nav_department_drop_box{
-        display:block;
-    }
-    .nav_department_drop_a{
-        width:100%;
-        height:44px;
-        line-height:44px;
-        display:block;
-        font-size:14px;
-        color:#333;
-        padding:0px 10px 0px;
-        box-sizing:border-box;
-        word-break: keep-all;
-        white-space: nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-    }
-    .partOne .inner .navIndex a{
-        font-size:16px;
-        font-weight:normal;
-        opacity:.6; 
-    }
-    .partOne .inner .navIndex .phone_nav_index_only{
-        font-weight:bold;
-        opacity:1; 
-    }
-    .nav_department_panel{
-        width:100%;
-        background:#fff;
-        left:0px;
-        top:0px;
-        position:fixed;
-        z-index:999;
-        height:100%;
-    }
-    .panel_head_box{
-        width:97%;
-        margin:0px auto 4px;
-        height:50px;
-        border-bottom:1px solid #b8b8b8;
-        text-align:center;
-        position:relative;
-    }
-    .panel_head_h4{
-        height:50px;
-        line-height:50px;
-        display:inline-block;
-        font-size:22px;
-        color:#333;
-        text-align:center;
-    }
-    .panel_head_btn{
-        float:right;
-        width:22px;
-        height:22px;
-        top:12px;
-        position:absolute;right:0px;
-        background:url('../../public/image/guanbi1.png') no-repeat center center;
-        background-size:100% 100%;
-    }
-    .nav_department_panel_in{
-        width:100%;
-        height:100%; 
-        box-sizing:border-box;
-        overflow:auto;
-        position:relative;
-        padding-bottom:122px;
-    }  
-    .nav_department_panel_ul{
-        width:30%; 
-        float:left;
-        height:100%;
-        box-sizing:border-box; 
-        overflow:auto;
-    }
-    .nav_department_panel_ul_2{
-        width:35%; 
-        background:#F2F3F7;
-    }
-    .nav_department_panel_ul_3{
-        width:35%; 
-        background:#F2F3F7;
-    }
-    .nav_department_panel_ul_a{
-        width:100%;
-        height:40px;
-        line-height:40px;
-        display:block;
-        font-size:16px;
-        color:#333;
-        padding:0px 10px 0px;
-        box-sizing:border-box;
-        word-break: keep-all; 
-        white-space: nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis;
-    }
-    .nav_department_panel_ul_a_only{
-        font-weight:bold; 
-        color:#46D333;
+    .headerNavBox-mobile {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 80px;
+        background: #f1f1f1;
+        border-bottom: 1px solid #ccc;
+        padding: 0 40px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        .headerNavBox-mobile-welcome {
+            font-size: 32px;
+        }
+        .headerNavBox-mobile-btn {
+            font-size: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            img {
+                width: 40px;
+                height: 40px;
+                margin-left: 20px;
+            }
+        }
     }
-    .nav_department_panel_foot{ 
-        width:100%;
-        margin:0px auto;
-        height:36px; 
-        position:absolute;
-        left:0px;bottom:70px;
-        background:#fff;
-        text-align:center;
-        .nav_department_panel_foot_btn{
-            width:33%;
-            height:36px;
-            line-height:36px; 
-            display:inline-block;
-            text-align:center; 
-            border-radius:16px;
-            font-size:16px;
-            padding:0px 10px;
-            margin:0px 11px;
+    .headerNavBox-mobile-menu {
+        position: fixed;
+        top: 80px;
+        left: 0;
+        width: 100%;
+        background: #158d91;
+        box-sizing: border-box;
+        padding: 20px;
+        a {
+            font-size: 40px;
+            color: #fff;
+            margin: 0 10px;
+            white-space: nowrap;
         }
-        .nav_department_panel_foot_btn_clear{
-            background:#abe874;
-            color:#fff;
+        .headerNavBox-mobile-menu-list {
+            border-bottom: 1px solid #c1c1c1;
+            padding: 30px 0;
         }
-        .nav_department_panel_foot_btn_sure{
-            background:#46D333;
-            color:#fff;
+        .headerNavBox-mobile-menu-button {
+            padding: 20px 0;
+            img {
+                width: 70px;
+                height: 70px;
+                display: block;
+                margin: 0 auto;
+            }
         }
-    } 
-    .partOne .navigationOne li a span{
-        display:block;
-        line-height:33px;
-        height:33px;
-        opacity:0.6;     
     }
-    .nav_in .router-link-exact-active span{
-        font-size:16px;
-        font-weight:bold;
-        opacity:1!important;
-    }       
-    .select{display:none;} 
-    .phone_none{display:none;} 
 }
-//移动端 end ---------------------------------------->
+//自适应 end ---------------------------------------->
 </style>
 
 

components/news/detail.vue

@@ -30,9 +30,9 @@
                 <div class="LeftTop">
                     <h1>{{ newsDetail.title }}</h1>
                     <p class="pc_none">
-                        <span>{{ newsDetail.copyfrom }}</span>
-                        <span>{{ newsDetail.author }}</span>
-                        <span>{{ time }}</span>
+                        <span>时间：{{ time }}</span>
+                        <span>来源：{{ newsDetail.copyfrom }}</span>
+                        <span>作者：{{ newsDetail.author }}</span>
                     </p>
                 </div>
                 <div 
@@ -50,7 +50,7 @@
                     <p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
                 </div>
                 <div v-if="articleChoice">
-                    <!-- 投票 start ---------------------------------------->
+                    <!--投票-->
                     <div class="index_3_box_vote" v-if="articleChoice">
                         <div class="voteTitle">投票区</div>
                         <div class="inquire">
@@ -120,8 +120,8 @@
                             </div>
                         </div>
                     </div>
-                    <!-- 投票 end ---------------------------------------->
                 </div>
+                <!--推荐阅读-->
                 <div class="recommendRead" v-if="newsDetail.commendArticle != false">
                     <div class="recommendReadTitle">
                         <span class="read_title">
@@ -137,6 +137,11 @@
                         </div>
                     </div>
                 </div>
+                <!--上一篇 下一篇-->
+                <div class="prevNext">
+                    <NuxtLink to="/">上一篇：李强签署国务院令 公布《行政执法监督条例》</NuxtLink>
+                    <NuxtLink to="/">下一篇：没有了</NuxtLink>
+                </div>
             </div>
             <div class="innerRight">
                 <!-- 热点资讯1 -->
@@ -668,13 +673,16 @@ const closePreview = () => {
             width: 1030px;
             .LeftTop {
                 margin-top: 20px;
+                border-bottom: 1px dashed #ccc;
+                padding-bottom: 20px;
                 >h1 {
                     line-height: 40px;
                     margin-bottom: 20px;
                     font-family: Microsoft YaHei, Microsoft YaHei;
                     font-weight: bold;
-                    font-size: 30px;
+                    font-size: 24px;
                     color: #333333;
+                    text-align: center;
                 }
                 >p {
                     height: 18px;
@@ -683,6 +691,7 @@ const closePreview = () => {
                     font-weight: 400;
                     font-size: 14px;
                     color: #999999;
+                    text-align: center;
                     span {
                         margin-right: 40px;
                     }
@@ -745,12 +754,11 @@ const closePreview = () => {
                 }
             }
             .recommendRead {
-                width: 790px;
-                margin: 30px 0px;
+                width: 100%;
+                margin: 30px 0px 20px 0;
                 .recommendReadTitle {
-                    font-weight: bold;
-                    font-size: 22px;
-                    color: #49A769;
+                    font-size: 18px;
+                    color: #001996;
                     height: 42px;
                     line-height: 35px;
                     letter-spacing: 1px;
@@ -760,20 +768,24 @@ const closePreview = () => {
                     border-bottom: 1px solid #D9D9D9;
                     .read_title {
                         display: inline-block;
+                        text-align: center;
                         width: 94px;
                         height: 40px;
-                        border-bottom: 3px solid #49A769;
+                        border-bottom: 2px solid #158d91;
                     }
                 }
                 .recommendReadList {
                     min-height: 155px;
-                    margin-top: 30px;
+                    margin-top: 20px;
                     padding-bottom: 10px;
-                    font-size: 20px;
+                    font-size: 16px;
                     border-bottom: 1px solid #D9D9D9;
                     .recommendReadListTitle {
-                        margin-top: 25px;
+                        margin-top: 18px;
                         a {
+                            &:hover {
+                                color: #158d91;
+                            }
                             color: #333333;
                         }
                     }
@@ -786,7 +798,7 @@ const closePreview = () => {
                         padding: 0px 2px;
                     }
                     .recommendReadListTitle:hover a {
-                        color: #49A769;
+                        color: #158d91;
                     }
                 }
             }
@@ -1009,6 +1021,22 @@ const closePreview = () => {
     max-height: 100%;
     cursor: pointer;
 }
+//上一篇 下一篇
+.prevNext {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    a {
+        display: block;
+        color: #333;
+        font-size: 15px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        &:hover {
+            color: #0071B7;
+        }
+    }
+}
 </style>
 
 

components/zoom/cheliangchaxun.vue

@@ -0,0 +1,852 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">车辆查询</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!-- 查询 -->
+    <div class="search-box">
+        <div class="search-left-box">
+            <!--查询结果-->
+            <div class="search-left-box-result">
+                <!--未查询到结果-->
+                <div class="no-result-box">
+                    <div class="no-result-image">
+                        <img src="@/public/search/rc.jpg" alt="">
+                    </div>
+                    <div class="no-result-content">
+                        <div class="no-result-title">sorry请您确认后再查询</div>
+                        <div class="no-result-text">您可以通过以下方式继续访问……</div>
+                        <div class="no-result-button">返回查询页</div>
+                    </div>
+                </div>
+                <!--车辆详情-->
+                <div class="result-box">
+                    <div class="result-box-title">北京现代牌BH6440LAY</div>
+                    <div class="result-box-content">
+                        <div>使用人：黎房钊(441623197805183417)</div>
+                        <div>车牌号：粤P6635R</div>
+                    </div>
+                </div>
+            </div>
+            <!--人员查询表单-->
+            <div class="search-left-reset-button">
+                <div>重新查询</div>
+            </div>
+            <div class="search-left-box-form">
+                <div class="search-form1-left-box">
+                    <div class="search-form1-title">
+                        <img src="@/public/search/search.png" alt="">
+                        查询相关工作车辆或车牌号
+                    </div>
+                    <div class="search-form1-text">车牌号/车型（注：车型支持模糊查询）</div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">车牌：</div>
+                        <el-input v-model="input" placeholder="请输入汽车牌照" />
+                    </div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">车型：</div>
+                        <el-input v-model="input" placeholder="请输入车辆型号" />
+                    </div>
+                    <div class="search-form1-submit-button">
+                        <button>查询</button>
+                    </div>
+                </div>
+                <div class="search-form1-wx">
+                    <img src="@/public/search/cl.png" alt="">
+                    <div>手机扫描查询</div>
+                </div>
+            </div>
+        </div>
+        <div class="search-right-box">
+            <!--人员查询-->
+            <div class="search-right-box-form">
+                <h3>人员查询</h3>
+                <div class="search-right-form-text">查询相关工作人员或外聘人员</div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">人员类型：</div>
+                    <el-select v-model="value" placeholder="请选择人员类型" popper-class="custom-select-dropdown">
+                        <el-option label="不限" value="1" />
+                        <el-option label="调研员" value="2" />
+                        <el-option label="法制监督员" value="3" />
+                        <el-option label="特邀评论员" value="4" />
+                        <el-option label="特邀观察员" value="5" />
+                        <el-option label="特邀编辑" value="6" />
+                        <el-option label="信息员" value="7" />
+                        <el-option label="特约通讯员" value="8" />
+                        <el-option label="普法宣传员" value="9" />
+                        <el-option label="工作证" value="10" />
+                        <el-option label="其它工作人员" value="11" />
+                    </el-select>
+                </div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">人员姓名：</div>
+                    <el-input v-model="input" placeholder="请输入人员姓名" />
+                </div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">证件编号：</div>
+                    <el-input v-model="input" placeholder="请输入证件编号" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">提交</button>
+                </div>
+            </div>
+            <!--选题查询-->
+            <div class="search-right-box-form">
+                <h3>选题查询</h3>
+                <div class="search-right-form-text">
+                    请输入您想要查询的选题
+                </div>
+                <div class="search-right-select-box">
+                    地区：
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
+                            @click="change(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
+                            @click="change1(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="选题名称" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                    <button class="reset-button">重置</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//1.1 获得跳转过来的id
+const route = useRoute();
+//获得详情id
+const articleId = parseInt(route.params.id); //获得该页面的id
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[1]; 
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// let routeId = 20 //排除路径错误可以打开这个
+// const routeId = numberPart;
+let routeId;
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    routeId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//1.2 获得父级栏目的名称、id
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+const parent_children_count = ref(0)
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取父级栏目数据")
+    console.log(listData)
+    if (listData.code == 200) {
+        console.log(listData.data);
+        parent_name.value = listData.data.alias;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.aLIas_pinyin;
+        parent_children_count.value = listData.data.children_count;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取详情内容")
+        console.log("后端错误反馈：",mkdata.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置详情页面SEO数据")
+    console.log("后端错误反馈：",setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+
+//4.展示行政区划 start ---------------------------------------->
+//let areaList = ref("")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    cityList.value = shengData.data;
+    regionList.value = [];// 清空县 
+}
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    regionList.value = xianData.data;
+}
+let change2 = async (id) => {
+    regionid.value = id;
+}
+onMounted(async () => {
+    //从客户端获取行政区划
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result2 = await response2.json();
+        provinceList.value = result2.data;
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
+    const parentElement = document.querySelector('.nav_in');
+    if (targetElement && parentElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        const distanceToParentLeft = targetRect.left - parentRect.left;
+        const navigationElement = document.querySelector('.partOne .navigationOne');
+        if (navigationElement) {
+            navigationElement.scrollLeft = distanceToParentLeft - 66;
+        }
+    }             
+})
+//4.展示行政区划 end ---------------------------------------->
+
+//5.表单 start---------------------------------------->
+let input = ref("");
+let value = ref("1");
+const submitForm = () => {
+    console.log(input.value)
+    console.log(value.value)
+}
+//5.表单 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+            font-weight: normal!important; 
+            &:hover {
+                color:#333
+            }
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//搜索
+.search-box {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        width: 60%;
+        box-sizing: border-box;
+        .no-result-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            background: #027dc3;
+            padding: 50px;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            .no-result-image {
+                width: 50%;
+                img {
+                    width: 288px;
+                    height: 288px; 
+                    margin: 0 auto;
+                    display: block;
+                }
+            }
+            .no-result-content {
+                width: 50%;
+                .no-result-title {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: bold;
+                    font-size: 18px;
+                }
+                .no-result-text {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                }
+                .no-result-button {
+                    display: block;
+                    width: 100px;
+                    height: 40px;
+                    line-height: 40px;
+                    background: #f36420;
+                    margin: 20px auto;
+                    text-align: center;
+                    color: #fff;
+                    font-size: 16px;
+                }
+            }
+            
+        }
+        .search-left-box-result {
+            .result-box {
+                .result-box-title {
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    text-align: center;
+                    font-size: 16px;
+                    color: #000;
+                    border: 1px solid #000;
+                    box-sizing: border-box;
+                }
+                .result-box-content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    >div {
+                        width: 50%;
+                        height: 50px;
+                        line-height: 50px;
+                        border: 1px solid #000;
+                        box-sizing: border-box;
+                        padding: 0 20px;
+                        border-top: 0;
+                        font-size: 16px;
+                        &:last-child {
+                            border-left: 0;
+                        }
+                    }
+                }
+            }
+            .result-topic-box {
+                margin: 20px 0;
+                .result-topic-title {
+                    border-bottom: 1px solid #ccc;
+                    >div {
+                        width: 100px;
+                        height: 40px;
+                        text-align: center;
+                        line-height: 40px;
+                        background: #007aff;
+                        color: #fff;
+                        font-size: 16px;
+                    }
+                }
+                .result-topic-content {
+                    border-bottom: 1px solid #ccc;
+                    margin: 20px 0;
+                    h3 {
+                        font-size: 18px;
+                        font-weight: bold;
+                    }
+                    .result-topic-content-main {
+                        width: 99%;
+                        height: auto;
+                        overflow: hidden;
+                        border: 1px solid #ccc;
+                        margin: 10px 0;
+                        padding: 10px;
+                        box-sizing: border-box;
+                        >div {
+                            display: block;
+                            width: 100%;
+                            height: auto;
+                            line-height: 30px;
+                            font-size: 16px;
+                            color: #000;
+                        }
+                    }
+                    .result-topic-content-bottom {
+                        display: flex;
+                        align-items: center;
+                        div {
+                            padding: 0 10px;
+                            font-size: 14px;
+                            color: #000;
+                            line-height: 30px;
+                        }
+                    }
+                }
+            }
+            
+        }
+        
+        .search-left-reset-button {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            margin-top: 40px;
+            >div {
+                width: 100px;
+                height: 40px;
+                text-align: center;
+                background: #007aff;
+                color: #fff;
+                font-size: 16px;
+            }
+        }
+        
+        
+        .search-left-box-form {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            border: 1px solid #333;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            .search-form1-left-box {
+                .search-form1-title {
+                    display: flex;
+                    align-items: center;
+                    font-size: 19px;
+                    color: #000;
+                    img {
+                        display: block;
+                        width: 24px;
+                        height: 24px;
+                        float: left;
+                        margin-right: 10px;
+                    }
+                }
+                .search-form1-text {
+                    width: 100%;
+                    height: auto;
+                    line-height: 30px;
+                    margin: 20px 0;
+                    font-size: 16px;
+                    color: #333;
+                }
+                .search-form1-input-box {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 20px;
+                    div.inputText {
+                        display: block;
+                        color: #333;
+                        font-size: 16px;
+                        white-space: nowrap;
+                    }
+                    input {
+                        height: 40px;
+                        line-height: 40px;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-input__inner) {
+                        color:#000
+                    }
+                }
+            }
+            .search-form1-wx {
+                width: 38%;
+                img {
+                    width: 100%;
+                }
+                >div {
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 16px;
+                    color: #333;
+                    text-align: center;
+                }
+            }
+        }
+    }
+    .search-right-box {
+        width: 38%;
+        box-sizing: border-box;
+        .search-right-box-form {
+            h3 {
+                width: 100%;
+                line-height: 40px;
+                font-size: 18px;
+                color: #000;
+            }
+            .search-right-form-text {
+                display: block;
+                width: 100%;
+                height: 70px;
+                line-height: 70px;
+                text-align: center;
+                font-size: 16px;
+                color: #333;
+            }
+            .search-right-input-box {
+                margin-bottom: 20px;
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__placeholder) {
+                    color:#000;
+                    font-weight: normal;
+                }
+                :deep(.el-input__inner) {
+                    color:#000;
+                }
+            }
+            .search-right-input-box-2 {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 20px;
+                .inputText {
+                    display: block;
+                    color: #333;
+                    font-size: 16px;
+                    white-space: nowrap;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__placeholder) {
+                    color:#000;
+                    font-weight: normal;
+                }
+                :deep(.el-input__inner) {
+                    color:#000;
+                }
+            }
+            .search-right-button-box {
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                button:first-child {
+                    margin-right: 20px;
+                }
+                .submit-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    color: #fff;
+                    background: #027dc3;
+                    outline: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                .reset-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    background: #ccc;
+                    border: 1px solid #027dc3;
+                    color: #027dc3;
+                    outline: none;
+                    cursor: pointer;
+                }
+            }
+            .search-right-select-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 16px;
+                margin-bottom: 20px;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10px;
+                }
+                :deep(.el-select__placeholder) {
+                    color:#000;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        text-align: center;
+        button {
+            width: 100px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: #027dc3;
+            color: #fff;
+            font-size: 16px;
+            margin: 0 auto;
+            display: block;
+            border: none;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+<style>
+.custom-select-dropdown .el-select-dropdown__item {
+  font-size: 16px;
+  color: #333;
+}
+.custom-select-dropdown .el-select-dropdown__item:hover {
+  background-color: #027dc3;
+  color: #fff;
+}
+</style>
+
+
+

components/zoom/diaoyanxuanti.vue

@@ -0,0 +1,573 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">人员查询</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!-- 查询 -->
+    <div class="search-box">
+        <div class="search-left-box">
+            <div class="dytlt">
+                <NuxtLink to="/">所有选题</NuxtLink>
+			</div>
+            <ul class="xtlist">
+                <li>黑龙江建三江管理局前进农场金三角半地下门市污水倒灌问题及责任追溯调研</li>
+                <li>关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
+                <li>关于山东省曹县未知名企业漂洗废布废料是否造成污染一事需要调研的申请</li>
+                <li>关于山西省吕梁市临县城庄镇石盘头村梓腾种养专业合作社2025年12月1日发生一起安全事故致人死亡，涉嫌工伤瞒报进行调研</li>
+                <li>关于隆回县北山镇小伍村农村自建房违规圈地一事的调研</li>
+                <li>关于北票龙潭盖宏彦涉嫌在朝阳黄金冶炼厂倒卖氰化尾渣一事进行调研核实</li>
+                <li>关于唐县黄石口镇一企业违规占地一事的调研</li>
+                <li>关于怀仁市煤炭企业与生态环境措施相关事宜进行调研</li>
+                <li>关于荆门市掇刀区团林铺镇人民政府违法强拆何金石房屋，猪场的违法行为和补偿不足一事的调研</li>
+                <li>关于临湘市桃林镇坪上村农村自建房违规圈地一事的调研</li>
+                <li>关于大同市恒安街北侧城市棚户区改造项目（s6、s7、s8）拒付高佑工程款相关事宜进行调研</li>
+                <li>关于开封市杞县马廷进自家宅基地被侵占一事调研核实</li>
+                <li>关于新乡市原阳县信访局陈庆利涉嫌隐瞒信访事项、打压信访人等违规行为一事进行调研核实</li>
+                <li>关于洞口县岩山镇陡山村农村自建房违规圈地一事调研</li>
+                <li>关于洪江市安江镇白虎脑社区一别墅违规圈地一事调研</li>
+                <li>关于济宁市泗水县石料加工污水外排，环保设置不齐全调研申请</li>
+                <li>关于济宁市一无名石料加工厂在组织生产期间无视环保要求，污水外排，环保设置不齐全不使用，需要实地调研特申请</li>
+                <li>关于陕西星火煤业有限责任公司于2025年6月19日发生事故致人死亡，涉嫌公伤瞒报一事进行调研核实</li>
+                <li>关于中科招商增股中违规操作,致投资者合法权益严重受损等情况进行调研核实</li>
+                <li>关于山西怀仁中能芦子沟何家堡煤业有限责任公司越界开釆一事进行调研</li>
+            </ul>
+            <div class="pagesnav">
+			    <a>更多选题请联系客服</a>
+			</div>
+        </div>
+        <div class="search-right-box">
+            <!--选题查询-->
+            <div class="search-right-box-form">
+                <h3>选题查询</h3>
+                <div class="search-right-form-text">
+                    请输入您想要查询的选题
+                </div>
+                <div class="search-right-select-box">
+                    地区：
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
+                            @click="change(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
+                            @click="change1(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="选题名称" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                    <button class="reset-button">重置</button>
+                </div>
+            </div>
+            <!--车辆查询-->
+            <div class="search-right-box-form">
+                <h3>车辆查询</h3>
+                <div class="search-right-form-text">请输入相关工作车辆或车牌号</div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="车牌" />
+                </div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="车型" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                    <button class="reset-button">重置</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//1.1 获得跳转过来的id
+const route = useRoute();
+//获得详情id
+const articleId = parseInt(route.params.id); //获得该页面的id
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[1]; 
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// let routeId = 20 //排除路径错误可以打开这个
+// const routeId = numberPart;
+let routeId;
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    routeId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//1.2 获得父级栏目的名称、id
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+const parent_children_count = ref(0)
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取父级栏目数据")
+    console.log(listData)
+    if (listData.code == 200) {
+        console.log(listData.data);
+        parent_name.value = listData.data.alias;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.aLIas_pinyin;
+        parent_children_count.value = listData.data.children_count;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取详情内容")
+        console.log("后端错误反馈：",mkdata.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置详情页面SEO数据")
+    console.log("后端错误反馈：",setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+
+//4.展示行政区划 start ---------------------------------------->
+//let areaList = ref("")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    cityList.value = shengData.data;
+    regionList.value = [];// 清空县 
+}
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    regionList.value = xianData.data;
+}
+let change2 = async (id) => {
+    regionid.value = id;
+}
+onMounted(async () => {
+    //从客户端获取行政区划
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result2 = await response2.json();
+        provinceList.value = result2.data;
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
+    const parentElement = document.querySelector('.nav_in');
+    if (targetElement && parentElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        const distanceToParentLeft = targetRect.left - parentRect.left;
+        const navigationElement = document.querySelector('.partOne .navigationOne');
+        if (navigationElement) {
+            navigationElement.scrollLeft = distanceToParentLeft - 66;
+        }
+    }             
+})
+//4.展示行政区划 end ---------------------------------------->
+
+//5.表单 start---------------------------------------->
+let input = ref("");
+let value = ref("1");
+const submitForm = () => {
+    console.log(input.value)
+    console.log(value.value)
+}
+//5.表单 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: normal!important; 
+            &:hover {
+                color:#333
+            }
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//搜索
+.search-box {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        .dytlt {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            margin: 0px auto 20px;
+            border-bottom: 1px solid #ccc;
+            a {
+                display: block;
+                width: 100px;
+                height: 40px;
+                background: #007aff;
+                color: #fff;
+                font-size: 16px;
+                text-align: center;
+            }
+        }
+        .xtlist {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            li {
+                list-style: none;
+                height: 40px;
+                line-height: 40px;
+                overflow: hidden;
+                border-bottom: 1px solid #ccc;
+            }
+        }
+        .pagesnav {
+            margin: 20px 0 40px 0;
+            a {
+                padding: 6px 12px;
+                margin-left: -1px;
+                line-height: 1.42857143;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                font-size: 10px;
+                border-radius: 4px;
+                cursor: pointer;
+                &:hover {
+                    background-color: #eee;
+                    border-color: #ddd;
+                }
+            }
+        }
+    }
+    .search-right-box {
+        width: 38%;
+        box-sizing: border-box;
+        .search-right-box-form {
+            h3 {
+                width: 100%;
+                line-height: 40px;
+                font-size: 18px;
+                color: #000;
+            }
+            .search-right-form-text {
+                display: block;
+                width: 100%;
+                height: 70px;
+                line-height: 70px;
+                text-align: center;
+                font-size: 16px;
+                color: #333;
+            }
+            .search-right-input-box {
+                margin-bottom: 20px;
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-input__inner) {
+                    color: #000;
+                }
+            }
+            .search-right-button-box {
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                button:first-child {
+                    margin-right: 20px;
+                }
+                .submit-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    color: #fff;
+                    background: #027dc3;
+                    outline: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                .reset-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    background: #ccc;
+                    border: 1px solid #027dc3;
+                    color: #027dc3;
+                    outline: none;
+                    cursor: pointer;
+                }
+            }
+            .search-right-select-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 16px;
+                margin-bottom: 20px;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10px;
+                }
+                :deep(.el-select__placeholder) {
+                    color: #000;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        text-align: center;
+        button {
+            width: 100px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: #027dc3;
+            color: #fff;
+            font-size: 16px;
+            margin: 0 auto;
+            display: block;
+            border: none;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+<style>
+.custom-select-dropdown .el-select-dropdown__item {
+  font-size: 16px;
+  color: #333;
+}
+.custom-select-dropdown .el-select-dropdown__item:hover {
+  background-color: #027dc3;
+  color: #fff;
+}
+</style>
+
+
+

components/zoom/dishizhongxin.vue

@@ -0,0 +1,636 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">地市中心</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!--查询结果-->
+    <div class="search-result-box">
+        <div class="search-result-box-title">
+            本地区暂未开通调研中心，欢迎有意从事法制公益性工作的公民或法人单位申请代理。
+            <br/>
+            详情咨询电话：010-56212745、010-53382908、010-56212741。
+        </div>
+        <div class="search-result-box-qq">
+            <div>QQ咨询：</div>
+            <div>
+                <img src="@/public/search/qq.gif" alt="">
+                <img src="@/public/search/qq.gif" alt="">
+            </div>
+        </div>
+        <div class="search-result-box-back">
+            <NuxtLink to="/">返回首页>></NuxtLink>
+        </div>
+    </div>
+    <!--查询-->
+    <div class="search-box">
+        <div class="search-left-box">
+            <div>
+                <span class="search-left-box-text">地区：</span>
+                <el-select v-model="province" placeholder="--" size="large" style="width: 180px" popper-class="custom-select-dropdown">
+                    <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
+                        @click="change(item.id)" :value="item.id" />
+                </el-select>
+                <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
+                    style="width: 180px" popper-class="custom-select-dropdown">
+                    <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
+                        @click="change1(item.id)" :value="item.id" />
+                </el-select>
+                <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
+                    style="width: 180px" popper-class="custom-select-dropdown">
+                    <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+                </el-select>
+            </div>
+            <button>搜索</button>
+        </div>
+        <div class="search-right-box">
+            <img src="@/public/search/dszx.png" alt="">
+            <div>手机扫描查询</div>
+        </div>
+    </div>
+    <div class="search-list-box">
+        <div class="search-list-box-title">中心列表</div>
+        <div class="search-list-box-main">
+            <NuxtLink to="/">京</NuxtLink>
+            <NuxtLink to="/">津</NuxtLink>
+            <NuxtLink to="/">沪</NuxtLink>
+            <NuxtLink to="/">渝</NuxtLink>
+            <NuxtLink to="/">冀</NuxtLink>
+            <NuxtLink to="/">豫</NuxtLink>
+            <NuxtLink to="/">云</NuxtLink>
+            <NuxtLink to="/">辽</NuxtLink>
+            <NuxtLink to="/">黑</NuxtLink>
+            <NuxtLink to="/">湘</NuxtLink>
+            <NuxtLink to="/">皖</NuxtLink>
+            <NuxtLink to="/">鲁</NuxtLink>
+            <NuxtLink to="/">新</NuxtLink>
+            <NuxtLink to="/">苏</NuxtLink>
+            <NuxtLink to="/">浙</NuxtLink>
+            <NuxtLink to="/">赣</NuxtLink>
+            <NuxtLink to="/">鄂</NuxtLink>
+            <NuxtLink to="/">桂</NuxtLink>
+            <NuxtLink to="/">甘</NuxtLink>
+            <NuxtLink to="/">晋</NuxtLink>
+            <NuxtLink to="/">蒙</NuxtLink>
+            <NuxtLink to="/">陕</NuxtLink>
+            <NuxtLink to="/">吉</NuxtLink>
+            <NuxtLink to="/">闽</NuxtLink>
+            <NuxtLink to="/">贵</NuxtLink>
+            <NuxtLink to="/">粤</NuxtLink>
+            <NuxtLink to="/">青</NuxtLink>
+            <NuxtLink to="/">藏</NuxtLink>
+            <NuxtLink to="/">川</NuxtLink>
+            <NuxtLink to="/">宁</NuxtLink>
+            <NuxtLink to="/">琼</NuxtLink>
+            <NuxtLink to="/">港</NuxtLink>
+            <NuxtLink to="/">澳</NuxtLink>
+            <NuxtLink to="/">台</NuxtLink>
+        </div>
+        <div class="search-list-box-content">
+            <div class="cityname">
+                <div class="sheng">
+                    <NuxtLink to="/">北京</NuxtLink>
+                </div>
+                <div class="shi">
+                    <NuxtLink to="/">东城区</NuxtLink>
+                    <NuxtLink to="/">延庆县</NuxtLink>
+                    <NuxtLink to="/">西城区</NuxtLink>
+                    <NuxtLink to="/">朝阳区</NuxtLink>
+                    <NuxtLink to="/">丰台区</NuxtLink>
+                    <NuxtLink to="/">石景山区</NuxtLink>
+                    <NuxtLink to="/">海淀区</NuxtLink>
+                    <NuxtLink to="/">门头沟区</NuxtLink>
+                    <NuxtLink to="/">房山区</NuxtLink>
+                    <NuxtLink to="/">通州区</NuxtLink>
+                    <NuxtLink to="/">顺义区</NuxtLink>
+                    <NuxtLink to="/">昌平区</NuxtLink>
+                    <NuxtLink to="/">大兴区</NuxtLink>
+                    <NuxtLink to="/">怀柔区</NuxtLink>
+                    <NuxtLink to="/">平谷区</NuxtLink>
+                    <NuxtLink to="/">密云县</NuxtLink>
+                </div>
+            </div>
+            <div class="cityname">
+				<div class="sheng">
+                    <NuxtLink to="/">四川</NuxtLink>
+                </div>
+				<div class="shi">
+                    <NuxtLink to="/">成都市</NuxtLink>
+                    <NuxtLink to="/">自贡市</NuxtLink>
+                    <NuxtLink to="/">攀枝花市</NuxtLink>
+                    <NuxtLink to="/">泸州市</NuxtLink>
+                    <NuxtLink to="/">德阳市</NuxtLink>
+                    <NuxtLink to="/">绵阳市</NuxtLink>
+                    <NuxtLink to="/">广元市</NuxtLink>
+                    <NuxtLink to="/">遂宁市</NuxtLink>
+                    <NuxtLink to="/">内江市</NuxtLink>
+                    <NuxtLink to="/">乐山市</NuxtLink>
+                    <NuxtLink to="/">南充市</NuxtLink>
+                    <NuxtLink to="/">眉山市</NuxtLink>
+                    <NuxtLink to="/">宜宾市</NuxtLink>
+                    <NuxtLink to="/">广安市</NuxtLink>
+                    <NuxtLink to="/">达州市</NuxtLink>
+                    <NuxtLink to="/">雅安市</NuxtLink>
+                    <NuxtLink to="/">巴中市</NuxtLink>
+                    <NuxtLink to="/">资阳市</NuxtLink>
+                    <NuxtLink to="/">阿坝藏族羌族自治州</NuxtLink>
+                    <NuxtLink to="/">甘孜藏族自治州</NuxtLink>
+                    <NuxtLink to="/">凉山彝族自治州</NuxtLink>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+//1.1 获得跳转过来的id
+const route = useRoute();
+//获得详情id
+const articleId = parseInt(route.params.id); //获得该页面的id
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[1]; 
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// let routeId = 20 //排除路径错误可以打开这个
+// const routeId = numberPart;
+let routeId;
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    routeId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//1.2 获得父级栏目的名称、id
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+const parent_children_count = ref(0)
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取父级栏目数据")
+    console.log(listData)
+    if (listData.code == 200) {
+        console.log(listData.data);
+        parent_name.value = listData.data.alias;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.aLIas_pinyin;
+        parent_children_count.value = listData.data.children_count;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取详情内容")
+        console.log("后端错误反馈：",mkdata.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置详情页面SEO数据")
+    console.log("后端错误反馈：",setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+
+//4.展示行政区划 start ---------------------------------------->
+//let areaList = ref("")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    cityList.value = shengData.data;
+    regionList.value = [];// 清空县 
+}
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    regionList.value = xianData.data;
+}
+let change2 = async (id) => {
+    regionid.value = id;
+}
+onMounted(async () => {
+    //从客户端获取行政区划
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result2 = await response2.json();
+        provinceList.value = result2.data;
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
+    const parentElement = document.querySelector('.nav_in');
+    if (targetElement && parentElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        const distanceToParentLeft = targetRect.left - parentRect.left;
+        const navigationElement = document.querySelector('.partOne .navigationOne');
+        if (navigationElement) {
+            navigationElement.scrollLeft = distanceToParentLeft - 66;
+        }
+    }             
+})
+//4.展示行政区划 end ---------------------------------------->
+
+//5.表单 start---------------------------------------->
+let input = ref("");
+let value = ref("1");
+const submitForm = () => {
+    console.log(input.value)
+    console.log(value.value)
+}
+//5.表单 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: normal!important; 
+            &:hover {
+                color:#333
+            }
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//搜索
+.search-box {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        width: 70%;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        >div {
+            width: 80%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            .search-left-box-text {
+                width: 15%;
+                text-align: center;
+                font-size: 16px;
+                font-weight: bold;
+                display: block;
+            }
+            :deep(.el-select__wrapper) {
+                margin-left: 10px;
+            }
+            :deep(.el-select__placeholder) {
+                color:#000;
+            }
+        }
+        >button {
+            width: 10%;
+            display: block;
+            color: #fff;
+            background-color: #337ab7;
+            border-color: #2e6da4;
+            font-size: 14px;
+            font-weight: 400;
+            text-align: center;
+            white-space: nowrap;
+            user-select: none;
+            background-image: none;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            height: 35px;
+            line-height: 35px;
+        }
+    }
+    .search-right-box {
+        margin-right: 50px;
+        width: 20%;
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        >div {
+            display: block;
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            font-size: 16px;
+            color: #333;
+            text-align: center
+        }
+    }
+}
+.search-list-box {
+    width: 1400px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    margin: 30px auto;
+    position: relative;
+    .search-list-box-title {
+        width: 150px;
+        height: 50px;
+        line-height: 50px;
+        font-size: 30px;
+        color: #000;
+        font-weight: bold;
+        text-align: center;
+        position: absolute;
+        top: -25px;
+        left: 20px;
+        background: #fff;
+    }
+    .search-list-box-main {
+        width: 100%;
+        padding: 30px;
+        border-bottom: 1px solid #ccc;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            padding: 0 10px;
+            color: #000;
+        }
+    }
+    .search-list-box-content {
+        .cityname {
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-start;
+            border-bottom: 1px solid #ccc;
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+        .sheng {
+            width: 20%;
+            text-align: center;
+            font-size: 20px;
+            line-height: 200%;
+            a {
+                color: #337ab7;
+            }
+        }
+        .shi {
+            width: 80%;
+            height: 100%;
+            font-size: 16px;
+            color: #000;
+            padding: 0 5px;
+            display: block;
+            border-left: 1px solid #ccc;
+            line-height: 40px;
+            a {
+                font-size: 16px;
+                color: #000;
+                padding: 0 5px;
+                display: block;
+                width: auto;
+                float: left;
+            }
+        }
+    }
+}
+//返回查询结果
+.search-result-box {
+    width: 500px;
+    margin: 80px auto;
+    height: auto;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    .search-result-box-title {
+        line-height: 30px;
+        width: 488px;
+        height: auto;
+        overflow: hidden;
+        padding: 6px 6px 0 6px;
+        font-size: 15px;
+        font-family: serif;
+    }
+    .search-result-box-qq {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        line-height: 30px;
+        width: 488px;
+        height: auto;
+        overflow: hidden;
+        padding: 0 6px 0 6px;
+        font-size: 15px;
+        font-family: serif;
+        div:nth-child(2) {
+            display: flex;
+            margin-left: 80px;
+            img {
+                margin-right: 20px;
+            }
+        }
+    }
+    .search-result-box-back {
+        text-align: right;
+        width: 488px;
+        height: 40px;
+        overflow: hidden;
+        line-height: 48px;
+        margin: 0;
+        a {
+            color: red;
+            font-weight: bold;
+            font-size:10px;
+        }
+    }
+}
+</style>
+
+
+
+

components/zoom/jieshaoxinchaxun.vue

@@ -0,0 +1,815 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">车辆查询</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!--查询：原始状态-->
+    <div class="search-box-long">
+        <div class="search-left-box">
+            <div>
+                <span class="search-left-box-text">介绍信编号：</span>
+                <el-input v-model="input" placeholder="" />
+            </div>
+            <div><NuxtLink to="/">（查看位置示例）</NuxtLink></div>
+            <button>搜索</button>
+        </div>
+        <div class="search-right-box">
+            <img src="@/public/search/jsxcx.png" alt="">
+            <div>手机扫描查询</div>
+        </div>
+    </div>
+    
+    <!--查询：查询状态-->
+    <div class="search-box">
+        <div class="search-left-box">
+            <!--查询结果-->
+            <div class="search-left-box-result">
+                <!--未查询到结果-->
+                <div class="no-result-box">
+                    <div class="no-result-image">
+                        <img src="@/public/search/rc.jpg" alt="">
+                    </div>
+                    <div class="no-result-content">
+                        <div class="no-result-title">sorry请您确认后再查询</div>
+                        <div class="no-result-text">您可以通过以下方式继续访问……</div>
+                        <div class="no-result-button">返回查询页</div>
+                    </div>
+                </div>
+            </div>
+            <!--人员查询表单-->
+            <div class="search-left-reset-button">
+                <div>重新查询</div>
+            </div>
+            <div class="search-left-box-form">
+                <div class="search-form1-left-box">
+                    <div class="search-form1-title">
+                        <img src="@/public/search/search.png" alt="">
+                        查询相关介绍信内容
+                    </div>
+                    <div class="search-form1-text">请输入您要查询的介绍信编号</div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">介绍信编号:</div>
+                        <el-input v-model="input" placeholder="请输入汽车牌照" style="width: 300px"/>
+                        <NuxtLink to="/">（查看位置示例）</NuxtLink>
+                        <button>查询</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="search-right-box">
+            <!--选题查询-->
+            <div class="search-right-box-form">
+                <h3>车辆查询</h3>
+                <div class="search-right-form-text">
+                    请输入相关工作车辆或车牌号
+                </div>
+                <div class="search-right-input-box">
+                    <div class="inputText">车牌：</div>
+                    <el-input v-model="input" placeholder="" />
+                </div>
+                <div class="search-right-input-box">
+                    <div class="inputText">车型：</div>
+                    <el-input v-model="input" placeholder="" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                </div>
+            </div>
+            <!--人员查询-->
+            <div class="search-right-box-form">
+                <h3>人员查询</h3>
+                <div class="search-right-form-text">查询相关工作人员或外聘人员</div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">人员类型：</div>
+                    <el-select v-model="value" placeholder="请选择人员类型" popper-class="custom-select-dropdown">
+                        <el-option label="不限" value="1" />
+                        <el-option label="调研员" value="2" />
+                        <el-option label="法制监督员" value="3" />
+                        <el-option label="特邀评论员" value="4" />
+                        <el-option label="特邀观察员" value="5" />
+                        <el-option label="特邀编辑" value="6" />
+                        <el-option label="信息员" value="7" />
+                        <el-option label="特约通讯员" value="8" />
+                        <el-option label="普法宣传员" value="9" />
+                        <el-option label="工作证" value="10" />
+                        <el-option label="其它工作人员" value="11" />
+                    </el-select>
+                </div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">人员姓名：</div>
+                    <el-input v-model="input" placeholder="请输入人员姓名" />
+                </div>
+                <div class="search-right-input-box-2">
+                    <div class="inputText">证件编号：</div>
+                    <el-input v-model="input" placeholder="请输入证件编号" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">提交</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//1.1 获得跳转过来的id
+const route = useRoute();
+//获得详情id
+const articleId = parseInt(route.params.id); //获得该页面的id
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[1]; 
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// let routeId = 20 //排除路径错误可以打开这个
+// const routeId = numberPart;
+let routeId;
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    routeId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//1.2 获得父级栏目的名称、id
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+const parent_children_count = ref(0)
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取父级栏目数据")
+    console.log(listData)
+    if (listData.code == 200) {
+        console.log(listData.data);
+        parent_name.value = listData.data.alias;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.aLIas_pinyin;
+        parent_children_count.value = listData.data.children_count;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取详情内容")
+        console.log("后端错误反馈：",mkdata.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置详情页面SEO数据")
+    console.log("后端错误反馈：",setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+
+//4.展示行政区划 start ---------------------------------------->
+//let areaList = ref("")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    cityList.value = shengData.data;
+    regionList.value = [];// 清空县 
+}
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    regionList.value = xianData.data;
+}
+let change2 = async (id) => {
+    regionid.value = id;
+}
+onMounted(async () => {
+    //从客户端获取行政区划
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result2 = await response2.json();
+        provinceList.value = result2.data;
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
+    const parentElement = document.querySelector('.nav_in');
+    if (targetElement && parentElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        const distanceToParentLeft = targetRect.left - parentRect.left;
+        const navigationElement = document.querySelector('.partOne .navigationOne');
+        if (navigationElement) {
+            navigationElement.scrollLeft = distanceToParentLeft - 66;
+        }
+    }             
+})
+//4.展示行政区划 end ---------------------------------------->
+
+//5.表单 start---------------------------------------->
+let input = ref("");
+let value = ref("1");
+const submitForm = () => {
+    console.log(input.value)
+    console.log(value.value)
+}
+//5.表单 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+            font-weight: normal!important; 
+            &:hover {
+                color:#333
+            }
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//搜索-原始状态
+.search-box-long {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        width: 70%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        >div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            white-space: nowrap;
+            .search-left-box-text {
+                width: 40%;
+                text-align: center;
+                font-size: 16px;
+                font-weight: bold;
+                display: block;
+            }
+            a {
+                font-weight: bold;
+                font-size: 11px;
+                color: #337ab7;
+                text-decoration: none;
+            }
+            &:first-child {
+                width: 45%;
+            }
+        }
+        >button {
+            width: 10%;
+            display: block;
+            color: #fff;
+            background-color: #337ab7;
+            border-color: #2e6da4;
+            font-size: 14px;
+            font-weight: 400;
+            text-align: center;
+            white-space: nowrap;
+            user-select: none;
+            background-image: none;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            height: 35px;
+            line-height: 35px;
+        }
+    }
+    .search-right-box {
+        margin-right: 50px;
+        width: 20%;
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+        >div {
+            display: block;
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            font-size: 16px;
+            color: #333;
+            text-align: center
+        }
+    }
+}
+//搜索-查询状态
+.search-box {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        width: 60%;
+        box-sizing: border-box;
+        .no-result-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            background: #027dc3;
+            padding: 50px;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            .no-result-image {
+                width: 50%;
+                img {
+                    width: 288px;
+                    height: 288px; 
+                    margin: 0 auto;
+                    display: block;
+                }
+            }
+            .no-result-content {
+                width: 50%;
+                .no-result-title {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: bold;
+                    font-size: 18px;
+                }
+                .no-result-text {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                }
+                .no-result-button {
+                    display: block;
+                    width: 100px;
+                    height: 40px;
+                    line-height: 40px;
+                    background: #f36420;
+                    margin: 20px auto;
+                    text-align: center;
+                    color: #fff;
+                    font-size: 16px;
+                }
+            }
+        }
+        .search-left-reset-button {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            margin-top: 40px;
+            >div {
+                width: 100px;
+                height: 40px;
+                text-align: center;
+                background: #007aff;
+                color: #fff;
+                font-size: 16px;
+            }
+        }
+        .search-left-box-form {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            border: 1px solid #333;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            .search-form1-left-box {
+                width: 100%;
+                .search-form1-title {
+                    display: flex;
+                    align-items: center;
+                    font-size: 19px;
+                    color: #000;
+                    img {
+                        display: block;
+                        width: 24px;
+                        height: 24px;
+                        float: left;
+                        margin-right: 10px;
+                    }
+                }
+                .search-form1-text {
+                    width: 100%;
+                    height: auto;
+                    line-height: 30px;
+                    margin: 20px 0;
+                    font-size: 16px;
+                    color: #333;
+                }
+                .search-form1-input-box {
+                    width: 95%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 20px;
+                    margin: 0 auto;
+                    div.inputText {
+                        display: block;
+                        color: #333;
+                        font-size: 16px;
+                        white-space: nowrap;
+                        font-weight: bold;
+                        width: 16%;
+                        text-align: center;
+                    }
+                    input {
+                        height: 40px;
+                        line-height: 40px;
+                    }
+                    button {
+                        width: 100px;
+                        height: 40px;
+                        line-height: 40px;
+                        text-align: center;
+                        background: #027dc3;
+                        color: #fff;
+                        font-size: 16px;
+                        display: block;
+                        border: none;
+                        cursor: pointer;
+                    }
+                    a {
+                        display: block;
+                        color: #337ab7;
+                        text-decoration: none;
+                        line-height: 40px;
+                        white-space: nowrap;
+                        font-size:12px;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-input__inner) {
+                        color:#000
+                    }
+                }
+            }
+        }
+    }
+    .search-right-box {
+        width: 38%;
+        box-sizing: border-box;
+        .search-right-box-form {
+            h3 {
+                width: 100%;
+                line-height: 40px;
+                font-size: 18px;
+                color: #000;
+            }
+            .search-right-form-text {
+                display: block;
+                width: 100%;
+                height: 70px;
+                line-height: 70px;
+                text-align: center;
+                font-size: 16px;
+                color: #333;
+            }
+            .search-right-input-box {
+                margin-bottom: 20px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .inputText {
+                    display: block;
+                    color: #333;
+                    font-size: 16px;
+                    white-space: nowrap;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-input__inner) {
+                    color:#000;
+                }
+            }
+            .search-right-input-box-2 {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 20px;
+                .inputText {
+                    display: block;
+                    color: #333;
+                    font-size: 16px;
+                    white-space: nowrap;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__placeholder) {
+                    color:#000;
+                    font-weight: normal;
+                }
+                :deep(.el-input__inner) {
+                    color:#000;
+                }
+            }
+            .search-right-button-box {
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                button:first-child {
+                    margin-right: 20px;
+                }
+                .submit-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    color: #fff;
+                    background: #027dc3;
+                    outline: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                .reset-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    background: #ccc;
+                    border: 1px solid #027dc3;
+                    color: #027dc3;
+                    outline: none;
+                    cursor: pointer;
+                }
+            }
+            .search-right-select-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 16px;
+                margin-bottom: 20px;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10px;
+                }
+                :deep(.el-select__placeholder) {
+                    color:#000;
+                }
+            }
+        }
+    }
+}
+</style>
+<style>
+.custom-select-dropdown .el-select-dropdown__item {
+  font-size: 16px;
+  color: #333;
+}
+.custom-select-dropdown .el-select-dropdown__item:hover {
+  background-color: #027dc3;
+  color: #fff;
+}
+</style>
+
+
+

components/zoom/renyuanchaxun.vue

@@ -0,0 +1,867 @@
+<template>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">人员查询</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!-- 查询 -->
+    <div class="search-box">
+        <div class="search-left-box">
+            <!--查询结果-->
+            <div class="search-left-box-result">
+                <!--未查询到结果-->
+                <div class="no-result-box">
+                    <div class="no-result-image">
+                        <img src="@/public/search/rc.jpg" alt="">
+                    </div>
+                    <div class="no-result-content">
+                        <div class="no-result-title">sorry请您确认后再查询</div>
+                        <div class="no-result-text">您可以通过以下方式继续访问……</div>
+                        <div class="no-result-button">返回查询页</div>
+                    </div>
+                </div>
+                <!--人员详情-->
+                <div class="result-box">
+                    <div class="result-title">梁瑞良(<NuxtLink to="/">点击查看详情</NuxtLink>)</div>
+                    <div class="result-content">
+                        <div class="result-content-left">
+                            <div><span>性&emsp;&emsp;别：</span>男</div>
+                            <div><span>出生年月：</span>1978年10月25日</div>
+                            <div><span>证件编号：</span>FZNC240272</div>
+                            <div><span>工作范围：</span>全国</div>
+                            <div><span>职&emsp;&emsp;务：</span>中级调研员（全国）</div>
+                        </div>
+                        <div class="result-content-right">
+                            <img src="@/public/search/user.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!--个人选题-->
+                <div class="result-topic-box">
+                    <div class="result-topic-title">
+                        <div>个人选题</div>
+                    </div>
+                    <div class="result-topic-content">
+                        <h3>关于耒阳中磊石材有限公司涉嫌非法开矿投诉调研</h3>
+                        <div class="result-topic-content-main">
+                            <div>同行人员：蒋茂林 贺意成</div>
+                            <div>涉及组织机构名称：耒阳市人民政府、耒阳市市委宣传部</div>
+                        </div>
+                        <div class="result-topic-content-bottom">
+                            <div>发布时间：2025-04-10</div>
+                            <div>结束时间：2025-04-29</div>
+                            <div>申报人：梁瑞良</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="result-topic-box">
+                    <div class="result-topic-title">
+                        <div>个人选题</div>
+                    </div>
+                    <div class="result-topic-content">
+                        <h3>关于耒阳中磊石材有限公司涉嫌非法开矿投诉调研</h3>
+                        <div class="result-topic-content-main">
+                            <div>同行人员：蒋茂林 贺意成</div>
+                            <div>涉及组织机构名称：耒阳市人民政府、耒阳市市委宣传部</div>
+                        </div>
+                        <div class="result-topic-content-bottom">
+                            <div>发布时间：2025-04-10</div>
+                            <div>结束时间：2025-04-29</div>
+                            <div>申报人：梁瑞良</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--人员查询表单-->
+            <div class="search-left-reset-button">
+                <div>重新查询</div>
+            </div>
+            <div class="search-left-box-form">
+                <div class="search-form1-left-box">
+                    <div class="search-form1-title">
+                        <img src="@/public/search/search.png" alt="">
+                        查询相关工作人员或外聘人员
+                    </div>
+                    <div class="search-form1-text">请输入您要查询的工作人员/外聘人员姓名或证件编号</div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">人员类型：</div>
+                        <el-select v-model="value" placeholder="" popper-class="custom-select-dropdown">
+                            <el-option label="不限" value="1" />
+                            <el-option label="调研员" value="2" />
+                            <el-option label="法制监督员" value="3" />
+                            <el-option label="特邀评论员" value="4" />
+                            <el-option label="特邀观察员" value="5" />
+                            <el-option label="特邀编辑" value="6" />
+                            <el-option label="信息员" value="7" />
+                            <el-option label="特约通讯员" value="8" />
+                            <el-option label="普法宣传员" value="9" />
+                            <el-option label="工作证" value="10" />
+                            <el-option label="其它工作人员" value="11" />
+                        </el-select>
+                    </div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">人员姓名：</div>
+                        <el-input v-model="input" placeholder="" />
+                    </div>
+                    <div class="search-form1-input-box">
+                        <div class="inputText">证件编号：</div>
+                        <el-input v-model="input" placeholder="" />
+                    </div>
+                    <div class="search-form1-submit-button">
+                        <button>提交</button>
+                    </div>
+                </div>
+                <div class="search-form1-wx">
+                    <img src="@/public/search/rycx.png" alt="">
+                    <div>手机扫描查询</div>
+                </div>
+            </div>
+        </div>
+        <div class="search-right-box">
+            <!--车辆查询-->
+            <div class="search-right-box-form">
+                <h3>车辆查询</h3>
+                <div class="search-right-form-text">请输入相关工作车辆或车牌号</div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="车牌" />
+                </div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="车型" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                    <button class="reset-button">重置</button>
+                </div>
+            </div>
+            <!--选题查询-->
+            <div class="search-right-box-form">
+                <h3>选题查询</h3>
+                <div class="search-right-form-text">
+                    请输入您想要查询的选题
+                </div>
+                <div class="search-right-select-box">
+                    地区：
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
+                            @click="change(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
+                            @click="change1(item.id)" :value="item.id" />
+                    </el-select>
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
+                        style="width: 120px" popper-class="custom-select-dropdown">
+                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </div>
+                <div class="search-right-input-box">
+                    <el-input v-model="input" placeholder="选题名称" />
+                </div>
+                <div class="search-right-button-box">
+                    <button class="submit-button">查询</button>
+                    <button class="reset-button">重置</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
+</template>
+
+<script setup>
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+
+//1.1 获得跳转过来的id
+const route = useRoute();
+//获得详情id
+const articleId = parseInt(route.params.id); //获得该页面的id
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[1]; 
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// let routeId = 20 //排除路径错误可以打开这个
+// const routeId = numberPart;
+let routeId;
+//通过导航路径反向查询导航id
+const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
+    method: 'GET',
+    query: {
+        'pinyin': targetSegment,
+    },
+});
+if(getRouteId.code == 200){
+    routeId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//1.2 获得父级栏目的名称、id
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+const parent_children_count = ref(0)
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取父级栏目数据")
+    console.log(listData)
+    if (listData.code == 200) {
+        console.log(listData.data);
+        parent_name.value = listData.data.alias;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.aLIas_pinyin;
+        parent_children_count.value = listData.data.children_count;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 30) + "...";
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取详情内容")
+        console.log("后端错误反馈：",mkdata.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置详情页面SEO数据")
+    console.log("后端错误反馈：",setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+
+//4.展示行政区划 start ---------------------------------------->
+//let areaList = ref("")
+//4.1 省
+let province = ref("")
+let provinceid = ref("")
+let provinceList = ref("")
+//4.2 市
+let city = ref("")
+let cityid = ref("")
+let cityList = ref("")
+//4.3 县
+let region = ref("")
+let regionid = ref("")
+let regionList = ref("")
+//选择市
+let change = async (id) => {
+    provinceid.value = id;
+    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    cityList.value = shengData.data;
+    regionList.value = [];// 清空县 
+}
+//选择县
+let change1 = async (id) => {
+    cityid.value = id;
+    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
+        method: 'GET',
+        query: {
+            'pid': id,
+        },
+    });
+    regionList.value = xianData.data;
+}
+let change2 = async (id) => {
+    regionid.value = id;
+}
+onMounted(async () => {
+    //从客户端获取行政区划
+    try {
+        const { $webUrl, $CwebUrl } = useNuxtApp();
+        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
+            headers: {
+                'Content-Type': 'application/json',
+                'Userurl': $CwebUrl,
+                'Origin': $CwebUrl
+            }
+        });
+        const result2 = await response2.json();
+        provinceList.value = result2.data;
+    } catch (error) {
+        console.error('获取行政区划数据失败:', error);
+    }
+    const targetElement = document.querySelector('.pc_none li .router-link-exact-active');
+    const parentElement = document.querySelector('.nav_in');
+    if (targetElement && parentElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const parentRect = parentElement.getBoundingClientRect();
+        const distanceToParentLeft = targetRect.left - parentRect.left;
+        const navigationElement = document.querySelector('.partOne .navigationOne');
+        if (navigationElement) {
+            navigationElement.scrollLeft = distanceToParentLeft - 66;
+        }
+    }             
+})
+//4.展示行政区划 end ---------------------------------------->
+
+//5.表单 start---------------------------------------->
+let input = ref("");
+let value = ref("1");
+const submitForm = () => {
+    console.log(input.value)
+    console.log(value.value)
+}
+//5.表单 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            line-height: 20px;
+            font-weight: normal!important; 
+            &:hover {
+                color:#333
+            }
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//搜索
+.search-box {
+    width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    .search-left-box {
+        width: 60%;
+        box-sizing: border-box;
+        .no-result-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            background: #027dc3;
+            padding: 50px;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+            .no-result-image {
+                width: 50%;
+                img {
+                    width: 288px;
+                    height: 288px; 
+                    margin: 0 auto;
+                    display: block;
+                }
+            }
+            .no-result-content {
+                width: 50%;
+                .no-result-title {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                    font-weight: bold;
+                    font-size: 18px;
+                }
+                .no-result-text {
+                    display: block;
+                    width: 100%;
+                    height: 50px;
+                    line-height: 50px;
+                    overflow: hidden;
+                    font-size: 16px;
+                    color: #fff;
+                    text-align: center;
+                }
+                .no-result-button {
+                    display: block;
+                    width: 100px;
+                    height: 40px;
+                    line-height: 40px;
+                    background: #f36420;
+                    margin: 20px auto;
+                    text-align: center;
+                    color: #fff;
+                    font-size: 16px;
+                }
+            }
+            
+        }
+        .search-left-box-result {
+            .result-box {
+                .result-title {
+                    display: block;
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 18px;
+                    color: #000;
+                    a {
+                        font-size: 18px;
+                        color: #000;
+                    }
+                }
+                .result-content {
+                    margin: 20px 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .result-content-left {
+                        width: 50%;
+                        div {
+                            display: flex;
+                            width: 100%;
+                            height: 40px;
+                            line-height: 40px;
+                            padding-left: 70px;
+                            font-size: 16px;
+                            color: #000;
+                        }
+                    }
+                    .result-content-right {
+                        width: 50%;
+                        text-align: center;
+                        img {
+                            width: 120px;
+                            height: 166px;
+                            margin-top: 10px;
+                        }
+                    }
+                }
+            }
+            .result-topic-box {
+                margin: 20px 0;
+                .result-topic-title {
+                    border-bottom: 1px solid #ccc;
+                    >div {
+                        width: 100px;
+                        height: 40px;
+                        text-align: center;
+                        line-height: 40px;
+                        background: #007aff;
+                        color: #fff;
+                        font-size: 16px;
+                    }
+                }
+                .result-topic-content {
+                    border-bottom: 1px solid #ccc;
+                    margin: 20px 0;
+                    h3 {
+                        font-size: 18px;
+                        font-weight: bold;
+                    }
+                    .result-topic-content-main {
+                        width: 99%;
+                        height: auto;
+                        overflow: hidden;
+                        border: 1px solid #ccc;
+                        margin: 10px 0;
+                        padding: 10px;
+                        box-sizing: border-box;
+                        >div {
+                            display: block;
+                            width: 100%;
+                            height: auto;
+                            line-height: 30px;
+                            font-size: 16px;
+                            color: #000;
+                        }
+                    }
+                    .result-topic-content-bottom {
+                        display: flex;
+                        align-items: center;
+                        div {
+                            padding: 0 10px;
+                            font-size: 14px;
+                            color: #000;
+                            line-height: 30px;
+                        }
+                    }
+                }
+            }
+            
+        }
+        
+        .search-left-reset-button {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            margin-top: 40px;
+            >div {
+                width: 100px;
+                height: 40px;
+                text-align: center;
+                background: #007aff;
+                color: #fff;
+                font-size: 16px;
+            }
+        }
+        
+        
+        .search-left-box-form {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            border: 1px solid #333;
+            padding: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            .search-form1-left-box {
+                .search-form1-title {
+                    display: flex;
+                    align-items: center;
+                    font-size: 19px;
+                    color: #000;
+                    img {
+                        display: block;
+                        width: 24px;
+                        height: 24px;
+                        float: left;
+                        margin-right: 10px;
+                    }
+                }
+                .search-form1-text {
+                    width: 100%;
+                    height: auto;
+                    line-height: 30px;
+                    margin: 20px 0;
+                    font-size: 16px;
+                    color: #333;
+                }
+                .search-form1-input-box {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 20px;
+                    div.inputText {
+                        display: block;
+                        color: #333;
+                        font-size: 16px;
+                        white-space: nowrap;
+                    }
+                    input {
+                        height: 40px;
+                        line-height: 40px;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40px;
+                        line-height: 40px;
+                        border:1px solid #000;
+                        box-shadow: none;
+                        border-radius: 2px;
+                        font-size: 16px;
+                        color: #333;
+                    }
+                    :deep(.el-input__inner) {
+                        color: #000;
+                    }
+                    :deep(.el-select__placeholder) {
+                        color: #000;
+                    }
+                }
+            }
+            .search-form1-wx {
+                width: 38%;
+                img {
+                    width: 100%;
+                }
+                >div {
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 16px;
+                    color: #333;
+                    text-align: center;
+                }
+            }
+        }
+    }
+    .search-right-box {
+        width: 38%;
+        box-sizing: border-box;
+        .search-right-box-form {
+            h3 {
+                width: 100%;
+                line-height: 40px;
+                font-size: 18px;
+                color: #000;
+            }
+            .search-right-form-text {
+                display: block;
+                width: 100%;
+                height: 70px;
+                line-height: 70px;
+                text-align: center;
+                font-size: 16px;
+                color: #333;
+            }
+            .search-right-input-box {
+                margin-bottom: 20px;
+                :deep(.el-input__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40px;
+                    line-height: 40px;
+                    border:1px solid #000;
+                    box-shadow: none;
+                    border-radius: 2px;
+                    font-size: 16px;
+                    color: #333;
+                }
+                :deep(.el-input__inner) {
+                    color: #000;
+                }
+            }
+            .search-right-button-box {
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 20px;
+                button:first-child {
+                    margin-right: 20px;
+                }
+                .submit-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    color: #fff;
+                    background: #027dc3;
+                    outline: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                .reset-button {
+                    display: block;
+                    width: 90px;
+                    height: 40px;
+                    line-height: 40px;
+                    text-align: center;
+                    font-size: 16px;
+                    background: #ccc;
+                    border: 1px solid #027dc3;
+                    color: #027dc3;
+                    outline: none;
+                    cursor: pointer;
+                }
+            }
+            .search-right-select-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-weight: bold;
+                font-size: 16px;
+                margin-bottom: 20px;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10px;
+                }
+                :deep(.el-select__placeholder) {
+                    color: #000;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        text-align: center;
+        button {
+            width: 100px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background: #027dc3;
+            color: #fff;
+            font-size: 16px;
+            margin: 0 auto;
+            display: block;
+            border: none;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+<style>
+.custom-select-dropdown .el-select-dropdown__item {
+  font-size: 16px;
+  color: #333;
+}
+.custom-select-dropdown .el-select-dropdown__item:hover {
+  background-color: #027dc3;
+  color: #fff;
+}
+</style>
+
+
+

middleware/setup.global.js

@@ -103,8 +103,12 @@ function getRouteWhiteList(path) {
             // "about",//关于我们
             // "zhaogongzhaopin",//招工招聘
             // "shukanxinxi",//书刊信息
+            "list-renyuanchaxun.html",//人员查询
+            "list-cheliangchaxun.html",//车辆查询
+            "list-dishizhongxin.html",//地市中心
+            "list-diaoyanxuanti.html",//调研选题
+            "list-jieshaoxinchaxun.html",//介绍信查询
         ]
-
         if (whiteList.includes(parts[0])) {
             console.log('白名单路由！允许访问！')
             return true

nuxt.config.js

@@ -1,55 +1,81 @@
 export default defineNuxtConfig({
-  //taget: "static",
-  ssr: true,
-  app: {
-    head: {
-      title: '',
-      meta: [
-        { name: 'description', content: '' },
-        { name: 'keywords', content: '' },
-        { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
-      ],
+    //taget: "static",
+    ssr: true,
+    app: {
+        head: {
+            title: '',
+            viewport: 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no',
+            meta: [
+                { name: 'description', content: '' },
+                { name: 'keywords', content: '' },
+                { name: 'viewport', content: 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover',tagPriority:10}
+            ],
+        },
     },
-  },
-  compatibilityDate: '2025-10-13',
-  devtools: { enabled: true },
-  module: [
-    '@nuxtjs/style-resources',
-    '@element-plus/nuxt',
-    "@gauseen/nuxt-proxy",
-    '@pinia/nuxt',
-  ],
-  css: [
-    '~/assets/css/global.css',
-    '~/assets/css/font.css',
-    'element-plus/dist/index.css',
-    'element-plus/theme-chalk/display.css'
-  ],
-  build: {
-    publicPath: '/',
-    transpile: ['#app-manifest'],
-  },
-  nitro: {
-    devServer: {
-      port:10000, // 指定生产服务器的端口
-    }
-  },
-  plugins: [
-    '@/plugins/element-plus',
-    {
-      src: '@/plugins/request',
-      mode: 'client'
-    }
-  ],
-  vite: {
-    optimizeDeps: {
-      include: ['#app-manifest'], // 强制包含该模块
+    compatibilityDate: '2025-10-13',
+    devtools: { 
+        enabled: true 
+    },
+    module: [
+        '@nuxtjs/style-resources',
+        '@element-plus/nuxt',
+        "@gauseen/nuxt-proxy",
+        '@pinia/nuxt',
+    ],
+    css: [
+        '~/assets/css/global.css',
+        '~/assets/css/font.css',
+        'element-plus/dist/index.css',
+        'element-plus/theme-chalk/display.css'
+    ],
+    build: {
+        publicPath: '/',
+        transpile: ['#app-manifest'],
+    },
+    nitro: {
+        devServer: {
+            port:10000, // 指定生产服务器的端口
+        }
+    },
+    plugins: [
+        '@/plugins/element-plus',
+        {
+            src: '@/plugins/request',
+            mode: 'client'
+        },
+        { 
+            src: '~/plugins/flexible.client.js', 
+            mode: 'client' 
+        }
+    ],
+    postcss: {//配置 postcss-pxtorem
+        plugins: {
+            'postcss-pxtorem': {
+                rootValue: 75, // 关键配置：设计稿是750px就填75，是375px就填37.5
+                propList: ['*'], // 需要转换的属性，*表示所有
+                selectorBlackList: [], // 选择器黑名单
+                // 只处理特定目录
+                include: [
+                    /pages/,
+                    /components/,
+                    /assets/,
+                ],
+                replace: true, // 替换包含rem的规则，不添加备用
+                mediaQuery: false, // 媒体查询内的px是否转换
+                minPixelValue: 2, // 最小转换值，小于2px不转换
+                exclude: /node_modules/i // 排除 node_modules 中的文件
+            }
+        }
     },
-    server: {
-      watch: {
-        // 忽略某些文件的监听
-        ignored: ['**/node_modules/nuxt/dist/app/composables/manifest.js']
-      }
+    vite: {
+        optimizeDeps: {
+            include: ['#app-manifest'], // 强制包含该模块
+        },
+        server: {
+            watch: {
+                // 忽略某些文件的监听
+                ignored: ['**/node_modules/nuxt/dist/app/composables/manifest.js']
+            }
+        }
     }
-  }
-})
+})

package-lock.json

@@ -14,6 +14,7 @@
         "@nuxtjs/style-resources": "^1.2.2",
         "@pinia/nuxt": "^0.5.5",
         "add": "^2.0.6",
+        "amfe-flexible": "^2.2.1",
         "axios": "^1.7.7",
         "cheerio": "^1.0.0",
         "element-plus": "^2.8.5",
@@ -23,6 +24,7 @@
         "less": "^4.2.0",
         "less-loader": "^12.2.0",
         "nuxt": "^3.13.0",
+        "postcss-pxtorem": "^6.1.0",
         "swiper": "^12.0.3",
         "vue": "^3.5.12",
         "vue-router": "latest"
@@ -3343,6 +3345,11 @@
         "node": ">= 14"
       }
     },
+    "node_modules/amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -8880,6 +8887,14 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "7.0.2",
       "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-7.0.2.tgz",

package.json

@@ -18,6 +18,7 @@
     "@nuxtjs/style-resources": "^1.2.2",
     "@pinia/nuxt": "^0.5.5",
     "add": "^2.0.6",
+    "amfe-flexible": "^2.2.1",
     "axios": "^1.7.7",
     "cheerio": "^1.0.0",
     "element-plus": "^2.8.5",
@@ -27,6 +28,7 @@
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "nuxt": "^3.13.0",
+    "postcss-pxtorem": "^6.1.0",
     "swiper": "^12.0.3",
     "vue": "^3.5.12",
     "vue-router": "latest"

pages/[dir]/[dir]/[id].vue

@@ -1,20 +1,186 @@
 <template>
-    <NewsDetail v-if="routeType == 1"></NewsDetail>
-    <GoodsDetail v-if="routeType == 2"></GoodsDetail>
+    <!-- 页面头部 -->
+    <HomePageHead></HomePageHead>
+    <!-- 导航栏 -->
+    <HomePageNavigation></HomePageNavigation>
+    <!-- 面包屑导航 -->
+    <div class="breadcrumb-box">
+        <div class="inner">
+            <span class="location">当前位置：</span>
+            <el-breadcrumb :separator-icon="ArrowRight">
+                <el-breadcrumb-item>
+                    <NuxtLink to="/">首页</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item>
+                    <NuxtLink :to="`list-1.html`"> {{ routLevelTitle }}</NuxtLink>
+                </el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">
+                    {{ routeNewsTtitle }}
+                </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+    </div>
+    <!-- 资讯列表 -->
+    <div class="newsDetail">
+        <div class="inner">
+            <div class="innerLeft">
+                <div class="LeftTop">
+                    <h1>{{ newsDetail.title }}</h1>
+                    <p>
+                        <span>时间：{{ time }}</span>
+                        <span>来源：{{ newsDetail.copyfrom }}</span>
+                        <span>作者：{{ newsDetail.author }}</span>
+                    </p>
+                </div>
+                <div 
+                    class="leftBottom" 
+                    v-html="newsDetail.content" 
+                    v-if="newsDetail.content" 
+                    @click="openPreview">
+                </div>
+                <div v-if="previewVisible" class="preview-modal" @click="closePreview">
+                    <img :src="selectedImage" alt="Preview">
+                </div>
+                <!-- 免责声明: -->
+                <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
+                    <p>原文链接：{{ newsDetail.fromurl }}</p>
+                    <p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
+                </div>
+                <div v-if="articleChoice">
+                    <!--投票-->
+                    <div class="index_3_box_vote" v-if="articleChoice">
+                        <div class="voteTitle">投票区</div>
+                        <div class="inquire">
+                            <p v-if="voteList.length>0">{{voteList[0].survey_name}}</p>
+                            <div class="radioBox">
+                            <!--投票选项-->
+                            <div v-if="!isDisabled">
+                                <div class="radio" v-if="isRadio">
+                                    <el-radio-group v-model="radio1" @change="handleRadioChange">
+                                        <el-radio v-for="item in voteList" :key="item.id" :value="item.id" size="large">
+                                            <span v-if="item.is_other == 0">{{item.choice_name}}</span>
+                                            <span v-else>其他</span>
+                                        </el-radio>
+                                    </el-radio-group>
+                                    <el-input
+                                        v-if="showUserChoice"
+                                        v-model="userChoice"
+                                        :rows="2"
+                                        type="textarea"
+                                        resize="none"
+                                        placeholder="请输入.."
+                                    />
+                                </div>
+                                <div class="checkInputBox" v-else>
+                                    <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
+                                        <span v-for="item in voteList" :key="item.id">
+                                            <span v-if="item.is_other == 0">
+                                                <el-checkbox size="large" :label="item.choice_name" :value="item.id"/>
+                                            </span>
+                                            <span v-else>
+                                                <el-checkbox size="large" label="其他" :value="item.id"/>
+                                            </span>
+                                        </span>
+                                    </el-checkbox-group>
+                                    <el-input
+                                        v-if="showUserChoice"
+                                        v-model="userChoice"
+                                        :rows="2"
+                                        type="textarea"
+                                        resize="none"
+                                        placeholder="请输入.."
+                                    />
+                                </div>
+                            </div>
+                            <!--投票结果-->
+                            <div class="inquireData" v-else>
+                                <div v-for="item in websiteSurveyData.data" :key="item.id">
+                                    <div class="inquireDataItem active" v-if="item.status == 1">
+                                        <div class="inquireDataItemTitle">
+                                            <span v-if="item.choice_name == ''">其他</span>
+                                            <span v-else>{{item.choice_name}}</span>
+                                        </div>
+                                        <div class="inquireDataItemNum">{{item.results}}票</div>
+                                    </div>
+                                    <div class="inquireDataItem" v-else>
+                                        <div class="inquireDataItemTitle">
+                                            <span v-if="item.choice_name == ''">其他</span>
+                                            <span v-else>{{item.choice_name}}</span>
+                                        </div>
+                                        <div class="inquireDataItemNum">{{item.results}}票</div>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+                            <div class="btn">
+                                <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!--推荐阅读-->
+                <div class="recommendRead" v-if="newsDetail.commendArticle != false">
+                    <div class="recommendReadTitle">
+                        <span class="read_title">
+                            推荐阅读
+                        </span>
+                    </div>
+                    <div class="recommendReadList">
+                        <div class="recommendReadListTitle" v-for="(item, index) in newsDetail.commendArticle"
+                            :key="item.id">
+                            <a :href="`/${item.alias_pinyin}/${item.id}.html`" v-if="index < 3">
+                                {{ item.title }}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!--上一篇 下一篇-->
+                <div class="prevNext">
+                    <NuxtLink to="/">上一篇：李强签署国务院令 公布《行政执法监督条例》</NuxtLink>
+                    <NuxtLink to="/">下一篇：没有了</NuxtLink>
+                </div>
+            </div>
+            <div class="innerRight">
+                <!-- 热点资讯1 -->
+                <!-- <div class="hotList1">
+                    <DetailHotNews></DetailHotNews>
+                </div> -->
+                <!-- 热点资讯2 -->
+                <div class="hotList2">
+                    <DetailHotNews2></DetailHotNews2>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 页面底部 -->
+    <HomeFoot></HomeFoot>
 </template>
 
 <script setup>
-//0.加载页面依赖 start ---------------------------------------->
-import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-//0.加载页面依赖 end ---------------------------------------->
-
-//1.获得路由id start ---------------------------------------->
+//1.页面依赖 start ---------------------------------------->
+import { onMounted } from 'vue'
+import { ElBreadcrumb, ElBreadcrumbItem,ElRadio, ElRadioGroup,ElCheckbox,ElCheckboxGroup,ElMessage,ElInput } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
+const nuxtApp = useNuxtApp();
+const axios = nuxtApp.$axios;
+//1.1 获得跳转过来的id
+const route = useRoute();
+const articleId = parseInt(route.params.id);  //获得该页面的id
+//1.2 获得父级栏目的名称、id
+//获得当前的完整路径
+const fullPath = route.path;
+// //拆分，取出来中间这一段，然后提取数字部分
+// const segments = fullPath.split('/'); 
+// const targetSegment = segments[1]; 
 const targetSegment = getRoutePath(1);
 const targetSegment1 = getRoutePath(2);
-//1.1 获得当前的路由id
+const targetSegment2 = getRoutePath(3);
+// const numberPart = targetSegment.match(/\d+$/)?.[0]; 
+// const routeId = numberPart;
 let routeId;
-let routeType;
 //通过导航路径反向查询导航id
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
     method: 'GET',
@@ -22,12 +188,856 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment+'/'+targetSegment1,
     },
 });
-if (getRouteId.code == 200) {
-    console.log('getRouteId', getRouteId.data);
+if(getRouteId.code == 200){
     routeId = getRouteId.data.category_id
-    routeType = getRouteId.data.type
-} else {
-    console.log("获得路由id出错！", getRouteId.message)
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//面包屑导航
+const parent_name = ref("");
+const parent_id = ref("");
+const parent_pinyin = ref("");
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': routeId
+        },
+    });
+    console.log("获取面包屑导航",listData);
+    if (listData.code == 200) {
+        parent_name.value = listData.data.parent_name;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.parent_pinyin;
+
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取面包屑导航")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得父级栏目详情
+getParentNav();
+//1.页面依赖 end ---------------------------------------->
+//2.页面数据 start ---------------------------------------->
+//2.1 资讯详情
+const newsDetail = ref({})
+const routeNewsTtitle = ref("");
+//2.2 发布日期
+const time = ref("");
+//2.3 路径
+const routLevelTitle = ref("");
+const routLevelId = ref("");
+//是否展示投票
+const articleChoice = ref(false);
+//2.4获取详情
+async function getPageData() {
+    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+        method: 'GET',
+        query: {
+            'articleid': articleId
+        },
+    });
+    if(mkdata.code==200){
+        //判断是否显示投票
+        if(mkdata.data.is_survey==1){
+            console.log("本篇文章含有投票！")
+            articleChoice.value = true;
+            getVoteList();
+        }
+        //获取内容
+        newsDetail.value = mkdata.data;
+        //获取路径
+        routLevelTitle.value = newsDetail.value.cat_name;
+        routLevelId.value = newsDetail.value.category_id;
+        //获取发布时间
+        time.value = newsDetail.value.updated_at.split(' ')[0];
+        //修正标题长度
+        if (newsDetail.value.title.length >= 30) {
+            routeNewsTtitle.value = newsDetail.value.title.substr(0, 5) + "...";
+             
+        } else {
+            routeNewsTtitle.value = newsDetail.value.title
+        }
+    }else{
+        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        // console.log("错误位置：获取详情内容")
+        // console.log("后端错误反馈：",mkdata.message)
+        // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+getPageData();
+//2.5 获得广告
+//广告列表
+let adImg1 = ref([]);
+onMounted(async ()  => {
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+})
+//2.页面数据 end ---------------------------------------->
+//3.设置seo信息 start---------------------------------------->
+//3.1 设置seo信息
+const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    method: 'GET',
+    query: {
+        'articleid': articleId
+    },
+});
+if(setData.code==200){
+    let seoTitle = setData.data.title;
+    let seoDescription = setData.data.introduce;
+    let seoKeywords = setData.data.keyword;
+    let seoSuffix = setData.data.suffix;
+    let seoName = setData.data.website_name;
+    useSeoMeta({
+        title: seoTitle + "_" + seoName + "_" + seoSuffix,
+        meta: [
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        ]
+    });
+}else{
+    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    // console.log("错误位置：设置详情页面SEO数据")
+    // console.log("后端错误反馈：",setData.message)
+    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//3.设置seo信息 end---------------------------------------->
+//4.投票 start---------------------------------------->
+const radio1 = ref(''); //单选
+const check1 = ref([]); //多选
+const isDisabled = ref(false);//是否禁用提交按钮
+const isRadio = ref(true);//是否渲染单选
+const userSurId = ref('');//投票属于哪一篇文章
+const userChoice = ref('');//用于判断用户选择了其他选项以后，输入的值
+const userIsChoice = ref('');//用于判断其他选项目前是什么值
+const showUserChoice = ref(false);//是否显示其他输入框
+const websiteSurveyData = ref([]);//投票结果
+//3.2获得投票列表
+let voteList = ref([]);
+async function getVoteList(){
+    const voteData = await requestHome('/web/getWebsiteSurvey',{method:'GET',query:{'art_id':articleId}});
+    console.log(778899)
+    console.log(voteData)
+    if(voteData.code == 200){
+        voteList.value = voteData.data;
+        console.log(voteList.value)
+        //判断显示单选还是多选
+        //survey_type 0是单选 1是多选
+        if(voteData.data[0].survey_type == 0){
+            isRadio.value = true;
+            console.log("1111")
+        }else{
+            isRadio.value = false;
+        }
+        //把最后一个的值拿出来 用于判断用户是否选择了其他
+        for(let item of voteData.data){
+            //如果含有其他
+            if(item.is_other==1){
+                userIsChoice.value = item.id;
+            }
+        }
+        //用户投票属于哪一篇文章
+        userSurId.value = voteData.data[0].sur_id;
+    }else{
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：首页投票")
+        console.log("后端错误反馈：",voteData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->") 
+    }
+}
+//3.2当用户选择了选项，判断是否展示其他输入框
+const handleRadioChange = (value) => {
+    if(value == userIsChoice.value){
+        showUserChoice.value = true;
+    }else{
+        showUserChoice.value = false;
+    }
+}
+const handleCheckboxChange = (value) => {
+    if (value.includes(userIsChoice.value)) {
+        showUserChoice.value = true;
+    } else {
+        showUserChoice.value = false;
+    }
+}
+//3.2发起投票
+async function addWebsiteSurvey(){
+    //判断当前是单选还是多选
+    console.log(isRadio.value)
+    if(isRadio.value){
+        console.log("用户单选！")
+        if(radio1.value!=''){
+            //先判断一下是否使用了其他选项
+            if(showUserChoice.value){
+                if(userChoice.value!=''){
+                    //文章id
+                    // console.log(userSurId.value)
+                    // 用户输入的值
+                    // console.log(userChoice.value)
+                    //如果使用了其他，其他的选项需要增加进去
+                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption',{
+                        method:'GET',
+                        query:{
+                            'sur_id':userSurId.value,//投票的新闻id
+                            'choice_name':userChoice.value,//投票的选项id
+                        }
+                    });
+                    if(ChoiceData.code == 200){
+                        //提交完其他选项以后，再正式发起投票
+                        const mkData = await requestHome('/web/addWebsiteSurveyVote',{
+                            method:'GET',
+                            query:{
+                                'sur_id':userSurId.value,
+                                'choice_id':ChoiceData.data
+                            }
+                        });
+                        if(mkData.code == 200){
+                            ElMessage.success('投票成功！')
+                            //把投票结果显示到页面上 禁用投票按钮
+                            isDisabled.value = true;
+                            websiteSurveyData.value = mkData.data;
+                            //遍历一下，把用户选中的那个设置status为1
+                            let data = mkData.data;
+                            //遍历一下，把用户选中的那个设置status为1
+                            for(let item of data.data){
+                                for(let i of data.choice){
+                                    if(item.id == i){
+                                        console.log(item.id)
+                                        item.status = 1;
+                                    }
+                                }
+                            }
+                            websiteSurveyData.value = data;
+                        }else{
+                            ElMessage.error(mkData.message)
+                        }
+                    }else{
+                        ElMessage.error('其他投票失败！')
+                    }
+                }else{
+                    ElMessage.error('请输入选项内容！')
+                }
+            }else{
+                //如果没选择其他，直接提交选择的内容
+                const mkData = await requestHome('/web/addWebsiteSurveyVote',{
+                    method:'GET',
+                    query:{
+                        'sur_id':userSurId.value,
+                        'choice_id':radio1.value
+                    }
+                });
+                if(mkData.code == 200){
+                    ElMessage.success('投票成功！')
+                    //把投票结果显示到页面上 禁用投票按钮
+                    isDisabled.value = true;
+                    let data = mkData.data;
+                    //遍历一下，把用户选中的那个设置status为1
+                    for(let item of data.data){
+                        for(let i of data.choice){
+                            if(item.id == i){
+                                item.status = 1;
+                            }
+                        }
+                    }
+                    websiteSurveyData.value = data;
+                }else{
+                    ElMessage.error('投票失败！')
+                }
+            }
+        }else{
+            ElMessage.error('请选择一个选项')
+        }
+    }else{
+        console.log("多选！")
+        //多选
+        if(check1.value!=[]){
+             //先判断一下是否使用了其他选项
+            if(showUserChoice.value){
+                if(userChoice.value!=''){
+                    //判断用户是否只选择了一个其他
+                    if(check1.value.length == 1){
+                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
+                            method:'GET',
+                            query:{
+                                'sur_id':userSurId.value,//投票的新闻id
+                                'choice_name':userChoice.value,//用户输入的其他选项文字
+                            }
+                        });
+                        if(ChoiceData.code == 200){
+                            //提交完其他选项以后，再正式发起投票
+                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
+                                method:'GET',
+                                query:{
+                                    'sur_id':userSurId.value,
+                                    'choice_id':ChoiceData.data
+                                }
+                            });
+                            if(mkData.code == 200){
+                                ElMessage.success('投票成功！')
+                                //把投票结果显示到页面上 禁用投票按钮
+                                isDisabled.value = true;
+                                websiteSurveyData.value = mkData.data;
+                                //遍历一下，把用户选中的那个设置status为1
+                                let data = mkData.data;
+                                //遍历一下，把用户选中的那个设置status为1
+                                for(let item of data.data){
+                                    for(let i of data.choice){
+                                        if(item.id == i){
+                                            console.log(item.id)
+                                            item.status = 1;
+                                        }
+                                    }
+                                }
+                                websiteSurveyData.value = data;
+                            }else{
+                                ElMessage.error(mkData.message)
+                            }
+                        }else{
+                            ElMessage.error('其他投票失败！')
+                        }
+
+                    }else{
+                        //用户选择了除了其他以外，还包括别的选项
+                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
+                            method:'GET',
+                            query:{
+                                'sur_id':userSurId.value,//投票的新闻id
+                                'choice_name':userChoice.value,//用户输入的其他选项文字
+                            }
+                        });
+                        if(ChoiceData.code == 200){
+                            let data = check1.value;
+                            //找到多选的数组，把其他默认值给替换掉
+                            for (let i = 0; i < data.length; i++) {
+                                if (data[i] == userIsChoice.value) {
+                                    data[i] = ChoiceData.data;
+                                }
+                            }
+                            let jsonArray = JSON.stringify(data);
+                            //提交完其他选项以后，再正式发起投票
+                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
+                                method:'GET',
+                                query:{
+                                    'sur_id':userSurId.value,
+                                    'choice_id':jsonArray
+                                }
+                            });
+                            
+                            if(mkData.code == 200){
+                                ElMessage.success('投票成功！')
+                                //把投票结果显示到页面上 禁用投票按钮
+                                isDisabled.value = true;
+                                websiteSurveyData.value = mkData.data;
+                                //遍历一下，把用户选中的那个设置status为1
+                                let data = mkData.data;
+                                //遍历一下，把用户选中的那个设置status为1
+                                for(let item of data.data){
+                                    for(let i of data.choice){
+                                        if(item.id == i){
+                                            //console.log(item.id)
+                                            item.status = 1;
+                                        }
+                                    }
+                                }
+                                websiteSurveyData.value = data;
+                            }else{
+                                ElMessage.error(mkData.message)
+                            }
+                        }else{
+                            ElMessage.error('其他投票失败！')
+                        }
+
+                    }
+                }else{
+                    ElMessage.error('请输入选项内容！')
+                }
+            }else{
+                let jsonArray = JSON.stringify(check1.value);
+                //如果没选择其他，直接提交选择的内容
+                const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
+                    method:'GET',
+                    query:{
+                        'sur_id':userSurId.value,
+                        'choice_id':jsonArray
+                    }
+                });
+                if(mkData.code == 200){
+                    ElMessage.success('投票成功！')
+                    //把投票结果显示到页面上 禁用投票按钮
+                    isDisabled.value = true;
+                    websiteSurveyData.value = mkData.data;
+                    //遍历一下，把用户选中的那个设置status为1
+                    let data = mkData.data;
+                    //遍历一下，把用户选中的那个设置status为1
+                    for(let item of data.data){
+                        for(let i of data.choice){
+                            if(item.id == i){
+                                console.log(item.id)
+                                item.status = 1;
+                            }
+                        }
+                    }
+                    websiteSurveyData.value = data;
+                }else{
+                    ElMessage.error('投票失败！')
+                }
+            }
+        }else{
+            ElMessage.error('请选择一个选项')
+        }
+    }
+}
+//4.投票 end---------------------------------------->
+//5.页面图片放大 start---------------------------------------->
+const previewVisible = ref(false)
+const selectedImage = ref(' ')
+
+const openPreview = (event) => {
+    if (event.target.tagName === 'IMG') {
+        selectedImage.value = event.target.src;
+        previewVisible.value = true;
+    }
+}
+const closePreview = () => {
+    previewVisible.value = false;
+}
+//5.页面图片放大 end---------------------------------------->
+</script>
+
+<style lang="less" scoped>
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+//资讯详情
+.newsDetail {
+    width: 100%;
+    margin-bottom: 10px;
+    .inner {
+        width: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .innerLeft {
+            width: 1030px;
+            .LeftTop {
+                margin-top: 20px;
+                border-bottom: 1px dashed #ccc;
+                padding-bottom: 20px;
+                >h1 {
+                    line-height: 40px;
+                    margin-bottom: 20px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #333333;
+                    text-align: center;
+                }
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                    text-align: center;
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+            .leftBottom {
+                margin-top: 20px;
+                font-size: 20px;
+                line-height: 38px;
+                margin-bottom: 30px;
+                word-break:break-all;
+                ul>li img {
+                    width: 790px;
+                    height: 382px;
+                }
+                img {
+                    width: 790px;
+                    height: 382px;
+                }
+                p.tinymce-material {
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3,
+                >p {
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 38px;
+                    padding-bottom: 30px;
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3 {
+                    font-weight: 600px;
+                }
+                >p {
+                    font-weight: 400;
+                }
+            }
+            .disclaimer {
+                width: 790px;
+                overflow: hidden;
+                border-top: 1px solid #e6e6e6;
+                padding: 30px 0px;
+                color: #999999;
+                font-size: 17px;
+                p {
+                    width: 790px;
+                    line-height: 30px;
+                }
+            }
+            .recommendRead {
+                width: 100%;
+                margin: 30px 0px 20px 0;
+                .recommendReadTitle {
+                    font-size: 18px;
+                    color: #001996;
+                    height: 42px;
+                    line-height: 35px;
+                    letter-spacing: 1px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    border-bottom: 1px solid #D9D9D9;
+                    .read_title {
+                        display: inline-block;
+                        text-align: center;
+                        width: 94px;
+                        height: 40px;
+                        border-bottom: 2px solid #158d91;
+                    }
+                }
+                .recommendReadList {
+                    min-height: 155px;
+                    margin-top: 20px;
+                    padding-bottom: 10px;
+                    font-size: 16px;
+                    border-bottom: 1px solid #D9D9D9;
+                    .recommendReadListTitle {
+                        margin-top: 18px;
+                        a {
+                            &:hover {
+                                color: #158d91;
+                            }
+                            color: #333333;
+                        }
+                    }
+                    .recommendReadListTitle:nth-child(1)::after {
+                        content: "热";
+                        margin-left: 13px;
+                        background: #FF8A37;
+                        color: #fff;
+                        font-size: 14px;
+                        padding: 0px 2px;
+                    }
+                    .recommendReadListTitle:hover a {
+                        color: #158d91;
+                    }
+                }
+            }
+        }
+        .innerRight {
+            width: 315px;
+            overflow: hidden;
+            border-top: 1px solid #139602;
+            .hotList1 {
+                margin-bottom: 50px;
+            }
+        }
+    }
+}
+.leftBottom::v-deep p img,
+.leftBottom::v-deep img,
+.leftBottom::v-deep video {
+    max-width: 700px;
+}
+.leftBottom::v-deep h1,
+.leftBottom::v-deep h2,
+.leftBottom::v-deep h3,
+.leftBottom::v-deep h4,
+.leftBottom::v-deep h5,
+.leftBottom::v-deep h6 {
+    font-size: 20px;
+    font-weight: 500;
+}
+//投票
+.index_3_box_vote {
+    .voteTitle {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        color: #333333;
+        padding-left: 20px;
+        width: 100%;
+        border-bottom: 1px solid #E7E7E7;
+        border-top: 1px solid #139602;
+        box-sizing: border-box;
+    }
+    width:100%;
+    box-sizing:border-box;
+    border:solid 1px #FBFBFB;
+    background: #FBFBFB;
+    .inquire {
+        height: 394px;
+        margin-top: 20px;
+        border-radius: 6px 6px 6px 6px;
+        padding: 4px 40px 4px 6px;
+        box-sizing: border-box;
+        p {
+            font-weight: bold;
+            height: 69px;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 20px;
+            color: #333333;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 12px 20px 0 32px;
+        }
+        .radioBox {
+            height: 250px;
+            padding-left: 30px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-bottom: 20px;
+        }
+        .radio {
+            /deep/.el-radio {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-radio-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-radio.el-radio--large {
+                width: 100%;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-radio__input.is-checked+.el-radio__label {
+                color: #27881a;
+            }
+            /deep/.el-radio__input.is-checked .el-radio__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .checkInputBox {
+            /deep/.el-checkbox {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-checkbox-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-checkbox.el-checkbox--large {
+                width: 330px;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #27881a;
+            }
+            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .btn {
+            padding-left: 30px;
+            button {
+                width: 78px;
+                height: 37px;
+                line-height: 37px;
+                border-radius: 6px;
+                border: none;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #999999;
+            }
+            .voting {
+                background-color: #49A769;
+                color: #fff;
+                margin-right: 44px;
+                cursor: pointer;
+            }
+            .look {
+                cursor: pointer;
+            }
+        }
+    }
+    .inquireData {
+        .inquireDataItem {
+            width: 100%;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #F3F3F3;
+            border: 1px solid #D2D2D2;
+            margin-bottom: 10px;
+            border-radius: 6px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            color: #999999;
+            .inquireDataItemTitle {
+                width: 290px;
+                height: 38px;
+                font-size: 16px;
+                line-height: 38px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .inquireDataItemNum {
+                font-size: 16px;
+            }
+        }
+        .active {
+            color: #49A769;
+            background: #dff7e8;
+            border: 1px solid #49A769;
+        }
+    }
+}
+//放大图片
+.preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.preview-modal img {
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
+}
+//上一篇 下一篇
+.prevNext {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    a {
+        display: block;
+        color: #333;
+        font-size: 15px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        &:hover {
+            color: #0071B7;
+        }
+    }
 }
-//1.获得路由id end ---------------------------------------->
-</script>
+</style>

pages/[dir]/[dir]/list-[id].vue

@@ -89,7 +89,7 @@ const route = useRoute();
 let articleId = 0;//路由id
 let pageNum = ref(2);
 let total = ref(1);
-let pageSize = ref(20);
+let pageSize = ref(10);
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分

pages/[dir]/[id].vue

@@ -2,11 +2,9 @@
     <!-- 页面头部 -->
     <HomePageHead></HomePageHead>
     <!-- 导航栏 -->
-    <HomePageNavigation1></HomePageNavigation1>
-    <!-- 列表页广告一 -->
-    <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
+    <HomePageNavigation></HomePageNavigation>
     <!-- 面包屑导航 -->
-    <div class="breadcrumb">
+    <div class="breadcrumb-box">
         <div class="inner">
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
@@ -19,9 +17,7 @@
                 <el-breadcrumb-item v-if="parent_children_count == 0">
                     <NuxtLink :to="`/${parent_pinyin}/list-1.html`"> {{ parent_name }}</NuxtLink>
                 </el-breadcrumb-item>
-
                 <el-breadcrumb-item class="phone_breadcrumb_text" >{{ routeNewsTtitle }}</el-breadcrumb-item>
-                 
             </el-breadcrumb>
         </div>
     </div>
@@ -31,23 +27,12 @@
             <div class="innerLeft">
                 <div class="LeftTop">
                     <h1>{{ newsDetail.title }}</h1>
-                    <p class="phone_none">
+                    <p>
                         来源: <span>{{ newsDetail.copyfrom }}</span>
                         作者: <span>{{ newsDetail.author }}</span>
                         发布时间: <span>{{ time }}</span>
                     </p>
-                    <p class="pc_none">
-                        <span>{{ newsDetail.copyfrom }}</span>
-                        <span>{{ newsDetail.author }}</span>
-                        <span>{{ time }}</span>
-                    </p>
-
-
-
-                    <!-- <img :src="newsDetail.imgurl" v-if="newsDetail.imgurl&&newsDetail.level==2||newsDetail.level==3"> -->
                 </div>
-                <!-- <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div> -->
-                
                 <div 
                     class="leftBottom" 
                     v-html="newsDetail.content" 
@@ -57,7 +42,6 @@
                 <div v-if="previewVisible" class="preview-modal" @click="closePreview">
                     <img :src="selectedImage" alt="Preview">
                 </div>
-
                 <!-- 免责声明: -->
                 <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
                     <p>原文链接：{{ newsDetail.fromurl }}</p>
@@ -151,12 +135,17 @@
                         </div>
                     </div>
                 </div>
+                <!--上一篇 下一篇-->
+                <div class="prevNext">
+                    <NuxtLink to="/">上一篇：李强签署国务院令 公布《行政执法监督条例》</NuxtLink>
+                    <NuxtLink to="/">下一篇：没有了</NuxtLink>
+                </div>
             </div>
             <div class="innerRight">
                 <!-- 热点资讯1 -->
-                <div class="hotList1">
+                <!-- <div class="hotList1">
                     <DetailHotNews></DetailHotNews>
-                </div>
+                </div> -->
                 <!-- 热点资讯2 -->
                 <div class="hotList2">
                     <DetailHotNews2></DetailHotNews2>
@@ -165,7 +154,7 @@
         </div>
     </div>
     <!-- 页面底部 -->
-    <HomeFoot1></HomeFoot1>
+    <HomeFoot></HomeFoot>
 </template>
 
 <script setup>
@@ -667,94 +656,425 @@ const closePreview = () => {
 </script>
 
 <style lang="less" scoped>
-@import url('@/assets/css/detail.less');
-</style>
-
-<style lang="less" scoped>
-    @media screen and (min-width:801px){/*pc*/
-        .pc_none{display:none;}
-        
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
     }
-
-    @media screen and (max-width:800px){/*ipad_phone*/
-       .location{float:left;width:auto!important;} 
-       .breadcrumb .el-breadcrumb{width:100%;display:block;}
-        .breadcrumb{margin:15px auto 10px;}
-        // .breadcrumb .inner{ height:24px; }
-        .breadcrumb .phone_breadcrumb_text{
-            display:block;float:none;   
-            word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
-        }   
-          
-        .breadcrumb .location{ font-size: 14px; margin-right:5px;}
-            .breadcrumb span { font-size: 14px; }
-        .newsDetail .inner .innerLeft .LeftTop > h1{font-size:20px;line-height:28px;margin-bottom:15px;}
-        .newsDetail .inner .innerLeft .LeftTop{margin-top:15px;font-size:18px;}
-
-        .newsDetail .inner{width:92%;}
-        .innerLeft{width:100%;}
-        .newsDetail .inner .innerLeft .LeftTop > p{height:auto;}
-        .newsDetail .inner .innerLeft .leftBottom{width:100%;margin-bottom:15px;}
-        .newsDetail .inner .innerLeft .leftBottom :deep(img){max-width:100%;height:auto!important;}
-        .newsDetail .inner .innerLeft .leftBottom :deep(video){max-width:100%;height:auto;}
-
-        .index_3_box_vote .inquire{margin-top:15px;height:auto;}
-        .index_3_box_vote .inquire p{height:auto;padding:0;font-size:14px;
-                            margin:0px 0px 5px 18px;}
- 
-
-        .index_3_box_vote .inquire .radio .el-radio.el-radio--large .el-radio__label span{font-size:14px;}
-
-        .index_3_box_vote .voteTitle{font-size:14px;}
-        .index_3_box_vote .inquire .btn{padding-left:22px;}    
-
-        .index_3_box_vote{overflow:hidden;}
-        .index_3_box_vote .inquire .radio .el-radio.el-radio--large{margin-bottom:3px;}
-
-        .index_3_box_vote .inquire .radioBox{height:auto; 
-                        padding:0px 0px 12px 18px;}
-        .index_3_box_vote .inquire .radio .el-radio-group{width:100%;}
-
-        .index_3_box_vote .inquire .btn button{width:auto;padding:0px 10px;line-height:33px;height:33px;font-size:14px;margin-bottom:14px;}
-
-         .newsDetail .inner .innerLeft .disclaimer{width:100%; }   
-         .newsDetail .inner .innerLeft .disclaimer *{word-wrap: break-word;width:100%!important;display:block!important;
-            overflow-wrap: break-word;font-size:16px;
-            white-space: pre-wrap;
-            word-break: break-all; 
-        }   
-
-        // 推荐阅读
-
-        .newsDetail .inner .innerLeft .recommendRead{
-            width:100%;margin:22px 0px;
+}
+//资讯详情
+.newsDetail {
+    width: 100%;
+    margin-bottom: 10px;
+    .inner {
+        width: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .innerLeft {
+            width: 1030px;
+            .LeftTop {
+                margin-top: 20px;
+                border-bottom: 1px dashed #ccc;
+                padding-bottom: 20px;
+                >h1 {
+                    line-height: 40px;
+                    margin-bottom: 20px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 24px;
+                    color: #333333;
+                    text-align: center;
+                }
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                    text-align: center;
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+            .leftBottom {
+                margin-top: 20px;
+                font-size: 20px;
+                line-height: 38px;
+                margin-bottom: 30px;
+                word-break:break-all;
+                ul>li img {
+                    width: 790px;
+                    height: 382px;
+                }
+                img {
+                    width: 790px;
+                    height: 382px;
+                }
+                p.tinymce-material {
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3,
+                >p {
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 38px;
+                    padding-bottom: 30px;
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3 {
+                    font-weight: 600px;
+                }
+                >p {
+                    font-weight: 400;
+                }
+            }
+            .disclaimer {
+                width: 790px;
+                overflow: hidden;
+                border-top: 1px solid #e6e6e6;
+                padding: 30px 0px;
+                color: #999999;
+                font-size: 17px;
+                p {
+                    width: 790px;
+                    line-height: 30px;
+                }
+            }
+            .recommendRead {
+                width: 100%;
+                margin: 30px 0px 20px 0;
+                .recommendReadTitle {
+                    font-size: 18px;
+                    color: #001996;
+                    height: 42px;
+                    line-height: 35px;
+                    letter-spacing: 1px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    border-bottom: 1px solid #D9D9D9;
+                    .read_title {
+                        display: inline-block;
+                        text-align: center;
+                        width: 94px;
+                        height: 40px;
+                        border-bottom: 2px solid #158d91;
+                    }
+                }
+                .recommendReadList {
+                    min-height: 155px;
+                    margin-top: 20px;
+                    padding-bottom: 10px;
+                    font-size: 16px;
+                    border-bottom: 1px solid #D9D9D9;
+                    .recommendReadListTitle {
+                        margin-top: 18px;
+                        a {
+                            &:hover {
+                                color: #158d91;
+                            }
+                            color: #333333;
+                        }
+                    }
+                    .recommendReadListTitle:nth-child(1)::after {
+                        content: "热";
+                        margin-left: 13px;
+                        background: #FF8A37;
+                        color: #fff;
+                        font-size: 14px;
+                        padding: 0px 2px;
+                    }
+                    .recommendReadListTitle:hover a {
+                        color: #158d91;
+                    }
+                }
+            }
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle{width:100%;height:auto;}
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{
-                width:auto;font-size:14px;box-sizing:border-box;height:33px;line-height:33px;
-                border-bottom:1px solid #49A769;
+        .innerRight {
+            width: 315px;
+            overflow: hidden;
+            border-top: 1px solid #139602;
+            .hotList1 {
+                margin-bottom: 50px;
             }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList{
-            height:auto;margin-top:11px; min-height:auto;padding-bottom:8px;
         }
-
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle{
-            margin-top:0px;overflow:hidden;
+    }
+}
+.leftBottom::v-deep p img,
+.leftBottom::v-deep img,
+.leftBottom::v-deep video {
+    max-width: 700px;
+}
+.leftBottom::v-deep h1,
+.leftBottom::v-deep h2,
+.leftBottom::v-deep h3,
+.leftBottom::v-deep h4,
+.leftBottom::v-deep h5,
+.leftBottom::v-deep h6 {
+    font-size: 20px;
+    font-weight: 500;
+}
+//投票
+.index_3_box_vote {
+    .voteTitle {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        color: #333333;
+        padding-left: 20px;
+        width: 100%;
+        border-bottom: 1px solid #E7E7E7;
+        border-top: 1px solid #139602;
+        box-sizing: border-box;
+    }
+    width:100%;
+    box-sizing:border-box;
+    border:solid 1px #FBFBFB;
+    background: #FBFBFB;
+    .inquire {
+        height: 394px;
+        margin-top: 20px;
+        border-radius: 6px 6px 6px 6px;
+        padding: 4px 40px 4px 6px;
+        box-sizing: border-box;
+        p {
+            font-weight: bold;
+            height: 69px;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 20px;
+            color: #333333;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 12px 20px 0 32px;
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a{
-            line-height:33px;height:33px;font-size:14px;float:left;max-width:90%; 
-            word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        .radioBox {
+            height: 250px;
+            padding-left: 30px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-bottom: 20px;
+        }
+        .radio {
+            /deep/.el-radio {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-radio-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-radio.el-radio--large {
+                width: 100%;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-radio__input.is-checked+.el-radio__label {
+                color: #27881a;
+            }
+            /deep/.el-radio__input.is-checked .el-radio__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .checkInputBox {
+            /deep/.el-checkbox {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-checkbox-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-checkbox.el-checkbox--large {
+                width: 330px;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #27881a;
+            }
+            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .btn {
+            padding-left: 30px;
+            button {
+                width: 78px;
+                height: 37px;
+                line-height: 37px;
+                border-radius: 6px;
+                border: none;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #999999;
+            }
+            .voting {
+                background-color: #49A769;
+                color: #fff;
+                margin-right: 44px;
+                cursor: pointer;
+            }
+            .look {
+                cursor: pointer;
+            }
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle:nth-child(1)::after{font-size:12px;}
-        .newsDetail .inner .innerLeft .LeftTop > p span:nth-last-of-type(1){margin-right:0px;}
-
-        .innerRight{display:none;}
-        .phone_none{display:none;}
-            
-            
     }
-
-
+    .inquireData {
+        .inquireDataItem {
+            width: 100%;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #F3F3F3;
+            border: 1px solid #D2D2D2;
+            margin-bottom: 10px;
+            border-radius: 6px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            color: #999999;
+            .inquireDataItemTitle {
+                width: 290px;
+                height: 38px;
+                font-size: 16px;
+                line-height: 38px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .inquireDataItemNum {
+                font-size: 16px;
+            }
+        }
+        .active {
+            color: #49A769;
+            background: #dff7e8;
+            border: 1px solid #49A769;
+        }
+    }
+}
+//放大图片
+.preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.preview-modal img {
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
+}
+//上一篇 下一篇
+.prevNext {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 10px;
+    a {
+        display: block;
+        color: #333;
+        font-size: 15px;
+        display: block;
+        height: 40px;
+        line-height: 40px;
+        &:hover {
+            color: #0071B7;
+        }
+    }
+}
 </style>
 
 

pages/[dir]/list-[id].vue

@@ -2,15 +2,10 @@
     <div id="newsList">
         <!-- 页面头部 -->
         <HomePageHead></HomePageHead>
-
         <!-- 导航栏 -->
         <HomePageNavigation></HomePageNavigation>
-
-        <!-- 列表页广告一 -->
-        <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
-
         <!-- 二级标题-->
-        <div class="sannongzhichuang" v-if="parent_name != ''">
+        <!--<div class="sannongzhichuang" v-if="parent_name != ''">
             <div class="inner">
                 <h2>
                     <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
@@ -26,10 +21,9 @@
                     </div>
                 </p>
             </div>
-        </div>
-
+        </div>-->
         <!-- 面包屑导航 -->
-        <div class="breadcrumb">
+        <div class="breadcrumb-box">
             <div class="inner">
                 <span class="location">当前位置：</span>
                 <el-breadcrumb :separator-icon="ArrowRight">
@@ -45,17 +39,22 @@
         </div>
         <!-- 资讯列表 -->
         <div class="newsList">
-            <div class="inner">
-                <div class="innerLeft">
+            <div class="listBox">
+                <div class="listBoxLeft">
                     <ul class="list">
                         <li v-for="(item, index) in newsList" :key="index">
                             <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
                                 {{ item.title }}
                             </NuxtLink>
+                            <p>
+                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
+                                    {{ item.title }}
+                                </NuxtLink>
+                            </p>
                         </li>
                     </ul>
                     <!-- 分页器 -->
-                    <div class="pagination pagination_phone_none" v-if="total > 0">
+                    <div class="pagination" v-if="total > 0">
                         <el-pagination 
                             size="small" 
                             background 
@@ -66,37 +65,19 @@
                             :current-page="pageNum"
                             prev-text="上一页" 
                             next-text="下一页" 
-                            @current-change="changePage" 
-                        />
-                    </div>
-
-                    <div class="pagination pagination_pc_none" v-if="total > 0">
-                        <el-pagination 
-                            pager-count="5"
-                            size="small" 
-                            background 
-                            layout="pager" 
-                            :total="total" 
-                            class="mt-4"
-                            :page-size="pageSize" 
-                            :current-page="pageNum"
-                            @current-change="changePage" 
+                            @current-change="changePage"
                         />
+                        <span class="total">共{{ total }}条</span>
                     </div>
-                    
                 </div>
-                <div class="innerRight">
-                    <DetailHotNews></DetailHotNews>
+                <div class="listBoxRight">
+                    <!-- <DetailHotNews></DetailHotNews> -->
                     <DetailHotNews2></DetailHotNews2>
                 </div>
             </div>
         </div>
-
-        <!-- 列表页广告二 -->
-        <HomeTopTen :imgurl="adImg2" v-if="adImg2"></HomeTopTen>
-
         <!-- 页面底部 -->
-        <HomeFoot1></HomeFoot1>
+        <HomeFoot></HomeFoot>
     </div>
 </template>
 
@@ -126,7 +107,7 @@ const route = useRoute();
 let articleId = 0;//路由id
 let pageNum = ref(2);
 let total = ref(1);
-let pageSize = ref(20);
+let pageSize = ref(10);
 
 //获得当前的完整路径
 const fullPath = route.path;
@@ -339,66 +320,143 @@ onMounted(async ()  => {
 </script>
 
 <style lang="less" scoped>
-@import url('@/assets/css/list/pc.less');
-</style>
-
-<style lang="less" scoped>
-
-
-   @media screen and (min-width:801px){/*pc*/
-    
-        .pagination_pc_none{display:none!important;}
-
-        .pc_none{display:none;}  
-    }    
-    @media screen and (max-width:800px){/*ipad_phone*/
-            .breadcrumb{margin:15px auto 10px;}
-            .breadcrumb .location{ font-size: 14px; margin-right:5px;}
-            .breadcrumb span { font-size: 14px; }
-            .newsList .inner{width:92%!important;}
-            .newsList .inner .innerLeft > .list > li{width:96%;margin:0px auto;}
-
-            .newsList .inner .innerLeft{width:100%;}
-
-
-            .newsList .inner .innerLeft > .list > li{line-height:40px;height:40px;}
-            
-            
-            .newsList .inner .innerLeft > .list > li > a{
-                width:100%;display:block; height:40px;line-height:40px;font-size:16px;
-                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
-            }
-            
-
-            .newsList .inner .innerLeft > .list > li a{float:left;width:92%; }
-            .newsList .inner .innerLeft > .list > li:nth-of-type(-n+2)::after{display: block;height:18px;margin:10px 0px 0px 0px;line-height:18px;float:right;
-                                                                                                        font-size:12px;}
-
-            .newsList .inner .innerLeft > .pagination{width:100%;}
-            .newsList .inner .innerLeft > .list{ margin:10px auto 10px;}
-            .newsList .inner .innerLeft > .pagination{margin-bottom:11px;}
-
-            .newsList .inner .innerRight {width:100%;display:none;}
-
-            .index_foot{margin-top:11px;}
-            ::v-deep .el-pager li{
-                margin:0px 4px!important;
-
+// @import url('@/assets/css/list/pc.less');
+// @import url('@/assets/css/list/yd.less');
+
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        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;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
             }
+        }
+    }
+}
 
-            .newsList .inner .innerLeft > .list > li:nth-child(5n){
-                height:auto;
-                padding-bottom:11px;
-                margin-bottom:11px;
+//资讯列表
+.newsList {
+    width: 1400px;
+    margin: 0 auto;
+    .listBox {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .listBoxLeft {
+            width: 1030px;
+            .list {
+                >li {
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    border-bottom: 1px dashed #ccc;
+                    margin-top: 30px;
+                    padding-bottom: 30px;
+                    a {
+                        color: #337ab7;
+                        text-decoration: none;
+                        display: block;
+                        width: 100%;
+                        height: 22px;
+                        line-height: 22px;
+                        font-size: 20px;
+                        font-weight: bold;
+                        color: #333;
+                        overflow: hidden;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    p {
+                        a {
+                            width: 100%;
+                            height: 72px;
+                            line-height: 24px;
+                            overflow: hidden;
+                            font-size: 14px;
+                            color: #666;
+                            font-weight: normal;
+                        }
+                    }
+                }
             }
-
-
-
-            .pagination_phone_none{display:none!important;}
-
-          .phone_none{display:none;}  
- 
+        }
+        .listBoxRight {
+            width: 315px;
+            overflow: hidden;
+        }
     }
+}
 
+//分页
+.pagination {
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 20px 0;
+    padding: 20px 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #139609;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+    }
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #337ab7;
+        color: #fff;
+    }
+    .total {
+        display: block;
+        height: 34px;
+        line-height: 34px;
+        font-size: 18px;
+        margin-left: 20px;
+    }
+}
 </style>
 

pages/about/[dir]/index.html.vue

@@ -2,13 +2,11 @@
     <!-- 页面头部 -->
     <HomePageHead></HomePageHead>
     <!-- 导航栏 -->
-    <HomePageNavigation1></HomePageNavigation1>
-    <!-- 列表页广告一 -->
-    <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
+    <HomePageNavigation></HomePageNavigation>
     <!-- 面包屑导航 -->
     <div class="breadcrumb">
         <div class="inner">
-            <span class="location">当前位置：</span>
+            <span class="location">您的位置:</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
                     <NuxtLink to="/">首页</NuxtLink>
@@ -23,11 +21,21 @@
     <div class="newsDetail">
         <div class="inner">
             <div class="innerLeft">
-                <div class="leftBottomTitle">{{ newsDetail.con_title }}</div>
+                <div class="leftBottomImg" v-if="newsDetail.con_title == '会员服务'">
+                    <img src="../../../public/index/hyfw.jpg" alt="">
+                </div>
+                <div class="leftBottomImg" v-if="newsDetail.con_title == '联系我们'">
+                    <img src="../../../public/index/lxwm.jpg" alt="">
+                </div>
+                <div class="leftBottomImg" v-if="newsDetail.con_title == '法制项目简介'">
+                    <img src="../../../public/index/xmwzjj.png" alt="">
+                </div>
+                <div class="leftBottomImg" v-if="newsDetail.con_title == '免责声明'">
+                    <img src="../../../public/index/mzsm.png" alt="">
+                </div>
                 <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div>
             </div>
             <div class="innerRight">
-                <div class="rightMenuTitle">导航列表</div>
                 <ul>
                     <li v-for="(item, index) in bottomMenu" :key="index">
                         <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name"
@@ -44,10 +52,8 @@
             <div style="clear: both;"></div>
         </div>
     </div>
-    <!-- 广告二 -->
-    <HomeTopTen :imgurl="adImg2" v-if="adImg2"></HomeTopTen>
     <!-- 页面底部 -->
-    <HomeFoot1></HomeFoot1>
+    <HomeFoot></HomeFoot>
 </template>
 
 <script setup>
@@ -154,8 +160,7 @@ useSeoMeta({
     title: seoTitle + "_" + seoSuffix,
     meta: [
         { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
-        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
-        { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
     ]
 });
 //4.设置seo信息 end---------------------------------------->
@@ -193,24 +198,20 @@ onMounted(async () => {
 //导航条
 .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;
+
+    .inner {
+        width: 1200px;
+        margin: 10px auto;
+        border-bottom: 1px solid #E5E5E5;
+    }
 
     .el-breadcrumb::v-deep {
         display: inline-block;
         vertical-align: -4px;
     }
 
-    /deep/.el-breadcrumb__inner a,
-    /deep/.el-breadcrumb__inner.is-link {
+    .el-breadcrumb__inner a::v-deep,
+    .el-breadcrumb__inner.is-link::v-deep {
         color: #666666;
         font-weight: 400;
         text-decoration: none;
@@ -218,53 +219,43 @@ onMounted(async () => {
     }
 
     span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-family: "宋体";
         font-weight: 400;
-        font-size: 20px;
+        font-size: 14px;
         color: #666666;
-        line-height: 23px;
+        line-height: 40px;
         text-align: left;
         font-style: normal;
         text-transform: none;
     }
 
-    span:hover {
-        color: #666666;
-    }
-
     .location {
-        margin-right: 5px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
+        margin-right: 10px;
+        display: inline-block;
+        height: 40px;
+        line-height: 40px;
+        font-family: "宋体";
         font-weight: 400;
-        font-size: 20px;
+        font-size: 14px;
         color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
+        vertical-align: 11px;
     }
 }
 
 // 资讯列表
 .newsDetail {
     width: 100%;
-    //height: 1400px;
     margin-bottom: 70px;
 
     .inner {
         width: 1200px;
-        //height: 1400px;
         font-size: 16px;
 
         .innerLeft {
-            //height: 1400px;
-
+            width: 980px;
             float: right;
 
             .LeftTop {
-                //height: 522px;
                 margin-top: 50px;
 
                 >h1 {
@@ -297,25 +288,25 @@ onMounted(async () => {
                 }
             }
 
-            .leftBottomTitle {
-                color: #028E21;
-                font-size: 24px;
-                font-weight: bold;
-                height: 60px;
-                line-height: 60px;
+            .leftBottomImg {
+                width: 760px;
+                height: 184px;
+                margin: 0 auto;
             }
 
             .leftBottom {
-                width: 790px;
+                width: 92%;
                 font-size: 20px;
-                border-top: 1px solid #139602;
                 padding-top: 40px;
+                margin: 0 auto;
+                font-family: "微软雅黑", Microsoft YaHei;
+                line-height: 36px;
 
                 >h3,
                 >p {
                     text-indent: 2em;
                     width: 790px;
-                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-family: "微软雅黑", Microsoft YaHei;
                     font-size: 20px;
                     color: #333333;
                     line-height: 23px;
@@ -329,46 +320,35 @@ onMounted(async () => {
                 >p {
                     font-weight: 400;
                 }
-
             }
         }
 
-
         .innerRight {
-            width: 279px;
-
-            .rightMenuTitle {
-                width: 279px;
-                height: 69px;
-                font-size: 22px;
-                font-weight: bold;
-                line-height: 58px;
-                text-align: center;
-                color: #fff;
-                background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/special/projectMoreTitle.png") no-repeat;
-                margin-bottom: 30px;
-            }
+            width: 200px;
+            margin-top: 20px;
+            font-family: "微软雅黑";
 
             ul {
                 li {
                     a {
-                        border-left: 5px solid #028E21;
-                        margin-bottom: 15px;
-                        font-size: 22px;
                         display: block;
-                        height: 61px;
-                        line-height: 61px;
-                        color: #333333;
-                        text-align: center;
-                        background: #FBFBFB;
+                        height: 50px;
+                        line-height: 50px;
+                        color: #000;
+                        background: #f3f3f3;
+                        font-size: 18px;
+                        text-decoration: none;
+                        padding-left: 35px;
+                        box-sizing: border-box;
+                        border-bottom: 1px solid #fff;
                     }
                 }
             }
 
             .active {
                 border-left: 0;
-                border: 1px solid #028E21;
-                background: #fff;
+                background: #3395e4;
+                color: #fff;
             }
         }
     }
@@ -381,25 +361,20 @@ onMounted(async () => {
 
 <style lang="less" scoped>
 @media screen and (min-width:801px) {
-    /*pc*/
-
-
-
     .pc_none {
         display: none;
     }
 }
 
 @media screen and (max-width:800px) {
-    /*ipad_phone*/
-
 
+    /*ipad_phone*/
     .breadcrumb {
         margin-bottom: 11px;
     }
 
     .breadcrumb .location {
-        font-size: 14px;margin-right:5px;
+        font-size: 14px;
     }
 
     .breadcrumb span {
@@ -410,8 +385,6 @@ onMounted(async () => {
         vertical-align: middle;
     }
 
-
-
     .newsDetail {
         margin: 10px auto 0px;
     }
@@ -440,8 +413,6 @@ onMounted(async () => {
         text-align: center;
     }
 
-    .newsDetail .inner .innerRight .rightMenuTitle a {}
-
     .newsDetail .inner .innerRight ul {
         display: block;
         width: 100%;
@@ -464,7 +435,6 @@ onMounted(async () => {
         border-left: 2px solid #028E21;
     }
 
-
     .newsDetail .inner .innerLeft {
         width: 100%;
         float: none;
@@ -497,9 +467,6 @@ onMounted(async () => {
         font-size: 16px !important;
     }
 
-
-    .leftBottom /deep/.daohang {}
-
     .leftBottom /deep/.daohang ul {
         overflow: hidden;
     }
@@ -519,8 +486,6 @@ onMounted(async () => {
         color: #333;
     }
 
-
-    // .innerLeft{display:none;}  
     .phone_none {
         display: none;
     }

pages/about/[dir]/list-[id].vue

@@ -3,153 +3,152 @@
         <!-- 页面头部 -->
         <HomePageHead></HomePageHead>
         <!-- 导航栏 -->
-        <HomePageNavigation1></HomePageNavigation1>
-        <!-- 列表页广告一 -->
-        <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
-        <!-- 面包屑导航 -->
-        <div class="breadcrumb">
-            <div class="inner">
-                <span class="location">当前位置：</span>
-                <el-breadcrumb :separator-icon="ArrowRight">
-                    <el-breadcrumb-item>
-                        <NuxtLink to="/">首页</NuxtLink>
-                    </el-breadcrumb-item>
-                    <el-breadcrumb-item>本网招聘</el-breadcrumb-item>
-                </el-breadcrumb>
-            </div>
-        </div>
-
-        <!-- 资讯列表 -->
-        <div class="newsList">
-            <div class="inner">
-                <div class="innerLeft">
-                    <div class="innerTitle">本网招聘</div>
-                    <ul class="list">
-                        <li v-for="(item, index) in newsList" :key="index">
-                            <NuxtLink :to="{ path: `zhaopin/${item.id}.html` }" :title="item.con_title">
-                                {{ item.con_title }}</NuxtLink>
-                        </li>
-                    </ul>
+        <HomePageNavigation></HomePageNavigation>
+
+        <!-- 页面内容 -->
+        <div class="bwzp">
+            <div class="bwzpTop">
+                <div class="topTitle">
+                    <h1>项目介绍</h1>
+                    <span>XiangMuJieShao</span>
                 </div>
-                <div class="innerRight">
-                    <div class="rightMenuTitle">导航列表</div>
-                    <ul>
-                        <li v-for="(item, index) in bottomMenu" :key="index">
-                            <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`"
-                                :title="item.name" :class="item.id == pageId ? 'active' : ''">
-                                {{ item.name }}
-                            </NuxtLink>
-                            <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`"
-                                :title="item.name" :class="item.id == pageId ? 'active' : ''">
-                                {{ item.name }}
-                            </NuxtLink>
-                        </li>
-                    </ul>
+                <div class="topContent">
+                    <p>
+                        <a href="#">全国法治调研中心</a>
+                    </p>
+                    <p>
+                        <strong>政讯通·全国</strong>
+                        <strong> 法制项目</strong>
+                        网络平台由
+                        <strong> 政讯通-全国政务信息一体化办公室</strong>
+                        主管，联合30多家企事业单位组成，由北京政讯通法律咨询有限公司（国有控股）对外牵头运营。
+                        <strong></strong>
+                        <strong>政讯通·全国法制项目</strong>
+                        网络平台有政务、行业独立域名网站各
+                        <strong>100</strong>
+                        个和
+                        <strong>4</strong>
+                        个综合管理网站共
+                        <strong>204</strong>
+                        个网站，按照不同的行业和功能分类为用户提供大体系、广领域、全方位、全过程，有针对性的全国性法律综合服务平台。
+                    </p>
+                    <p>
+                        <strong>政讯通·全国</strong>
+                        <strong>法制调研中心</strong>
+                        是
+                        <strong>政讯通·全国</strong>
+                        <strong>法制项目</strong>
+                        网络平台的4个综合管理网站之一，目前开设了栏目上千个，地市中心可全面覆盖我国334个地级市，
+                        <strong>业务范围</strong>
+                        涵盖资讯信息、奥情服务、法律咨询、法律调研、法律宣传、法规教育、法律援助等领域，日均会员访问量超过万次，累计完成法制调研课题千余件，网络信息化会员遍布全国各地，实施
+                        <strong>行业、区域</strong>
+                        全覆盖，是我国具有广泛传播力、影响力的新型主流媒体。
+                    </p>
+                </div>
+            </div>
+            <div class="bwzpBottom">
+                <div class="bottomTitle">招贤纳士</div>
+                <ul class="zhaopin_list">
+                    <li>
+                        <div class="zhaopin_left">
+                            <span>全国法制资讯发布中心</span>
+                            <div class="new_pin_text">聘</div>
+                        </div>
+                        <ul class="zhaopin_item">
+                            <li>
+                                <a href="#">全国法制资讯发布中心诚聘特邀编辑</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制资讯发布中心诚聘特约通讯员</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制资讯发布中心诚招法制资讯信息员</a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div class="zhaopin_left">
+                            <span>全国法制调研中心</span>
+                            <div class="new_pin_text">聘</div>
+                        </div>
+                        <ul class="zhaopin_item">
+                            <li>
+                                <a href="#">全国法制调研中心诚征法制调研员</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制调研中心诚聘法制监督员</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制调研中心招聘法制调解员</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制调研中心诚招法制宣传员</a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div class="zhaopin_left">
+                            <span>全国法制舆情监测中心</span>
+                            <div class="new_pin_text">聘</div>
+                        </div>
+                        <ul class="zhaopin_item">
+                            <li>
+                                <a href="#">全国法制舆情监测中心招聘舆情处理师</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制舆情监测中心招聘舆情监测员</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制舆情监测中心诚聘法制观察员</a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <div class="zhaopin_left">
+                            <span>全国法制发展促进中心</span>
+                            <div class="new_pin_text">聘</div>
+                        </div>
+                        <ul class="zhaopin_item">
+                            <li>
+                                <a href="#">全国法制发展促进中心招聘法制调查员</a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+                <div class="bottomContent">
+                    <div class="bottomContent_item">
+                        <div class="itemTitle">
+                            <a href="#">网络会员</a>
+                        </div>
+                        <ul class="itemList">
+                            <!-- <li>
+                                <a href="#">全国法制资讯发布中心</a>
+                            </li> -->
+                        </ul>
+                    </div>
+                    <div class="bottomContent_item">
+                        <div class="itemTitle">
+                            <a href="#">地市中心</a>
+                        </div>
+                        <ul class="itemList">
+                            <!-- <li>
+                                <a href="#">全国法制资讯发布中心</a>
+                            </li> -->
+                        </ul>
+                    </div>
                 </div>
-                <div style="clear: both;"></div>
             </div>
         </div>
-        <!-- 列表页广告二 -->
-        <HomeTopTen :imgurl="adImg2" v-if="adImg2"></HomeTopTen>
+
         <!-- 页面底部 -->
-        <HomeFoot1></HomeFoot1>
+        <HomeFoot></HomeFoot>
     </div>
 </template>
 
 <script setup>
 //1.页面依赖 start ---------------------------------------->
-import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
-import { ArrowRight } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue';
 
-//获得跳转过来的id
-const route = useRoute();
-//获得当前的完整路径
-const fullPath = route.path;
-//拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/');
-const targetSegment = segments[2];
-//const numberPart = targetSegment.match(/\d+$/)?.[0]; 
-
-let articleId;
-let pageId;
-//通过导航路径反向查询导航id
-const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
-    method: 'GET',
-    query: {
-        'foot_pinyin': targetSegment,
-    },
-});
-if (getRouteId.code == 200) {
-    articleId = getRouteId.data.id;
-    pageId = getRouteId.data.id;
-} else {
-    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-    console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：", getRouteId.message)
-    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-}
-
-//1.页面依赖 end ---------------------------------------->
-
-//2.页面数据 start ---------------------------------------->
-//广告
-let adImg1 = ref([]);
-let adImg2 = ref([]);
-onMounted(async () => {
-    //从客户端获取行政职能部门 加快打开速度
-    const { $webUrl, $CwebUrl } = useNuxtApp();
-    //广告1
-    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_page_0001`
-    const responseAd1 = await fetch(url, {
-        headers: {
-            'Content-Type': 'application/json',
-            'Userurl': $CwebUrl,
-            'Origin': $CwebUrl
-        }
-    });
-    const resultAd1 = await responseAd1.json();
-    adImg1.value = resultAd1.data[0];
-
-    //广告2
-    let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_page_0002`
-    const responseAd2 = await fetch(url2, {
-        headers: {
-            'Content-Type': 'application/json',
-            'Userurl': $CwebUrl,
-            'Origin': $CwebUrl
-        }
-    });
-    const resultAd2 = await responseAd2.json();
-    adImg2.value = resultAd2.data[0];
-})
-
-//左侧导航
-const bottomMenu = ref([]);
-async function getPageMenu() {
-    const mkdata = await requestDataPromise('/web/getWebsiteFooterCategory', {
-        method: 'GET',
-        query: {},
-    });
-    bottomMenu.value = mkdata.data;
-}
-getPageMenu();
-
-//列表
-const newsList = ref([]);
-let newslists = async () => {
-    const listData = await requestDataPromise('/web/getWebsiteFooterCategoryList', {
-        method: 'GET',
-        query: {
-            'fcat_id': pageId,
-        },
-    });
-    newsList.value = listData.data;
-}
-//获得列表
-newslists();
-//2.页面数据 end ---------------------------------------->
-
 //3 设置seo信息
 const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
     method: 'GET',
@@ -166,533 +165,278 @@ useSeoMeta({
     title: seoTitle + "_" + seoSuffix,
     meta: [
         { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
-        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
-        { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
     ]
 });
 //3.设置seo信息 end---------------------------------------->
 </script>
 
 <style lang="less" scoped>
-//导航条
-.breadcrumb {
+.bwzp {
     width: 100%;
-    height: 22px;
-    margin-bottom: 30px;
-    font-family: Microsoft YaHei, Microsoft YaHei;
-    font-weight: 400;
-    font-size: 20px;
-    color: #666666;
-    line-height: 23px;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-
-    :deep(.el-breadcrumb) {
-        display: inline-block;
-        vertical-align: -4px;
-    }
-
-    :deep(.el-breadcrumb__inner a),
-    :deep(.el-breadcrumb__inner.is-link) {
-        color: #666666;
-        font-weight: 400;
-        text-decoration: none;
-        transition: var(--el-transition-color);
-    }
-
-    span {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-
-    span:hover {
-        color: #666666;
-    }
-
-    .location {
-        margin-right: 5px;
-        width: 100px;
-        height: 22px;
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        font-size: 20px;
-        color: #666666;
-        line-height: 23px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-    }
-}
-
-// 资讯列表
-.newsList {
-    width: 100%;
-    margin-bottom: 70px;
-
-    .inner {
-        width: 1200px;
-
-        .innerLeft {
-            font-size: 22px;
-            color: #028E21;
-            font-weight: bold;
-        }
-
-        .innerTitle {
-            height: 65px;
-            line-height: 65px;
-            font-size: 24px;
-        }
-
-
-        .innerLeft {
-            float: right;
-
-            >.list {
-                height: 570px;
-                margin-bottom: 70px;
-                border-top: 1px solid #139602;
-
-                >li {
-                    width: 790px;
-                    height: 60px;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    line-height: 60px;
-                    //border-bottom: 1px solid #D9D9D9;
-
-                    >a {
-                        width: 360px;
-                        height: 26px;
-                        cursor: pointer;
-                        font-family: Microsoft YaHei, Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 20px;
-                        color: #333333;
-                        line-height: 26px;
-                        text-align: left;
-                        font-style: normal;
-                        text-transform: none;
-                    }
-
-                }
-
-                >li:hover>a {
-                    color: #139602;
-                }
-
-                >li:nth-child(1)::after,
-                >li:nth-child(2)::after {
-                    content: "热";
-                    margin-left: 13px;
-                    background: #FF8A37;
-                    color: #fff;
-                    font-size: 14px;
-                    padding: 0px 2px;
-                }
-
-                >li:nth-child(5n) {
-                    border-bottom: 1px solid #D9D9D9;
-                }
-
+    height: auto;
+    overflow: hidden;
+    margin: 20px auto;
+    max-width: 1920px;
+    background: #f1f1f1;
+    font-family: "微软雅黑", Microsoft YaHei;
+
+
+    .bwzpTop {
+        width: 1400px;
+        margin: 0 auto;
+        height: auto;
+        overflow: hidden;
+        padding: 20px 40px;
+        background: #fff;
+        position: relative;
+        z-index: 1;
+        border: 5px solid #c31d1d;
+        box-shadow: 3px 0px 5px #c31d1d;
+        margin: 20px auto 0;
+        border-radius: 20px;
+        box-sizing: border-box;
+
+        .topTitle {
+            width: 25%;
+            height: 200px;
+            overflow: hidden;
+            text-align: center;
+            padding: 3% 0;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            margin-top: -7%;
+
+            h1 {
+                width: 100%;
+                height: auto;
+                overflow: hidden;
+                font-size: 60px;
+                font-weight: bold;
+                color: #c31d1d;
             }
 
-            >.pagination {
-                width: 800px;
-                height: 34px;
-                margin-left: 141px;
-                display: flex;
-                justify-content: center;
-                margin: 0;
-
-                // 鼠标移入后字体颜色
-                .el-pagination::v-deep :hover {
-                    color: #139609;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next,
-                .el-pagination.is-background::v-deep .btn-prev {
-                    width: 70px;
-                    height: 34px;
-                    margin: 0px 10px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .el-pager li {
-                    margin: 0px 10px;
-                    width: 38px;
-                    height: 34px;
-                    border-radius: 4px;
-                }
-
-                .el-pagination.is-background::v-deep .btn-next.is-active,
-                .el-pagination.is-background::v-deep .btn-prev.is-active,
-                .el-pagination.is-background::v-deep .el-pager li.is-active {
-                    background-color: #028e21;
-                    color: #fff;
-                }
-
-
+            span {
+                display: block;
+                width: 100%;
+                height: auto;
+                overflow: hidden;
+                font-size: 26px;
+                color: #c31d1d;
+                margin-top: 15px;
             }
         }
 
-        .innerRight {
-            width: 279px;
-
-            .rightMenuTitle {
-                width: 279px;
-                height: 69px;
-                font-size: 22px;
-                font-weight: bold;
-                line-height: 58px;
-                text-align: center;
-                color: #fff;
-                background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/special/projectMoreTitle.png") no-repeat;
-                margin-bottom: 30px;
-            }
-
-            ul {
-                li {
-                    a {
-                        border-left: 5px solid #028E21;
-                        margin-bottom: 15px;
-                        font-size: 22px;
-                        display: block;
-                        height: 61px;
-                        line-height: 61px;
-                        color: #333333;
-                        text-align: center;
-                        background: #FBFBFB;
-                    }
+        .topContent {
+            width: 75%;
+            float: right;
+            font-family: "宋体";
+
+            p {
+                height: auto;
+                overflow: hidden;
+                line-height: 35px;
+                font-size: 18px;
+                color: #333;
+
+                strong {
+                    text-decoration: none;
+                    color: rgb(0, 0, 0);
+                    font-weight: bold;
+                    font-size: 19px;
                 }
             }
 
-            .active {
-                border-left: 0;
-                border: 1px solid #028E21;
-                background: #fff;
+            p:nth-child(1) a {
+                font-size: 24px;
+                font-weight: bold;
+                color: #333;
             }
         }
     }
-}
 
-//资讯推荐
-.zixuntuijian {
-    width: 100%;
-    height: 290px;
-    margin-bottom: 70px;
-
-    .innerLeft {
-
-        // 左侧
-        .zixunLeft {
-            margin-right: 30px;
+    .bwzpBottom {
+        width: 1300px;
+        height: auto;
+        overflow: hidden;
+        padding: 40px;
+        border-radius: 20px;
+        margin: -20px auto 20px;
+        background: #fff;
+        border: 1px solid #000;
+
+        .bottomTitle {
+            width: 100%;
+            height: auto;
+            line-height: 30px;
+            padding: 10px;
+            font-size: 24px;
+            color: #b52727;
+            border-bottom: 2px solid #000;
+            box-sizing: border-box;
         }
 
-        .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;
-            }
+        .zhaopin_list {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            margin: 20px auto;
 
-            .photo_text {
+            >li {
+                width: 99%;
+                height: auto;
+                overflow: hidden;
+                border: 2px solid #c31d1d;
+                margin: 20px auto;
+                background: #c31d1d;
+                min-height: 100px;
+                display: flex;
 
-                >li:first-child {
-                    width: 380px;
-                    height: 120px;
-                    margin-top: 20px;
-                    margin-bottom: 15px;
+                .zhaopin_left {
+                    width: 30%;
+                    height: auto;
+                    overflow: hidden;
+                    padding: 32px 116px 30px 10px;
+                    display: table-cell;
+                    text-align: center;
+                    vertical-align: middle;
                     position: relative;
+                    box-sizing: border-box;
 
-                    >img {
-                        float: left;
-                        width: 160px;
-                        height: 120px;
+                    span {
+                        display: inline-block;
+                        width: 100%;
+                        height: auto;
+                        overflow: hidden;
+                        text-align: center;
+                        font-size: 24px;
+                        color: #fff;
+                        position: absolute;
+                        left: -45px;
+                        top: 34%;
                     }
 
-                    >div {
-                        float: left;
-                        width: 220px;
-                        height: 120px;
-                        padding-left: 15px;
-                        padding-top: 6px;
-                        box-sizing: border-box;
-                        background-color: #f6f6f6;
-
-
-                        >h5 {
-                            width: 200px;
-                            height: 54px;
-                            display: -webkit-box;
-                            -webkit-box-orient: vertical;
-                            -webkit-line-clamp: 2;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            word-break: break-all;
-                            font-family: Source Han Sans, Source Han Sans;
-                            font-weight: 500;
-                            font-size: 18px;
-                            color: #333333;
-                            line-height: 26px;
-                            text-align: left;
-                            font-style: normal;
-                            text-transform: none;
-                        }
-
-                        >p {
-                            width: 200px;
-                            height: 22px;
-                            line-height: 20px;
-                            position: absolute;
-                            bottom: 5px;
-                            right: 0;
-
-                            >span {
-                                display: inline-block;
-                                // width: 100px;
-                                height: 18px;
-                                font-family: Source Han Sans, Source Han Sans;
-                                font-weight: 400;
-                                font-size: 12px;
-                                color: #999999;
-                                text-align: left;
-                                line-height: 14px;
-                                font-style: normal;
-                                text-transform: none;
-                            }
-
-                            >span:last-child {
-                                // width: 90px;
-                                text-align: right;
-                                margin-left: 20px;
-                            }
-
-                        }
+                    .new_pin_text {
+                        width: 90px;
+                        height: 90px;
+                        line-height: 90px;
+                        font-size: 65px;
+                        color: #fff;
+                        font-weight: 400;
+                        position: absolute;
+                        right: 10px;
+                        top: 50%;
+                        border: 1px solid #fff;
+                        text-align: center;
+                        border-radius: 50%;
+                        margin-top: -12%;
                     }
                 }
 
-                >li {
-                    width: 380px;
-                    height: 25px;
-                    white-space: nowrap;
+                .zhaopin_item {
+                    width: 70%;
+                    height: auto;
+                    min-height: 118px;
                     overflow: hidden;
-                    text-overflow: ellipsis;
-                    font-family: PingFang SC, PingFang SC;
-                    font-weight: 500;
-                    font-size: 18px;
-                    color: #333333;
-                    line-height: 21px;
-                    text-align: left;
-                    font-style: normal;
-                    text-transform: none;
-                    margin-bottom: 10px;
-
-                    em {
-                        display: inline-block;
-                        width: 8px;
-                        height: 8px;
-                        border-radius: 8px;
-                        margin-right: 10px;
-                        background-color: #d9d9d9;
-                    }
-                }
-
-                >li:hover {
-                    color: #139602;
-                }
+                    padding: 10px;
+                    background: #fff;
+
+                    li {
+                        width: 100%;
+                        height: 40px;
+                        line-height: 40px;
+                        overflow: hidden;
+                        font-size: 18px;
+                        background: #fff;
+                        color: #000;
+                        padding: 0 10px;
+                        border: none;
+                        margin: 0;
+                        box-sizing: border-box;
 
-                >li:hover em {
-                    background-color: #139602;
-                }
-            }
-        }
-    }
+                        a {
+                            font-size: 18px;
+                            color: #000;
+                        }
 
-    .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;
+                        a:hover {
+                            color: #c31d1d;
+                        }
+                    }
                 }
             }
-
         }
 
-        .rightList {
-            height: 540px;
-            margin-top: 20px;
+        .bottomContent {
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            margin: 20px auto;
+
+            .bottomContent_item {
+                width: 49%;
+                height: auto;
+                overflow: hidden;
+                float: left;
+                margin: 10px auto;
+                margin-right: 20px;
+
+                .itemTitle {
+                    width: 226px;
+                    height: 50px;
+                    line-height: 50px;
+                    background-color: #c31d1d;
 
-            >li {
-                height: 100px;
-                margin-bottom: 10px;
+                    a {
+                        display: inline-block;
+                        width: auto;
+                        padding: 0 100px 0 30px;
+                        background: #c31d1d;
+                        overflow: hidden;
+                        height: 50px;
+                        position: relative;
+                        line-height: 50px;
+                        color: #fff;
+                        font-size: 24px;
+                    }
 
-                >img {
-                    width: 150px;
-                    height: 100px;
+                    a::after {
+                        content: '';
+                        display: block;
+                        width: 100px;
+                        height: 100px;
+                        background: #fff;
+                        position: absolute;
+                        right: -54px;
+                        top: -61px;
+                        transform: rotate(307deg);
+                    }
                 }
 
-                >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;
+                .itemList {
+                    width: 100%;
+                    min-height: 42px;
+                    overflow: hidden;
+                    border: 1px solid #ccc;
+                    padding: 20px;
+                    box-sizing: border-box;
 
+                    li {
+                        a {
+                            font-size: 18px;
+                            color: #333;
+                        }
+                    }
                 }
 
-                >p:hover {
-                    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
+                &:last-child {
+                    margin-right: 0;
                 }
             }
-        }
 
-    }
-}
-
-.projectMoreBox {
-    margin: 0 auto;
-    height: 540px;
-    margin-top: 20px;
-    background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/special/projectMoreBg.png") no-repeat;
-    margin-bottom: 40px;
-
-    .projectMoreTitle {
-        color: #028E21;
-        padding-top: 20px;
-        font-size: 26px;
-        padding-left: 204px;
+        }
     }
 
-    .projectMoreText {
-        padding: 40px;
-        font-size: 20px;
-        color: #333333;
-        text-indent: 2em;
-        line-height: 36px;
-    }
 }
 </style>
-
-
-<style lang="less" scoped>
-
-
-   @media screen and (min-width:801px){/*pc*/
-
-    
-    
-        .pc_none{display:none;}  
-    }        
-
-    @media screen and (max-width:800px){/*ipad_phone*/
-        .breadcrumb .inner *{line-height:22px;height:22px;float:left;width:auto;}
-        .breadcrumb .inner /deep/.el-icon { line-height:18px;height:18px; width:12px;}
-
-        .breadcrumb{line-height:22px;height:22px;display:block;}
-                    .breadcrumb {margin-bottom:11px; }
-        .breadcrumb .location{ font-size: 14px; margin-right:5px;}
-            .breadcrumb span { font-size: 14px; }
-
-        .newsList .inner{width:92%;}    
-        .newsList{margin-bottom:11px;}
-
-        .newsList .inner .innerTitle{font-size:18px;height:50px;line-height:50px;}
-
-
-        .newsList .inner .innerLeft{width:100%;float:none;}
-        .newsList .inner .innerLeft > .list > li{line-height:40px;height:40px;width:100%;width:96%;margin:0px auto;}
-
-        .newsList .inner .innerLeft > .list > li > a{
-                    width:92%;display:block; height:40px;line-height:40px;font-size:16px;float:left;
-                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
-                }
-
-         .newsList .inner .innerLeft > .list > li[data-v-b84ebd70]:nth-child(1)::after, .newsList .inner .innerLeft > .list > li[data-v-b84ebd70]:nth-child(2)::after{
-            margin-left:0px;font-size:12px;float:right;line-height:16px;height:16px;margin-top:14px;
-        }       
-     .newsList .inner .innerLeft > .list > li:nth-child(5n){
-                height:auto;
-                padding-bottom:11px;
-                margin-bottom:11px;
-            }
-
-            .newsList .inner .innerLeft > .list{height:auto;margin-bottom:11px;}
-
-        .innerRight{display:none;}
-
-    }
-
- </style>   
-

pages/index.vue

@@ -55,7 +55,7 @@
             <!--左侧焦点图新闻-->
             <div class="index—layer-1-left">
                 <div class="nuxt-swiper" v-if="imagelist">
-                    <el-carousel :interval="3000" :touchable="true" arrow="always" 
+                    <el-carousel :interval="3000" :touchable="true" arrow="never" 
                         indicator-class="custom-indicator" class="custom-carousel roll_in" @change="handleIndicatorChange">
                         <el-carousel-item v-for="(item, index) in imagelist" :key="index">
                             <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :title="item.title">
@@ -89,23 +89,30 @@
                         <div v-if="indexTabs == 1" class="coninfoitem">
                             <div class="coninfoitem_img">
                                 <img src="/public/index/news.png" />
-                                <h3><NuxtLink to="/">浙江高院召开党组会传达学习习近平总书记重要</NuxtLink></h3>
-                                <p><NuxtLink to="/">12月30日上午，浙江高院召开党组(扩大)会议，传达学习习近平总书记重要指示、省委常委会听取省法院党组工作情况和《省法院工作报告》</NuxtLink></p>
+                                <div class="coninfoitem_img_text">
+                                    <h3><NuxtLink to="/">浙江高院召开党组会传达学习习近平总书记重要</NuxtLink></h3>
+                                    <p><NuxtLink to="/">12月30日上午，浙江高院召开党组(扩大)会议，传达学习习近平总书记重要指示、省委常委会听取省法院党组工作情况和《省法院工作报告》</NuxtLink></p>
+                                </div>
                             </div>
                             <NuxtLink to="/" class="coninfoitem_title">
-                                浙江高院召开党组会传达学习习近平总书记重要指示、省委常委会听取省法院党组工作情况汇报的会议精神
+                                <span>浙江高院召开党组会传达学习习近平总书记重要指示、省委常委会听取省法院党组工作情况汇报的会议精神</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/" class="coninfoitem_title">
-                                “负担减轻，干劲更足了”
+                                <span>“负担减轻，干劲更足了”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/" class="coninfoitem_title">
-                                让好政策真正惠及群众
+                                <span>让好政策真正惠及群众</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/" class="coninfoitem_title">
-                                张掖：片区协作聚合力 联动监督提效能
+                                <span>张掖：片区协作聚合力 联动监督提效能</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/" class="coninfoitem_title">
-                                把学习贯彻习近平生态文明思想不断引向深入
+                                <span>把学习贯彻习近平生态文明思想不断引向深入</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                         <div v-if="indexTabs == 2" class="coninfoitem">
@@ -176,19 +183,24 @@
                     </div>
                     <div class="index-tabs2-bottom">
                         <NuxtLink to="/">
-                            盐池：观庭审知敬畏 守底线践清廉
+                            <span>盐池：观庭审知敬畏 守底线践清廉</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            吴忠：“组地”监督赋能优化营商环境
+                            <span>吴忠：“组地”监督赋能优化营商环境</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            海原：整治骗取套取社保基金行为 守住民生资金安全防线
+                            <span>海原：整治骗取套取社保基金行为 守住民生资金安全防线</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            大武口：持续拧紧责任链条 深化全面从严治党
+                            <span>大武口：持续拧紧责任链条 深化全面从严治党</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行
+                            <span>利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                     </div>
                </div>
@@ -226,19 +238,24 @@
                     </div>
                     <div class="index-tabs2-bottom">
                         <NuxtLink to="/">
-                            盐池：观庭审知敬畏 守底线践清廉
+                            <span>盐池：观庭审知敬畏 守底线践清廉</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            吴忠：“组地”监督赋能优化营商环境
+                            <span>吴忠：“组地”监督赋能优化营商环境</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            海原：整治骗取套取社保基金行为 守住民生资金安全防线
+                            <span>海原：整治骗取套取社保基金行为 守住民生资金安全防线</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            大武口：持续拧紧责任链条 深化全面从严治党
+                            <span>大武口：持续拧紧责任链条 深化全面从严治党</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                         <NuxtLink to="/">
-                            利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行
+                            <span>利通区：以“监督一点通”为抓手 推动基层权力在阳光下运行</span>
+                            <span>2026-01-06</span>
                         </NuxtLink>
                     </div>
                 </div>
@@ -281,25 +298,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -336,25 +360,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -387,25 +418,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -440,25 +478,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -491,25 +536,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -542,25 +594,32 @@
                         </div>
                         <div class="index—layer-3-news-body-main">
                             <NuxtLink to="/">
-                                公证人员“三个特别”助力群众办好心头事
+                                <span>公证人员“三个特别”助力群众办好心头事</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会
+                                <span>聚行业智慧 凝发展共识，天河区举办律所主任交流座谈会</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动
+                                <span>荔湾区司法局岭南司法所开展“迎全运 降发案”反诈宣传活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”
+                                <span>市潭岗所：架起关爱“连心桥” 畅通血脉“生命线”</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                花都：漫步古村学宪法 徒步普法润民心
+                                <span>花都：漫步古村学宪法 徒步普法润民心</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动
+                                <span>种下一抹绿，疗愈一颗心——荔湾区司法局组织社矫对象创新开展心理舒缓小组活动</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                             <NuxtLink to="/">
-                                天河法治赋能 高质量发展成色更足
+                                <span>天河法治赋能 高质量发展成色更足</span>
+                                <span>2026-01-06</span>
                             </NuxtLink>
                         </div>
                     </div>
@@ -1352,722 +1411,2336 @@ const indexTabs4 = ref(1)
 </script>
 
 <style lang="less" scoped>
-//原始样式 start---------------------------------------->
-//@import url('@/assets/css/index/pc.less');
-//@import url('@/assets/css/index/yd.less');
-//原始样式 end---------------------------------------->
-
-//swiper轮播图 start---------------------------------------->
-.swiper-container {
-    width: 100%;
-    padding: 20px 0;
-    position: relative;
-    max-width: 1400px;
-    margin: 0 auto;
-}
-.custom-swiper {
-    width: 100%;
-    height: 100%;
-    padding: 10px 5px;//给两侧留出空间
-}
-.custom-swiper :deep(.swiper-wrapper) {
-    align-items: stretch;//使所有幻灯片高度一致
-}
-.custom-swiper :deep(.swiper-slide) {
-    height: auto;
-    transition: transform 0.3s ease;
-}
-//悬停效果
-.custom-swiper :deep(.swiper-slide:hover) {
-    transform: translateY(-5px);
-    z-index: 10;
-}
-.slide-link {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    height: 100%;
-    width: 100%;
-}
-.image-container {
-    position: relative;
-    width: 100%;
-    height: 118px;//根据需求调整
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-    background: #f5f5f5;//加载时的背景色
-}
-.image-container:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-}
-.slide-image {
-    // width: 100%;
-    // height: 100%;
-    width: 264px;
-    height: 118px;
-    object-fit: cover;
-    transition: transform 0.5s ease;
-}
-.image-container:hover .slide-image {
-    transform: scale(1.05);
-}
-.image-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    color: white;
-    padding: 12px 15px;
-    font-size: 14px;
-    line-height: 1.4;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    background: rgba(0, 0, 0, .6)
-}
-.custom-indicators {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 25px;
-    padding: 15px 10px;
-    flex-wrap: wrap;
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 50px;
-    max-width: 90%;
-    margin-left: auto;
-    margin-right: auto;
-}
-.indicator-btn {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 2px solid #e0e0e0;
-    background: white;
-    color: #333;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    outline: none;
-}
-.indicator-btn:hover {
-    background: #f0f9ff;
-    border-color: #409eff;
-    transform: scale(1.1);
-}
-.indicator-btn.active-indicator {
-    background: #409eff;
-    color: white;
-    border-color: #409eff;
-    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
-}
-//swiper加载动画
-.image-container:empty::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: loading 1.5s infinite;
-    border-radius: 12px;
-}
-@keyframes loading {
-    0% {
-        background-position: 200% 0;
+@media screen and (min-width: 1401px) {
+    //swiper轮播图 start---------------------------------------->
+    .swiper-container {
+        width: 100%;
+        padding: 20px 0;
+        position: relative;
+        max-width: 1400PX;
+        margin: 0 auto;
     }
-    100% {
-        background-position: -200% 0;
+    .custom-swiper {
+        width: 100%;
+        height: 100%;
+        padding: 10PX 5PX;//给两侧留出空间
     }
-}
-//swiper箭头颜色
-.custom-swiper :deep(.swiper-button-prev),
-.custom-swiper :deep(.swiper-button-next) {
-    color: white !important;//箭头颜色改为白色
-}
-.custom-swiper :deep(.swiper-button-prev):after,
-.custom-swiper :deep(.swiper-button-next):after {
-    color: white !important;//确保箭头图标也是白色
-}
-//swiper轮播图 end---------------------------------------->
-//轮播图 start---------------------------------------->
-.nuxt-swiper {
-    width: 100%;
-    height: 300px;
-    position: relative;
-    img {
+    .custom-swiper :deep(.swiper-wrapper) {
+        align-items: stretch;//使所有幻灯片高度一致
+    }
+    .custom-swiper :deep(.swiper-slide) {
+        height: auto;
+        transition: transform 0.3s ease;
+    }
+    //悬停效果
+    .custom-swiper :deep(.swiper-slide:hover) {
+        transform: translateY(-5px);
+        z-index: 10;
+    }
+    .slide-link {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+        height: 100%;
         width: 100%;
-        height: 300px;
     }
-    span {
-        display: inline-block;
+    .image-container {
+        position: relative;
         width: 100%;
-        height: 40px;
-        line-height: 40px;
-        padding-left: 20px;
-        box-sizing: border-box;
+        height: 118PX;//根据需求调整
+        overflow: hidden;
+        box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        background: #f5f5f5;//加载时的背景色
+    }
+    .image-container:hover {
+        box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
+    }
+    .slide-image {
+        // width: 100%;
+        // height: 100%;
+        width: 264PX;
+        height: 118PX;
+        object-fit: cover;
+        transition: transform 0.5s ease;
+    }
+    .image-container:hover .slide-image {
+        transform: scale(1.05);
+    }
+    .image-title {
         position: absolute;
         bottom: 0;
         left: 0;
-        font-family: Source Han Sans, Source Han Sans;
-        font-size: 16px;
-        color: #FFFFFF;
-        //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-        background: rgba(0, 0, 0, .6);
+        right: 0;
+        color: white;
+        padding: 12PX 15PX;
+        font-size: 14PX;
+        line-height: 1.4;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(0, 0, 0, .6)
     }
-}
-.el-carousel {
-    // 左右箭头按钮
-    .el-carousel__arrow--right :deep(.class-name),
-    .el-carousel__arrow--left :deep(.class-name) {
-        width: 68px;
-        height: 68px;
-    }
-    //左右箭头图片
-    /deep/.el-icon svg {
-        height: 1em;
-        width: 1em;
-        background-color: transparent;
-    }
-    /deep/.el-carousel__arrow {
-        border-radius: 0;
-        background-color: transparent;
-    }
-    /deep/.el-carousel__arrow i {
-        font-size: 68px !important;
-    }
-    /deep/ .el-carousel__indicators {
-        // 指示器
-        left: unset;
-        transform: unset;
-        right: 41%;
-    }
-    /deep/ .el-carousel__button {
-        // 指示器按钮
-        width: 15px;
-        height: 15px;
+    .custom-indicators {
+        display: flex;
+        justify-content: center;
+        gap: 8PX;
+        margin-top: 25PX;
+        padding: 15PX 10PX;
+        flex-wrap: wrap;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 50PX;
+        max-width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .indicator-btn {
+        width: 36PX;
+        height: 36PX;
         border-radius: 50%;
-        border: none;
-        opacity: 1;
-        background-color: #FFFFFF;
-        bottom: 30px;
+        border: 2PX solid #e0e0e0;
+        background: white;
+        color: #333;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14PX;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
     }
-    /deep/ .is-active .el-carousel__button {
-        // 指示器激活按钮
-        background: #158d91;
+    .indicator-btn:hover {
+        background: #f0f9ff;
+        border-color: #409eff;
+        transform: scale(1.1);
     }
-    /deep/.custom-indicators {
+    .indicator-btn.active-indicator {
+        background: #409eff;
+        color: white;
+        border-color: #409eff;
+        box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
+    }
+    //swiper加载动画
+    .image-container:empty::before {
+        content: '';
         position: absolute;
-        bottom: 10px;
-        left: 50%;
-        transform: translateX(-50%);
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        border-radius: 12PX;
     }
-    /deep/ .el-carousel__indicators {
-        right:3%;
-        bottom: 10%;
+    @keyframes loading {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
     }
-    /deep/ .el-carousel__arrow{
-        top:50%;
+    //swiper箭头颜色
+    .custom-swiper :deep(.swiper-button-prev),
+    .custom-swiper :deep(.swiper-button-next) {
+        color: white !important;//箭头颜色改为白色
     }
- 
-}
-//轮播图 end---------------------------------------->
-
-
-//第一层 start---------------------------------------->
-.index—layer-1 {
-    width: 1400px;
-    height: auto;
-    overflow: hidden;
-    margin: 20px auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    .index—layer-1-left {
-        width: 31%;
-        border: 1px solid #ccc;
-    }
-    .index-layer-1-middle {
-        width: 31%;
-        border: 1px solid #ccc;
-        box-sizing: border-box;
-        padding: 0 10px;
-        padding-bottom: 5px;
-        .tabtlt {
+    .custom-swiper :deep(.swiper-button-prev):after,
+    .custom-swiper :deep(.swiper-button-next):after {
+        color: white !important;//确保箭头图标也是白色
+    }
+    //swiper轮播图 end---------------------------------------->
+    //轮播图 start---------------------------------------->
+    .nuxt-swiper {
+        width: 100%;
+        height: 300PX;
+        position: relative;
+        img {
             width: 100%;
-            height: auto;
-            outline: hidden;
-            border-bottom: 1px solid #f0f0f0;
-            margin: 7px 0 18px;
-            overflow: hidden;
-            display: flex;
-            align-self: center;
-            justify-content: space-between;
-            a {
-                color: #337ab7;
-                text-decoration: none;
-            }
-            div {
-                width: 50%;
-                text-align: center;
-                width: 100%;
-                height: 50px;
-                line-height: 50px;
-                font-size: 20px;
-                color: #000;
-                background: #f3f3f3;
-                text-align: center;
-                cursor: pointer;
-            }
-            div.intabtltbg {
-                background: url(public/index/current.gif) no-repeat center bottom !important;
-            }
+            height: 300PX;
         }
-        .coninfoitem {
+        span {
+            display: inline-block;
             width: 100%;
-            overflow: hidden;
-            margin: 0px auto;
-            >div{
-                &.coninfoitem_img {
-                    height: 86px;
-                    overflow: hidden;
-                    margin-bottom: 5px;
-                }
-                h3 {
-                    a {
-                        font-size: 13px;
-                        color: #333;
-                        font-weight: bold;
-                        width: 100%;
-                        height: 26px;
-                        line-height: 26px;
-                        overflow: hidden;
-                    }
-                }
-                img {
-                    width: 120px;
-                    height: 86px;
-                    float: left;
-                    margin-right: 11px;
-                }
-                p {
-                    a {
-                        color: #333;
-                        font-size: 13px;
-                    }
-                }
-            }
-            .coninfoitem_title {
-                width: 100%;
-                height: 28px;
-                line-height: 28px;
-                overflow: hidden;
-                position: relative;
-                list-style-position: inside;
-                color: #000;
-                display: block;
-            }
+            height: 40PX;
+            line-height: 40PX;
+            padding-left: 20PX;
+            box-sizing: border-box;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            font-family: Source Han Sans, Source Han Sans;
+            font-size: 16PX;
+            color: #FFFFFF;
+            //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+            background: rgba(0, 0, 0, .6);
         }
     }
-    .index-layer-1-right {
-        width: 31%;
-        border: 1px solid #ccc;
-        box-sizing: border-box;
-        padding: 0 10px;
-        padding-bottom: 16px;
-        .imgtlt {
-            width: 100%;
-            height: 43px;
-            border-bottom: 1px solid #e7e7e7;
-            a {
-                display: block;
-                width: 92px;
-                height: 42px;
-                line-height: 42px;
-                text-align: center;
-                font-size: 20px;
-                color: #333;
-                border-bottom: 2px solid #158d91;
-            }
+    .el-carousel {
+        // 左右箭头按钮
+        .el-carousel__arrow--right :deep(.class-name),
+        .el-carousel__arrow--left :deep(.class-name) {
+            width: 68PX;
+            height: 68PX;
         }
-        .con_img_list {
-            display: flex;
-            flex-wrap: wrap;
-            a {
-                width: 48%;
-                float: left;
+        //左右箭头图片
+        /deep/.el-icon svg {
+            height: 1em;
+            width: 1em;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow {
+            border-radius: 0;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow i {
+            font-size: 68PX !important;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 41%;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 15PX;
+            height: 15PX;
+            border-radius: 50%;
+            border: none;
+            opacity: 1;
+            background-color: #FFFFFF;
+            bottom: 30PX;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #158d91;
+        }
+        /deep/.custom-indicators {
+            position: absolute;
+            bottom: 10PX;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        /deep/ .el-carousel__indicators {
+            right:3%;
+            bottom: 10%;
+        }
+        /deep/ .el-carousel__arrow{
+            top:50%;
+        }
+    
+    }
+    //轮播图 end---------------------------------------->
+    //第一层 start---------------------------------------->
+    .index—layer-1 {
+        width: 1400PX;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .index—layer-1-left {
+            width: 31%;
+            border: 1PX solid #ccc;
+        }
+        .index-layer-1-middle {
+            width: 31%;
+            border: 1PX solid #ccc;
+            box-sizing: border-box;
+            padding: 0 10PX;
+            padding-bottom: 5PX;
+            .tabtlt {
+                width: 100%;
+                height: auto;
+                outline: hidden;
+                border-bottom: 1PX solid #f0f0f0;
+                margin: 7PX 0 18PX;
                 overflow: hidden;
-                height: 100px;
-                margin: 20px auto 0;
-                display: block;
-                position: relative;
-                img {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
+                display: flex;
+                align-self: center;
+                justify-content: space-between;
+                a {
+                    color: #337ab7;
+                    text-decoration: none;
                 }
-                .con_img_list_rgba {
-                    position: absolute;
+                div {
+                    width: 50%;
+                    text-align: center;
                     width: 100%;
-                    height: 22px;
-                    line-height: 21px;
-                    box-sizing: border-box;
-                    padding: 0px 10px;
+                    height: 50PX;
+                    line-height: 50PX;
+                    font-size: 20PX;
+                    color: #000;
+                    background: #f3f3f3;
                     text-align: center;
-                    bottom: 0px;
-                    left: 0px;
-                    color: #fff;
-                    font-size: 16px;
-                    z-index: 11;
-                    background: rgba(0, 0, 0, .6);
-                    display: block;
-                    word-break: keep-all;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
+                    cursor: pointer;
+                }
+                div.intabtltbg {
+                    background: url(public/index/current.gif) no-repeat center bottom !important;
                 }
             }
-        }
-    }
-}
-//第一层 end---------------------------------------->
-
-//第二层 start---------------------------------------->
-.index—layer-2 {
-    width: 1400px;
-    height: auto;
-    overflow: hidden;
-    margin: 20px auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    .index—layer-2-left,.index—layer-2-right {
-        width: 49%;
-        border: 1px solid #ddd;
-        height: auto;
-        overflow: hidden;
-        .index—layer-2-title {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            background: #fff;
-            >div {
-                &.active {
-                    background: #158d91;
-                    color: #fff;
-                    a {
-                        color: #fff;
+            .coninfoitem {
+                width: 100%;
+                overflow: hidden;
+                margin: 0px auto;
+                >div{
+                    &.coninfoitem_img {
+                        height: 86PX;
+                        overflow: hidden;
+                        margin-bottom: 5PX;
+                        display: flex;
+                        align-items: flex-start;
+                        justify-content: space-between;
+                    }
+                    h3 {
+                        line-height: 0;
+                        a {
+                            font-size: 13PX;
+                            color: #333;
+                            font-weight: bold;
+                            width: 100%;
+                            height: 26PX;
+                            line-height: 26PX;
+                            overflow: hidden;
+                        }
+                    }
+                    img {
+                        width: 120PX;
+                        height: 86PX;
+                        float: left;
+                        margin-right: 11PX;
+                    }
+                    p {
+                        line-height: 0;
+                        a {
+                            color: #333;
+                            font-size: 13PX;
+                            line-height: 20PX;
+                        }
                     }
                 }
-                width: 118px;
-                height: 44px;
-                line-height: 44px;
-                background: #fff;
-                text-align: center;
-                color: #808080;
-                font-size: 16px;
-                font-weight: bold;
-                border-bottom: 2px solid #158d91;
-                a {
-                    font-size: 20px;
-                    color: #808080;
+                .coninfoitem_title {
+                    width: 100%;
+                    height: 28PX;
+                    line-height: 28PX;
+                    overflow: hidden;
+                    position: relative;
+                    list-style-position: inside;
+                    color: #000;
+                    display: block;
+                    font-size: 13PX;
                 }
             }
         }
-        .index-tabs2-top {
-            background: #f8f8f8;
-            padding: 20px 20px;
+        .index-layer-1-right {
+            width: 31%;
+            border: 1PX solid #ccc;
             box-sizing: border-box;
-            display: flex;
-            border-bottom: 1px dashed #ddd;
-            >a {
-                margin-right: 11px;
-                img {
-                    display: block;
-                    width: 120px;
-                    height: 86px;
-                }
-            }
-            h3 {
+            padding: 0 10PX;
+            padding-bottom: 16PX;
+            .imgtlt {
                 width: 100%;
-                height: 26px;
-                line-height: 26px;
-                overflow: hidden;
+                height: 43PX;
+                border-bottom: 1PX solid #e7e7e7;
                 a {
-                    font-size: 13px;
+                    display: block;
+                    width: 92PX;
+                    height: 42PX;
+                    line-height: 42PX;
+                    text-align: center;
+                    font-size: 20PX;
                     color: #333;
-                    font-weight: bold;
+                    border-bottom: 2PX solid #158d91;
                 }
             }
-            p{
-                width: 100%;
-                height: 60px;
-                line-height: 20px;
-                overflow: hidden;
+            .con_img_list {
+                display: flex;
+                flex-wrap: wrap;
                 a {
-                    color: #333;
-                    font-size: 13px;
+                    width: 48%;
+                    float: left;
+                    overflow: hidden;
+                    height: 100PX;
+                    margin: 20PX auto 0;
+                    display: block;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                    }
+                    .con_img_list_rgba {
+                        position: absolute;
+                        width: 100%;
+                        height: 22PX;
+                        line-height: 21PX;
+                        box-sizing: border-box;
+                        padding: 0PX 10PX;
+                        text-align: center;
+                        bottom: 0PX;
+                        left: 0PX;
+                        color: #fff;
+                        font-size: 16PX;
+                        z-index: 11;
+                        background: rgba(0, 0, 0, .6);
+                        display: block;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
             }
-            
-        }
-        .index-tabs2-bottom {
-            padding: 20px;
-            margin: 0;
-            a {
-                display: block;
-                width: 100%;
-                height: 28px;
-                line-height: 28px;
-                overflow: hidden;
-                position: relative;
-                list-style-position: inside;
-                color: #333;
-                font-size: 13px;
-            }
         }
     }
-    
-}
-//第二层 end---------------------------------------->
+    //第一层 end---------------------------------------->
 
-//第三层 start---------------------------------------->
-.index—layer-3 {
-    .index—layer-3-line {
-        width: 1400px;
+    //第二层 start---------------------------------------->
+    .index—layer-2 {
+        width: 1400PX;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        margin: 0 auto;
-        box-sizing: border-box;
-        //选项卡类型
-        .index—layer-3-tabs-box {
-            width: 31%;
+        .index—layer-2-left,.index—layer-2-right {
+            width: 49%;
+            border: 1PX solid #ddd;
             height: auto;
-            border: 1px solid #ddd;
-            border-top: 2px solid #158d91;
-            margin: 1%;
-            padding: 0 10px;
-            box-sizing: border-box;
-            .index—layer-3-tabs-box-title {
+            overflow: hidden;
+            .index—layer-2-title {
                 display: flex;
                 align-items: center;
-                width: 100%;
-                border-bottom: 1px solid #f0f0f0;
+                justify-content: flex-start;
+                background: #fff;
                 >div {
                     &.active {
-                        background: url(../public/index/current2.png) no-repeat center bottom;
+                        background: #158d91;
+                        color: #fff;
+                        a {
+                            color: #fff;
+                        }
                     }
-                    width: 87px;
-                    height: 54px;
-                    line-height: 55px;
-                    overflow: hidden;
-                    float: left;
-                    margin-right: 10px;
+                    width: 118PX;
+                    height: 44PX;
+                    line-height: 44PX;
+                    background: #fff;
                     text-align: center;
-                    font-size: 20px;
-                    color: #333;
+                    color: #808080;
+                    font-size: 16PX;
                     font-weight: bold;
+                    border-bottom: 2PX solid #158d91;
                     a {
-                        color: #333;
+                        font-size: 20PX;
+                        color: #808080;
                     }
                 }
             }
-            .index—layer-3-news-body-main {
-                margin-bottom: 20px;
-                a {
-                    width: 100%;
-                    height: 26px;
-                    line-height: 26px;
-                    list-style-position: inside;
-                    font-size: 13px;
-                    color: #333;
-                    display: block;
-                    word-break: keep-all;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    width: 66%;
-                }
-            }
-        }
-        //常规类型
-        .index—layer-3-news-box {
-            width: 31%;
-            height: auto;
-            border: 1px solid #ddd;
-            border-top: 2px solid #158d91;
-            margin: 1%;
-            padding: 0 10px;
-            box-sizing: border-box;
-            .index—layer-3-news-box-title {
+            .index-tabs2-top {
+                background: #f8f8f8;
+                padding: 20PX 20PX;
+                box-sizing: border-box;
                 display: flex;
-                align-items: center;
-                width: 100%;
-                border-bottom: 1px solid #f0f0f0;
-                >div {
-                    &.active {
-                        background: url(../public/index/current2.png) no-repeat center bottom;
+                border-bottom: 1PX dashed #ddd;
+                >a {
+                    margin-right: 11PX;
+                    img {
+                        display: block;
+                        width: 120PX;
+                        height: 86PX;
                     }
-                    width: 87px;
-                    height: 54px;
-                    line-height: 55px;
+                }
+                h3 {
+                    width: 100%;
+                    height: 26PX;
+                    line-height:0;
                     overflow: hidden;
-                    float: left;
-                    margin-right: 10px;
-                    text-align: center;
-                    font-size: 20px;
-                    color: #333;
-                    font-weight: bold;
                     a {
+                        font-size: 13PX;
                         color: #333;
+                        font-weight: bold;
                     }
                 }
-            }
-            .index—layer-3-news-body-main {
-                margin-bottom: 20px;
-                a {
+                p{
                     width: 100%;
-                    height: 26px;
-                    line-height: 26px;
-                    list-style-position: inside;
-                    font-size: 13px;
-                    color: #333;
-                    display: block;
-                    word-break: keep-all;
-                    white-space: nowrap;
+                    height: 60PX;
+                    line-height: 20PX;
                     overflow: hidden;
-                    text-overflow: ellipsis;
-                    width: 66%;
-                }
-            }
-        }
-    }
-    .index—layer-3-news-body-title {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        margin: 20px 0 14px;
-        padding-bottom: 20px;
-        border-bottom: 1px dashed #e1e1e1;
-        >div {
-            &.news-body-left {
-                margin-right: 11px;
-                img{
-                    display: block;
-                    width: 120px;
-                    height: 86px;
+                    a {
+                        color: #333;
+                        font-size: 13PX;
+                    }
                 }
+                
             }
-            &.news-body-right {
-                >a {
+            .index-tabs2-bottom {
+                padding: 20PX;
+                margin: 0;
+                a {
                     display: block;
                     width: 100%;
-                    height: 40px;
-                    line-height: 40px;
-                    font-size: 16px;
-                    font-weight: bold;
-                    overflow: hidden;
-                    color: #000;
-                    text-decoration: none;
-                }
-                p{
-                    width: 100%;
-                    height: 46px;
-                    line-height: 23px;
                     overflow: hidden;
-                    font-size: 14px;
+                    position: relative;
+                    list-style-position: inside;
                     color: #333;
-                    a{
-                        color: #333;
+                    line-height: 28PX;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    span:nth-child(1) {
+                        width: 70%;
+                        height: 28PX;
+                        text-align: left;
+                        overflow: hidden;
+                        display: block;
+                        font-size: 14PX;
+                    }
+                    span:nth-child(2) {
+                        width: 30%;
+                        height: 28PX;
+                        text-align: right;
+                        display: block;
+                        font-size: 12PX;
                     }
                 }
             }
         }
+        
     }
-}
-//第三层 end---------------------------------------->
+    //第二层 end---------------------------------------->
 
-//第四层 start---------------------------------------->
-.index-layer-4 {
-    width: 1400px;
-    border: 1px solid #ccc;
-    border-radius: 20px;
-    padding: 10px 20px;
-    box-sizing: border-box;
-    margin: 20px auto;
-    .index-layer-4-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        height: 40px;
-        line-height: 40px;
-        border-bottom: 1px solid #ccc;
-        a{
-            &:first-child {
-                font-size: 22px;
-                color: #1476bd;
+    //第三层 start---------------------------------------->
+    .index—layer-3 {
+        .index—layer-3-line {
+            width: 1400PX;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0 auto;
+            box-sizing: border-box;
+            //选项卡类型
+            .index—layer-3-tabs-box {
+                width: 31%;
+                height: auto;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                .index—layer-3-tabs-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        list-style-position: inside;
+                        font-size: 13PX;
+                        color: #333;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        span:nth-child(1) {
+                            width: 70%;
+                            height: 28PX;
+                            text-align: left;
+                            overflow: hidden;
+                            display: block;
+                            font-size: 14PX;
+                        }
+                        span:nth-child(2) {
+                            width: 30%;
+                            height: 28PX;
+                            text-align: right;
+                            display: block;
+                            font-size: 12PX;
+                        }
+                    }
+                }
+            }
+            //常规类型
+            .index—layer-3-news-box {
+                width: 31%;
+                height: auto;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                .index—layer-3-news-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        list-style-position: inside;
+                        font-size: 13PX;
+                        color: #333;
+                        display: flex;
+                        align-items: center;
+                        justify-items: center;
+                        span:nth-child(1) {
+                            width: 70%;
+                            height: 28PX;
+                            text-align: left;
+                            overflow: hidden;
+                            display: block;
+                            font-size: 14PX;
+                        }
+                        span:nth-child(2) {
+                            width: 30%;
+                            height: 28PX;
+                            text-align: right;
+                            display: block;
+                            font-size: 12PX;
+                        }
+                    }
+                }
+            }
+        }
+        .index—layer-3-news-body-title {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin: 20PX 0 14PX;
+            padding-bottom: 20PX;
+            border-bottom: 1PX dashed #e1e1e1;
+            >div {
+                &.news-body-left {
+                    margin-right: 11PX;
+                    img{
+                        display: block;
+                        width: 120PX;
+                        height: 86PX;
+                    }
+                }
+                &.news-body-right {
+                    >a {
+                        display: block;
+                        width: 100%;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                        font-weight: bold;
+                        overflow: hidden;
+                        color: #000;
+                        text-decoration: none;
+                    }
+                    p{
+                        width: 100%;
+                        height: 46PX;
+                        line-height: 23PX;
+                        overflow: hidden;
+                        font-size: 14PX;
+                        color: #333;
+                        a{
+                            color: #333;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    //第三层 end---------------------------------------->
+
+    //第四层 start---------------------------------------->
+    .index-layer-4 {
+        width: 1400PX;
+        border: 1PX solid #ccc;
+        border-radius: 20PX;
+        padding: 10PX 20PX;
+        box-sizing: border-box;
+        margin: 20PX auto;
+        .index-layer-4-title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            border-bottom: 1PX solid #ccc;
+            a{
+                &:first-child {
+                    font-size: 22PX;
+                    color: #1476bd;
+                }
+                &:last-child {
+                    font-size: 16PX;
+                    color: #f00;
+                    border: none;
+                    float: right;
+                }
+                display: block;
+            }
+        }
+        .index-layer-4-body {
+            .post_nr {
+                width: 100%;
+                height: auto;
+                margin: 20PX auto;
+                border: 1PX solid #ccc;
+                border-radius: 10PX;
+                padding: 20PX !important;
+                box-sizing: border-box;
+                .name {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    color: #333;
+                }
+                b {
+                    font-size: 17PX;
+                    margin: 0 10PX;
+                }
+                li {
+                    border-bottom: 1PX solid #ccc;
+                    padding-bottom: 15PX;
+                    margin-bottom: 10PX;
+                    box-sizing: border-box;
+                    p {
+                        margin: 0;
+                        height: auto;
+                        line-height: 25PX;
+                        font-size: 15PX;
+                        color: #000;
+                        &.hfnr {
+                            font-weight: bold;
+                            span {
+                                color: #f00;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    //第四层 end----------------------------------------> 
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //swiper轮播图 start---------------------------------------->
+    .swiper-container {
+        width: 100%;
+        padding: 20PX 0;
+        position: relative;
+        margin: 0 auto;
+        box-sizing: border-box;
+    }
+    .custom-swiper {
+        width: 100%;
+        height: 100%;
+        padding: 10px 5px;//给两侧留出空间
+        box-sizing: border-box;
+    }
+    .custom-swiper :deep(.swiper-wrapper) {
+        align-items: stretch;//使所有幻灯片高度一致
+    }
+    .custom-swiper :deep(.swiper-slide) {
+        height: auto;
+        transition: transform 0.3s ease;
+    }
+    //悬停效果
+    .custom-swiper :deep(.swiper-slide:hover) {
+        transform: translateY(-5px);
+        z-index: 10;
+    }
+    .slide-link {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+        height: 100%;
+        width: 100%;
+    }
+    .image-container {
+        position: relative;
+        width: 100%;
+        height: 80PX;//根据需求调整
+        overflow: hidden;
+        box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        background: #f5f5f5;//加载时的背景色
+    }
+    .image-container:hover {
+        box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
+    }
+    .slide-image {
+        // width: 100%;
+        // height: 100%;
+        width: 264PX;
+        height: 118PX;
+        object-fit: cover;
+        transition: transform 0.5s ease;
+    }
+    .image-container:hover .slide-image {
+        transform: scale(1.05);
+    }
+    .image-title {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        color: white;
+        padding: 12PX 15PX;
+        font-size: 14PX;
+        line-height: 1.4;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(0, 0, 0, .6)
+    }
+    .custom-indicators {
+        display: flex;
+        justify-content: center;
+        gap: 8PX;
+        margin-top: 25PX;
+        padding: 15PX 10PX;
+        flex-wrap: wrap;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 50PX;
+        max-width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .indicator-btn {
+        width: 36PX;
+        height: 36PX;
+        border-radius: 50%;
+        border: 2PX solid #e0e0e0;
+        background: white;
+        color: #333;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14PX;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
+    }
+    .indicator-btn:hover {
+        background: #f0f9ff;
+        border-color: #409eff;
+        transform: scale(1.1);
+    }
+    .indicator-btn.active-indicator {
+        background: #409eff;
+        color: white;
+        border-color: #409eff;
+        box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
+    }
+    //swiper加载动画
+    .image-container:empty::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        border-radius: 12PX;
+    }
+    @keyframes loading {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+    //swiper箭头颜色
+    .custom-swiper :deep(.swiper-button-prev),
+    .custom-swiper :deep(.swiper-button-next) {
+        color: white !important;//箭头颜色改为白色
+    }
+    .custom-swiper :deep(.swiper-button-prev):after,
+    .custom-swiper :deep(.swiper-button-next):after {
+        color: white !important;//确保箭头图标也是白色
+    }
+    //swiper轮播图 end---------------------------------------->
+    //轮播图 start---------------------------------------->
+    .nuxt-swiper {
+        width: 100%;
+        height: 300PX;
+        position: relative;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+        span {
+            display: inline-block;
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            padding-left: 20PX;
+            box-sizing: border-box;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            font-family: Source Han Sans, Source Han Sans;
+            font-size: 16PX;
+            color: #FFFFFF;
+            //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+            background: rgba(0, 0, 0, .6);
+        }
+    }
+    .el-carousel {
+        // 左右箭头按钮
+        .el-carousel__arrow--right :deep(.class-name),
+        .el-carousel__arrow--left :deep(.class-name) {
+            width: 68PX;
+            height: 68PX;
+        }
+        //左右箭头图片
+        /deep/.el-icon svg {
+            height: 1em;
+            width: 1em;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow {
+            border-radius: 0;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow i {
+            font-size: 68PX !important;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 41%;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 15PX;
+            height: 15PX;
+            border-radius: 50%;
+            border: none;
+            opacity: 1;
+            background-color: #FFFFFF;
+            bottom: 30PX;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #158d91;
+        }
+        /deep/.custom-indicators {
+            position: absolute;
+            bottom: 10PX;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        /deep/ .el-carousel__indicators {
+            right:3%;
+            bottom: 10%;
+        }
+        /deep/ .el-carousel__arrow{
+            top:50%;
+        }
+    }
+    //轮播图 end---------------------------------------->
+    //第一层 start---------------------------------------->
+    .index—layer-1 {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .index—layer-1-left {
+            width: 31%;
+            border: 1PX solid #ccc;
+        }
+        .index-layer-1-middle {
+            width: 31%;
+            border: 1PX solid #ccc;
+            box-sizing: border-box;
+            padding: 0 10PX;
+            padding-bottom: 5PX;
+            .tabtlt {
+                width: 100%;
+                height: auto;
+                outline: hidden;
+                border-bottom: 1PX solid #f0f0f0;
+                margin: 7PX 0 18PX;
+                overflow: hidden;
+                display: flex;
+                align-self: center;
+                justify-content: space-between;
+                a {
+                    color: #337ab7;
+                    text-decoration: none;
+                }
+                div {
+                    width: 50%;
+                    text-align: center;
+                    width: 100%;
+                    height: 50PX;
+                    line-height: 50PX;
+                    font-size: 20PX;
+                    color: #000;
+                    background: #f3f3f3;
+                    text-align: center;
+                    cursor: pointer;
+                }
+                div.intabtltbg {
+                    background: url(public/index/current.gif) no-repeat center bottom !important;
+                }
+            }
+            .coninfoitem {
+                width: 100%;
+                overflow: hidden;
+                margin: 0PX auto;
+                >div{
+                    &.coninfoitem_img {
+                        height: 86PX;
+                        overflow: hidden;
+                        margin-bottom: 5PX;
+                        display: flex;
+                        align-items: flex-start;
+                    }
+                    h3 {
+                        line-height: 26PX;
+                        a {
+                            font-size: 13PX;
+                            color: #333;
+                            font-weight: bold;
+                            width: 100%;
+                            height: 26PX;
+                            line-height: 26PX;
+                            overflow: hidden;
+                            display: block;
+                        }
+                    }
+                    img {
+                        width: 120PX;
+                        height: 86PX;
+                        float: left;
+                        margin-right: 11PX;
+                    }
+                    p {
+                        line-height: 0;
+                        a {
+                            line-height: 20PX;
+                            color: #333;
+                            font-size: 13PX;
+                            text-indent: 2em;
+                            display: block;
+                        }
+                    }
+                }
+                .coninfoitem_title {
+                    width: 100%;
+                    height: 28PX;
+                    line-height: 28PX;
+                    overflow: hidden;
+                    position: relative;
+                    list-style-position: inside;
+                    color: #000;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    span:nth-child(1) {
+                        width: 70%;
+                        height: 28PX;
+                        text-align: left;
+                        overflow: hidden;
+                        display: block;
+                        font-size: 14PX;
+                    }
+                    span:nth-child(2) {
+                        width: 30%;
+                        height: 28PX;
+                        text-align: right;
+                        display: block;
+                        font-size: 12PX;
+                        color: #666;
+                    }
+                }
+            }
+        }
+        .index-layer-1-right {
+            width: 31%;
+            border: 1PX solid #ccc;
+            box-sizing: border-box;
+            padding: 0 10PX;
+            padding-bottom: 16PX;
+            .imgtlt {
+                width: 100%;
+                height: 43PX;
+                border-bottom: 1PX solid #e7e7e7;
+                a {
+                    display: block;
+                    width: 92PX;
+                    height: 42PX;
+                    line-height: 42PX;
+                    text-align: center;
+                    font-size: 20PX;
+                    color: #333;
+                    border-bottom: 2PX solid #158d91;
+                }
+            }
+            .con_img_list {
+                display: flex;
+                flex-wrap: wrap;
+                a {
+                    width: 48%;
+                    float: left;
+                    overflow: hidden;
+                    height: 100PX;
+                    margin: 20PX auto 0;
+                    display: block;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                    }
+                    .con_img_list_rgba {
+                        position: absolute;
+                        width: 100%;
+                        height: 22PX;
+                        line-height: 21PX;
+                        box-sizing: border-box;
+                        padding: 0PX 10PX;
+                        text-align: center;
+                        bottom: 0PX;
+                        left: 0PX;
+                        color: #fff;
+                        font-size: 16PX;
+                        z-index: 11;
+                        background: rgba(0, 0, 0, .6);
+                        display: block;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
+    }
+    //第一层 end---------------------------------------->
+
+    //第二层 start---------------------------------------->
+    .index—layer-2 {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .index—layer-2-left,.index—layer-2-right {
+            width: 49%;
+            border: 1PX solid #ddd;
+            height: auto;
+            overflow: hidden;
+            .index—layer-2-title {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                background: #fff;
+                >div {
+                    &.active {
+                        background: #158d91;
+                        color: #fff;
+                        a {
+                            color: #fff;
+                        }
+                    }
+                    width: 118PX;
+                    height: 44PX;
+                    line-height: 44PX;
+                    background: #fff;
+                    text-align: center;
+                    color: #808080;
+                    font-size: 16PX;
+                    font-weight: bold;
+                    border-bottom: 2PX solid #158d91;
+                    a {
+                        font-size: 20PX;
+                        color: #808080;
+                    }
+                }
+            }
+            .index-tabs2-top {
+                background: #f8f8f8;
+                padding: 20PX 20PX;
+                box-sizing: border-box;
+                display: flex;
+                border-bottom: 1PX dashed #ddd;
+                >a {
+                    margin-right: 11PX;
+                    img {
+                        display: block;
+                        width: 120PX;
+                        height: 86PX;
+                    }
+                }
+                h3 {
+                    width: 100%;
+                    height: 26PX;
+                    line-height: 26PX;
+                    overflow: hidden;
+                    a {
+                        font-size: 13PX;
+                        color: #333;
+                        font-weight: bold;
+                    }
+                }
+                p{
+                    width: 100%;
+                    height: 60PX;
+                    line-height: 18PX;
+                    overflow: hidden;
+                    a {
+                        color: #333;
+                        font-size: 13PX;
+                    }
+                }
+                
+            }
+            .index-tabs2-bottom {
+                padding: 20PX;
+                margin: 0;
+                a {
+                    display: block;
+                    width: 100%;
+                    height: 28PX;
+                    line-height: 28PX;
+                    color: #333;
+                    font-size: 13PX;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    span:nth-child(1) {
+                        width: 70%;
+                        height: 28PX;
+                        text-align: left;
+                        overflow: hidden;
+                        display: block;
+                        font-size: 14PX;
+                    }
+                    span:nth-child(2) {
+                        width: 30%;
+                        height: 28PX;
+                        text-align: right;
+                        display: block;
+                        font-size: 12PX;
+                    }
+                }
+            }
+        }
+        
+    }
+    //第二层 end---------------------------------------->
+
+    //第三层 start---------------------------------------->
+    .index—layer-3 {
+        .index—layer-3-line {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0 auto;
+            box-sizing: border-box;
+            //选项卡类型
+            .index—layer-3-tabs-box {
+                width: 31%;
+                height: auto;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                .index—layer-3-tabs-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        list-style-position: inside;
+                        font-size: 13PX;
+                        color: #333;
+                        display: block;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        width: 66%;
+                    }
+                }
+            }
+            //常规类型
+            .index—layer-3-news-box {
+                width: 31%;
+                height: auto;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                .index—layer-3-news-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        list-style-position: inside;
+                        font-size: 13PX;
+                        color: #333;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        span:nth-child(1) {
+                            width: 70%;
+                            height: 28PX;
+                            text-align: left;
+                            overflow: hidden;
+                            display: block;
+                            font-size: 14PX;
+                        }
+                        span:nth-child(2) {
+                            width: 30%;
+                            height: 28PX;
+                            text-align: right;
+                            display: block;
+                            font-size: 12PX;
+                        }
+                    }
+                }
+            }
+        }
+        .index—layer-3-news-body-title {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin: 20PX 0 14PX;
+            padding-bottom: 20PX;
+            border-bottom: 1PX dashed #e1e1e1;
+            >div {
+                &.news-body-left {
+                    margin-right: 11PX;
+                    img{
+                        display: block;
+                        width: 120PX;
+                        height: 86PX;
+                    }
+                }
+                &.news-body-right {
+                    >a {
+                        display: block;
+                        width: 100%;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                        font-weight: bold;
+                        overflow: hidden;
+                        color: #000;
+                        text-decoration: none;
+                    }
+                    p{
+                        width: 100%;
+                        height: 46PX;
+                        line-height: 23PX;
+                        overflow: hidden;
+                        font-size: 14PX;
+                        color: #333;
+                        a{
+                            color: #333;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    //第三层 end---------------------------------------->
+
+    //第四层 start---------------------------------------->
+    .index-layer-4 {
+        width: 100%;
+        border: 1PX solid #ccc;
+        border-radius: 20PX;
+        padding: 10PX 20PX;
+        box-sizing: border-box;
+        margin: 20PX auto;
+        .index-layer-4-title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            border-bottom: 1PX solid #ccc;
+            a{
+                &:first-child {
+                    font-size: 22PX;
+                    color: #1476bd;
+                }
+                &:last-child {
+                    font-size: 16PX;
+                    color: #f00;
+                    border: none;
+                    float: right;
+                }
+                display: block;
+            }
+        }
+        .index-layer-4-body {
+            .post_nr {
+                width: 100%;
+                height: auto;
+                margin: 20PX auto;
+                border: 1PX solid #ccc;
+                border-radius: 10PX;
+                padding: 20PX !important;
+                box-sizing: border-box;
+                .name {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    color: #333;
+                }
+                b {
+                    font-size: 17PX;
+                    margin: 0 10PX;
+                }
+                li {
+                    border-bottom: 1PX solid #ccc;
+                    padding-bottom: 15PX;
+                    margin-bottom: 10PX;
+                    box-sizing: border-box;
+                    p {
+                        margin: 0;
+                        height: auto;
+                        line-height: 25PX;
+                        font-size: 15PX;
+                        color: #000;
+                        &.hfnr {
+                            font-weight: bold;
+                            span {
+                                color: #f00;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    //第四层 end---------------------------------------->    
+}
+@media screen and (max-width: 800px) {
+    //swiper轮播图 start---------------------------------------->
+    .swiper-container {
+        width: 100%;
+        padding: 20px 0;
+        position: relative;
+        max-width: 1400PX;
+        margin: 0 auto;
+        display: none;
+    }
+    .custom-swiper {
+        width: 100%;
+        height: 100%;
+        padding: 10PX 5PX;//给两侧留出空间
+    }
+    .custom-swiper :deep(.swiper-wrapper) {
+        align-items: stretch;//使所有幻灯片高度一致
+    }
+    .custom-swiper :deep(.swiper-slide) {
+        height: auto;
+        transition: transform 0.3s ease;
+    }
+    //悬停效果
+    .custom-swiper :deep(.swiper-slide:hover) {
+        transform: translateY(-5px);
+        z-index: 10;
+    }
+    .slide-link {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+        height: 100%;
+        width: 100%;
+    }
+    .image-container {
+        position: relative;
+        width: 100%;
+        height: 118PX;//根据需求调整
+        overflow: hidden;
+        box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        background: #f5f5f5;//加载时的背景色
+    }
+    .image-container:hover {
+        box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
+    }
+    .slide-image {
+        // width: 100%;
+        // height: 100%;
+        width: 264PX;
+        height: 118PX;
+        object-fit: cover;
+        transition: transform 0.5s ease;
+    }
+    .image-container:hover .slide-image {
+        transform: scale(1.05);
+    }
+    .image-title {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        color: white;
+        padding: 12PX 15PX;
+        font-size: 14PX;
+        line-height: 1.4;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(0, 0, 0, .6)
+    }
+    .custom-indicators {
+        display: flex;
+        justify-content: center;
+        gap: 8PX;
+        margin-top: 25PX;
+        padding: 15PX 10PX;
+        flex-wrap: wrap;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 50PX;
+        max-width: 90%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .indicator-btn {
+        width: 36PX;
+        height: 36PX;
+        border-radius: 50%;
+        border: 2PX solid #e0e0e0;
+        background: white;
+        color: #333;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14PX;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
+    }
+    .indicator-btn:hover {
+        background: #f0f9ff;
+        border-color: #409eff;
+        transform: scale(1.1);
+    }
+    .indicator-btn.active-indicator {
+        background: #409eff;
+        color: white;
+        border-color: #409eff;
+        box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
+    }
+    //swiper加载动画
+    .image-container:empty::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        border-radius: 12PX;
+    }
+    @keyframes loading {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+    //swiper箭头颜色
+    .custom-swiper :deep(.swiper-button-prev),
+    .custom-swiper :deep(.swiper-button-next) {
+        color: white !important;//箭头颜色改为白色
+    }
+    .custom-swiper :deep(.swiper-button-prev):after,
+    .custom-swiper :deep(.swiper-button-next):after {
+        color: white !important;//确保箭头图标也是白色
+    }
+    //swiper轮播图 end---------------------------------------->
+    //轮播图 start---------------------------------------->
+    .nuxt-swiper {
+        width: 100%;
+        height: 220PX;
+        position: relative;
+        img {
+            width: 100%;
+            height: 300PX;
+        }
+        span {
+            display: inline-block;
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            padding-left: 20PX;
+            box-sizing: border-box;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            font-family: Source Han Sans, Source Han Sans;
+            font-size: 16PX;
+            color: #FFFFFF;
+            //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+            background: rgba(0, 0, 0, .6);
+        }
+    }
+    .el-carousel {
+        // 左右箭头按钮
+        .el-carousel__arrow--right :deep(.class-name),
+        .el-carousel__arrow--left :deep(.class-name) {
+            width: 68PX;
+            height: 68PX;
+        }
+        //左右箭头图片
+        /deep/.el-icon svg {
+            height: 1em;
+            width: 1em;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow {
+            border-radius: 0;
+            background-color: transparent;
+        }
+        /deep/.el-carousel__arrow i {
+            font-size: 68PX !important;
+        }
+        /deep/ .el-carousel__indicators {
+            // 指示器
+            left: unset;
+            transform: unset;
+            right: 41%;
+        }
+        /deep/ .el-carousel__button {
+            // 指示器按钮
+            width: 15PX;
+            height: 15PX;
+            border-radius: 50%;
+            border: none;
+            opacity: 1;
+            background-color: #FFFFFF;
+            bottom: 30PX;
+        }
+        /deep/ .is-active .el-carousel__button {
+            // 指示器激活按钮
+            background: #158d91;
+        }
+        /deep/.custom-indicators {
+            position: absolute;
+            bottom: 10PX;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        /deep/ .el-carousel__indicators {
+            right:3%;
+            bottom: 10%;
+        }
+        /deep/ .el-carousel__arrow{
+            top:50%;
+        }
+        /deep/ .el-carousel__container {
+            height: 220PX;
+        }
+    }
+    //轮播图 end---------------------------------------->
+    //第一层 start---------------------------------------->
+    .index—layer-1 {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        padding: 0 10PX;
+        .index—layer-1-left {
+            width: 100%;
+            margin: 10PX 0;
+            border: 1PX solid #ccc;
+        }
+        .index-layer-1-middle {
+            width: 100%;
+            border: 1PX solid #ccc;
+            box-sizing: border-box;
+            padding: 0 10PX;
+            padding-bottom: 5PX;
+            margin: 10PX 0;
+            .tabtlt {
+                width: 100%;
+                height: auto;
+                outline: hidden;
+                border-bottom: 1PX solid #f0f0f0;
+                margin: 7PX 0 18PX;
+                overflow: hidden;
+                display: flex;
+                align-self: center;
+                justify-content: space-between;
+                a {
+                    color: #337ab7;
+                    text-decoration: none;
+                }
+                div {
+                    width: 50%;
+                    text-align: center;
+                    width: 100%;
+                    height: 50PX;
+                    line-height: 50PX;
+                    font-size: 20PX;
+                    color: #000;
+                    background: #f3f3f3;
+                    text-align: center;
+                    cursor: pointer;
+                }
+                div.intabtltbg {
+                    background: url(public/index/current.gif) no-repeat center bottom !important;
+                }
+            }
+            .coninfoitem {
+                width: 100%;
+                overflow: hidden;
+                margin: 0px auto;
+                >div{
+                    &.coninfoitem_img {
+                        height: 120PX;
+                        overflow: hidden;
+                        margin-bottom: 5PX;
+                        display: flex;
+                        align-items: flex-start;
+                        justify-content: space-between;
+                    }
+                    h3 {
+                        line-height: 0;
+                        a {
+                            font-size: 30px;
+                            color: #333;
+                            font-weight: bold;
+                            width: 100%;
+                            height: 26PX;
+                            line-height: 26PX;
+                            overflow: hidden;
+                            display: block;
+                        }
+                    }
+                    img {
+                        width: 130PX;
+                        height: 120PX;
+                        float: left;
+                        margin-right: 11PX;
+                    }
+                    p {
+                        line-height: 0;
+                        a {
+                            color: #333;
+                            font-size: 30px;
+                            line-height: 30PX;
+                            display: block;
+                            text-indent: 2em;
+                        }
+                    }
+                }
+                .coninfoitem_title {
+                    width: 100%;
+                    height: 70px;
+                    line-height: 70px;
+                    color: #333;
+                    display: block;
+                    font-weight: normal;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    span:nth-child(1){
+                        width: 70%;
+                        height: 50px;
+                        text-align: left;
+                        overflow: hidden;
+                        display: block;
+                        font-size: 28px;
+                    }
+                    span:nth-child(2){
+                        width: 30%;
+                        height: 50px;
+                        text-align: right;
+                        display: block;
+                        font-size: 24px;
+                        color:#666;
+                    }
+                }
+            }
+        }
+        .index-layer-1-right {
+            width: 100%;
+            border: 1PX solid #ccc;
+            box-sizing: border-box;
+            padding-bottom: 16PX;
+            padding: 10PX;
+            .imgtlt {
+                width: 100%;
+                height: 43PX;
+                border-bottom: 1PX solid #e7e7e7;
+                a {
+                    display: block;
+                    width: 92PX;
+                    height: 42PX;
+                    line-height: 42PX;
+                    text-align: center;
+                    font-size: 20PX;
+                    color: #333;
+                    border-bottom: 2PX solid #158d91;
+                }
             }
-            &:last-child {
-                font-size: 16px;
-                color: #f00;
-                border: none;
-                float: right;
+            .con_img_list {
+                display: flex;
+                flex-wrap: wrap;
+                a {
+                    width: 48%;
+                    float: left;
+                    overflow: hidden;
+                    height: 100PX;
+                    margin: 20PX auto 0;
+                    display: block;
+                    position: relative;
+                    img {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                    }
+                    .con_img_list_rgba {
+                        position: absolute;
+                        width: 100%;
+                        height: 22PX;
+                        line-height: 21PX;
+                        box-sizing: border-box;
+                        padding: 0 10PX;
+                        text-align: center;
+                        bottom: 0PX;
+                        left: 0PX;
+                        color: #fff;
+                        font-size: 16PX;
+                        z-index: 11;
+                        background: rgba(0, 0, 0, .6);
+                        display: block;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
             }
-            display: block;
         }
     }
-    .index-layer-4-body {
-        .post_nr {
+    //第一层 end---------------------------------------->
+
+    //第二层 start---------------------------------------->
+    .index—layer-2 {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        margin: 20PX auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 0 10PX;
+        box-sizing: border-box;
+        .index—layer-2-left,.index—layer-2-right {
             width: 100%;
+            border: 1PX solid #ddd;
             height: auto;
-            margin: 20px auto;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            padding: 20px !important;
+            overflow: hidden;
+            margin: 10PX 0;
+            .index—layer-2-title {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                background: #fff;
+                >div {
+                    &.active {
+                        background: #158d91;
+                        color: #fff;
+                        a {
+                            color: #fff;
+                        }
+                    }
+                    width: 118PX;
+                    height: 44PX;
+                    line-height: 44PX;
+                    background: #fff;
+                    text-align: center;
+                    color: #808080;
+                    font-size: 16PX;
+                    font-weight: bold;
+                    border-bottom: 2PX solid #158d91;
+                    a {
+                        font-size: 20PX;
+                        color: #808080;
+                    }
+                }
+            }
+            .index-tabs2-top {
+                background: #f8f8f8;
+                padding: 20PX 20PX;
+                box-sizing: border-box;
+                display: flex;
+                border-bottom: 1PX dashed #ddd;
+                >a {
+                    margin-right: 11PX;
+                    img {
+                        display: block;
+                        width: 130PX;
+                        height: 120PX;
+                    }
+                }
+                h3 {
+                    width: 100%;
+                    height: 40PX;
+                    line-height: 40PX;
+                    line-height:0;
+                    overflow: hidden;
+                    a {
+                        display: block;
+                        width: 100%;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                        font-weight: bold;
+                        overflow: hidden;
+                        color: #000;
+                        text-decoration: none;
+                    }
+                }
+                p{
+                    width: 100%;
+                    height: 60PX;
+                    line-height: 20PX;
+                    overflow: hidden;
+                    a {
+                        color: #333;
+                        font-size: 13PX;
+                    }
+                }
+                
+            }
+            .index-tabs2-bottom {
+                padding: 20PX;
+                margin: 0;
+                box-sizing: border-box;
+                a {
+                    display: block;
+                    width: 100%;
+                    height: 28PX;
+                    line-height: 28PX;
+                    overflow: hidden;
+                    position: relative;
+                    list-style-position: inside;
+                    color: #333;
+                    font-size: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    span:nth-child(1) {
+                        width: 70%;
+                        height: 50px;
+                        text-align: left;
+                        overflow: hidden;
+                        display: block;
+                        font-size: 28px;
+                    }
+                    span:nth-child(2) {
+                        width: 30%;
+                        height: 50px;
+                        text-align: right;
+                        display: block;
+                        font-size: 24px;
+                        color:#666;
+                    }
+                }
+            }
+        }
+        
+    }
+    //第二层 end---------------------------------------->
+
+    //第三层 start---------------------------------------->
+    .index—layer-3 {
+        .index—layer-3-line {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0 auto;
             box-sizing: border-box;
-            .name {
-                display: block;
+            flex-wrap: wrap;
+            padding: 0 10PX;
+            //选项卡类型
+            .index—layer-3-tabs-box {
+                width: 100%;
+                height: auto;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                margin: 10PX 0;
+                .index—layer-3-tabs-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        font-size: 13PX;
+                        color: #333;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        span:nth-child(1) {
+                            width: 70%;
+                            height: 50px;
+                            text-align: left;
+                            overflow: hidden;
+                            display: block;
+                            font-size: 28px;
+                        }
+                        span:nth-child(2) {
+                            width: 30%;
+                            height: 50px;
+                            text-align: right;
+                            display: block;
+                            font-size: 24px;
+                            color:#666;
+                        }
+                    }
+                }
+            }
+            //常规类型
+            .index—layer-3-news-box {
                 width: 100%;
                 height: auto;
-                line-height: 40px;
-                font-size: 16px;
-                color: #333;
+                border: 1PX solid #ddd;
+                border-top: 2PX solid #158d91;
+                margin: 1%;
+                padding: 0 10PX;
+                box-sizing: border-box;
+                margin: 10PX 0;
+                .index—layer-3-news-box-title {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    border-bottom: 1PX solid #f0f0f0;
+                    >div {
+                        &.active {
+                            background: url(../public/index/current2.png) no-repeat center bottom;
+                        }
+                        width: 87PX;
+                        height: 54PX;
+                        line-height: 55PX;
+                        overflow: hidden;
+                        float: left;
+                        margin-right: 10PX;
+                        text-align: center;
+                        font-size: 20PX;
+                        color: #333;
+                        font-weight: bold;
+                        a {
+                            color: #333;
+                        }
+                    }
+                }
+                .index—layer-3-news-body-main {
+                    margin-bottom: 20PX;
+                    a {
+                        width: 100%;
+                        height: 26PX;
+                        line-height: 26PX;
+                        font-size: 13PX;
+                        color: #333;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        span:nth-child(1) {
+                            width: 70%;
+                            height: 50px;
+                            text-align: left;
+                            overflow: hidden;
+                            display: block;
+                            font-size: 28px;
+                        }
+                        span:nth-child(2) {
+                            width: 30%;
+                            height: 50px;
+                            text-align: right;
+                            display: block;
+                            font-size: 24px;
+                            color:#666;
+                        }
+                    }
+                }
+            }
+        }
+        .index—layer-3-news-body-title {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            margin: 20PX 0 14PX;
+            padding-bottom: 20PX;
+            border-bottom: 1PX dashed #e1e1e1;
+            >div {
+                &.news-body-left {
+                    margin-right: 11PX;
+                    img{
+                        display: block;
+                        width: 120PX;
+                        height: 86PX;
+                    }
+                }
+                &.news-body-right {
+                    >a {
+                        display: block;
+                        width: 100%;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                        font-weight: bold;
+                        overflow: hidden;
+                        color: #000;
+                        text-decoration: none;
+                    }
+                    p{
+                        width: 100%;
+                        height: 46PX;
+                        line-height: 23PX;
+                        overflow: hidden;
+                        font-size: 14PX;
+                        color: #333;
+                        a{
+                            color: #333;
+                        }
+                    }
+                }
             }
-            b {
-                font-size: 17px;
-                margin: 0 10px;
+        }
+    }
+    //第三层 end---------------------------------------->
+
+    //第四层 start---------------------------------------->
+    .index-layer-4 {
+        width: 100%;
+        border: 1PX solid #ccc;
+        border-radius: 20PX;
+        padding: 10PX 20PX;
+        box-sizing: border-box;
+        display: none;
+        .index-layer-4-title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            border-bottom: 1PX solid #ccc;
+            a{
+                &:first-child {
+                    font-size: 22PX;
+                    color: #1476bd;
+                }
+                &:last-child {
+                    font-size: 16PX;
+                    color: #f00;
+                    border: none;
+                    float: right;
+                }
+                display: block;
             }
-            li {
-                border-bottom: 1px solid #ccc;
-                padding-bottom: 15px;
-                margin-bottom: 10px;
+        }
+        .index-layer-4-body {
+            .post_nr {
+                width: 100%;
+                height: auto;
+                margin: 20PX auto;
+                border: 1PX solid #ccc;
+                border-radius: 10PX;
+                padding: 20PX !important;
                 box-sizing: border-box;
-                p {
-                    margin: 0;
+                .name {
+                    display: block;
+                    width: 100%;
                     height: auto;
-                    line-height: 25px;
-                    font-size: 15px;
-                    color: #000;
-                    &.hfnr {
-                        font-weight: bold;
-                        span {
-                            color: #f00;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    color: #333;
+                }
+                b {
+                    font-size: 17PX;
+                    margin: 0 10PX;
+                }
+                li {
+                    border-bottom: 1PX solid #ccc;
+                    padding-bottom: 15PX;
+                    margin-bottom: 10PX;
+                    box-sizing: border-box;
+                    p {
+                        margin: 0;
+                        height: auto;
+                        line-height: 25PX;
+                        font-size: 15PX;
+                        color: #000;
+                        &.hfnr {
+                            font-weight: bold;
+                            span {
+                                color: #f00;
+                            }
                         }
                     }
                 }
             }
         }
     }
+    //第四层 end----------------------------------------> 
 }
-//第四层 end---------------------------------------->
 </style>

pages/list-[dir].html.vue

@@ -0,0 +1,22 @@
+<template>
+    <!--人员查询-->
+    <zoomRenyuanchaxun v-if="pageName == 'renyuanchaxun'"></zoomRenyuanchaxun>
+    <!--车辆查询-->
+    <zoomCheliangchaxun v-if="pageName == 'cheliangchaxun'"></zoomCheliangchaxun>
+    <!--地市中心-->
+    <zoomDishizhongxin v-if="pageName == 'dishizhongxin'"></zoomDishizhongxin>
+    <!--调研选题-->
+    <zoomDiaoyanxuanti v-if="pageName == 'diaoyanxuanti'"></zoomDiaoyanxuanti>
+    <!--介绍信查询-->
+    <zoomJieshaoxinchaxun v-if="pageName == 'jieshaoxinchaxun'"></zoomJieshaoxinchaxun>
+</template>
+
+<script setup>
+const route = useRoute();
+const pageName = route.params.dir;
+</script>
+
+<style lang="less" scoped>
+    
+</style>
+

plugins/flexible.client.js

@@ -0,0 +1,144 @@
+// plugins/smart-flexible.client.js
+
+class ResponsiveAdapter {
+    constructor() {
+      this.isMobile = this.checkMobile()
+      this.init()
+    }
+    
+    checkMobile() {
+      const ua = navigator.userAgent.toLowerCase()
+      const mobileKeywords = [
+        'iphone', 'ipod', 'android.*mobile',
+        'windows.*phone', 'blackberry.*mobile',
+        'mobile', 'tablet'
+      ]
+      
+      const isMobileUA = mobileKeywords.some(keyword => 
+        new RegExp(keyword).test(ua)
+      )
+      
+      const screenWidth = window.innerWidth
+      const isSmallScreen = screenWidth <= 768
+      
+      return isMobileUA || isSmallScreen
+    }
+    
+    init() {
+      const docEl = document.documentElement
+      
+      if (this.isMobile) {
+        // 移动端逻辑
+        this.initMobile(docEl)
+      } else {
+        // PC 端逻辑
+        this.initPC(docEl)
+      }
+      
+      // 添加设备标识类
+      this.addDeviceClass(docEl)
+      
+      // 监听窗口变化
+      window.addEventListener('resize', () => {
+        this.handleResize(docEl)
+      })
+    }
+    
+    initMobile(docEl) {
+      const dpr = window.devicePixelRatio || 1
+      
+      // 设置 viewport meta
+      this.setViewport(dpr)
+      
+      // 设置 rem
+      const setRem = () => {
+        const rem = docEl.clientWidth / 10
+        docEl.style.fontSize = rem + 'px'
+      }
+      
+      setRem()
+      window.addEventListener('resize', setRem)
+      
+      // 存储方法供外部调用
+      this.setRem = setRem
+    }
+    
+    initPC(docEl) {
+      // PC 端使用响应式 rem
+      const setPCRem = () => {
+        const width = docEl.clientWidth
+        
+        // 响应式断点
+        let fontSize
+        if (width >= 1920) {
+          fontSize = 192 // 1920/10
+        } else if (width >= 1600) {
+          fontSize = 160 // 1600/10
+        } else if (width >= 1440) {
+          fontSize = 144 // 1440/10
+        } else if (width >= 1366) {
+          fontSize = 136.6 // 1366/10
+        } else if (width >= 1200) {
+          fontSize = 120 // 1200/10
+        } else {
+          fontSize = 100 // 小于1200时的基准
+        }
+        
+        docEl.style.fontSize = fontSize + 'px'
+      }
+      
+      setPCRem()
+      window.addEventListener('resize', setPCRem)
+      
+      this.setPCRem = setPCRem
+    }
+    
+    setViewport(dpr) {
+      let viewport = document.querySelector('meta[name="viewport"]')
+      if (!viewport) {
+        viewport = document.createElement('meta')
+        viewport.name = 'viewport'
+        document.head.appendChild(viewport)
+      }
+      
+      if (this.isMobile) {
+        viewport.content = `width=device-width, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}, user-scalable=no`
+      } else {
+        viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
+      }
+    }
+    
+    addDeviceClass(docEl) {
+      docEl.classList.remove('is-pc', 'is-mobile')
+      docEl.classList.add(this.isMobile ? 'is-mobile' : 'is-pc')
+    }
+    
+    handleResize(docEl) {
+      const wasMobile = this.isMobile
+      this.isMobile = this.checkMobile()
+      
+      if (wasMobile !== this.isMobile) {
+        // 设备类型发生变化
+        this.addDeviceClass(docEl)
+        if (this.isMobile) {
+          this.initMobile(docEl)
+        } else {
+          this.initPC(docEl)
+        }
+      } else {
+        // 同设备类型，只更新 rem
+        if (this.isMobile && this.setRem) {
+          this.setRem()
+        } else if (!this.isMobile && this.setPCRem) {
+          this.setPCRem()
+        }
+      }
+    }
+  }
+  
+  // 初始化
+  export default defineNuxtPlugin(() => {
+    if (process.client) {
+      new ResponsiveAdapter()
+    }
+  })