fzfzcj-2026-1-16

assets/css/global.css

@@ -24,7 +24,7 @@ body {
     font-size: 14px;
     font-family: PingFang SC, PingFang SC;
     background: url("../../public/header/banner.jpg") no-repeat center top;
-    background-size: auto 500PX;
+     
 }
 
 @media screen and (max-width: 800px) {

components/detail/HotNews2.vue

@@ -1,11 +1,21 @@
 <template>
-    <div class="title">
-        <h4>
-            热点精选
-        </h4>
+    <div class="contlt">
+        <a class="">热门文章</a>
     </div>
+    <ul class="right_con_list">
+        <template v-for="(item, per_index) in hotNewsList">
+            <NuxtLink to="item.linkurl" v-if="item.islink == 1" :title="item.title">
+                {{ item.title }}
+            </NuxtLink>
+        </template>
+        <template v-for="(item, per_index) in hotNewsList">
+            <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" v-if="item.islink == 0" :title="item.title">
+                {{ item.title }}
+            </NuxtLink>
+        </template>
+    </ul>
     <!-- 列表 -->
-    <ul class="rightList">
+    <!-- <ul class="rightList">
         <li v-for="item in hotNewsList">
             <NuxtLink :to="item.linkurl" v-if="item.islink == 1" :title="item.title">
                 {{ item.title }}
@@ -14,7 +24,7 @@
                 {{ item.title }}
             </NuxtLink>
         </li>
-    </ul>
+    </ul> -->
 </template>
 <script setup>
 const hotNewsList = ref([])
@@ -115,6 +125,51 @@ getPageData();
 .rightList>li {
     background-position-y: center;
 }
+.contlt {
+    width: 100%;
+    height: 40PX;
+    overflow: hidden;
+    border-bottom: solid 2PX #b41c2a;
+    margin-bottom: 10PX;
+}
+.contlt a {
+    display: block;
+    width: 107PX;
+    height: 40PX;
+    line-height: 40PX;
+    background: #b41c2a;
+    text-align: center;
+    color: #fff;
+    font-size: 20PX;
+    font-weight: bold;
+    border-top-left-radius: 10PX;
+    border-top-right-radius: 10PX;
+}
+.right_con_list {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    display: block;
+}
+.right_con_list a {
+    width: 100%;
+    height: 45PX;
+    line-height: 45PX;
+    border-bottom: solid 1PX #ccc;
+    font-size: 16PX;
+    color: #333;
+    background: url(public/index/index_42.png) no-repeat left center;
+    background-size: auto 14PX;
+    text-indent: 22PX;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.right_con_list a:nth-of-type(-n+3) {
+    background-image: url(public/index/index_31.png);
+}
 @media screen and (min-width: 1401px) {
     //你的样式
 }
@@ -123,6 +178,38 @@ getPageData();
     //你的样式
 }
 @media screen and (max-width: 800px) {
-    //你的样式
+    .right_con_list {
+        overflow: hidden;
+    }
+    .right_con_list a {
+        width: 49%;
+    }
+    .right_con_list a:nth-of-type(odd) {
+        float: left;
+    }
+    .right_con_list a:nth-of-type(even) {
+        float: right;
+    }
+    .right_con_list a {
+        height: 55px;
+        line-height: 55px;
+        font-size: 24px;
+        background-size: auto 14px;
+        text-indent: 22px;
+    }
+    .contlt {
+        height: 40px;
+        margin-bottom: 10px;
+    }
+    .contlt a {
+        width: auto;
+        height: 55px;
+        line-height: 50px;
+        float: left;
+        padding: 0px 6px;
+        font-size: 26px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+    }
 }
 </style>

components/home/foot.vue

@@ -1,22 +1,34 @@
 <template>
-    <footer class="index_foot">
-        <div class="foot_title">
-            <div class="foot_title_text">友情链接</div>
-        </div>
-        <div class="foot_img_box">
-            <a :href="item.url" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
-                <!-- <img :src="item.logo_url" :alt="item.title"> -->
-                <img src="public/index/link.jpg" :alt="item.title">
-            </a>
-        </div>
-        <div class="foot_frind_box">
-            <div>
-                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" :title="item.title"
-                    target="_blank">{{ item.title }}</a>
+    <div class="">
+        <footer class="index_foot">
+            <div class="foot_title">
+                <NuxtLink to="/">友情链接</NuxtLink>
             </div>
-        </div>
+            <div class="foot_img_box" id="main_js_2">
+                <div class="foot_img_box_long" id="demo_js_2">
+                    <div class="foot_img_box_in" id="demo1_js_2">
+                        <NuxtLink to="/" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
+                            <img src="public/index/link.jpg" :alt="item.title">
+                        </NuxtLink>
+                    </div>
+                    <div class="foot_img_box_in" id="demo2_js_2">
+                    </div>
+                </div>
+            </div>
+            <div class="phone_foot_img_box">
+                <NuxtLink to="/" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
+                    <img src="public/index/link.jpg" :alt="item.title">
+                </NuxtLink>
+            </div>
+            <div class="foot_frind_box" style="display:none;">
+                <div>
+                    <a :href="item.url" v-for="(item, index) in bottomText" :key="index" :title="item.title"
+                        target="_blank">{{ item.title }}</a>
+                </div>
+            </div>
+        </footer>
         <div class="call_us_box">
-            <span v-for="(item, index) in bottomMenu" :key="index">
+            <template v-for="(item, index) in bottomMenu" :key="index">
                 <NuxtLink :to="{ path: `/about/${item.name_pinyin}/list-1.html` }" v-if="item.type == 1"
                     :title="item.name">
                     {{ item.name }}
@@ -25,104 +37,105 @@
                     :title="item.name">
                     {{ item.name }}
                 </NuxtLink>
-            </span>
+            </template>
         </div>
-        <div class="foot_text_box" v-if="bottomBase">
-            <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 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_last_img_box">
-            <a :href="item.url" v-for="(item, index) in bottomphoto" :title="item.title">
-                <!-- <img :src="item.logo_url" :alt="item.title"> -->
-                <img src="public/index/link2.png" :alt="item.title">
-            </a>
-        </div>
-        <div class="kefu">
-            <div class="kefu_itemKf">
-                <a href="http://kf.znxyw.org.cn/?m=front&a=chat&key=ii08zncpb5" target="_blank">
-                    <img src="public/index/kefu.png">
-                    <p>在线客服</p>
+        <footer class="index_foot">
+            <div class="foot_text_box" v-if="bottomBase">
+                <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 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_last_img_box">
+                <a :href="item.url" v-for="(item, index) in bottomphoto" :title="item.title">
+                    <!-- <img :src="item.logo_url" :alt="item.title"> -->
+                    <img src="public/index/link2.png" :alt="item.title">
                 </a>
             </div>
-        </div>
-        <!--右侧悬浮-->
-        <div class="foot_right_float">
-            <NuxtLink target="_blank" href="http://fazhidy.org.cn">政讯通•全国法制调研中心</NuxtLink>
-            <NuxtLink target="_blank" href="http://fazyqjczx.org.cn">政讯通•全国法制舆情监测中心</NuxtLink>
-            <NuxtLink target="_blank" href="http://fzfzcj.org.cn">政讯通•全国法制发展促进中心 </NuxtLink>
-        </div>
-        <!--你问我答-->
-        <div :class="wenda ? 'wenda wenda_style' : 'wenda'">
-            <div class="wenda_tlt">
-                <h3><a href="/">你问我答</a></h3>
-                <span @click="toggleWenda"></span>
+            <div class="kefu">
+                <div class="kefu_itemKf">
+                    <a href="http://kf.znxyw.org.cn/?m=front&a=chat&key=ii08zncpb5" target="_blank">
+                        <img src="public/index/kefu.png">
+                        <p>在线客服</p>
+                    </a>
+                </div>
             </div>
-            <ul class="wenda_view">
-                <li>
-                    <div>
-                        <span class="new_wen">问</span>
-                        <a class="wenda_view_text" href="#">政讯通•全国法制项目官网有几个，承担的职能是什么</a>
-                    </div>
-                    <div>
-                        <span class="new_da">答</span>
-                        <b>
-                            4个官网，分别是：
-                            政讯通•全国法制资讯发布中心官网，提供资讯信息化服务，以资讯发布为主；
-                            政讯通•全国法制调研中心官网，承担调研、法律服务等功能；
-                            政讯通•全国法制舆情监测中心官网，承担舆情监测、处理、公关等功能；
-                            政讯通•全国法制发展促进中心官网，承担行业发展促进、服务功能。
-                        </b>
-                    </div>
-                </li>
-                <li>
-                    <div>
-                        <span class="new_wen">问</span>
-                        <a class="wenda_view_text" href="#">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a>
-                    </div>
-                    <div>
-                        <span class="new_da">答</span>
-                        <b>合法中国公民，热爱和关注公益事业；五年内无违法犯罪记录；会电脑基本操作、有过媒体或公检法相关工作经验者均可申请。收取网络平台使用费，法制监督员分全国、省级、地市级三个级，地市级1200元/年，省级2400元/年，全国级4800元/年，配套办公用品费300元。运费到付或者顺付50元。</b>
-                    </div>
-                </li>
-                <li>
-                    <div>
-                        <span class="new_wen">问</span>
-                        <span><a href="/">申请地市中心条件？</a></span>
-                    </div>
-                    <div>
-                        <span class="new_da">答</span>
-                        <b>
-                            （1）从事过公检法相关工作或者媒体/法制工作的公民或法人单位均可申请；（前提条件）
-                            （2）熟悉我国相关政策和调研工作；
-                            （3）遵守国家法律法规，积极为发展做贡献；
-                            （4）遵守内参各项规章制度，严格执行工作纪律；
-                            （5）熟悉基本网络操作，遵守互联网应用规则；
-                        </b>
-                    </div>
-                </li>
-                <li>
-                    <div>
-                        <span class="new_wen">问</span>
-                        <span><a href="/">我想申请法制调研员有什么条件？</a></span>
-                    </div>
-                    <div>
-                        <span class="new_da">答</span>
-                        <b>有意从事法制公益性工作，熟悉国家法律法规、司法政策，五年内无违法犯罪记录；熟悉调研工作，熟悉网络基本操作,年龄在25-65之间的中国公民均可申请，有过执法或者公检法行业相关从业者优先考虑。</b>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </footer>
+            <!--右侧悬浮-->
+            <div class="foot_right_float">
+                <NuxtLink target="_blank" href="http://fazhidy.org.cn">政讯通•全国法制调研中心</NuxtLink>
+                <NuxtLink target="_blank" href="http://fazyqjczx.org.cn">政讯通•全国法制舆情监测中心</NuxtLink>
+                <NuxtLink target="_blank" href="http://fzfzcj.org.cn">政讯通•全国法制发展促进中心 </NuxtLink>
+            </div>
+            <!--你问我答-->
+            <div :class="wenda ? 'wenda wenda_style' : 'wenda'">
+                <div class="wenda_tlt">
+                    <h3><a href="/">你问我答</a></h3>
+                    <span @click="toggleWenda"></span>
+                </div>
+                <ul class="wenda_view">
+                    <li>
+                        <div>
+                            <span class="new_wen">问</span>
+                            <a class="wenda_view_text" href="#">政讯通•全国法制项目官网有几个，承担的职能是什么</a>
+                        </div>
+                        <div>
+                            <span class="new_da">答</span>
+                            <b>
+                                4个官网，分别是：
+                                政讯通•全国法制资讯发布中心官网，提供资讯信息化服务，以资讯发布为主；
+                                政讯通•全国法制调研中心官网，承担调研、法律服务等功能；
+                                政讯通•全国法制舆情监测中心官网，承担舆情监测、处理、公关等功能；
+                                政讯通•全国法制发展促进中心官网，承担行业发展促进、服务功能。
+                            </b>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <span class="new_wen">问</span>
+                            <a class="wenda_view_text" href="#">我在网上看你们有聘兼职法制监督员，我想申请有什么要求？需要费用吗？</a>
+                        </div>
+                        <div>
+                            <span class="new_da">答</span>
+                            <b>合法中国公民，热爱和关注公益事业；五年内无违法犯罪记录；会电脑基本操作、有过媒体或公检法相关工作经验者均可申请。收取网络平台使用费，法制监督员分全国、省级、地市级三个级，地市级1200元/年，省级2400元/年，全国级4800元/年，配套办公用品费300元。运费到付或者顺付50元。</b>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <span class="new_wen">问</span>
+                            <span><a href="/">申请地市中心条件？</a></span>
+                        </div>
+                        <div>
+                            <span class="new_da">答</span>
+                            <b>
+                                （1）从事过公检法相关工作或者媒体/法制工作的公民或法人单位均可申请；（前提条件）
+                                （2）熟悉我国相关政策和调研工作；
+                                （3）遵守国家法律法规，积极为发展做贡献；
+                                （4）遵守内参各项规章制度，严格执行工作纪律；
+                                （5）熟悉基本网络操作，遵守互联网应用规则；
+                            </b>
+                        </div>
+                    </li>
+                    <li>
+                        <div>
+                            <span class="new_wen">问</span>
+                            <span><a href="/">我想申请法制调研员有什么条件？</a></span>
+                        </div>
+                        <div>
+                            <span class="new_da">答</span>
+                            <b>有意从事法制公益性工作，熟悉国家法律法规、司法政策，五年内无违法犯罪记录；熟悉调研工作，熟悉网络基本操作,年龄在25-65之间的中国公民均可申请，有过执法或者公检法行业相关从业者优先考虑。</b>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </footer>
+    </div>
 </template>
-
 <script setup>
 //0.添加网站客服 start---------------------------------------->
 //添加网站客服
@@ -140,7 +153,6 @@ const bottomMenu = ref([])
 const bottomBase = ref({})
 const qq1 = ref("")
 const qq2 = ref("")
-
 async function getModelDataAll() {
     const mkdata = await requestDataPromise('/web/getWebsiteFootAll', {
         method: 'GET',
@@ -159,7 +171,6 @@ async function getModelDataAll() {
         //获取qq号数字部分
         qq1.value = bottomBase.value.customer_service_qq.match(/\d+/g);
         qq2.value = bottomBase.value.communications.match(/\d+/g);
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取友情链接图片")
@@ -169,33 +180,138 @@ async function getModelDataAll() {
 }
 getModelDataAll();
 //获得底部基本信息 end---------------------------------------->
-
 //你问我答 start---------------------------------------->
 const wenda = ref(false)
 function toggleWenda() {
     wenda.value = !wenda.value
 }
 //你问我答 end---------------------------------------->
+import { onMounted } from 'vue';
+// js跑马灯
+onMounted(() => {
+    setTimeout(() => {
+        // console.log('2秒后执行了代码');
+        const main_2 = document.getElementById("main_js_2");
+        const demo_2 = document.getElementById("demo_js_2");
+        const demo1_2 = document.getElementById("demo1_js_2");
+        const demo2_2 = document.getElementById("demo2_js_2");
+        const speed_2 = 22;    //数值越大滚动速度越慢 
+        demo2_2.innerHTML = demo1_2.innerHTML;
+        function Marquee_2() {
+            if (demo2_2.offsetWidth - main_2.scrollLeft <= 0) { main_2.scrollLeft -= demo1_2.offsetWidth }
+            else { main_2.scrollLeft++ }
+        }
+        var MyMar_2 = setInterval(Marquee_2, speed_2);
+        demo_2.onmouseover = function () {
+            clearInterval(MyMar_2)
+        }
+        demo_2.onmouseout = function () {
+            MyMar_2 = setInterval(Marquee_2, speed_2)
+        }
+    }, 1000);
+})
 </script>
-
 <style lang="less" scoped>
 //自适应 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;
-        }
+.new_yqljtlt {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    overflow: hidden;
+    border-bottom: 2px solid #9e9e9e;
+    padding: 0 20px;
+    margin-bottom: 20px;
+}
+.new_yqljtlt a {}
+.foot_img_box_in {
+    overflow: hidden;
+    float: left;
+}
+.foot_title {
+    box-sizing: border-box;
+    width: 100%;
+    height: 50PX;
+    line-height: 50PX;
+    overflow: hidden;
+    border-bottom: 2PX solid #9e9e9e;
+    padding: 0 20PX;
+    margin-bottom: 20PX;
+    a {
+        font-weight: bold;
+        font-size: 20PX;
+        color: #0e28e6;
+        float: left;
+    }
+}
+.foot_img_box {
+    overflow: hidden;
+    display: block;
+    margin-bottom: 50PX;
+    height: 50PX;
+}
+.foot_img_box_long {
+    overflow: hidden;
+    height: 50PX;
+    width: 99999%;
+}
+.foot_img_box a {
+    width: 166PX;
+    height: 50PX;
+    float: left;
+    box-sizing: border-box;
+    margin: 0px 5px;
+}
+.foot_img_box img {}
+.foot_img_box img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.call_us_box {
+    width: 100%;
+    height: 50PX;
+    line-height: 50PX;
+    text-align: center;
+    border-top: 4PX solid #0e28e6;
+    display: block;
+    width: 100%;
+    margin: 25PX auto 0;
+    overflow: hidden;
+    text-align: center;
+    font-size: 0PX;
+    a {
+        min-width: 120PX;
+        color: #333;
+        font-size: 18PX;
+        font-weight: bold;
+        display: inline-block;
+        box-sizing: border-box;
+        padding: 0 5PX;
+        font-weight: bold;
+        text-align: center;
+        height: 50PX;
+        line-height: 50PX;
+        position: relative;
+    }
+    a::after {
+        content: '';
+        display: block;
+        position: absolute;
+        width: 1PX;
+        height: 14PX;
+        background: #000;
+        left: 0PX;
+        top: 20PX;
     }
+    a:nth-of-type(1)::after {
+        display: none;
+    }
+}
+.call_us_box>* {}
+.call_us_box>*:nth-of-type(1) {
+    border-left: 0PX;
+}
+@media screen and (min-width: 1401px) {
     .index_foot {
         box-sizing: border-box;
         width: 1400PX;
@@ -219,43 +335,6 @@ function toggleWenda() {
         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;
@@ -263,7 +342,6 @@ function toggleWenda() {
         border-bottom: solid 3PX #158d91;
         padding: 20PX;
         background: #f1f1f1;
-
         a {
             font-size: 16PX;
         }
@@ -280,43 +358,12 @@ function toggleWenda() {
         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;
@@ -410,7 +457,6 @@ function toggleWenda() {
                     color: #fff;
                     font-size: 12PX !important;
                 }
-
                 >img {
                     width: 30PX !important;
                     height: 30PX !important;
@@ -721,7 +767,7 @@ function toggleWenda() {
     }
     .index_foot {
         box-sizing: border-box;
-        width: 100%;
+        width: 96%;
         margin: 0 auto;
     }
     .index_foot_name_box {
@@ -745,20 +791,17 @@ function toggleWenda() {
     .foot_img_box {
         overflow: hidden;
         display: block;
-        display: flex;
+        // 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: 16.6%;
         display: block;
-        padding: 0 10px;
+        padding: 0 2px;
         box-sizing: border-box;
-        margin-top: 20px;
+        margin-top: 0px;
     }
     .foot_img_box img {
         float: left;
@@ -769,11 +812,6 @@ function toggleWenda() {
         margin: 0 auto;
         background: #fff;
     }
-    .foot_img_box>* * {
-        display: block;
-        width: 100%;
-        height: 100%;
-    }
     .foot_img_box>*:nth-of-type(7n) {
         margin-right: 0px;
     }
@@ -800,43 +838,12 @@ function toggleWenda() {
         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;
@@ -930,7 +937,6 @@ function toggleWenda() {
                     color: #fff;
                     font-size: 12PX !important;
                 }
-
                 >img {
                     width: 30PX !important;
                     height: 30PX !important;
@@ -1226,6 +1232,7 @@ function toggleWenda() {
 @media screen and (max-width: 800px) {
     .foot_title {
         width: 100%;
+        box-sizing: border-box;
         overflow: hidden;
         background: #fff;
         .foot_title_text {
@@ -1242,6 +1249,7 @@ function toggleWenda() {
     .index_foot {
         box-sizing: border-box;
         width: 100%;
+        padding: 0px 10px;
         margin: 0 auto;
     }
     .index_foot_name_box {
@@ -1305,7 +1313,6 @@ function toggleWenda() {
         border-bottom: solid 3PX #158d91;
         padding: 20PX;
         background: #f1f1f1;
-
         a {
             font-size: 16PX;
         }
@@ -1323,43 +1330,46 @@ function toggleWenda() {
         margin: 0 10PX;
     }
     .call_us_box {
+        height: auto;
         display: block;
         width: 100%;
         margin: 25PX auto 0;
         overflow: hidden;
         text-align: center;
-        background: #158d91;
         display: flex;
         flex-wrap: wrap;
         a {
-            color: #fff;
+            color: #333;
             font-size: 16PX;
             font-weight: normal;
         }
     }
-    .call_us_box>* {
-        height: 12PX;
-        line-height: 12PX;
-        color: #fff;
+    .call_us_box a {
+        height: 88px;
+        line-height: 88px;
         display: inline-block;
         box-sizing: border-box;
-        padding: 0 19PX;
+        padding: 0 2px;
         font-weight: bold;
         //border-left: solid 1PX #fff;
-        margin: 18PX 0;
         width: 33%;
-        font-size: 12px;
+        font-size: 33px;
+    }
+    .call_us_box a::after {
+        display: none;
     }
     .call_us_box>*:nth-of-type(1) {
         border-left: 0PX;
     }
+    .foot_title a {
+        font-size: 33px;
+    }
     .foot_text_box {
         margin: 20PX auto 0PX;
         text-align: center;
         color: #333;
         font-size: 16PX;
         line-height: 25PX;
-
         a {
             color: #333;
             font-size: 14PX;
@@ -1416,8 +1426,8 @@ function toggleWenda() {
         background: #fff;
     }
     .foot_text_html_css {
-        line-height: 30PX;
-        font-size: 16PX;
+        line-height: 44px;
+        font-size: 22px;
     }
     .foot_text_html_css :deep(a) {
         color: #333;
@@ -1455,7 +1465,6 @@ function toggleWenda() {
                     color: #fff;
                     font-size: 12PX !important;
                 }
-
                 >img {
                     width: 30PX !important;
                     height: 30PX !important;
@@ -1751,4 +1760,43 @@ function toggleWenda() {
     }
 }
 //自适应 end ---------------------------------------->
+@media screen and (min-width: 1401px) {}
+@media screen and (max-width: 1400px) {}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .foot_img_box_in {
+        float: left;
+    }
+}
+@media screen and (min-width: 801px) {
+    .phone_foot_img_box {
+        display: none;
+    }
+}
+@media screen and (max-width: 900px) {}
+@media screen and (max-width: 800px) {
+    .phone_foot_img_box {
+        width: 96%;
+        margin: 4px auto;
+        overflow: hidden;
+    }
+    .phone_foot_img_box a {
+        width: 48%;
+        height: 111px;
+        margin-bottom: 8px;
+    }
+    .phone_foot_img_box a:nth-of-type(odd) {
+        float: left;
+    }
+    .phone_foot_img_box a:nth-of-type(even) {
+        float: right;
+    }
+    .phone_foot_img_box a img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+    .foot_img_box {
+        display: none;
+    }
+}
 </style>

components/home/pageHead.vue

@@ -5,7 +5,7 @@
                 <div class="headerMain">
                     <div class="headerBox_left">欢迎来到全国法制资讯发布中心!</div>
                     <div class="headerBox_right">
-                        <NuxtLink to="#">收藏</NuxtLink>
+                        <NuxtLink @click="add_collect_fun()">收藏</NuxtLink>
                         <span>|</span>
                         <NuxtLink to="/">人员查询</NuxtLink>
                         <span>|</span>
@@ -31,7 +31,11 @@
                     </div>
                     <div class="logoBox_right_center">
                         <h2>
-                            <NuxtLink to="/">全国法制资讯发布中心 官网</NuxtLink>
+                            <NuxtLink to="/">全国法制资讯发布中心
+                                <span class=" ">
+                                    官网
+                                </span>
+                            </NuxtLink>
                         </h2>
                     </div>
                     <div class="logoBox_right_bottom">
@@ -46,100 +50,7 @@
             </div>
         </div>
     </header>
-    <!-- <header>
-        <nav class="headerNav">
-            <div class="inner">
-                <div class="left">
-                    <span>
-                        <a href="http://znxyw.org.cn/" target="_blank">中农兴业网团</NuxtLink>
-                    </span>
-                    <span>旗下网站：<span>农业百强网站（政府类30强）</span></span>
-                    <div class="phone_head_btn" @click="togglePanel"></div>
-                </div>
-                <div class="right ">
-                    <div class="menu">
-                        <button class="reg" @click="goTopic">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon1.png" alt="商圈">商圈
-                        </button>
-                        <button class="reg" @click="goAdvertising">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon2.png" alt="广告服务">广告服务
-                        </button>
-                        <button class="reg" @click="goLogin" v-show="!showToken">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="登录">登录
-                        </button>
-                        <button class="reg" @click="goRegister" v-show="!showToken">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon4.png" alt="注册">注册
-                        </button>
-                        <button class="reg" @click="userCenter" v-if="showToken">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/topicon3.png" alt="用户信息">
-                            {{ username }}
-                        </button>
-                        <button class="reg" @click="goSearch">
-                            <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/head/searchicon.png" alt="搜索">搜索
-                        </button>
-                    </div>
-                    <ul class="userInfo11" v-if="isShow">
-                        <li @click="gotosystem">个人中心</li>
-                        <li @click="exit">退出</li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-        <div class="headerLogo">
-            <div class="inner">
-                <img :src="logo" :alt="webSiteName" class="left" @click="backHome">
-                <div class="titlead" v-if="adImg">
-                    <a href="http://sannongdy.org.cn/" v-if="adImg.image_url == null" target="_blank"
-                        :title="adImg.introduce">
-                        <img :src="adImg.thumb" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
-                    </NuxtLink>
-                    <a :href="adImg.image_url" v-else :title="adImg.introduce">
-                        <img :src="adImg.image_src" :alt="adImg.introduce" data-tag="imgurl.ad_tag" :id="adImg.ad_tag">
-                    </NuxtLink>
-                </div>
-                <div class="logo_right_box">
-                    <div class="logo_right_btn" @click="goTopic">
-                        <img class="logo_right_btn_img" src="../../public/image/4.png" alt="商圈">
-
-                        <span class="logo_right_btn_text" >商圈</span>
-                    </div>
-                    <div class="logo_right_btn" @click="user_fun">
-                        <img class="logo_right_btn_img" src="../../public/image/6.png" alt="用户">
-                        <span class="logo_right_btn_text" >用户</span>
-                    </div>
-                    <div class="logo_right_btn" @click="goSearch">
-                        <img class="logo_right_btn_img" src="../../public/image/7.png" alt="搜索">
-                        <span class="logo_right_btn_text" >搜索</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <El-dialog v-model="dialogTableVisible" width="800">
-            <div class="tips">
-                <p>
-                    <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/tips.png"> 提示:注册请联系管理员操作!
-                </p>
-                <p>联系电话:010-56019387</p>
-                <p>QQ ： 2909421493 、213552413</p>
-            </div>
-        </El-dialog>
-        <El-dialog v-model="dialogTableVisible_phone" width="800"> 
-            <div class="tips">
-                <p>
-                    <img src="http://img.bjzxtw.org.cn/master/bjzxtw/public/topic/tips.png"> 注册请联系管理员操作!
-                </p>
-                <p>联系电话:010-56019387</p>
-                <p>QQ ： 2909421493 、213552413</p>
-
-                <div class="dialog_load_btn" @click="phone_close_fun">登录</div> 
-            </div>
-        </El-dialog>
-        <section class="HomePanel_out" v-show="panelVisible">
-            <HomePanel></HomePanel> 
-        </section>
-    </header> -->
 </template>
-
 <script setup>
 // 引入全局状态-HomePanel_out
 const panelVisible = useState('panelVisible')
@@ -226,7 +137,6 @@ const handleClickOutside = (event) => {
     }
 }
 //2.登录逻辑 end ---------------------------------------->
-
 //3.跳转菜单逻辑 start ---------------------------------------->
 let gotosystem = () => {
     let url = $BwebUrl + '/#/login?userurl=' + $CwebUrl;
@@ -405,316 +315,226 @@ onMounted(async () => {
         username.value = userInfo.data.nickname
     }
 })
+// 收藏
+const add_collect_fun = () => {
+    const url = window.location.href; // 获取当前页面 URL
+    const title = document.title;     // 获取当前页面标题
+    try {
+        // 尝试 IE 特有的方法
+        if (window.external && window.external.addFavorite) {
+            window.external.addFavorite(url, title);
+        }
+        // 尝试 Firefox 特有的方法 (window.sidebar.addPanel)
+        else if (window.sidebar && window.sidebar.addPanel) {
+            window.sidebar.addPanel(title, url, "");
+        }
+        // 如果都不支持，则提示用户手动操作 (Chrome, Edge, Safari 等)
+        else {
+            alert("您的浏览器不支持自动添加收藏。\n请使用键盘快捷键 Ctrl + D (Mac: Cmd + D) 手动收藏。");
+        }
+    } catch (e) {
+        // 捕获异常，通常也是提示用户手动操作
+        alert("您的浏览器不支持自动添加收藏。\n请使用键盘快捷键 Ctrl + D (Mac: Cmd + D) 手动收藏。");
+    }
+}
 //5.获取登录状态 end ---------------------------------------->
 //点击手机
 // 添加全局状态
 // const panelVisible = useState('panelVisible', () => false)
 const togglePanel = () => {
-  panelVisible.value = true
+    panelVisible.value = true
 }
 </script>
-
 <style lang="less" scoped>
 //自适应 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: center;
-        background: rgba(255, 255, 255, .6);
-        .headerMain {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 1400PX !important;
-            .headerBox_left {
-                font-size: 18PX !important;
-                color:#0f50d5;
+.headerContainer {
+    width: 100%;
+}
+.headerBox {
+    width: 100%;
+    height: 70PX;
+    padding: 0px 20PX;
+    background: rgba(14, 30, 230, .7);
+    box-sizing: border-box;
+    .headerMain {
+        height: 70PX;
+        .headerBox_left {
+            float: left;
+            font-size: 24PX;
+            color: #fff;
+            height: 70PX;
+            line-height: 70PX;
+        }
+        .headerBox_right {
+            float: right;
+            height: 70PX;
+            line-height: 70PX;
+            a {
+                float: left;
+                height: 70PX;
+                line-height: 70PX;
+                font-size: 24PX;
+                color: #fff;
             }
-            .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;
-                }
+            span {
+                float: left;
+                height: 70PX;
+                line-height: 70PX;
+                color: #fff;
+                font-size: 14PX;
+                margin: 0 10PX;
             }
         }
     }
-    .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 {
+    width: 1400PX;
+    margin: 0 auto;
+    overflow: hidden;
+    .logoBox_left {
+        width: 210PX;
+        float: left;
+        margin-top: 90PX;
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+    .logoBox_right {
+        width: 80%;
+        float: right;
+        .logoBox_right_top {
+            text-align: right;
+            margin-top: 45PX;
+            a {
+                font-size: 26PX;
+                color: #000;
+                font-weight: bold;
+                padding-left: 2%;
             }
         }
-        .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;
-                }
+        .logoBox_right_center {
+            margin: 10PX 0px;
+            h2 {
+                width: 100%;
             }
-            .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;
-                }
+            a {
+                font-size: 75PX;
+                color: #d70048;
+                font-weight: bold;
             }
-            .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;
-                    }
+            span {
+                float: right;
+            }
+        }
+        .logoBox_right_bottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            h4 {
+                height: 40PX;
+                line-height: 40PX;
+                font-weight: normal;
+                a {
+                    font-size: 24PX;
+                    color: #000;
                 }
             }
         }
     }
 }
-
-//大于800px小于等于1400px
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-    .headerContainer {
-        width: 100%;
-    }
+@media screen and (max-width: 1400px) {
     .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;
+        height: 40px;
+        padding: 0px 10px;
         .headerMain {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 100%;
+            height: 40px;
             .headerBox_left {
-                font-size: 18PX;
-                color:#0f50d5;
+                font-size: 12px;
+                height: 40px;
+                line-height: 40px;
             }
             .headerBox_right {
-                display: flex;
-                align-items: center;
-                justify-content: flex-end;
+                height: 40px;
+                line-height: 40px;
                 a {
-                    font-size: 18PX;
-                    color:#0f50d5;
-                    margin-left: 6px;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 12px;
                 }
                 span {
-                    font-size: 14PX;
-                    margin-left: 6px;
+                    height: 40px;
+                    line-height: 40px;
+                    font-size: 8px;
+                    margin: 0 10px;
                 }
             }
         }
     }
     .logoBox {
         width: 100%;
-        height: 190PX;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
         box-sizing: border-box;
-        padding: 0 20px;
+        padding: 0px 10px;
         .logoBox_left {
-            width: 20%;
-            img {
-                width: 80%;
-                height: 100%;
-                //margin-top: 40px;
-            }
+            width: 110px;
+            margin-top: 33px;
         }
         .logoBox_right {
             width: 80%;
-            //height: 190px;
+            float: right;
             .logoBox_right_top {
-                text-align: right;
+                margin-top: 40px;
                 a {
-                    font-size: 14px;
-                    color: #0828bb;
-                    font-weight: bold;
+                    font-size: 13px;
                     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;
-                }
+                margin: 10px 0px;
                 a {
-                    font-size: 40px;
-                    color: #0828bb;
-                    font-weight: bold;
-                    -webkit-text-stroke: 3PX #FFF;
+                    font-size: 37px;
                 }
             }
             .logoBox_right_bottom {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
                 h4 {
-                    height: 35px;
-                    line-height: 35px;
+                    height: 40px;
+                    line-height: 40px;
                     a {
-                        font-size: 18px;
-                        color: #0828bb;
-                        font-weight: bold;
-                        -webkit-text-stroke: .5px #FFF;
+                        font-size: 12px;
                     }
                 }
             }
         }
     }
 }
+//大于800px小于等于1400px
+@media screen and (min-width: 801px) and (max-width: 1400px) {}
 //小于等于800px
 @media screen and (max-width: 800px) {
     .headerContainer {
         width: 100%;
         margin-top: 80px;
     }
-    .headerBox {
-        width: 100%;
-        height: 40px;
-        margin-bottom: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, .6);
+    .logoBox .logoBox_right .logoBox_right_center {
+        margin-top: 30px;
+    }
+    .logoBox .logoBox_left {
+        margin-top: 30px;
+    }
+    .logoBox .logoBox_right .logoBox_right_center a {
+        font-size: 46px;
+    }
+    .logoBox_right_top {
         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;
-                }
-            }
-        }
     }
-    .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;
-                    }
-                }
-            }
-        }
+    .headerBox {
+        display: none;
     }
 }
-//自适应 end ---------------------------------------->
+@media screen and (min-width: 1401px) {}
+@media screen and (max-width: 1400px) {}
+@media screen and (min-width: 801px) and (max-width: 1400px) {}
+@media screen and (max-width: 900px) {}
+@media screen and (max-width: 800px) {}
 </style>
-

components/home/pageNavigation.vue

@@ -9,62 +9,162 @@
     <div class="headerNav-pc">
         <div class="headerNavMainBox">
             <div class="headerNavTop">
-                <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
+                <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>
+                    <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 class="headerNavCenter">
-                <div class="first"><NuxtLink to="/">互动</NuxtLink></div>
+                <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>
+                    <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>
+                <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>
+                    <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>
@@ -107,9 +207,12 @@
                     <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="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>
@@ -139,20 +242,18 @@
         </div>
     </div>
 </template>
-
 <script setup>
 //1.加载依赖 start ---------------------------------------->
 import { ElMessage } from 'element-plus'
 import { ref, onMounted } from 'vue';
 import { ElSelect, ElOption } from 'element-plus'
-import { useRoute } from 'vue-router'; 
+import { useRoute } from 'vue-router';
 const showZonePanel = ref(false)
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
 const route = useRoute();
 const routeId = route.params.id; //获得该页面的id
 //1.加载依赖 end ---------------------------------------->
-
 //2.加载模块数据 start ---------------------------------------->
 // const navigation1 = ref("");
 const navigation1 = useState('globalNavData', () => ([]))
@@ -173,18 +274,16 @@ const getLinkPath = (item) => {
         return `${item.web_url}`;
     } else if (item.children_count == 0) {
         return `/${item.aLIas_pinyin}/list-1.html`;
-    }  else {
+    } else {
         return `/${item.aLIas_pinyin}/index.html`;
     }
 }
 //2.加载模块数据 end ---------------------------------------->
-
 //3.职能部门 start ---------------------------------------->
 let department = ref("")
 const depValue = ref("")
 const typeValue = ref("")
 //3.职能部门 end ---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -211,7 +310,6 @@ let change = async (id) => {
     cityList.value = shengData.data;
     regionList.value = [];// 清空县 
 }
-
 //选择县
 let change1 = async (id) => {
     cityid.value = id;
@@ -227,7 +325,6 @@ let change2 = async (id) => {
     regionid.value = id;
 }
 //4.展示行政区划 end ---------------------------------------->
-
 //5.执行搜索 start ---------------------------------------->
 const getcityid = ref("")
 //获得cityid和11
@@ -235,7 +332,7 @@ let goToPrimary = async () => {
     if (province.value != "") { getcityid.value = province.value }
     if (city.value != "") { getcityid.value = city.value }
     if (region.value != "") { getcityid.value = region.value }
-    console.log("getcityid.value=======",getcityid.value)
+    console.log("getcityid.value=======", getcityid.value)
     if (province.value == "" && city.value == "" && region.value == "" && depValue.value == "") {
         ElMessage.error('请选择行政区划或者职能部门！')
     } else {
@@ -257,19 +354,19 @@ const foot_btn_clear_fun = () => {
 }
 let shake_bool = true // 声明在组件作用域顶部==防抖
 const nav_department_drop_a_fun = (departmentId) => {
-    if(shake_bool===true){//第1次点击
+    if (shake_bool === true) {//第1次点击
         shake_bool = false;
         depValue.value = departmentId;
         goToPrimary();
         // 行政职能查询
-            ElMessage({
+        ElMessage({
             message: '页面跳转中请稍等',
             type: 'success'
         });
         nav_department_drop_a_fun.timer = setTimeout(() => {
             shake_bool = true;
         }, 3333);
-    }else{
+    } else {
         ElMessage({
             message: '请勿重复点击',
             type: 'warning'
@@ -318,237 +415,254 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
-
 //打开顶部菜单 start ---------------------------------------->
 const openTopMenu = ref(1)
 //打开顶部菜单 end ---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //自适应 start ---------------------------------------->
-@media screen and (min-width: 1401px) {
-    .headerNavBox-mobile {
-        display: none;
-    }
-    .headerNav-pc {
-        position: sticky;
-        top: 0;
-        z-index: 1000;
-        width: 100%;
-    }
-    .headerNavBox {
+.headerNavBox-mobile {
+    display: none;
+}
+.headerNav-pc {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    width: 100%;
+}
+.headerNavBox {
+    margin-top: 30PX;
+    text-align: center;
+    a {
+        display: inline-block;
+        margin: 0 20PX;
+        width: 150PX;
+        height: 40PX;
+        line-height: 40PX;
         text-align: center;
-        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 !important;
-        width: 100%;
-        overflow: hidden;
-        margin: 20px auto 0;
         background: #fff;
-        .headerNavTop,.headerNavCenter,.headerNavBottom {
+        border-radius: 10PX;
+        border: 1PX solid #0e28e6;
+        font-size: 22PX;
+        color: #0e28e6;
+        font-weight: bold;
+    }
+}
+.headerNavMainBox {
+    max-width: 1400PX;
+    width: 100%;
+    background: #fff;
+    overflow: hidden;
+    border-radius: 4px;
+    margin: 20px auto 0;
+    .headerNavTop,
+    .headerNavCenter,
+    .headerNavBottom {
+        ul {
+            width: 92%;
             display: flex;
-            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;
+            flex-wrap: wrap;
+            li {
+                width: 120PX;
+                height: 35PX;
+                line-height: 35PX;
                 text-align: center;
+                display: flex;
                 a {
-                    font-size: 16PX !important;
+                    font-size: 20PX;
                     color: #fff;
-                    font-weight: bold;
                 }
             }
         }
-        .headerNavCenter {
-            width: 100%;
+    }
+    .headerNavTop {
+        width: 100%;
+        overflow: hidden;
+        background: #0e28e6;
+        border-radius: 10PX;
+        display: block;
+        .first {
+            width: 8%;
+            height: 100PX;
+            line-height: 100PX;
             overflow: hidden;
-            background: #0072ff;
-            margin-top: 4PX !important;
-            .first {
-                width: 5%;
-                height: 40PX !important;
-                line-height: 40PX !important;
-                float: left;
+            float: left;
+            text-align: center;
+            a {
+                font-size: 24PX;
                 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;
+        ul {
+            margin-top: 11PX;
+        }
+        li {
+            flex: 1;
+            height: 40PX !important;
+            line-height: 40PX !important;
+            text-align: center !important;
+            min-width: 9%;
+            max-width: 13%;
+            width: 13% !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;
-                }
-            }
+        }
+        li a {
+            font-size: 20PX;
+            color: #fff;
+            font-weight: 400;
         }
     }
-    
-}
-@media screen and (min-width: 801px) and (max-width: 1400px) {
-    .headerNavBox-mobile {
-        display: none;
-    }
-    .headerNav-pc {
-        position: sticky;
-        top: 0;
-        z-index: 1000;
+    .headerNavCenter {
         width: 100%;
+        overflow: hidden;
         background: #fff;
-    }
-    .headerNavBox {
-        text-align: center;
-        a {
-            width: 100PX;
-            margin: 0 10px;
-            display: inline-block;
+        box-sizing: border-box;
+        height: 40PX;
+        border-radius: 10PX;
+        border: 2PX solid #2a00dd;
+        margin-top: 10PX;
+        .first {
+            background: #2a00dd;
+            width: 8%;
+            height: 40PX;
+            line-height: 36PX;
+            float: left;
+            color: #fff;
+            font-size: 24PX;
+            font-weight: bold;
+            text-align: center;
+            a {
+                font-size: 24PX;
+                color: #fff;
+                display: block;
+                width: 100%;
+                height: 40PX;
+                line-height: 36PX;
+                font-weight: normal;
+            }
+        }
+        ul {
+            width: 92%;
+            height: auto;
+            overflow: hidden;
+            float: right;
+            display: flex;
+            flex-wrap: wrap;
+        }
+        ul li {
+            flex: 1;
             height: 40PX;
             line-height: 40PX;
-            background: #158d91;
             text-align: center;
-            font-size: 12px;
-            color: #fff;
+            min-width: 9%;
+            max-width: 13%;
+            width: 13%;
+            overflow: hidden;
+        }
+        ul a {
+            font-size: 20PX;
+            color: #2a00dd !important;
+            display: block;
+            width: 100%;
+            height: 40PX;
+            line-height: 36PX;
         }
     }
-    .headerNavMainBox {
+    .headerNavBottom {
         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;
-                    }
-                }
+        background: #fff;
+        box-sizing: border-box;
+        height: 40PX;
+        border-radius: 10PX;
+        border: 2PX solid #dd3e00;
+        margin-top: 10PX;
+        .first {
+            background: #dd3e00;
+            width: 8%;
+            height: 40PX;
+            line-height: 36PX;
+            float: left;
+            color: #fff;
+            font-size: 24PX;
+            font-weight: bold;
+            text-align: center;
+            a {
+                font-size: 24PX;
+                color: #fff;
+                display: block;
+                width: 100%;
+                height: 40PX;
+                line-height: 36PX;
+                font-weight: normal;
             }
         }
-        .headerNavTop {
-            width: 100%;
-            //height: 70px;
+        ul {
+            width: 92%;
+            height: auto;
             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;
-                }
-            }
+            float: right;
+            display: flex;
+            flex-wrap: wrap;
         }
-        .headerNavCenter {
-            width: 100%;
+        ul li {
+            flex: 1;
+            height: 40PX;
+            line-height: 40PX;
+            text-align: center;
+            min-width: 9%;
+            max-width: 13%;
+            width: 13%;
             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;
-            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;
-                }
-            }
+        ul a {
+            font-size: 20PX;
+            color: #dd3e00 !important;
+            display: block;
+            width: 100%;
+            height: 40PX;
+            line-height: 36PX;
         }
     }
 }
+@media screen and (max-width: 1400px) {
+    .headerNavBox {
+        margin-top: 15px;
+        a {
+            margin: 0 10px;
+            width: 75px;
+            height: 20px;
+            line-height: 20px;
+            border-radius: 5px;
+            font-size: 11px;
+        }
+    }
+    .headerNav-pc {
+        box-sizing: border-box;
+        padding: 0 10px;
+    }
+    .headerNavMainBox .headerNavTop ul li a,
+    .headerNavMainBox .headerNavCenter ul li a,
+    .headerNavMainBox .headerNavBottom ul li a {
+        font-size: 11px;
+    }
+    .headerNavMainBox .headerNavTop .first a {
+        font-size: 14px;
+    }
+    .headerNavMainBox .headerNavCenter .first a {
+        font-size: 14px;
+    }
+    .headerNavMainBox .headerNavBottom .first a {
+        font-size: 14px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .headerNavBox-mobile {
+        display: none;
+    }
+}
 @media screen and (max-width: 800px) {
     .headerNav-pc {
         position: sticky;
@@ -570,10 +684,11 @@ const openTopMenu = ref(1)
             display: inline-block;
             height: 60px;
             line-height: 60px;
-            background: #158d91;
+            box-sizing: border-box;
+            border: solid 1px #0e28e6;
             text-align: center;
             font-size: 24px;
-            color: #fff;
+            color: #0e28e6;
             text-align: center;
         }
     }
@@ -581,7 +696,9 @@ const openTopMenu = ref(1)
         width: 100%;
         overflow: hidden;
         margin: 20px auto 0;
-        .headerNavTop,.headerNavCenter,.headerNavBottom {
+        .headerNavTop,
+        .headerNavCenter,
+        .headerNavBottom {
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -606,7 +723,7 @@ const openTopMenu = ref(1)
             width: 100%;
             //height: 70px;
             overflow: hidden;
-            background: #158d91;
+            background: #0e28e6;
             .first {
                 height: 70px;
                 padding-left: 5px;
@@ -699,7 +816,7 @@ const openTopMenu = ref(1)
         top: 80px;
         left: 0;
         width: 100%;
-        background: #158d91;
+        background: #0e28e6;
         box-sizing: border-box;
         padding: 20px;
         a {
@@ -723,14 +840,4 @@ const openTopMenu = ref(1)
         }
     }
 }
-//自适应 end ---------------------------------------->
-</style>
-
-
-
-
-
-
-
-
-
+//自适应 end ----------------------------------------></style>

pages/[dir]/[id].vue

@@ -620,38 +620,38 @@ const closePreview = () => {
 //@import url('@/assets/css/article/yd.less');
 //面包屑
 .breadcrumb-box {
-    width: 1400px;
+    width: 1400PX;
     margin: 0 auto;
     .inner {
         width: 100%;
-        height: 22px;
-        margin-top: 20px;
-        margin-bottom: 20px;
+        height: 22PX;
+        margin-top: 20PX;
+        margin-bottom: 20PX;
         font-family: Microsoft YaHei, Microsoft YaHei;
         font-weight: 400;
-        font-size: 20px;
+        font-size: 20PX;
         color: #666666;
-        line-height: 23px;
+        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;
+        border-bottom: 1PX dashed #ccc;
+        margin-bottom: 10PX;
+        padding: 20PX 20PX 20PX 0;
         box-sizing: border-box;
         a {
-            font-size: 16px;
+            font-size: 16PX;
             color: #000;
-            line-height: 20px;
+            line-height: 20PX;
         }
         span {
-            font-size: 16px;
+            font-size: 16PX;
             color: #000;
-            line-height: 20px;
+            line-height: 20PX;
             &.location {
-                line-height: 20px;
+                line-height: 20PX;
             }
         }
     }
@@ -659,127 +659,127 @@ const closePreview = () => {
 //资讯详情
 .newsDetail {
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 10PX;
     .inner {
-        width: 1400px;
+        width: 1400PX;
         overflow: hidden;
-        font-size: 16px;
+        font-size: 16PX;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         .innerLeft {
-            width: 1030px;
+            width: 1030PX;
             .LeftTop {
-                margin-top: 20px;
-                border-bottom: 1px dashed #ccc;
-                padding-bottom: 20px;
+                margin-top: 20PX;
+                border-bottom: 1PX dashed #ccc;
+                padding-bottom: 20PX;
                 >h1 {
-                    line-height: 40px;
-                    margin-bottom: 20px;
+                    line-height: 40PX;
+                    margin-bottom: 20PX;
                     font-family: Microsoft YaHei, Microsoft YaHei;
                     font-weight: bold;
-                    font-size: 24px;
+                    font-size: 24PX;
                     color: #333333;
                     text-align: center;
                 }
                 >p {
-                    height: 18px;
-                    line-height: 18px;
+                    height: 18PX;
+                    line-height: 18PX;
                     font-family: Microsoft YaHei, Microsoft YaHei;
                     font-weight: 400;
-                    font-size: 14px;
+                    font-size: 14PX;
                     color: #999999;
                     text-align: center;
                     span {
-                        margin-right: 40px;
+                        margin-right: 40PX;
                     }
                 }
                 >img {
-                    width: 680px;
-                    height: 382px;
-                    padding: 50px 0px 60px 55px;
+                    width: 680PX;
+                    height: 382PX;
+                    padding: 50PX 0PX 60PX 55PX;
                 }
             }
             .leftBottom {
-                margin-top: 20px;
-                font-size: 20px;
-                line-height: 38px;
-                margin-bottom: 30px;
+                margin-top: 20PX;
+                font-size: 20PX;
+                line-height: 38PX;
+                margin-bottom: 30PX;
                 word-break: break-all;
                 ul>li img {
-                    width: 790px;
-                    height: 382px;
+                    width: 790PX;
+                    height: 382PX;
                 }
                 img {
-                    width: 790px;
-                    height: 382px;
+                    width: 790PX;
+                    height: 382PX;
                 }
                 p.tinymce-material {
                     img {
-                        width: 790px;
+                        width: 790PX;
                     }
                 }
                 >h3,
                 >p {
                     text-indent: 2em;
-                    width: 790px;
+                    width: 790PX;
                     font-family: Microsoft YaHei, Microsoft YaHei;
-                    font-size: 20px;
+                    font-size: 20PX;
                     color: #333333;
-                    line-height: 38px;
-                    padding-bottom: 30px;
+                    line-height: 38PX;
+                    padding-bottom: 30PX;
                     img {
-                        width: 790px;
+                        width: 790PX;
                     }
                 }
                 >h3 {
-                    font-weight: 600px;
+                    font-weight: 600PX;
                 }
                 >p {
                     font-weight: 400;
                 }
             }
             .disclaimer {
-                width: 790px;
+                width: 790PX;
                 overflow: hidden;
-                border-top: 1px solid #e6e6e6;
-                padding: 30px 0px;
+                border-top: 1PX solid #e6e6e6;
+                padding: 30PX 0PX;
                 color: #999999;
-                font-size: 17px;
+                font-size: 17PX;
                 p {
-                    width: 790px;
-                    line-height: 30px;
+                    width: 790PX;
+                    line-height: 30PX;
                 }
             }
             .recommendRead {
                 width: 100%;
-                margin: 30px 0px 20px 0;
+                margin: 30PX 0PX 20PX 0;
                 .recommendReadTitle {
-                    font-size: 18px;
+                    font-size: 18PX;
                     color: #001996;
-                    height: 42px;
-                    line-height: 35px;
-                    letter-spacing: 1px;
+                    height: 42PX;
+                    line-height: 35PX;
+                    letter-spacing: 1PX;
                     text-align: left;
                     font-style: normal;
                     text-transform: none;
-                    border-bottom: 1px solid #D9D9D9;
+                    border-bottom: 1PX solid #D9D9D9;
                     .read_title {
                         display: inline-block;
                         text-align: center;
-                        width: 94px;
-                        height: 40px;
-                        border-bottom: 2px solid #158d91;
+                        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;
+                    min-height: 155PX;
+                    margin-top: 20PX;
+                    padding-bottom: 10PX;
+                    font-size: 16PX;
+                    border-bottom: 1PX solid #D9D9D9;
                     .recommendReadListTitle {
-                        margin-top: 18px;
+                        margin-top: 18PX;
                         a {
                             &:hover {
                                 color: #158d91;
@@ -789,11 +789,11 @@ const closePreview = () => {
                     }
                     .recommendReadListTitle:nth-child(1)::after {
                         content: "热";
-                        margin-left: 13px;
+                        margin-left: 13PX;
                         background: #FF8A37;
                         color: #fff;
-                        font-size: 14px;
-                        padding: 0px 2px;
+                        font-size: 14PX;
+                        padding: 0PX 2PX;
                     }
                     .recommendReadListTitle:hover a {
                         color: #158d91;
@@ -802,11 +802,10 @@ const closePreview = () => {
             }
         }
         .innerRight {
-            width: 315px;
+            width: 315PX;
             overflow: hidden;
-            border-top: 1px solid #139602;
             .hotList1 {
-                margin-bottom: 50px;
+                margin-bottom: 50PX;
             }
         }
     }
@@ -1153,9 +1152,9 @@ const closePreview = () => {
     margin-top: 1PX;
 }
 .prevNext a {
-    height: 22PX;
-    line-height: 22PX;
-    font-size: 14PX;
+    height: 40PX;
+    line-height: 40PX;
+    font-size: 15PX;
     width: 100%;
     display: block;
     word-break: keep-all;
@@ -1163,9 +1162,7 @@ const closePreview = () => {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-@media screen and (min-width: 1401px) {
-    //你的样式
-}
+@media screen and (min-width: 1401px) {}
 @media screen and (max-width: 1400px) {
     .breadcrumb-box {
         width: 100%;
@@ -1210,5 +1207,73 @@ const closePreview = () => {
     .newsDetail .inner .innerLeft .leftBottom {
         line-height: 33PX;
     }
+    .breadcrumb-box :deep(.el-icon) {}
+    .breadcrumb-box .inner span.location,
+    .breadcrumb-box .inner span {
+        font-size: 24px;
+    }
+    .breadcrumb-box .inner a {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
+    }
+    .breadcrumb-box .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
+    }
+    .newsDetail .inner .innerLeft .LeftTop>h1 {
+        font-size: 33px;
+        line-height: 44px;
+    }
+    .newsDetail .inner .innerLeft .LeftTop>p {
+        font-size: 14px;
+        line-height: 24px;
+        height: auto;
+    }
+    .newsDetail .inner .innerLeft .LeftTop>p span {
+        font-size: 14px;
+        line-height: 24px;
+        height: auto;
+    }
+    .newsDetail .inner .innerLeft .leftBottom {
+        font-size: 18px;
+        line-height: 22px;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle {
+        height: auto;
+        overflow: hidden;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title {
+        height: 44px;
+        line-height: 44px;
+        font-size: 28px;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle {
+        line-height: 44px;
+        height: 44px;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a {
+        line-height: 44px;
+        height: 44px;
+        font-size: 24px;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle:nth-child(1)::after {
+        font-size: 14PX;
+        margin-top: 1PX;
+    }
+    .prevNext a {
+        height: 44px;
+        line-height: 44px;
+        font-size: 24px;
+    }
+    .prevNext {
+        margin-bottom: 44px;
+    }
+    .leftBottom,
+    .leftBottom * {
+        line-height: 44px;
+        font-size: 26px;
+    }
 }
 </style>

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

@@ -41,22 +41,24 @@
         <div class="newsList">
             <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">
-                                <div class="li_img_box" v-if="index % 2 == 0">
-                                    <img class="" src="http://img.fazdyzx.org.cn/202601/5c9d396e14a53bb.png" title=""
-                                        alt="">
-                                </div>
-                                <div class="li_right_box">
-                                    <h4 class="li_h4_dot1">{{ item.title }}</h4>
-                                    <div class="li_dot3">
-                                        {{ item.title }}
-                                    </div>
-                                </div>
-                            </NuxtLink>
-                        </li>
-                    </ul>
+                    <div class="list_left_con">
+                        <div class="conitems " v-for="(per_obj, per_index) in 11">
+                            <div class="left_img" v-if="per_index % 2 == 0">
+                                <NuxtLink to="/">
+                                    <img src="http://img.fazdyzx.org.cn/202601/2786d0a471c0ad8.png" data-isloaded="1">
+                                </NuxtLink>
+                            </div>
+                            <div class="right_text2">
+                                <NuxtLink to="/">
+                                    <span>省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会</span>
+                                </NuxtLink>
+                                <NuxtLink to="/">
+                                    <p>1月12日，省法院召开党组(扩大)会，传达学习习近平总书记对做好“三农”工作作出的重要指示和中央农村工作会议精神，习近平总书记在中共中央政治局民主生活会上的重要讲话精神和会议精神省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组（扩大）会省法院召开党组
+                                    </p>
+                                </NuxtLink>
+                            </div>
+                        </div>
+                    </div>
                     <!-- 分页器 -->
                     <div class="pagination" v-if="total > 0">
                         <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
@@ -294,38 +296,38 @@ onMounted(async () => {
 // @import url('@/assets/css/list/yd.less');
 //面包屑
 .breadcrumb-box {
-    width: 1400px;
+    width: 1400PX;
     margin: 0 auto;
     .inner {
         width: 100%;
-        height: 22px;
-        margin-top: 20px;
-        margin-bottom: 20px;
+        height: 22PX;
+        margin-top: 20PX;
+        margin-bottom: 20PX;
         font-family: Microsoft YaHei, Microsoft YaHei;
         font-weight: 400;
-        font-size: 20px;
+        font-size: 20PX;
         color: #666666;
-        line-height: 23px;
+        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;
+        border-bottom: 1PX dashed #ccc;
+        margin-bottom: 10PX;
+        padding: 20PX 20PX 20PX 0;
         box-sizing: border-box;
         a {
-            font-size: 16px;
+            font-size: 16PX;
             color: #000;
-            line-height: 20px;
+            line-height: 20PX;
         }
         span {
-            font-size: 16px;
+            font-size: 16PX;
             color: #000;
-            line-height: 20px;
+            line-height: 20PX;
             &.location {
-                line-height: 20px;
+                line-height: 20PX;
             }
         }
     }
@@ -542,14 +544,16 @@ onMounted(async () => {
     .el-pagination.is-background::v-deep .btn-prev {
         width: 70PX;
         height: 34PX;
-        margin: 0px 10PX;
-        border-radius: 4PX;
+        margin: 0px 2PX;
+        border-radius: 0PX;
+        border: solid 1px #ddd;
     }
     .el-pagination.is-background::v-deep .el-pager li {
-        margin: 0px 10PX;
+        margin: 0px 2PX;
         width: 38PX;
         height: 34PX;
-        border-radius: 4PX;
+        border-radius: 0PX;
+        border: solid 1px #ddd;
     }
     .el-pagination.is-background::v-deep .btn-next.is-active,
     .el-pagination.is-background::v-deep .btn-prev.is-active,
@@ -565,6 +569,56 @@ onMounted(async () => {
         margin-left: 20PX;
     }
 }
+.conitems {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    padding: 21PX 0;
+    border-bottom: 1PX solid #f2f2f2;
+}
+.left_img {
+    width: 175PX;
+    height: 92PX;
+    overflow: hidden;
+    float: left;
+    margin-right: 11PX;
+}
+.left_img a img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.right_text2 {
+    overflow: hidden;
+}
+.right_text2 a span {
+    display: block;
+    width: 100%;
+    line-height: 30PX;
+    height: 30PX;
+    overflow: hidden;
+    font-size: 18PX;
+    color: #000;
+    font-weight: bold;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.right_text2 a p {
+    width: 100%;
+    height: 40PX;
+    line-height: 20PX;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    font-size: 14PX;
+    color: #7d7d7d;
+    text-indent: 28PX;
+}
 @media screen and (min-width: 1401px) {
     //你的样式
 }
@@ -606,5 +660,43 @@ onMounted(async () => {
         width: 34PX !important;
         height: 34PX !important;
     }
+    .conitems {
+        padding: 22px 0;
+    }
+    .left_img {
+        width: 222px;
+        height: 144px;
+        margin-right: 11px;
+    }
+    .right_text2 {
+        margin-top: 4px;
+    }
+    .right_text2 a span {
+        line-height: 44px;
+        height: 44px;
+        font-size: 28px;
+    }
+    .right_text2 a p {
+        height: 66px;
+        line-height: 33px;
+        margin-top: 8px;
+        font-size: 24px;
+        text-indent: 28px;
+    }
+    .breadcrumb-box :deep(.el-icon) {}
+    .breadcrumb-box .inner span.location,
+    .breadcrumb-box .inner span {
+        font-size: 24px;
+    }
+    .breadcrumb-box .inner a {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
+    }
+    .breadcrumb-box .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
+    }
 }
 </style>

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

@@ -404,8 +404,8 @@ onMounted(async () => {
         font-size: 16px !important;
     }
     .newsDetail .inner .innerLeft .leftBottom * {
-        line-height: 22px;
-        font-size: 16px !important;
+        line-height: 44px;
+        font-size: 26px !important;
     }
     .leftBottom /deep/.daohang ul {
         overflow: hidden;
@@ -563,9 +563,20 @@ onMounted(async () => {
 }
 @media screen and (max-width: 800px) {
     //你的样式
-    .newsDetail .inner .innerLeft .leftBottom * {
-        line-height: 44PX;
-        font-size: 16PX !important;
+    .breadcrumb:deep(.el-icon) {}
+    .breadcrumb .inner span.location,
+    .breadcrumb .inner span {
+        font-size: 24px;
+    }
+    .breadcrumb .inner a {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
+    }
+    .breadcrumb .phone_breadcrumb_text :deep(.el-breadcrumb__inner) {
+        font-size: 24px;
+        height: 55px;
+        line-height: 55px;
     }
 }
 </style>