fzxfb-2026-1-13

components/detail/HotNews2.vue

@@ -16,7 +16,6 @@
         </li>
     </ul>
 </template>
-
 <script setup>
 const hotNewsList = ref([])
 async function getPageData() {
@@ -31,15 +30,14 @@ async function getPageData() {
         },
     });
     console.log("获取热点精选", mkdata);
-    
     if (mkdata.code == 200) {
-        for(let item of mkdata.data.img){
-            if(item.imgurl){
+        for (let item of mkdata.data.img) {
+            if (item.imgurl) {
                 hotNewsList.value.push(item)
-                if(hotNewsList.value.length == 5){
+                if (hotNewsList.value.length == 5) {
                     break;
                 }
-            } 
+            }
         }
         // hotNewsList.value = mkdata.data;
     } else {
@@ -51,8 +49,6 @@ async function getPageData() {
 }
 getPageData();
 </script>
-
-
 <style lang="less" scoped>
 .title {
     width: 100%;
@@ -80,14 +76,11 @@ getPageData();
             text-transform: none;
         }
     }
-
 }
-
 .rightList {
     padding-top: 20px;
     background-color: #f1f1f1;
     padding-bottom: 30px;
-
     >li {
         width: 90%;
         margin: 0 auto;
@@ -108,4 +101,28 @@ getPageData();
         }
     }
 }
+.title>h4 {
+    height: 55PX;
+    line-height: 55PX;
+    font-size: 20PX;
+}
+.rightList {}
+.rightList>li a {
+    height: 44PX;
+    line-height: 44PX;
+    font-size: 16PX;
+}
+.rightList>li {
+    background-position-y: center;
+}
+@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: 800px) {
+    //你的样式
+}
 </style>

components/zoom/cheliangchaxun.vue

@@ -9,7 +9,7 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item class="phone_breadcrumb_text">车辆查询</el-breadcrumb-item>
             </el-breadcrumb>
@@ -110,17 +110,18 @@
                 </div>
                 <div class="search-right-select-box">
                     地区：
-                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                             @click="change(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                             @click="change1(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </div>
@@ -137,16 +138,13 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 //获得详情id
@@ -154,8 +152,8 @@ const articleId = parseInt(route.params.id); //获得该页面的id
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -167,12 +165,12 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //1.2 获得父级栏目的名称、id
@@ -195,7 +193,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -206,7 +203,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -220,15 +216,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -246,10 +242,10 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
@@ -257,7 +253,7 @@ getPageData();
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -272,38 +268,35 @@ onMounted(async ()  => {
     adImg1.value = resultAd1.data[0];
 })
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -370,10 +363,9 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
 //4.展示行政区划 end ---------------------------------------->
-
 //5.表单 start---------------------------------------->
 let input = ref("");
 let value = ref("1");
@@ -383,7 +375,6 @@ const submitForm = () => {
 }
 //5.表单 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -412,11 +403,11 @@ const submitForm = () => {
         box-sizing: border-box;
         a {
             font-size: 16px;
-            color: #000; 
+            color: #000;
             line-height: 20px;
-            font-weight: normal!important; 
+            font-weight: normal !important;
             &:hover {
-                color:#333
+                color: #333
             }
         }
         span {
@@ -454,7 +445,7 @@ const submitForm = () => {
                 width: 50%;
                 img {
                     width: 288px;
-                    height: 288px; 
+                    height: 288px;
                     margin: 0 auto;
                     display: block;
                 }
@@ -495,7 +486,6 @@ const submitForm = () => {
                     font-size: 16px;
                 }
             }
-            
         }
         .search-left-box-result {
             .result-box {
@@ -578,9 +568,7 @@ const submitForm = () => {
                     }
                 }
             }
-            
         }
-        
         .search-left-reset-button {
             width: 100%;
             height: 40px;
@@ -595,8 +583,6 @@ const submitForm = () => {
                 font-size: 16px;
             }
         }
-        
-        
         .search-left-box-form {
             width: 100%;
             height: auto;
@@ -646,7 +632,7 @@ const submitForm = () => {
                     :deep(.el-input__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
@@ -655,14 +641,14 @@ const submitForm = () => {
                     :deep(.el-select__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
                         color: #333;
                     }
                     :deep(.el-input__inner) {
-                        color:#000
+                        color: #000
                     }
                 }
             }
@@ -707,7 +693,7 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -716,18 +702,18 @@ const submitForm = () => {
                 :deep(.el-select__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
                     color: #333;
                 }
                 :deep(.el-select__placeholder) {
-                    color:#000;
+                    color: #000;
                     font-weight: normal;
                 }
                 :deep(.el-input__inner) {
-                    color:#000;
+                    color: #000;
                 }
             }
             .search-right-input-box-2 {
@@ -744,7 +730,7 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -753,18 +739,18 @@ const submitForm = () => {
                 :deep(.el-select__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
                     color: #333;
                 }
                 :deep(.el-select__placeholder) {
-                    color:#000;
+                    color: #000;
                     font-weight: normal;
                 }
                 :deep(.el-input__inner) {
-                    color:#000;
+                    color: #000;
                 }
             }
             .search-right-button-box {
@@ -814,7 +800,7 @@ const submitForm = () => {
                     margin-left: 10px;
                 }
                 :deep(.el-select__placeholder) {
-                    color:#000;
+                    color: #000;
                 }
             }
         }
@@ -836,17 +822,348 @@ const submitForm = () => {
         }
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+//搜索
+.search-box {
+    width: 1400PX;
+    .search-left-box {
+        .no-result-box {
+            padding: 50PX;
+            margin-bottom: 20PX;
+            .no-result-image {
+                img {
+                    width: 288PX;
+                    height: 288PX;
+                }
+            }
+            .no-result-content {
+                width: 50%;
+                .no-result-title {
+                    height: auto;
+                    line-height: 22PX;
+                    font-size: 18PX;
+                }
+                .no-result-text {
+                    height: auto;
+                    margin-top: 11PX;
+                    line-height: 22PX;
+                    font-size: 16PX;
+                }
+                .no-result-button {
+                    width: 100PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    margin: 20PX auto;
+                    font-size: 16PX;
+                }
+            }
+        }
+        .search-left-box-result {
+            .result-box {
+                .result-box-title {
+                    height: 50PX;
+                    line-height: 50PX;
+                    font-size: 16PX;
+                    border: 1PX solid #000;
+                }
+                .result-box-content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    >div {
+                        height: 50PX;
+                        line-height: 50PX;
+                        border: 1PX solid #000;
+                        padding: 0 20PX;
+                        font-size: 16PX;
+                    }
+                }
+            }
+            .result-topic-box {
+                margin: 20PX 0;
+                .result-topic-title {
+                    border-bottom: 1PX solid #ccc;
+                    >div {
+                        width: 100PX;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                    }
+                }
+                .result-topic-content {
+                    border-bottom: 1PX solid #ccc;
+                    margin: 20PX 0;
+                    h3 {
+                        font-size: 18PX;
+                    }
+                    .result-topic-content-main {
+                        border: 1PX solid #ccc;
+                        margin: 10PX 0;
+                        padding: 10PX;
+                        >div {
+                            line-height: 30PX;
+                            font-size: 16PX;
+                        }
+                    }
+                    .result-topic-content-bottom {
+                        div {
+                            padding: 0 10PX;
+                            font-size: 14PX;
+                            line-height: 30PX;
+                        }
+                    }
+                }
+            }
+        }
+        .search-left-reset-button {
+            height: 40PX;
+            line-height: 40PX;
+            margin-top: 40PX;
+            >div {
+                width: 100PX;
+                height: 40PX;
+                font-size: 16PX;
+            }
+        }
+        .search-left-box-form {
+            border: 1PX solid #333;
+            padding: 20PX;
+            .search-form1-left-box {
+                .search-form1-title {
+                    font-size: 19PX;
+                    img {
+                        width: 24PX;
+                        height: 24PX;
+                        margin-right: 10PX;
+                    }
+                }
+                .search-form1-text {
+                    line-height: 30PX;
+                    margin: 20PX 0;
+                    font-size: 16PX;
+                }
+                .search-form1-input-box {
+                    margin-bottom: 20PX;
+                    div.inputText {
+                        font-size: 16PX;
+                    }
+                    input {
+                        height: 40PX;
+                        line-height: 40PX;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                    :deep(.el-input__inner) {
+                        color: #000
+                    }
+                }
+            }
+            .search-form1-wx {
+                >div {
+                    height: 30PX;
+                    line-height: 30PX;
+                    font-size: 16PX;
+                }
+            }
+        }
+    }
+    .search-right-box {
+        .search-right-box-form {
+            h3 {
+                line-height: 40PX;
+                font-size: 18PX;
+            }
+            .search-right-form-text {
+                height: 70PX;
+                line-height: 70PX;
+                font-size: 16PX;
+            }
+            .search-right-input-box {
+                margin-bottom: 20PX;
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-input-box-2 {
+                margin-bottom: 20PX;
+                .inputText {
+                    font-size: 16PX;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-button-box {
+                margin-bottom: 20PX;
+                button:first-child {
+                    margin-right: 20PX;
+                }
+                .submit-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                }
+                .reset-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    border: 1PX solid #027dc3;
+                }
+            }
+            .search-right-select-box {
+                font-size: 16PX;
+                margin-bottom: 20PX;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10PX;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        button {
+            width: 100PX;
+            height: 40PX;
+            line-height: 40PX;
+            font-size: 16PX;
+        }
+    }
+}
+.search-box .search-right-box .search-right-box-form .search-right-select-box {
+    word-break: keep-all;
+    white-space: nowrap;
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-left-box {
+        margin-bottom: 11px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 900px) {
+    .search-box .search-left-box .no-result-box .no-result-content .no-result-title {
+        margin-top: 133PX;
+    }
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .search-box {
+        display: block;
+    }
+    .search-box .search-left-box {
+        width: 100%;
+        float: none;
+    }
+    .search-box .search-right-box {
+        width: 100%;
+        float: none;
+    }
+}
 </style>
 <style>
 .custom-select-dropdown .el-select-dropdown__item {
-  font-size: 16px;
-  color: #333;
+    font-size: 16px;
+    color: #333;
 }
 .custom-select-dropdown .el-select-dropdown__item:hover {
-  background-color: #027dc3;
-  color: #fff;
+    background-color: #027dc3;
+    color: #fff;
 }
 </style>
-
-
-

components/zoom/diaoyanxuanti.vue

@@ -9,9 +9,9 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
-                <el-breadcrumb-item class="phone_breadcrumb_text">人员查询</el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">调研选题</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
     </div>
@@ -20,7 +20,7 @@
         <div class="search-left-box">
             <div class="dytlt">
                 <NuxtLink to="/">所有选题</NuxtLink>
-			</div>
+            </div>
             <ul class="xtlist">
                 <li>黑龙江建三江管理局前进农场金三角半地下门市污水倒灌问题及责任追溯调研</li>
                 <li>关于营口仙人岛祥烽旅游开发有限公司员工王勇的死亡赔偿纠纷一事进行调研核实</li>
@@ -44,8 +44,8 @@
                 <li>关于山西怀仁中能芦子沟何家堡煤业有限责任公司越界开釆一事进行调研</li>
             </ul>
             <div class="pagesnav">
-			    <a>更多选题请联系客服</a>
-			</div>
+                <a>更多选题请联系客服</a>
+            </div>
         </div>
         <div class="search-right-box">
             <!--选题查询-->
@@ -56,17 +56,18 @@
                 </div>
                 <div class="search-right-select-box">
                     地区：
-                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                             @click="change(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                             @click="change1(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </div>
@@ -98,16 +99,13 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 //获得详情id
@@ -115,8 +113,8 @@ const articleId = parseInt(route.params.id); //获得该页面的id
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -128,12 +126,12 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //1.2 获得父级栏目的名称、id
@@ -156,7 +154,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -167,7 +164,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -181,15 +177,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -207,10 +203,10 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
@@ -218,7 +214,7 @@ getPageData();
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -233,38 +229,35 @@ onMounted(async ()  => {
     adImg1.value = resultAd1.data[0];
 })
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -331,10 +324,9 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
 //4.展示行政区划 end ---------------------------------------->
-
 //5.表单 start---------------------------------------->
 let input = ref("");
 let value = ref("1");
@@ -344,7 +336,6 @@ const submitForm = () => {
 }
 //5.表单 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -374,9 +365,9 @@ const submitForm = () => {
         a {
             font-size: 16px;
             line-height: 20px;
-            font-weight: normal!important; 
+            font-weight: normal !important;
             &:hover {
-                color:#333
+                color: #333
             }
         }
         span {
@@ -469,7 +460,7 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -478,7 +469,7 @@ const submitForm = () => {
                 :deep(.el-select__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -557,17 +548,214 @@ const submitForm = () => {
         }
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.search-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+//搜索
+.search-box {
+    width: 1400PX;
+    .search-left-box {
+        .dytlt {
+            height: 40PX;
+            line-height: 40PX;
+            margin: 0PX auto 20PX;
+            border-bottom: 1PX solid #ccc;
+            a {
+                width: 100PX;
+                height: 40PX;
+                font-size: 16PX;
+            }
+        }
+        .xtlist {
+            width: 100%;
+            li {
+                height: 40PX;
+                line-height: 40PX;
+                border-bottom: 1PX solid #ccc;
+            }
+        }
+        .pagesnav {
+            margin: 20PX 0 40PX 0;
+            a {
+                padding: 6PX 12PX;
+                margin-left: -1PX;
+                border: 1PX solid #ddd;
+                font-size: 10PX;
+                border-radius: 4PX;
+            }
+        }
+    }
+    .search-right-box {
+        .search-right-box-form {
+            h3 {
+                line-height: 40PX;
+                font-size: 18PX;
+            }
+            .search-right-form-text {
+                height: 70PX;
+                line-height: 70PX;
+                font-size: 16PX;
+            }
+            .search-right-input-box {
+                margin-bottom: 20PX;
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-button-box {
+                margin-bottom: 20PX;
+                button:first-child {
+                    margin-right: 20PX;
+                }
+                .submit-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                }
+                .reset-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    border: 1PX solid #027dc3;
+                }
+            }
+            .search-right-select-box {
+                font-size: 16PX;
+                margin-bottom: 20PX;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10PX;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        button {
+            width: 100PX;
+            height: 40PX;
+            line-height: 40PX;
+            font-size: 16PX;
+        }
+    }
+}
+.xtlist li {
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        display: block;
+    }
+    .search-left-box {
+        width: 60%;
+        float: left;
+    }
+    .search-right-box {
+        float: right;
+    }
+    .search-box .search-right-box .search-right-box-form .search-right-select-box {
+        word-break: keep-all;
+        white-space: nowrap;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .search-left-box {
+        width: 100%;
+    }
+    .search-right-box {
+        display: none;
+    }
+}
 </style>
 <style>
 .custom-select-dropdown .el-select-dropdown__item {
-  font-size: 16px;
-  color: #333;
+    font-size: 16px;
+    color: #333;
 }
 .custom-select-dropdown .el-select-dropdown__item:hover {
-  background-color: #027dc3;
-  color: #fff;
+    background-color: #027dc3;
+    color: #fff;
 }
 </style>
-
-
-

components/zoom/dishizhongxin.vue

@@ -9,7 +9,7 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item class="phone_breadcrumb_text">地市中心</el-breadcrumb-item>
             </el-breadcrumb>
@@ -19,7 +19,7 @@
     <div class="search-result-box">
         <div class="search-result-box-title">
             本地区暂未开通调研中心，欢迎有意从事法制公益性工作的公民或法人单位申请代理。
-            <br/>
+            <br />
             详情咨询电话：010-56212745、010-53382908、010-56212741。
         </div>
         <div class="search-result-box-qq">
@@ -38,17 +38,18 @@
         <div class="search-left-box">
             <div>
                 <span class="search-left-box-text">地区：</span>
-                <el-select v-model="province" placeholder="--" size="large" style="width: 180px" popper-class="custom-select-dropdown">
-                    <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
-                        @click="change(item.id)" :value="item.id" />
+                <el-select v-model="province" placeholder="--" size="large" style="width: 180px"
+                    popper-class="custom-select-dropdown">
+                    <el-option v-for="item in provinceList" :key="item.id" :label="item.name" @click="change(item.id)"
+                        :value="item.id" />
                 </el-select>
-                <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
-                    style="width: 180px" popper-class="custom-select-dropdown">
+                <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 180px"
+                    popper-class="custom-select-dropdown">
                     <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                         @click="change1(item.id)" :value="item.id" />
                 </el-select>
-                <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
-                    style="width: 180px" popper-class="custom-select-dropdown">
+                <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 180px"
+                    popper-class="custom-select-dropdown">
                     <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                 </el-select>
             </div>
@@ -122,10 +123,10 @@
                 </div>
             </div>
             <div class="cityname">
-				<div class="sheng">
+                <div class="sheng">
                     <NuxtLink to="/">四川</NuxtLink>
                 </div>
-				<div class="shi">
+                <div class="shi">
                     <NuxtLink to="/">成都市</NuxtLink>
                     <NuxtLink to="/">自贡市</NuxtLink>
                     <NuxtLink to="/">攀枝花市</NuxtLink>
@@ -154,11 +155,10 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
@@ -169,8 +169,8 @@ const articleId = parseInt(route.params.id); //获得该页面的id
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -182,12 +182,12 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //1.2 获得父级栏目的名称、id
@@ -210,7 +210,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -221,7 +220,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -235,15 +233,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -261,10 +259,10 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
@@ -272,7 +270,7 @@ getPageData();
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -287,38 +285,35 @@ onMounted(async ()  => {
     adImg1.value = resultAd1.data[0];
 })
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -385,10 +380,9 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
 //4.展示行政区划 end ---------------------------------------->
-
 //5.表单 start---------------------------------------->
 let input = ref("");
 let value = ref("1");
@@ -398,7 +392,6 @@ const submitForm = () => {
 }
 //5.表单 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -428,9 +421,9 @@ const submitForm = () => {
         a {
             font-size: 16px;
             line-height: 20px;
-            font-weight: normal!important; 
+            font-weight: normal !important;
             &:hover {
-                color:#333
+                color: #333
             }
         }
         span {
@@ -471,7 +464,7 @@ const submitForm = () => {
                 margin-left: 10px;
             }
             :deep(.el-select__placeholder) {
-                color:#000;
+                color: #000;
             }
         }
         >button {
@@ -625,12 +618,246 @@ const submitForm = () => {
         a {
             color: red;
             font-weight: bold;
-            font-size:10px;
+            font-size: 10px;
+        }
+    }
+}
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.search-box {
+    width: 1400PX;
+    .search-left-box {
+        >div {
+            .search-left-box-text {
+                font-size: 16PX;
+                word-break: keep-all;
+                white-space: nowrap;
+            }
+            :deep(.el-select__wrapper) {
+                margin-left: 10PX;
+            }
+        }
+        >button {
+            font-size: 14PX;
+            border: 1PX solid transparent;
+            border-radius: 4PX;
+            height: 35PX;
+            line-height: 35PX;
+        }
+    }
+    .search-right-box {
+        margin-right: 50PX;
+        >div {
+            height: 30PX;
+            line-height: 30PX;
+            font-size: 16PX;
+        }
+    }
+}
+.search-list-box {
+    width: 1400PX;
+    border: 1PX solid #ccc;
+    margin: 30PX auto;
+    .search-list-box-title {
+        width: 150PX;
+        height: 50PX;
+        line-height: 50PX;
+        font-size: 30PX;
+        top: -25PX;
+        left: 20PX;
+    }
+    .search-list-box-main {
+        padding: 30PX;
+        border-bottom: 1PX solid #ccc;
+        a {
+            font-size: 16PX;
+            padding: 0 10PX;
+        }
+    }
+    .search-list-box-content {
+        .cityname {
+            border-bottom: 1PX solid #ccc;
+        }
+        .sheng {
+            font-size: 20PX;
+        }
+        .shi {
+            font-size: 16PX;
+            padding: 0 5PX;
+            border-left: 1PX solid #ccc;
+            line-height: 40PX;
+            a {
+                font-size: 16PX;
+                padding: 0 5PX;
+            }
+        }
+    }
+}
+//返回查询结果
+.search-result-box {
+    width: 500PX;
+    margin: 80PX auto;
+    border: 1PX solid #ccc;
+    .search-result-box-title {
+        line-height: 30PX;
+        width: 488PX;
+        padding: 6PX 6PX 0 6PX;
+        font-size: 15PX;
+    }
+    .search-result-box-qq {
+        line-height: 30PX;
+        width: 488PX;
+        padding: 0 6PX 0 6PX;
+        font-size: 15PX;
+        div:nth-child(2) {
+            margin-left: 80PX;
+            img {
+                margin-right: 20PX;
+            }
+        }
+    }
+    .search-result-box-back {
+        width: 488PX;
+        height: 40PX;
+        line-height: 48PX;
+        a {
+            font-size: 10PX;
         }
     }
 }
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box .search-left-box>button {
+        width: 111px;
+        margin-left: 11PX;
+    }
+    .search-list-box {
+        width: 96%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .search-box {
+        display: block;
+    }
+    .search-box .search-right-box {
+        margin: 4px auto 0px;
+        width: 222PX;
+    }
+    :deep(.el-select--large) .el-select__wrapper {
+        padding: 4PX 6PX;
+    }
+    :deep(.el-select__selection) {
+        min-width: 50PX;
+    }
+    .search-box .search-left-box>div {
+        width: 100%;
+        display: block;
+        overflow: hidden;
+    }
+    .search-box .search-left-box>div>* {
+        float: left;
+        width: auto !important;
+    }
+    .search-box .search-left-box>div :deep(.el-select__wrapper) {
+        width: 90PX;
+    }
+    .search-box .search-left-box {
+        width: 100%;
+        display: block;
+        overflow: hidden;
+    }
+    .search-box .search-left-box>button {
+        margin: 11PX auto 0px;
+    }
+    .search-result-box {
+        width: 90%;
+        margin: 30px auto;
+    }
+    .search-result-box .search-result-box-title {
+        width: 100%;
+    }
+    .search-list-box {
+        width: 96%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 55PX auto 0px;
+    }
+    .search-result-box .search-result-box-back {
+        width: 97%;
+    }
+    .search-result-box .search-result-box-qq div:nth-child(2) {
+        margin-left: 0px;
+    }
+}
 </style>
-
-
-
-

components/zoom/jieshaoxinchaxun.vue

@@ -9,9 +9,9 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
-                <el-breadcrumb-item class="phone_breadcrumb_text">车辆查询</el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">介绍信查询</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
     </div>
@@ -22,7 +22,9 @@
                 <span class="search-left-box-text">介绍信编号：</span>
                 <el-input v-model="input" placeholder="" />
             </div>
-            <div><NuxtLink to="/">（查看位置示例）</NuxtLink></div>
+            <div>
+                <NuxtLink to="/">（查看位置示例）</NuxtLink>
+            </div>
             <button>搜索</button>
         </div>
         <div class="search-right-box">
@@ -30,7 +32,6 @@
             <div>手机扫描查询</div>
         </div>
     </div>
-    
     <!--查询：查询状态-->
     <div class="search-box">
         <div class="search-left-box">
@@ -61,7 +62,7 @@
                     <div class="search-form1-text">请输入您要查询的介绍信编号</div>
                     <div class="search-form1-input-box">
                         <div class="inputText">介绍信编号:</div>
-                        <el-input v-model="input" placeholder="请输入汽车牌照" style="width: 300px"/>
+                        <el-input v-model="input" placeholder="请输入汽车牌照" style="width: 300px" />
                         <NuxtLink to="/">（查看位置示例）</NuxtLink>
                         <button>查询</button>
                     </div>
@@ -124,16 +125,13 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 //获得详情id
@@ -141,8 +139,8 @@ const articleId = parseInt(route.params.id); //获得该页面的id
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -154,12 +152,12 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //1.2 获得父级栏目的名称、id
@@ -182,7 +180,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -193,7 +190,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -207,15 +203,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -233,10 +229,10 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
@@ -244,7 +240,7 @@ getPageData();
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -259,38 +255,35 @@ onMounted(async ()  => {
     adImg1.value = resultAd1.data[0];
 })
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -357,10 +350,9 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
 //4.展示行政区划 end ---------------------------------------->
-
 //5.表单 start---------------------------------------->
 let input = ref("");
 let value = ref("1");
@@ -370,7 +362,6 @@ const submitForm = () => {
 }
 //5.表单 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -399,11 +390,11 @@ const submitForm = () => {
         box-sizing: border-box;
         a {
             font-size: 16px;
-            color: #000; 
+            color: #000;
             line-height: 20px;
-            font-weight: normal!important; 
+            font-weight: normal !important;
             &:hover {
-                color:#333
+                color: #333
             }
         }
         span {
@@ -512,7 +503,7 @@ const submitForm = () => {
                 width: 50%;
                 img {
                     width: 288px;
-                    height: 288px; 
+                    height: 288px;
                     margin: 0 auto;
                     display: block;
                 }
@@ -639,12 +630,12 @@ const submitForm = () => {
                         text-decoration: none;
                         line-height: 40px;
                         white-space: nowrap;
-                        font-size:12px;
+                        font-size: 12px;
                     }
                     :deep(.el-input__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
@@ -653,14 +644,14 @@ const submitForm = () => {
                     :deep(.el-select__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
                         color: #333;
                     }
                     :deep(.el-input__inner) {
-                        color:#000
+                        color: #000
                     }
                 }
             }
@@ -699,14 +690,14 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
                     color: #333;
                 }
                 :deep(.el-input__inner) {
-                    color:#000;
+                    color: #000;
                 }
             }
             .search-right-input-box-2 {
@@ -723,7 +714,7 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -732,18 +723,18 @@ const submitForm = () => {
                 :deep(.el-select__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
                     color: #333;
                 }
                 :deep(.el-select__placeholder) {
-                    color:#000;
+                    color: #000;
                     font-weight: normal;
                 }
                 :deep(.el-input__inner) {
-                    color:#000;
+                    color: #000;
                 }
             }
             .search-right-button-box {
@@ -793,23 +784,374 @@ const submitForm = () => {
                     margin-left: 10px;
                 }
                 :deep(.el-select__placeholder) {
-                    color:#000;
+                    color: #000;
                 }
             }
         }
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.search-box-long {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+//搜索-查询状态2
+.search-box {
+    width: 1400PX;
+    .search-left-box {
+        .no-result-box {
+            padding: 50PX;
+            margin-bottom: 20PX;
+            .no-result-image {
+                img {
+                    width: 288PX;
+                    height: 288PX;
+                }
+            }
+            .no-result-content {
+
+                
+                .no-result-title {
+                    height:auto;
+                    line-height: 22PX;
+                    font-size: 18PX;
+                }
+                .no-result-text {
+                    height:auto; margin-top:11PX;
+                    line-height: 22PX;
+                    font-size: 16PX;
+                }
+                .no-result-button {
+                    width: 100PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    margin: 20PX auto;
+                    font-size: 16PX;
+                }
+            }
+        }
+        .search-left-reset-button {
+            height: 40PX;
+            line-height: 40PX;
+            margin-top: 40PX;
+            >div {
+                width: 100PX;
+                height: 40PX;
+                font-size: 16PX;
+            }
+        }
+        .search-left-box-form {
+            border: 1PX solid #333;
+            padding: 20PX;
+            .search-form1-left-box {
+                .search-form1-title {
+                    font-size: 19PX;
+                    img {
+                        width: 24PX;
+                        height: 24PX;
+                        margin-right: 10PX;
+                    }
+                }
+                .search-form1-text {
+                    line-height: 30PX;
+                    margin: 20PX 0;
+                    font-size: 16PX;
+                }
+                .search-form1-input-box {
+                    margin-bottom: 20PX;
+                    div.inputText {
+                        font-size: 16PX;
+                    }
+                    input {
+                        height: 40PX;
+                        line-height: 40PX;
+                    }
+                    button {
+                        width: 100PX;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                    }
+                    a {
+                        line-height: 40PX;
+                        font-size: 12PX;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                }
+            }
+        }
+    }
+    .search-right-box {
+        .search-right-box-form {
+            h3 {
+                line-height: 40PX;
+                font-size: 18PX;
+            }
+            .search-right-form-text {
+                height: 70PX;
+                line-height: 70PX;
+                font-size: 16PX;
+            }
+            .search-right-input-box {
+                margin-bottom: 20PX;
+                .inputText {
+                    font-size: 16PX;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-input-box-2 {
+                margin-bottom: 20PX;
+                .inputText {
+                    font-size: 16PX;
+                }
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-button-box {
+                margin-bottom: 20PX;
+                button:first-child {
+                    margin-right: 20PX;
+                }
+                .submit-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                }
+                .reset-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    border: 1PX solid #027dc3;
+                }
+            }
+            .search-right-select-box {
+                font-size: 16PX;
+                margin-bottom: 20PX;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10PX;
+                }
+            }
+        }
+    }
+}
+//搜索-原始状态2
+.search-box-long {
+    width: 1400PX;
+    .search-left-box {
+        >div {
+            .search-left-box-text {
+                font-size: 16PX;
+            }
+            a {
+                font-size: 11PX;
+            }
+        }
+        >button {
+            font-size: 14PX;
+            border: 1PX solid transparent;
+            border-radius: 4PX;
+            height: 35PX;
+            line-height: 35PX;
+        }
+    }
+    .search-right-box {
+        margin-right: 50PX;
+        >div {
+            height: 30PX;
+            line-height: 30PX;
+            font-size: 16PX;
+        }
+    }
+}
+@media screen and (min-width: 1401px) {}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box-long {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-input-box div.inputText {
+        width: auto;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {}
+@media screen and (max-width: 900px) {
+    .search-box .search-left-box .no-result-box .no-result-content .no-result-title{margin-top:133PX;}
+
+}
+@media screen and (max-width: 800px) {
+    .search-box-long {
+        display: block;
+    }
+    .search-box-long .search-right-box {
+        width: 222PX;
+        float: none;
+        margin: 11PX auto;
+    }
+    .search-box {
+        display: block;
+    }
+    .search-box .search-left-box {
+        width: 100%;
+    }
+    .search-box .search-right-box {
+        width: 100%;
+    }
+    .search-box-long .search-left-box>div .search-left-box-text {
+        width: auto;
+        float: left;
+        height: 32PX;
+        line-height: 32PX;
+    }
+    .search-box-long .search-left-box>button {
+        width: auto;
+        padding: 0px 10PX;margin:0PX 0px 0px 100PX;
+         
+    }
+    .search-left-box :deep(.el-input) {
+        width: 180PX !important;margin-right:4PX;
+        float: left;
+    }
+    :deep(.el-input__wrapper) {
+        width: 100%;
+        float: left;
+        padding: 0px 2PX;
+    }
+    :deep(.el-input__inner) {
+        width: 100%;
+        float: left;
+    }
+    .search-box-long .search-left-box {
+        width: 100%;
+        display: block;
+        margin-top: 22PX;
+    }
+    .search-box-long .search-left-box>div:first-child {
+        width: auto;
+        display: block;
+        overflow: hidden;
+        float: left;
+    }
+    .search-box-long .search-left-box>div {
+        display: block;
+        float: left;
+    }
+    .search-box-long .search-left-box>div a {
+        height: 32PX;
+        line-height: 32PX;
+        float: left;
+    }
+    .search-box .search-left-box .search-left-box-form .search-form1-left-box .search-form1-input-box {
+        width: 100%;
+    }
+    .search-box .search-left-box .search-left-box-form {
+        padding: 10PX;
+    }
+
+}
+
+
+
 </style>
 <style>
 .custom-select-dropdown .el-select-dropdown__item {
-  font-size: 16px;
-  color: #333;
+    font-size: 16px;
+    color: #333;
 }
 .custom-select-dropdown .el-select-dropdown__item:hover {
-  background-color: #027dc3;
-  color: #fff;
+    background-color: #027dc3;
+    color: #fff;
 }
 </style>
-
-
-

components/zoom/renyuanchaxun.vue

@@ -9,7 +9,7 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item class="phone_breadcrumb_text">人员查询</el-breadcrumb-item>
             </el-breadcrumb>
@@ -152,17 +152,18 @@
                 </div>
                 <div class="search-right-select-box">
                     地区：
-                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="province" placeholder="--" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in provinceList" :key="item.id" :label="item.name"
                             @click="change(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                             @click="change1(item.id)" :value="item.id" />
                     </el-select>
-                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large"
-                        style="width: 120px" popper-class="custom-select-dropdown">
+                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 120px"
+                        popper-class="custom-select-dropdown">
                         <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
                 </div>
@@ -179,16 +180,13 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElMessage,ElInput,ElSelect,ElOption } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 //获得详情id
@@ -196,8 +194,8 @@ const articleId = parseInt(route.params.id); //获得该页面的id
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -209,12 +207,12 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //1.2 获得父级栏目的名称、id
@@ -237,7 +235,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -248,7 +245,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -262,15 +258,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -288,10 +284,10 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
@@ -299,7 +295,7 @@ getPageData();
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -314,38 +310,35 @@ onMounted(async ()  => {
     adImg1.value = resultAd1.data[0];
 })
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.展示行政区划 start ---------------------------------------->
 //let areaList = ref("")
 //4.1 省
@@ -412,10 +405,9 @@ onMounted(async () => {
         if (navigationElement) {
             navigationElement.scrollLeft = distanceToParentLeft - 66;
         }
-    }             
+    }
 })
 //4.展示行政区划 end ---------------------------------------->
-
 //5.表单 start---------------------------------------->
 let input = ref("");
 let value = ref("1");
@@ -425,7 +417,6 @@ const submitForm = () => {
 }
 //5.表单 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -455,9 +446,9 @@ const submitForm = () => {
         a {
             font-size: 16px;
             line-height: 20px;
-            font-weight: normal!important; 
+            font-weight: normal !important;
             &:hover {
-                color:#333
+                color: #333
             }
         }
         span {
@@ -495,7 +486,7 @@ const submitForm = () => {
                 width: 50%;
                 img {
                     width: 288px;
-                    height: 288px; 
+                    height: 288px;
                     margin: 0 auto;
                     display: block;
                 }
@@ -536,7 +527,6 @@ const submitForm = () => {
                     font-size: 16px;
                 }
             }
-            
         }
         .search-left-box-result {
             .result-box {
@@ -631,9 +621,7 @@ const submitForm = () => {
                     }
                 }
             }
-            
         }
-        
         .search-left-reset-button {
             width: 100%;
             height: 40px;
@@ -648,8 +636,6 @@ const submitForm = () => {
                 font-size: 16px;
             }
         }
-        
-        
         .search-left-box-form {
             width: 100%;
             height: auto;
@@ -699,7 +685,7 @@ const submitForm = () => {
                     :deep(.el-input__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
@@ -708,7 +694,7 @@ const submitForm = () => {
                     :deep(.el-select__wrapper) {
                         height: 40px;
                         line-height: 40px;
-                        border:1px solid #000;
+                        border: 1px solid #000;
                         box-shadow: none;
                         border-radius: 2px;
                         font-size: 16px;
@@ -763,7 +749,7 @@ const submitForm = () => {
                 :deep(.el-input__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -772,7 +758,7 @@ const submitForm = () => {
                 :deep(.el-select__wrapper) {
                     height: 40px;
                     line-height: 40px;
-                    border:1px solid #000;
+                    border: 1px solid #000;
                     box-shadow: none;
                     border-radius: 2px;
                     font-size: 16px;
@@ -819,6 +805,8 @@ const submitForm = () => {
                 }
             }
             .search-right-select-box {
+                word-break: keep-all;
+                white-space: nowrap;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -851,17 +839,358 @@ const submitForm = () => {
         }
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.search-box {
+    width: 1400PX;
+    .search-left-box {
+        width: 60%;
+        .no-result-box {
+            padding: 40PX;
+            margin-bottom: 20PX;
+            .no-result-image {
+                img {
+                    width: 288PX;
+                    height: 288PX;
+                }
+            }
+            .no-result-content {
+                width: 50%;
+                .no-result-title {
+                    height: auto;
+                    line-height: 22PX;
+                    font-size: 18PX;
+                }
+                .no-result-text {
+                    height: auto;
+                    margin-top: 11PX;
+                    line-height: 22PX;
+                    font-size: 16PX;
+                }
+                .no-result-button {
+                    width: 100PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    margin: 20PX auto;
+                    font-size: 16PX;
+                }
+            }
+        }
+        .search-left-box-result {
+            .result-box {
+                .result-title {
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 18PX;
+                    a {
+                        font-size: 18PX;
+                    }
+                }
+                .result-content {
+                    margin: 20PX 0;
+                    .result-content-left {
+                        div {
+                            height: 40PX;
+                            line-height: 40PX;
+                            padding-left: 70PX;
+                            font-size: 16PX;
+                        }
+                    }
+                    .result-content-right {
+                        width: 50%;
+                        img {
+                            width: 120PX;
+                            height: 166PX;
+                            margin-top: 10PX;
+                        }
+                    }
+                }
+            }
+            .result-topic-box {
+                margin: 20PX 0;
+                .result-topic-title {
+                    border-bottom: 1PX solid #ccc;
+                    >div {
+                        width: 100PX;
+                        height: 40PX;
+                        line-height: 40PX;
+                        font-size: 16PX;
+                    }
+                }
+                .result-topic-content {
+                    border-bottom: 1PX solid #ccc;
+                    margin: 20PX 0;
+                    h3 {
+                        font-size: 18PX;
+                    }
+                    .result-topic-content-main {
+                        border: 1PX solid #ccc;
+                        margin: 10PX 0;
+                        padding: 10PX;
+                        >div {
+                            width: 100%;
+                            line-height: 30PX;
+                            font-size: 16PX;
+                        }
+                    }
+                    .result-topic-content-bottom {
+                        div {
+                            padding: 0 10PX;
+                            font-size: 14PX;
+                            line-height: 30PX;
+                        }
+                    }
+                }
+            }
+        }
+        .search-left-reset-button {
+            width: 100%;
+            height: 40PX;
+            line-height: 40PX;
+            margin-top: 40PX;
+            >div {
+                width: 100PX;
+                height: 40PX;
+                font-size: 16PX;
+            }
+        }
+        .search-left-box-form {
+            width: 100%;
+            border: 1PX solid #333;
+            padding: 20PX;
+            .search-form1-left-box {
+                .search-form1-title {
+                    font-size: 19PX;
+                    img {
+                        width: 24PX;
+                        height: 24PX;
+                        margin-right: 10PX;
+                    }
+                }
+                .search-form1-text {
+                    line-height: 30PX;
+                    margin: 20PX 0;
+                    font-size: 16PX;
+                }
+                .search-form1-input-box {
+                    margin-bottom: 20PX;
+                    div.inputText {
+                        font-size: 16PX;
+                    }
+                    input {
+                        height: 40PX;
+                        line-height: 40PX;
+                    }
+                    :deep(.el-input__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                    :deep(.el-select__wrapper) {
+                        height: 40PX;
+                        line-height: 40PX;
+                        border: 1PX solid #000;
+                        border-radius: 2PX;
+                        font-size: 16PX;
+                    }
+                }
+            }
+            .search-form1-wx {
+                >div {
+                    height: 30PX;
+                    line-height: 30PX;
+                    font-size: 16PX;
+                }
+            }
+        }
+    }
+    .search-right-box {
+        .search-right-box-form {
+            h3 {
+                line-height: 40PX;
+                font-size: 18PX;
+            }
+            .search-right-form-text {
+                height: 70PX;
+                line-height: 70PX;
+                font-size: 16PX;
+            }
+            .search-right-input-box {
+                margin-bottom: 20PX;
+                :deep(.el-input__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+                :deep(.el-select__wrapper) {
+                    height: 40PX;
+                    line-height: 40PX;
+                    border: 1PX solid #000;
+                    border-radius: 2PX;
+                    font-size: 16PX;
+                }
+            }
+            .search-right-button-box {
+                margin-bottom: 20PX;
+                button:first-child {
+                    margin-right: 20PX;
+                }
+                .submit-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    color: #fff;
+                }
+                .reset-button {
+                    width: 90PX;
+                    height: 40PX;
+                    line-height: 40PX;
+                    font-size: 16PX;
+                    border: 1PX solid #027dc3;
+                }
+            }
+            .search-right-select-box {
+                font-size: 16PX;
+                margin-bottom: 20PX;
+                :deep(.el-select__wrapper) {
+                    margin-left: 10PX;
+                }
+            }
+        }
+    }
+    .search-form1-submit-button {
+        button {
+            width: 100PX;
+            height: 40PX;
+            line-height: 40PX;
+            font-size: 16PX;
+        }
+    }
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-box {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+    .search-left-box {
+        margin-bottom: 11px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 900px) {
+    .search-box .search-left-box .no-result-box .no-result-content .no-result-title {
+        margin-top: 133PX;
+    }
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .search-box {
+        display: block;
+    }
+    .search-box .search-left-box {
+        width: 100%;
+        float: none;
+    }
+    .search-box .search-right-box {
+        width: 100%;
+        float: none;
+    }
+    .search-box .search-left-box .search-left-box-result .result-box .result-content .result-content-left div {
+        padding-left: 4PX;
+    }
+    .search-box .search-left-box .search-left-box-result .result-box .result-content .result-content-left div span {
+        word-break: keep-all;
+        white-space: nowrap;
+    }
+    .search-box .search-left-box .search-left-box-result .result-box .result-content .result-content-left {
+        width: 56%;
+    }
+    .search-box .search-left-box .search-left-box-result .result-box .result-content .result-content-right {
+        width: 40%;
+    }
+    .search-box .search-left-box .search-left-box-result .result-box .result-content .result-content-left div {
+        line-height: 40PX;
+        height: auto;
+        word-break: break-all;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+    .search-box .search-left-box .search-left-box-result .result-topic-box .result-topic-content .result-topic-content-bottom div {
+        font-size: 14px;
+        padding: 0px 8px;
+    }
+}
 </style>
 <style>
 .custom-select-dropdown .el-select-dropdown__item {
-  font-size: 16px;
-  color: #333;
+    font-size: 16px;
+    color: #333;
 }
 .custom-select-dropdown .el-select-dropdown__item:hover {
-  background-color: #027dc3;
-  color: #fff;
+    background-color: #027dc3;
+    color: #fff;
 }
 </style>
-
-
-

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

@@ -1040,4 +1040,91 @@ const closePreview = () => {
         }
     }
 }
+
+
+
+.breadcrumb-box{width:1400PX;margin:0px auto 0px; }
+.el-breadcrumb{height:22PX;line-height:22PX;}
+.breadcrumb-box .inner span.location{font-size:16PX;;height:22PX;;line-height:22PX; font-weight:normal;word-break: keep-all; white-space: nowrap;}
+.breadcrumb-box .inner a{font-size:16PX;;height:22PX;line-height:22PX;display:inline-block; font-weight:normal;}
+
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner{font-size:16PX;;height:22PX;line-height:22PX;
+                             font-weight:normal;}
+
+
+
+
+.breadcrumb-box:deep(.el-icon){width:16PX;height:16PX;}
+.breadcrumb-box .inner span{font-size:16PX;height:22PX;line-height:22PX;}   
+
+.el-breadcrumb__inner{}
+.newsDetail{box-sizing:border-box;overflow:hidden;width:1400PX; margin:0px auto 0px;}
+.newsDetail .inner{display:block;overflow:hidden;width:100%;}
+
+.newsDetail .inner .innerLeft .LeftTop > h1{font-size:24PX;line-height:33PX;}
+.newsDetail .inner .innerLeft .LeftTop > p span{font-size:14PX;}
+.newsDetail .inner .innerLeft .leftBottom{font-size:18PX;line-height:22px;}
+
+.newsDetail .inner .innerLeft .recommendRead .recommendReadTitle{height:33PX;line-height:33PX;}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{height:33PX;line-height:33PX;font-size:16PX;width:auto;box-sizing:border-box;float:left;}
+
+.newsDetail .inner .innerLeft{float:left;width:64%;overflow:hidden;margin-right:0px;}
+.newsDetail .inner .innerRight{float:right;width:33%;overflow:hidden;}
+.innerRight .hotList2{width:100%;}
+ 
+
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList{}
+
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle{
+                            line-height:33PX;height:33PX; 
+}
+
+
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a{
+                            line-height:33PX;height:33PX;padding-right:22PX;box-sizing:border-box;
+                            font-size:16PX; width:90%;float:left;
+                            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+                        
+                        }
+
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle:nth-child(1)::after {
+                            font-size:14PX;margin-top:1PX;
+}
+.prevNext a{height:22PX;line-height:22PX;font-size:14PX;width:100%;
+            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;    
+}
+ 
+
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+
+@media screen and (max-width: 1400px) {
+        .breadcrumb-box{width:100%;margin:0px auto 0px;  box-sizing:border-box;padding:0px 10px;}
+        .newsDetail{width:100%;margin:0px auto 0px;  box-sizing:border-box;padding:0px 10px;overflow:hidden;} 
+
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+     
+    .newsDetail .inner{display:block;width:100%;}
+    .newsDetail .inner .innerLeft{width:100%;}
+    .newsDetail .inner .innerRight{width:100%;}
+
+    .breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner{width:100PX;
+        display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+    }
+
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{width:auto;}
+    .newsDetail .inner .innerLeft .leftBottom{line-height:33PX;}
+
+}
+
+
+
+
 </style>

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

@@ -23,16 +23,29 @@
         <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">
-                                {{ item.title }}
+                             <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>
-                            <p>
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </p>
+                             
+
                         </li>
                     </ul>
                     <!-- 分页器 -->
@@ -349,11 +362,7 @@ onMounted(async ()  => {
                         font-size: 20px;
                         font-weight: bold;
                         color: #333;
-                        overflow: hidden;
-                        word-break: keep-all;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
+                         
                     }
                     p {
                         a {
@@ -390,6 +399,7 @@ onMounted(async ()  => {
     .el-pagination::v-deep :hover {
         color: #139609;
     }
+
     .el-pagination.is-background::v-deep .btn-next,
     .el-pagination.is-background::v-deep .btn-prev {
         width: 70px;
@@ -417,6 +427,131 @@ onMounted(async ()  => {
         margin-left: 20px;
     }
 }
+    
+ 
+
+.breadcrumb-box{width:1400PX;margin:0px auto 0px; }
+.el-breadcrumb{height:22PX;line-height:22PX;}
+.breadcrumb-box .inner span.location{font-size:16PX;;height:22PX;;line-height:22PX; font-weight:normal;}
+.breadcrumb-box .inner a{font-size:16PX;;height:22PX;line-height:22PX;display:inline-block; font-weight:normal;}
+
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner{font-size:16PX;;height:22PX;line-height:22PX;
+                             font-weight:normal;}
+
+.breadcrumb-box:deep(.el-icon){width:16PX;height:16PX;}
+ .breadcrumb-box .inner span{font-size:16PX;;height:22PX;line-height:22PX;}   
+
+.newsList{width:1400PX;box-sizing:border-box; }
+.newsList .listBox{display:block;width:100%;overflow:hidden;}
+
+.newsList .listBox .listBoxLeft{float:left;width:64%;overflow:hidden;}
+.newsList .listBox .listBoxRight{float:right;width:33%;overflow:hidden;}
+
+.newsList .listBox .listBoxLeft .list > li{display:block;
+                margin-top:22PX;padding-bottom:22PX;}
+
+ 
+.li_img_box{float:left;width:160PX;height:110PX;margin-right:11px;}
+.li_img_box *{display:block;width:100%;height:100%;}
+
+.li_right_box{ }
+.li_h4_dot1{height:22PX;line-height:22PX;font-size:20PX;font-weight:bold;color:#333;
+            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.li_dot3{height:72PX;line-height:24PX;font-size:14PX;color:#333;
+        font-weight:normal;margin-top:4px;
+     overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;    
+}
+
+.newsList .listBox .listBoxLeft .list > li a{display:block;width:100%;
+            height:auto;overflow:hidden;}
+
+ .pagination{padding:10px 0px;margin:10px 0px;}
+
+
+ 
+//分页
+.pagination {
+    height: 34PX;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 20PX 0;
+    padding: 20PX 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #139609;
+    }
+
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70PX;
+        height: 34PX;
+        margin: 0px 10PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10PX;
+        width: 38PX;
+        height: 34PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #337ab7;
+        color: #fff;
+    }
+    .total {
+        display: block;
+        height: 34PX;
+        line-height: 34PX;
+        font-size: 18PX;
+        margin-left: 20PX;
+    }
+ 
+    
+}
+
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+
+@media screen and (max-width: 1400px) {
+        .breadcrumb-box{width:100%;margin:0px auto 0px; box-sizing:border-box;padding:0px 10px;}
+        .newsList{width:100%;box-sizing:border-box;padding:0px 10px;margin:0px auto 0px;}
+
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+     
+        .listBoxLeft{width:100%!important;float:none!important;}
+        .listBoxRight{width:100%!important;float:none!important;}
+
+
+        .el-pagination.is-background::v-deep .btn-next,
+        .el-pagination.is-background::v-deep .btn-prev {
+            width: 60PX!important;
+            height: 34PX!important;
+            margin: 0px 2PX!important;
+       
+        }
+
+     .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 2PX!important;
+        width: 34PX!important;
+        height: 34PX!important;
+      
+    }   
+
+}
+
 </style>
 
 

pages/[dir]/[id].vue

@@ -9,7 +9,7 @@
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
                 <el-breadcrumb-item>
-                <NuxtLink to="/">首页</NuxtLink>
+                    <NuxtLink to="/">首页</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item v-if="parent_children_count > 0">
                     <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
@@ -17,7 +17,7 @@
                 <el-breadcrumb-item v-if="parent_children_count == 0">
                     <NuxtLink :to="`/${parent_pinyin}/list-1.html`"> {{ parent_name }}</NuxtLink>
                 </el-breadcrumb-item>
-                <el-breadcrumb-item class="phone_breadcrumb_text" >{{ routeNewsTtitle }}</el-breadcrumb-item>
+                <el-breadcrumb-item class="phone_breadcrumb_text">{{ routeNewsTtitle }}</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
     </div>
@@ -33,17 +33,13 @@
                         发布时间: <span>{{ time }}</span>
                     </p>
                 </div>
-                <div 
-                    class="leftBottom" 
-                    v-html="newsDetail.content" 
-                    v-if="newsDetail.content" 
-                    @click="openPreview">
+                <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content" @click="openPreview">
                 </div>
                 <div v-if="previewVisible" class="preview-modal" @click="closePreview">
                     <img :src="selectedImage" alt="Preview">
                 </div>
                 <!-- 免责声明: -->
-                <div class="disclaimer" v-if="newsDetail.copyfrom!='本网'">
+                <div class="disclaimer" v-if="newsDetail.copyfrom != '本网'">
                     <p>原文链接：{{ newsDetail.fromurl }}</p>
                     <p>[免责声明]本文来源于网络转载，仅供学习交流使用，不构成商业目的。 版权归原作者所有，如涉及作品内容，版权和其他问题，请在30日与本网联系，我们将第一时间处理。</p>
                 </div>
@@ -52,69 +48,60 @@
                     <div class="index_3_box_vote" v-if="articleChoice">
                         <div class="voteTitle">投票区</div>
                         <div class="inquire">
-                            <p v-if="voteList.length>0">{{voteList[0].survey_name}}</p>
+                            <p v-if="voteList.length > 0">{{ voteList[0].survey_name }}</p>
                             <div class="radioBox">
-                            <!--投票选项-->
-                            <div v-if="!isDisabled">
-                                <div class="radio" v-if="isRadio">
-                                    <el-radio-group v-model="radio1" @change="handleRadioChange">
-                                        <el-radio v-for="item in voteList" :key="item.id" :value="item.id" size="large">
-                                            <span v-if="item.is_other == 0">{{item.choice_name}}</span>
-                                            <span v-else>其他</span>
-                                        </el-radio>
-                                    </el-radio-group>
-                                    <el-input
-                                        v-if="showUserChoice"
-                                        v-model="userChoice"
-                                        :rows="2"
-                                        type="textarea"
-                                        resize="none"
-                                        placeholder="请输入.."
-                                    />
-                                </div>
-                                <div class="checkInputBox" v-else>
-                                    <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
-                                        <span v-for="item in voteList" :key="item.id">
-                                            <span v-if="item.is_other == 0">
-                                                <el-checkbox size="large" :label="item.choice_name" :value="item.id"/>
-                                            </span>
-                                            <span v-else>
-                                                <el-checkbox size="large" label="其他" :value="item.id"/>
+                                <!--投票选项-->
+                                <div v-if="!isDisabled">
+                                    <div class="radio" v-if="isRadio">
+                                        <el-radio-group v-model="radio1" @change="handleRadioChange">
+                                            <el-radio v-for="item in voteList" :key="item.id" :value="item.id"
+                                                size="large">
+                                                <span v-if="item.is_other == 0">{{ item.choice_name }}</span>
+                                                <span v-else>其他</span>
+                                            </el-radio>
+                                        </el-radio-group>
+                                        <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
+                                            resize="none" placeholder="请输入.." />
+                                    </div>
+                                    <div class="checkInputBox" v-else>
+                                        <el-checkbox-group v-model="check1" @change="handleCheckboxChange">
+                                            <span v-for="item in voteList" :key="item.id">
+                                                <span v-if="item.is_other == 0">
+                                                    <el-checkbox size="large" :label="item.choice_name"
+                                                        :value="item.id" />
+                                                </span>
+                                                <span v-else>
+                                                    <el-checkbox size="large" label="其他" :value="item.id" />
+                                                </span>
                                             </span>
-                                        </span>
-                                    </el-checkbox-group>
-                                    <el-input
-                                        v-if="showUserChoice"
-                                        v-model="userChoice"
-                                        :rows="2"
-                                        type="textarea"
-                                        resize="none"
-                                        placeholder="请输入.."
-                                    />
+                                        </el-checkbox-group>
+                                        <el-input v-if="showUserChoice" v-model="userChoice" :rows="2" type="textarea"
+                                            resize="none" placeholder="请输入.." />
+                                    </div>
                                 </div>
-                            </div>
-                            <!--投票结果-->
-                            <div class="inquireData" v-else>
-                                <div v-for="item in websiteSurveyData.data" :key="item.id">
-                                    <div class="inquireDataItem active" v-if="item.status == 1">
-                                        <div class="inquireDataItemTitle">
-                                            <span v-if="item.choice_name == ''">其他</span>
-                                            <span v-else>{{item.choice_name}}</span>
+                                <!--投票结果-->
+                                <div class="inquireData" v-else>
+                                    <div v-for="item in websiteSurveyData.data" :key="item.id">
+                                        <div class="inquireDataItem active" v-if="item.status == 1">
+                                            <div class="inquireDataItemTitle">
+                                                <span v-if="item.choice_name == ''">其他</span>
+                                                <span v-else>{{ item.choice_name }}</span>
+                                            </div>
+                                            <div class="inquireDataItemNum">{{ item.results }}票</div>
                                         </div>
-                                        <div class="inquireDataItemNum">{{item.results}}票</div>
-                                    </div>
-                                    <div class="inquireDataItem" v-else>
-                                        <div class="inquireDataItemTitle">
-                                            <span v-if="item.choice_name == ''">其他</span>
-                                            <span v-else>{{item.choice_name}}</span>
+                                        <div class="inquireDataItem" v-else>
+                                            <div class="inquireDataItemTitle">
+                                                <span v-if="item.choice_name == ''">其他</span>
+                                                <span v-else>{{ item.choice_name }}</span>
+                                            </div>
+                                            <div class="inquireDataItemNum">{{ item.results }}票</div>
                                         </div>
-                                        <div class="inquireDataItemNum">{{item.results}}票</div>
                                     </div>
                                 </div>
                             </div>
-                            </div>
                             <div class="btn">
-                                <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled" v-if="!isDisabled">投票</button>
+                                <button class="voting" @click="addWebsiteSurvey" :disabled="isDisabled"
+                                    v-if="!isDisabled">投票</button>
                             </div>
                         </div>
                     </div>
@@ -156,26 +143,22 @@
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { onMounted } from 'vue'
-import { ElBreadcrumb, ElBreadcrumbItem,ElRadio, ElRadioGroup,ElCheckbox,ElCheckboxGroup,ElMessage,ElInput } from 'element-plus'
+import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 //获得详情id
 const articleId = parseInt(route.params.id); //获得该页面的id
-
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // let routeId = 20 //排除路径错误可以打开这个
 // const routeId = numberPart;
@@ -187,16 +170,14 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     routeId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
-
-
 //1.2 获得父级栏目的名称、id
 const parent_name = ref([]);
 const parent_id = ref([]);
@@ -217,7 +198,6 @@ let getParentNav = async () => {
         parent_id.value = listData.data.parent_id;
         parent_pinyin.value = listData.data.aLIas_pinyin;
         parent_children_count.value = listData.data.children_count;
-
     } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取面包屑导航")
@@ -228,7 +208,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -242,15 +221,15 @@ const routLevelId = ref("");
 const articleChoice = ref(false);
 //2.4获取详情
 async function getPageData() {
-    const mkdata =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+    const mkdata = await requestDataPromise('/web/selectWebsiteArticleInfo', {
         method: 'GET',
         query: {
             'articleid': articleId
         },
     });
-    if(mkdata.code==200){
+    if (mkdata.code == 200) {
         //判断是否显示投票
-        if(mkdata.data.is_survey==1){
+        if (mkdata.data.is_survey == 1) {
             console.log("本篇文章含有投票！")
             articleChoice.value = true;
             getVoteList();
@@ -268,15 +247,14 @@ async function getPageData() {
         } else {
             routeNewsTtitle.value = newsDetail.value.title
         }
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：获取详情内容")
-        console.log("后端错误反馈：",mkdata.message)
+        console.log("后端错误反馈：", mkdata.message)
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
 getPageData();
-
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
@@ -296,8 +274,7 @@ let adImg1 = ref([]);
 //     }
 // }
 // getAdData();
-
-onMounted(async ()  => {
+onMounted(async () => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
     let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_detail_0001`
@@ -311,97 +288,87 @@ onMounted(async ()  => {
     const resultAd1 = await responseAd1.json();
     adImg1.value = resultAd1.data[0];
 })
-
 //2.页面数据 end ---------------------------------------->
-
 //3.设置seo信息 start---------------------------------------->
 //3.1 设置seo信息
-const setData =  await requestDataPromise('/web/selectWebsiteArticleInfo', {
+const setData = await requestDataPromise('/web/selectWebsiteArticleInfo', {
     method: 'GET',
     query: {
         'articleid': articleId
     },
 });
-if(setData.code==200){
+if (setData.code == 200) {
     let seoTitle = setData.data.title;
     let seoDescription = setData.data.introduce;
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：设置详情页面SEO数据")
-    console.log("后端错误反馈：",setData.message)
+    console.log("后端错误反馈：", setData.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //3.设置seo信息 end---------------------------------------->
-
 //4.投票 start---------------------------------------->
 const radio1 = ref(''); //单选
 const check1 = ref([]); //多选
 const isDisabled = ref(false);//是否禁用提交按钮
 const isRadio = ref(true);//是否渲染单选
-
 const userSurId = ref('');//投票属于哪一篇文章
 const userChoice = ref('');//用于判断用户选择了其他选项以后，输入的值
 const userIsChoice = ref('');//用于判断其他选项目前是什么值
 const showUserChoice = ref(false);//是否显示其他输入框
 const websiteSurveyData = ref([]);//投票结果
-
 //3.2获得投票列表
 let voteList = ref([]);
-async function getVoteList(){
-    const voteData = await requestHome('/web/getWebsiteSurvey',{method:'GET',query:{'art_id':articleId}});
+async function getVoteList() {
+    const voteData = await requestHome('/web/getWebsiteSurvey', { method: 'GET', query: { 'art_id': articleId } });
     console.log(778899)
     console.log(voteData)
-    if(voteData.code == 200){
+    if (voteData.code == 200) {
         voteList.value = voteData.data;
         console.log(voteList.value)
         //判断显示单选还是多选
         //survey_type 0是单选 1是多选
-        if(voteData.data[0].survey_type == 0){
+        if (voteData.data[0].survey_type == 0) {
             isRadio.value = true;
             console.log("1111")
-        }else{
+        } else {
             isRadio.value = false;
         }
         //把最后一个的值拿出来 用于判断用户是否选择了其他
-        for(let item of voteData.data){
+        for (let item of voteData.data) {
             //如果含有其他
-            if(item.is_other==1){
+            if (item.is_other == 1) {
                 userIsChoice.value = item.id;
             }
         }
         //用户投票属于哪一篇文章
         userSurId.value = voteData.data[0].sur_id;
-
-    }else{
+    } else {
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：首页投票")
-        console.log("后端错误反馈：",voteData.message)
-        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->") 
+        console.log("后端错误反馈：", voteData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     }
 }
-
-
 //3.2当用户选择了选项，判断是否展示其他输入框
 const handleRadioChange = (value) => {
-    if(value == userIsChoice.value){
+    if (value == userIsChoice.value) {
         showUserChoice.value = true;
-    }else{
+    } else {
         showUserChoice.value = false;
     }
 }
-
 const handleCheckboxChange = (value) => {
     if (value.includes(userIsChoice.value)) {
         showUserChoice.value = true;
@@ -409,39 +376,38 @@ const handleCheckboxChange = (value) => {
         showUserChoice.value = false;
     }
 }
-
 //3.2发起投票
-async function addWebsiteSurvey(){
+async function addWebsiteSurvey() {
     //判断当前是单选还是多选
     console.log(isRadio.value)
-    if(isRadio.value){
+    if (isRadio.value) {
         console.log("用户单选！")
-        if(radio1.value!=''){
+        if (radio1.value != '') {
             //先判断一下是否使用了其他选项
-            if(showUserChoice.value){
-                if(userChoice.value!=''){
+            if (showUserChoice.value) {
+                if (userChoice.value != '') {
                     //文章id
                     // console.log(userSurId.value)
                     // 用户输入的值
                     // console.log(userChoice.value)
                     //如果使用了其他，其他的选项需要增加进去
-                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption',{
-                        method:'GET',
-                        query:{
-                            'sur_id':userSurId.value,//投票的新闻id
-                            'choice_name':userChoice.value,//投票的选项id
+                    const ChoiceData = await requestHome('/web/addWebsiteSurveyOption', {
+                        method: 'GET',
+                        query: {
+                            'sur_id': userSurId.value,//投票的新闻id
+                            'choice_name': userChoice.value,//投票的选项id
                         }
                     });
-                    if(ChoiceData.code == 200){
+                    if (ChoiceData.code == 200) {
                         //提交完其他选项以后，再正式发起投票
-                        const mkData = await requestHome('/web/addWebsiteSurveyVote',{
-                            method:'GET',
-                            query:{
-                                'sur_id':userSurId.value,
-                                'choice_id':ChoiceData.data
+                        const mkData = await requestHome('/web/addWebsiteSurveyVote', {
+                            method: 'GET',
+                            query: {
+                                'sur_id': userSurId.value,
+                                'choice_id': ChoiceData.data
                             }
                         });
-                        if(mkData.code == 200){
+                        if (mkData.code == 200) {
                             ElMessage.success('投票成功！')
                             //把投票结果显示到页面上 禁用投票按钮
                             isDisabled.value = true;
@@ -449,80 +415,80 @@ async function addWebsiteSurvey(){
                             //遍历一下，把用户选中的那个设置status为1
                             let data = mkData.data;
                             //遍历一下，把用户选中的那个设置status为1
-                            for(let item of data.data){
-                                for(let i of data.choice){
-                                    if(item.id == i){
+                            for (let item of data.data) {
+                                for (let i of data.choice) {
+                                    if (item.id == i) {
                                         console.log(item.id)
                                         item.status = 1;
                                     }
                                 }
                             }
                             websiteSurveyData.value = data;
-                        }else{
+                        } else {
                             ElMessage.error(mkData.message)
                         }
-                    }else{
+                    } else {
                         ElMessage.error('其他投票失败！')
                     }
-                }else{
+                } else {
                     ElMessage.error('请输入选项内容！')
                 }
-            }else{
+            } else {
                 //如果没选择其他，直接提交选择的内容
-                const mkData = await requestHome('/web/addWebsiteSurveyVote',{
-                    method:'GET',
-                    query:{
-                        'sur_id':userSurId.value,
-                        'choice_id':radio1.value
+                const mkData = await requestHome('/web/addWebsiteSurveyVote', {
+                    method: 'GET',
+                    query: {
+                        'sur_id': userSurId.value,
+                        'choice_id': radio1.value
                     }
                 });
-                if(mkData.code == 200){
+                if (mkData.code == 200) {
                     ElMessage.success('投票成功！')
                     //把投票结果显示到页面上 禁用投票按钮
                     isDisabled.value = true;
                     let data = mkData.data;
                     //遍历一下，把用户选中的那个设置status为1
-                    for(let item of data.data){
-                        for(let i of data.choice){
-                            if(item.id == i){
+                    for (let item of data.data) {
+                        for (let i of data.choice) {
+                            if (item.id == i) {
                                 item.status = 1;
                             }
                         }
                     }
                     websiteSurveyData.value = data;
-                }else{
+                } else {
                     ElMessage.error('投票失败！')
                 }
             }
-        }else{
+        } else {
             ElMessage.error('请选择一个选项')
         }
-    }else{
+    } else {
         console.log("多选！")
         //多选
-        if(check1.value!=[]){
-             //先判断一下是否使用了其他选项
-            if(showUserChoice.value){
-                if(userChoice.value!=''){
+        if (check1.value != []) {
+            //先判断一下是否使用了其他选项
+            if (showUserChoice.value) {
+                if (userChoice.value != '') {
                     //判断用户是否只选择了一个其他
-                    if(check1.value.length == 1){
-                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
-                            method:'GET',
-                            query:{
-                                'sur_id':userSurId.value,//投票的新闻id
-                                'choice_name':userChoice.value,//用户输入的其他选项文字
+                    if (check1.value.length == 1) {
+                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
+                            method: 'GET',
+                            query: {
+                                'sur_id': userSurId.value,//投票的新闻id
+                                'choice_name': userChoice.value,//用户输入的其他选项文字
                             }
                         });
-                        if(ChoiceData.code == 200){
+                        if (ChoiceData.code == 200) {
                             //提交完其他选项以后，再正式发起投票
-                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
-                                method:'GET',
-                                query:{
-                                    'sur_id':userSurId.value,
-                                    'choice_id':ChoiceData.data
+                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
+                                method: 'GET',
+                                query: {
+                                    'sur_id': userSurId.value,
+                                    'choice_id': ChoiceData.data
                                 }
                             });
-                            if(mkData.code == 200){
+                            if (mkData.code == 200) {
                                 ElMessage.success('投票成功！')
                                 //把投票结果显示到页面上 禁用投票按钮
                                 isDisabled.value = true;
@@ -530,32 +496,31 @@ async function addWebsiteSurvey(){
                                 //遍历一下，把用户选中的那个设置status为1
                                 let data = mkData.data;
                                 //遍历一下，把用户选中的那个设置status为1
-                                for(let item of data.data){
-                                    for(let i of data.choice){
-                                        if(item.id == i){
+                                for (let item of data.data) {
+                                    for (let i of data.choice) {
+                                        if (item.id == i) {
                                             console.log(item.id)
                                             item.status = 1;
                                         }
                                     }
                                 }
                                 websiteSurveyData.value = data;
-                            }else{
+                            } else {
                                 ElMessage.error(mkData.message)
                             }
-                        }else{
+                        } else {
                             ElMessage.error('其他投票失败！')
                         }
-
-                    }else{
+                    } else {
                         //用户选择了除了其他以外，还包括别的选项
-                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption',{
-                            method:'GET',
-                            query:{
-                                'sur_id':userSurId.value,//投票的新闻id
-                                'choice_name':userChoice.value,//用户输入的其他选项文字
+                        const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
+                            method: 'GET',
+                            query: {
+                                'sur_id': userSurId.value,//投票的新闻id
+                                'choice_name': userChoice.value,//用户输入的其他选项文字
                             }
                         });
-                        if(ChoiceData.code == 200){
+                        if (ChoiceData.code == 200) {
                             let data = check1.value;
                             //找到多选的数组，把其他默认值给替换掉
                             for (let i = 0; i < data.length; i++) {
@@ -565,15 +530,14 @@ async function addWebsiteSurvey(){
                             }
                             let jsonArray = JSON.stringify(data);
                             //提交完其他选项以后，再正式发起投票
-                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
-                                method:'GET',
-                                query:{
-                                    'sur_id':userSurId.value,
-                                    'choice_id':jsonArray
+                            const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
+                                method: 'GET',
+                                query: {
+                                    'sur_id': userSurId.value,
+                                    'choice_id': jsonArray
                                 }
                             });
-                            
-                            if(mkData.code == 200){
+                            if (mkData.code == 200) {
                                 ElMessage.success('投票成功！')
                                 //把投票结果显示到页面上 禁用投票按钮
                                 isDisabled.value = true;
@@ -581,37 +545,36 @@ async function addWebsiteSurvey(){
                                 //遍历一下，把用户选中的那个设置status为1
                                 let data = mkData.data;
                                 //遍历一下，把用户选中的那个设置status为1
-                                for(let item of data.data){
-                                    for(let i of data.choice){
-                                        if(item.id == i){
+                                for (let item of data.data) {
+                                    for (let i of data.choice) {
+                                        if (item.id == i) {
                                             //console.log(item.id)
                                             item.status = 1;
                                         }
                                     }
                                 }
                                 websiteSurveyData.value = data;
-                            }else{
+                            } else {
                                 ElMessage.error(mkData.message)
                             }
-                        }else{
+                        } else {
                             ElMessage.error('其他投票失败！')
                         }
-
                     }
-                }else{
+                } else {
                     ElMessage.error('请输入选项内容！')
                 }
-            }else{
+            } else {
                 let jsonArray = JSON.stringify(check1.value);
                 //如果没选择其他，直接提交选择的内容
-                const mkData = await requestDataPromise('/web/addWebsiteSurveyVote',{
-                    method:'GET',
-                    query:{
-                        'sur_id':userSurId.value,
-                        'choice_id':jsonArray
+                const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
+                    method: 'GET',
+                    query: {
+                        'sur_id': userSurId.value,
+                        'choice_id': jsonArray
                     }
                 });
-                if(mkData.code == 200){
+                if (mkData.code == 200) {
                     ElMessage.success('投票成功！')
                     //把投票结果显示到页面上 禁用投票按钮
                     isDisabled.value = true;
@@ -619,30 +582,28 @@ async function addWebsiteSurvey(){
                     //遍历一下，把用户选中的那个设置status为1
                     let data = mkData.data;
                     //遍历一下，把用户选中的那个设置status为1
-                    for(let item of data.data){
-                        for(let i of data.choice){
-                            if(item.id == i){
+                    for (let item of data.data) {
+                        for (let i of data.choice) {
+                            if (item.id == i) {
                                 console.log(item.id)
                                 item.status = 1;
                             }
                         }
                     }
                     websiteSurveyData.value = data;
-                }else{
+                } else {
                     ElMessage.error('投票失败！')
                 }
             }
-        }else{
+        } else {
             ElMessage.error('请选择一个选项')
         }
     }
 }
 //4.投票 end---------------------------------------->
-
 //5.页面图片放大 start---------------------------------------->
 const previewVisible = ref(false)
 const selectedImage = ref(' ')
-
 const openPreview = (event) => {
     if (event.target.tagName === 'IMG') {
         selectedImage.value = event.target.src;
@@ -654,7 +615,6 @@ const closePreview = () => {
 }
 //5.页面图片放大 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 //@import url('@/assets/css/article/pc.less');
 //@import url('@/assets/css/article/yd.less');
@@ -683,7 +643,7 @@ const closePreview = () => {
         box-sizing: border-box;
         a {
             font-size: 16px;
-            color: #000; 
+            color: #000;
             line-height: 20px;
         }
         span {
@@ -745,7 +705,7 @@ const closePreview = () => {
                 font-size: 20px;
                 line-height: 38px;
                 margin-bottom: 30px;
-                word-break:break-all;
+                word-break: break-all;
                 ul>li img {
                     width: 790px;
                     height: 382px;
@@ -1075,9 +1035,180 @@ const closePreview = () => {
         }
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+    word-break: keep-all;
+    white-space: nowrap;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    height: 22PX;
+    line-height: 22PX;
+}
+.el-breadcrumb__inner {}
+.newsDetail {
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.newsDetail .inner {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+}
+.newsDetail .inner .innerLeft .LeftTop>h1 {
+    font-size: 24PX;
+    line-height: 33PX;
+}
+.newsDetail .inner .innerLeft .LeftTop>p span {
+    font-size: 14PX;
+}
+.newsDetail .inner .innerLeft .leftBottom {
+    font-size: 18PX;
+    line-height: 22px;
+}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadTitle {
+    height: 33PX;
+    line-height: 33PX;
+}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title {
+    height: 33PX;
+    line-height: 33PX;
+    font-size: 16PX;
+    width: auto;
+    box-sizing: border-box;
+    float: left;
+}
+.newsDetail .inner .innerLeft {
+    float: left;
+    width: 64%;
+    overflow: hidden;
+    margin-right: 0px;
+}
+.newsDetail .inner .innerRight {
+    float: right;
+    width: 33%;
+    overflow: hidden;
+}
+.innerRight .hotList2 {
+    width: 100%;
+}
+.newsDetail .inner .innerLeft .LeftTop>p {
+    font-size: 14PX;
+}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList {}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle {
+    line-height: 33PX;
+    height: 33PX;
+}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a {
+    line-height: 33PX;
+    height: 33PX;
+    padding-right: 22PX;
+    box-sizing: border-box;
+    font-size: 16PX;
+    width: 90%;
+    float: left;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle:nth-child(1)::after {
+    font-size: 14PX;
+    margin-top: 1PX;
+}
+.prevNext a {
+    height: 22PX;
+    line-height: 22PX;
+    font-size: 14PX;
+    width: 100%;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsDetail {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        overflow: hidden;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .newsDetail .inner {
+        display: block;
+        width: 100%;
+    }
+    .newsDetail .inner .innerLeft {
+        width: 100%;
+    }
+    .newsDetail .inner .innerRight {
+        width: 100%;
+    }
+    .breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+        width: 100PX;
+        display: block;
+        word-break: keep-all;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title {
+        width: auto;
+    }
+    .newsDetail .inner .innerLeft .leftBottom {
+        line-height: 33PX;
+    }
+}
 </style>
-
-
-
-
-

pages/[dir]/index.html.vue

@@ -442,4 +442,130 @@ onMounted(async ()  => {
         margin-left: 20px;
     }
 }
+
+
+
+
+.breadcrumb-box{width:1400PX;margin:0px auto 0px; }
+.el-breadcrumb{height:22PX;line-height:22PX;}
+.breadcrumb-box .inner span.location{font-size:16PX;;height:22PX;;line-height:22PX; font-weight:normal;}
+.breadcrumb-box .inner a{font-size:16PX;;height:22PX;line-height:22PX;display:inline-block; font-weight:normal;}
+
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner{font-size:16PX;;height:22PX;line-height:22PX;
+                             font-weight:normal;}
+
+.breadcrumb-box:deep(.el-icon){width:16PX;height:16PX;}
+ .breadcrumb-box .inner span{font-size:16PX;;height:22PX;line-height:22PX;}   
+
+.newsList{width:1400PX;box-sizing:border-box; }
+.newsList .listBox{display:block;width:100%;overflow:hidden;}
+
+.newsList .listBox .listBoxLeft{float:left;width:64%;overflow:hidden;}
+.newsList .listBox .listBoxRight{float:right;width:33%;overflow:hidden;}
+
+.newsList .listBox .listBoxLeft .list > li{display:block;
+                margin-top:22PX;padding-bottom:22PX;}
+
+ 
+.li_img_box{float:left;width:160PX;height:110PX;margin-right:11px;}
+.li_img_box *{display:block;width:100%;height:100%;}
+
+.li_right_box{ }
+.li_h4_dot1{height:22PX;line-height:22PX;font-size:20PX;font-weight:bold;color:#333;
+            display:block;word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+}
+.li_dot3{height:72PX;line-height:24PX;font-size:14PX;color:#333;
+        font-weight:normal;margin-top:4px;
+     overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;    
+}
+
+.newsList .listBox .listBoxLeft .list > li a{display:block;width:100%;
+            height:auto;overflow:hidden;}
+
+ .pagination{padding:10px 0px;margin:10px 0px;}
+
+
+ 
+//分页
+.pagination {
+    height: 34PX;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 20PX 0;
+    padding: 20PX 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #139609;
+    }
+
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70PX;
+        height: 34PX;
+        margin: 0px 10PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10PX;
+        width: 38PX;
+        height: 34PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #337ab7;
+        color: #fff;
+    }
+    .total {
+        display: block;
+        height: 34PX;
+        line-height: 34PX;
+        font-size: 18PX;
+        margin-left: 20PX;
+    }
+ 
+    
+}
+
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+
+@media screen and (max-width: 1400px) {
+        .breadcrumb-box{width:100%;margin:0px auto 0px; box-sizing:border-box;padding:0px 10px;}
+        .newsList{width:100%;box-sizing:border-box;padding:0px 10px;margin:0px auto 0px;}
+
+}
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+     
+        .listBoxLeft{width:100%!important;float:none!important;}
+        .listBoxRight{width:100%!important;float:none!important;}
+
+
+        .el-pagination.is-background::v-deep .btn-next,
+        .el-pagination.is-background::v-deep .btn-prev {
+            width: 60PX!important;
+            height: 34PX!important;
+            margin: 0px 2PX!important;
+       
+        }
+
+     .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 2PX!important;
+        width: 34PX!important;
+        height: 34PX!important;
+      
+    }   
+}   
+
+
 </style>

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

@@ -30,7 +30,7 @@
                     <el-breadcrumb-item>
                         <NuxtLink to="/">首页</NuxtLink>
                     </el-breadcrumb-item>
-                    <el-breadcrumb-item v-if="parent_name !=''">
+                    <el-breadcrumb-item v-if="parent_name != ''">
                         <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
                     </el-breadcrumb-item>
                     <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
@@ -44,29 +44,24 @@
                     <ul class="list">
                         <li v-for="(item, index) in newsList" :key="index">
                             <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
-                                {{ item.title }}
+                                <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>
-                            <p>
-                                <NuxtLink :href="getLinkPathDetail(item)" :title="item.alias">
-                                    {{ item.title }}
-                                </NuxtLink>
-                            </p>
                         </li>
                     </ul>
                     <!-- 分页器 -->
                     <div class="pagination" v-if="total > 0">
-                        <el-pagination 
-                            size="small" 
-                            background 
-                            layout="prev, pager, next" 
-                            :total="total" 
-                            class="mt-4"
-                            :page-size="pageSize" 
-                            :current-page="pageNum"
-                            prev-text="上一页" 
-                            next-text="下一页" 
-                            @current-change="changePage"
-                        />
+                        <el-pagination size="small" background layout="prev, pager, next" :total="total" class="mt-4"
+                            :page-size="pageSize" :current-page="pageNum" prev-text="上一页" next-text="下一页"
+                            @current-change="changePage" />
                         <span class="total">共{{ total }}条</span>
                     </div>
                 </div>
@@ -80,7 +75,6 @@
         <HomeFoot></HomeFoot>
     </div>
 </template>
-
 <script setup>
 //1.页面必备依赖 start ---------------------------------------->
 import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
@@ -89,7 +83,6 @@ import { ref, onMounted } from 'vue';
 //当前列表名称
 const name = ref('')
 const { $webUrl, $CwebUrl, $BwebUrl } = useNuxtApp()
-
 //格式化跳转路径
 const getLinkPathDetail = (item) => {
     if (item.islink == 1) {
@@ -101,22 +94,19 @@ const getLinkPathDetail = (item) => {
     }
 }
 //1.页面必备依赖 end ---------------------------------------->
-
 //1.获得路由id start ---------------------------------------->
 const route = useRoute();
 let articleId = 0;//路由id
 let pageNum = ref(2);
 let total = ref(1);
 let pageSize = ref(10);
-
 //获得当前的完整路径
 const fullPath = route.path;
 //拆分，取出来中间这一段，然后提取数字部分
-const segments = fullPath.split('/'); 
-const targetSegment = segments[1]; 
+const segments = fullPath.split('/');
+const targetSegment = segments[1];
 //const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 //let routeId = 20 //排除路径错误可以打开这个
-
 //通过导航路径反向查询导航id
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
     method: 'GET',
@@ -124,15 +114,14 @@ const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
         'pinyin': targetSegment,
     },
 });
-if(getRouteId.code == 200){
+if (getRouteId.code == 200) {
     articleId = getRouteId.data.category_id
-}else{
+} else {
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
     console.log("错误位置：通过url路径查询导航池id")
-    console.log("后端错误反馈：",getRouteId.message)
+    console.log("后端错误反馈：", getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
-
 //获得html前的数字
 // const pageUrl = segments[2]; 
 // const pageNumber = pageUrl.split('.')[0];
@@ -140,9 +129,7 @@ if(getRouteId.code == 200){
 // console.log(pageNumber)//2
 // pageNum.value = parseInt(pageNumber);
 pageNum.value = parseInt(route.params.id);
-
 //1.获得路由id end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.2新闻列表
 const newsList = ref([]);
@@ -158,7 +145,6 @@ let newslists = async () => {
     if (listData.code == 200) {
         newsList.value = listData.data.rows;
         total.value = listData.data.count;
-
     } else {
         // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         // console.log("错误位置：获取新闻列表")
@@ -168,13 +154,11 @@ let newslists = async () => {
 }
 //获得列表
 newslists();
-
 //分页事件
 let changePage = (value) => {
     console.log("当前页码", value);
     navigateTo(`/${targetSegment}/list-${value}.html`)
 }
-
 //2.3获得页面名称
 let getPageName = async () => {
     const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
@@ -195,8 +179,6 @@ let getPageName = async () => {
 //获得列表
 getPageName();
 //2.页面数据 end ---------------------------------------->
-
-
 //3.二级栏目 start ---------------------------------------->
 //3.1通过id获取父栏目
 const parent_name = ref([]);
@@ -225,7 +207,6 @@ let getParentNav = async () => {
 }
 //获得列表
 getParentNav();
-
 // 3.2获取二级栏目
 const secondNav = ref([]);
 let getSecondNav = async () => {
@@ -238,7 +219,6 @@ let getSecondNav = async () => {
         },
     });
     console.log('listData', listData);
-
     if (listData.code == 200) {
         secondNav.value = listData.data
     } else {
@@ -249,7 +229,6 @@ let getSecondNav = async () => {
     }
 }
 //3.二级栏目 end ---------------------------------------->
-
 //4.设置seo信息 start---------------------------------------->
 //4.1 设置seo信息
 const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
@@ -258,20 +237,18 @@ const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
         'catid': articleId
     },
 });
-
 if (setData.code == 200) {
     let seoTitle = setData.data.seo_title;
     let seoDescription = setData.data.seo_description;
     let seoKeywords = setData.data.seo_keywords;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
-            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix , tagPriority: 10 },
-            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
+            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
+            { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no', tagPriority: 10 }
         ]
     });
 } else {
@@ -281,14 +258,10 @@ if (setData.code == 200) {
     // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
 //4.设置seo信息 end---------------------------------------->
-
-
 //5.广告 start---------------------------------------->
 let adImg1 = ref({});
 let adImg2 = ref({});
-
-onMounted(async ()  => {
-
+onMounted(async () => {
     //从客户端获取行政职能部门 加快打开速度
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
@@ -302,7 +275,6 @@ onMounted(async ()  => {
     });
     const resultAd1 = await responseAd1.json();
     adImg1.value = resultAd1.data[0];
-    
     //广告2
     let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_list_0002`
     const responseAd2 = await fetch(url2, {
@@ -314,15 +286,12 @@ onMounted(async ()  => {
     });
     const resultAd2 = await responseAd2.json();
     adImg2.value = resultAd2.data[0];
-
 })
 //5.广告 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
 // @import url('@/assets/css/list/pc.less');
 // @import url('@/assets/css/list/yd.less');
-
 //面包屑
 .breadcrumb-box {
     width: 1400px;
@@ -348,7 +317,7 @@ onMounted(async ()  => {
         box-sizing: border-box;
         a {
             font-size: 16px;
-            color: #000; 
+            color: #000;
             line-height: 20px;
         }
         span {
@@ -361,7 +330,6 @@ onMounted(async ()  => {
         }
     }
 }
-
 //资讯列表
 .newsList {
     width: 1400px;
@@ -382,19 +350,6 @@ onMounted(async ()  => {
                     padding-bottom: 30px;
                     a {
                         color: #337ab7;
-                        text-decoration: none;
-                        display: block;
-                        width: 100%;
-                        height: 22px;
-                        line-height: 22px;
-                        font-size: 20px;
-                        font-weight: bold;
-                        color: #333;
-                        overflow: hidden;
-                        word-break: keep-all;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
                     }
                     p {
                         a {
@@ -416,7 +371,6 @@ onMounted(async ()  => {
         }
     }
 }
-
 //分页
 .pagination {
     height: 34px;
@@ -458,5 +412,199 @@ onMounted(async ()  => {
         margin-left: 20px;
     }
 }
+.breadcrumb-box {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb-box .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb-box:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb-box .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.newsList {
+    width: 1400PX;
+    box-sizing: border-box;
+}
+.newsList .listBox {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+.newsList .listBox .listBoxLeft {
+    float: left;
+    width: 64%;
+    overflow: hidden;
+}
+.newsList .listBox .listBoxRight {
+    float: right;
+    width: 33%;
+    overflow: hidden;
+}
+.newsList .listBox .listBoxLeft .list>li {
+    display: block;
+    margin-top: 22PX;
+    padding-bottom: 22PX;
+}
+.li_img_box {
+    float: left;
+    width: 160PX;
+    height: 110PX;
+    margin-right: 11px;
+}
+.li_img_box * {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+.li_right_box {}
+.li_h4_dot1 {
+    height: 22PX;
+    line-height: 22PX;
+    font-size: 20PX;
+    font-weight: bold;
+    color: #333;
+    margin-top: 8PX;
+    display: block;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.li_dot3 {
+    height: 72PX;
+    line-height: 24PX;
+    font-size: 14PX;
+    color: #333;
+    font-weight: normal;
+    margin-top: 4px;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+}
+.newsList .listBox .listBoxLeft .list>li a {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+}
+.pagination {
+    padding: 10px 0px;
+    margin: 10px 0px;
+}
+//分页
+.pagination {
+    height: 34PX;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 20PX 0;
+    padding: 20PX 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #139609;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70PX;
+        height: 34PX;
+        margin: 0px 10PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10PX;
+        width: 38PX;
+        height: 34PX;
+        border-radius: 4PX;
+    }
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #337ab7;
+        color: #fff;
+    }
+    .total {
+        display: block;
+        height: 34PX;
+        line-height: 34PX;
+        font-size: 18PX;
+        margin-left: 20PX;
+    }
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb-box {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsList {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0px 10px;
+        margin: 0px auto 0px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .listBoxLeft {
+        width: 100% !important;
+        float: none !important;
+    }
+    .listBoxRight {
+        width: 100% !important;
+        float: none !important;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 60PX !important;
+        height: 34PX !important;
+        margin: 0px 2PX !important;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 2PX !important;
+        width: 34PX !important;
+        height: 34PX !important;
+    }
+}
 </style>
-

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

@@ -20,6 +20,20 @@
     <!-- 资讯列表 -->
     <div class="newsDetail">
         <div class="inner">
+            <div class="innerRight">
+                <ul>
+                    <li v-for="(item, index) in bottomMenu" :key="index">
+                        <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name"
+                            :class="item.id == pageId ? 'active' : ''">
+                            {{ item.name }}
+                        </NuxtLink>
+                        <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`"
+                            :title="item.name" :class="item.id == pageId ? 'active' : ''">
+                            {{ item.name }}
+                        </NuxtLink>
+                    </li>
+                </ul>
+            </div>
             <div class="innerLeft">
                 <div class="leftBottomImg" v-if="newsDetail.con_title == '会员服务'">
                     <img src="../../../public/index/hyfw.jpg" alt="">
@@ -35,33 +49,17 @@
                 </div>
                 <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div>
             </div>
-            <div class="innerRight">
-                <ul>
-                    <li v-for="(item, index) in bottomMenu" :key="index">
-                        <NuxtLink v-if="item.type == 0" :to="`/about/${item.name_pinyin}/index.html`" :title="item.name"
-                            :class="item.id == pageId ? 'active' : ''">
-                            {{ item.name }}
-                        </NuxtLink>
-                        <NuxtLink v-else-if="item.type == 1" :to="`/about/${item.name_pinyin}/list-1.html`"
-                            :title="item.name" :class="item.id == pageId ? 'active' : ''">
-                            {{ item.name }}
-                        </NuxtLink>
-                    </li>
-                </ul>
-            </div>
             <div style="clear: both;"></div>
         </div>
     </div>
     <!-- 页面底部 -->
     <HomeFoot></HomeFoot>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue';
-
 //获得跳转过来的id
 const route = useRoute();
 //获得当前的完整路径
@@ -70,7 +68,6 @@ const fullPath = route.path;
 const segments = fullPath.split('/');
 const targetSegment = segments[2];
 //const numberPart = targetSegment.match(/\d+$/)?.[0]; 
-
 let articleId;
 let pageId;
 //通过导航路径反向查询导航id
@@ -89,9 +86,7 @@ if (getRouteId.code == 200) {
     // console.log("后端错误反馈：",getRouteId.message)
     // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
-
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //广告列表
 const adList = ref([]);
@@ -117,10 +112,8 @@ async function getAdData() {
     }
 }
 getAdData();
-
 const newsDetail = ref({})
 const bottomMenu = ref([]);
-
 async function getPageData() {
     const mkdata = await requestDataPromise('/web/getWebsiteFooterCategoryInfo', {
         method: 'GET',
@@ -131,7 +124,6 @@ async function getPageData() {
     newsDetail.value = mkdata.data;
 }
 getPageData();
-
 async function getPageMenu() {
     const mkdata = await requestDataPromise('/web/getWebsiteFooterCategory', {
         method: 'GET',
@@ -141,21 +133,17 @@ async function getPageMenu() {
 }
 getPageMenu();
 //2.页面数据 end ---------------------------------------->
-
-
 //4.设置seo信息 start---------------------------------------->
 //4.1 设置seo信息
 const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
     method: 'GET',
     query: {},
 });
-
 let seoTitle = setData.data.website_head.title;
 let seoDescription = setData.data.website_head.description;
 let seoKeywords = setData.data.website_head.keywords;
 let seoSuffix = setData.data.website_head.suffix;
 let seoName = setData.data.website_head.website_name;
-
 useSeoMeta({
     title: seoTitle + "_" + seoSuffix,
     meta: [
@@ -164,7 +152,6 @@ useSeoMeta({
     ]
 });
 //4.设置seo信息 end---------------------------------------->
-
 onMounted(async () => {
     //从客户端获取行政职能部门 加快打开速度
     const { $webUrl, $CwebUrl } = useNuxtApp();
@@ -179,7 +166,6 @@ onMounted(async () => {
     });
     const resultAd1 = await responseAd1.json();
     adImg1.value = resultAd1.data[0];
-
     //广告2
     let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_page_0002`
     const responseAd2 = await fetch(url2, {
@@ -193,23 +179,19 @@ onMounted(async () => {
     adImg2.value = resultAd2.data[0];
 })
 </script>
-
 <style lang="less" scoped>
 //导航条
 .breadcrumb {
     width: 100%;
-
     .inner {
         width: 1200px;
         margin: 10px auto;
         border-bottom: 1px solid #E5E5E5;
     }
-
     .el-breadcrumb::v-deep {
         display: inline-block;
         vertical-align: -4px;
     }
-
     .el-breadcrumb__inner a::v-deep,
     .el-breadcrumb__inner.is-link::v-deep {
         color: #666666;
@@ -217,7 +199,6 @@ onMounted(async () => {
         text-decoration: none;
         transition: var(--el-transition-color);
     }
-
     span {
         font-family: "宋体";
         font-weight: 400;
@@ -228,7 +209,6 @@ onMounted(async () => {
         font-style: normal;
         text-transform: none;
     }
-
     .location {
         margin-right: 10px;
         display: inline-block;
@@ -241,25 +221,19 @@ onMounted(async () => {
         vertical-align: 11px;
     }
 }
-
 // 资讯列表
 .newsDetail {
     width: 100%;
     margin-bottom: 70px;
-
     .inner {
         width: 1200px;
         font-size: 16px;
-
         .innerLeft {
             width: 980px;
             float: right;
-
             .LeftTop {
                 margin-top: 50px;
-
                 >h1 {
-
                     line-height: 40px;
                     margin-bottom: 30px;
                     font-family: Microsoft YaHei, Microsoft YaHei;
@@ -267,7 +241,6 @@ onMounted(async () => {
                     font-size: 30px;
                     color: #333333;
                 }
-
                 >p {
                     height: 18px;
                     line-height: 18px;
@@ -275,25 +248,21 @@ onMounted(async () => {
                     font-weight: 400;
                     font-size: 14px;
                     color: #999999;
-
                     span {
                         margin-right: 40px;
                     }
                 }
-
                 >img {
                     width: 680px;
                     height: 382px;
                     padding: 50px 0px 60px 55px;
                 }
             }
-
             .leftBottomImg {
                 width: 760px;
                 height: 184px;
                 margin: 0 auto;
             }
-
             .leftBottom {
                 width: 92%;
                 font-size: 20px;
@@ -301,7 +270,6 @@ onMounted(async () => {
                 margin: 0 auto;
                 font-family: "微软雅黑", Microsoft YaHei;
                 line-height: 36px;
-
                 >h3,
                 >p {
                     text-indent: 2em;
@@ -312,22 +280,18 @@ onMounted(async () => {
                     line-height: 23px;
                     padding-bottom: 30px;
                 }
-
                 >h3 {
                     font-weight: 600px;
                 }
-
                 >p {
                     font-weight: 400;
                 }
             }
         }
-
         .innerRight {
             width: 200px;
             margin-top: 20px;
             font-family: "微软雅黑";
-
             ul {
                 li {
                     a {
@@ -344,7 +308,6 @@ onMounted(async () => {
                     }
                 }
             }
-
             .active {
                 border-left: 0;
                 background: #3395e4;
@@ -354,52 +317,38 @@ onMounted(async () => {
     }
 }
 </style>
-
-
-
-
-
 <style lang="less" scoped>
 @media screen and (min-width:801px) {
     .pc_none {
         display: none;
     }
 }
-
 @media screen and (max-width:800px) {
-
     /*ipad_phone*/
     .breadcrumb {
         margin-bottom: 11px;
     }
-
     .breadcrumb .location {
         font-size: 14px;
     }
-
     .breadcrumb span {
         font-size: 14px;
     }
-
     .breadcrumb /deep/.el-breadcrumb {
         vertical-align: middle;
     }
-
     .newsDetail {
         margin: 10px auto 0px;
     }
-
     .newsDetail .inner {
         width: 92%;
         margin: 0px auto 11px;
         overflow: hidden;
     }
-
     .newsDetail .inner .innerRight {
         width: 24%;
         display: none;
     }
-
     .newsDetail .inner .innerRight .rightMenuTitle {
         width: 100%;
         height: auto;
@@ -412,19 +361,16 @@ onMounted(async () => {
         font-size: 14px;
         text-align: center;
     }
-
     .newsDetail .inner .innerRight ul {
         display: block;
         width: 100%;
         height: auto;
     }
-
     .newsDetail .inner .innerRight ul li {
         display: block;
         width: 100%;
         height: auto;
     }
-
     .newsDetail .inner .innerRight ul li a {
         line-height: 20px;
         height: auto;
@@ -434,43 +380,36 @@ onMounted(async () => {
         box-sizing: border-box;
         border-left: 2px solid #028E21;
     }
-
     .newsDetail .inner .innerLeft {
         width: 100%;
         float: none;
         overflow: hidden;
         margin: 0;
     }
-
     .newsDetail .inner .innerLeft .book_son_right {
         float: none;
         width: 100%;
         overflow: hidden;
         margin-bottom: 22px;
     }
-
     .newsDetail .inner .innerLeft .leftBottomTitle {
         height: 50px;
         line-height: 50px;
         font-size: 18px;
     }
-
     .newsDetail .inner .innerLeft .leftBottom {
         width: 100%;
         padding-top: 11px;
         line-height: 22px;
         font-size: 16px !important;
     }
-
     .newsDetail .inner .innerLeft .leftBottom * {
         line-height: 22px;
         font-size: 16px !important;
     }
-
     .leftBottom /deep/.daohang ul {
         overflow: hidden;
     }
-
     .leftBottom /deep/.daohang li {
         float: left;
         margin: 1%;
@@ -480,15 +419,153 @@ onMounted(async () => {
         width: 23%;
         text-align: center;
     }
-
     .leftBottom /deep/.daohang li a {
         font-size: 14px !important;
         color: #333;
     }
-
     .phone_none {
         display: none;
     }
-
+}
+.breadcrumb {
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.el-breadcrumb {
+    height: 22PX;
+    line-height: 22PX;
+}
+.breadcrumb .inner span.location {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    ;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb .inner {
+    width: 100%;
+    word-break: keep-all;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 0px 10px 11px;
+    overflow: hidden;
+}
+.breadcrumb .inner * {
+    float: left;
+}
+.breadcrumb .inner a {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    display: inline-block;
+    font-weight: normal;
+}
+.breadcrumb .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+    font-weight: normal;
+}
+.breadcrumb:deep(.el-icon) {
+    width: 16PX;
+    height: 16PX;
+}
+.breadcrumb .inner span {
+    font-size: 16PX;
+    ;
+    height: 22PX;
+    line-height: 22PX;
+}
+.newsDetail {
+    box-sizing: border-box;
+    overflow: hidden;
+    width: 1400PX;
+    margin: 0px auto 0px;
+}
+.newsDetail .inner {
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+}
+.newsDetail .inner .innerRight {
+    overflow: hidden;
+    width: 222PX;
+    float: left;
+    margin: 0px 10px 0px 0px;
+    height: auto;
+}
+.newsDetail .inner .innerLeft {
+    overflow: hidden;
+    margin: 0;
+    flex: 1;
+    float: right;
+}
+.newsDetail .inner .innerRight ul li a {
+    line-height: 44PX;
+    height: 44PX;
+    padding-left: 22PX;
+    font-size: 16PX;
+}
+.newsDetail .inner .innerLeft .leftBottomImg {
+    width: 100%;
+    height: auto;
+    text-align: center;
+}
+.newsDetail .inner .innerLeft .leftBottomImg img {
+    display: inline-block;
+    width: 90%;
+    height: auto;
+}
+.newsDetail .inner .innerLeft .leftBottom {
+    line-height: 16px;
+}
+.leftBottom :deep(.daohang) ul {
+    overflow: hidden;
+    margin-bottom: 33px;
+}
+.leftBottom :deep(.daohang) ul li {
+    float: left;
+    margin: 1%;
+    border: solid 1px #ddd;
+}
+.leftBottom :deep(.daohang) ul li a {
+    display: block;
+    padding: 0 6PX;
+    text-align: center;
+    line-height: 33PX !important;
+    height: 33PX;
+    font-size: 16PX;
+    color: #333;
+}
+@media screen and (min-width: 1401px) {
+    //你的样式
+}
+@media screen and (max-width: 1400px) {
+    .breadcrumb {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+    .newsDetail {
+        width: 100%;
+        margin: 0px auto 0px;
+        box-sizing: border-box;
+        padding: 0px 10px;
+    }
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    //你的样式
+}
+@media screen and (max-width: 800px) {
+    //你的样式
+    .newsDetail .inner .innerLeft .leftBottom * {
+        line-height: 44PX;
+        font-size: 16PX !important;
+    }
 }
 </style>

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

@@ -4,7 +4,6 @@
         <HomePageHead></HomePageHead>
         <!-- 导航栏 -->
         <HomePageNavigation></HomePageNavigation>
-
         <!-- 页面内容 -->
         <div class="bwzp">
             <div class="bwzpTop">
@@ -123,6 +122,9 @@
                         <ul class="itemList">
                             <!-- <li>
                                 <a href="#">全国法制资讯发布中心</a>
+                            </li>
+                            <li>
+                                <a href="#">全国法制资讯发布中心</a>
                             </li> -->
                         </ul>
                     </div>
@@ -139,28 +141,23 @@
                 </div>
             </div>
         </div>
-
         <!-- 页面底部 -->
         <HomeFoot></HomeFoot>
     </div>
 </template>
-
 <script setup>
 //1.页面依赖 start ---------------------------------------->
 import { ref, onMounted } from 'vue';
-
 //3 设置seo信息
 const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
     method: 'GET',
     query: {},
 });
-
 let seoTitle = setData.data.website_head.title;
 let seoDescription = setData.data.website_head.description;
 let seoKeywords = setData.data.website_head.keywords;
 let seoSuffix = setData.data.website_head.suffix;
 let seoName = setData.data.website_head.website_name;
-
 useSeoMeta({
     title: seoTitle + "_" + seoSuffix,
     meta: [
@@ -170,273 +167,704 @@ useSeoMeta({
 });
 //3.设置seo信息 end---------------------------------------->
 </script>
-
 <style lang="less" scoped>
-.bwzp {
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-    margin: 20px auto;
-    max-width: 1920px;
-    background: #f1f1f1;
-    font-family: "微软雅黑", Microsoft YaHei;
-
-
-    .bwzpTop {
-        width: 1400px;
-        margin: 0 auto;
+@media screen and (min-width: 1401px) {
+    .bwzp {
+        width: 100%;
         height: auto;
         overflow: hidden;
-        padding: 20px 40px;
-        background: #fff;
-        position: relative;
-        z-index: 1;
-        border: 5px solid #c31d1d;
-        box-shadow: 3px 0px 5px #c31d1d;
-        margin: 20px auto 0;
-        border-radius: 20px;
-        box-sizing: border-box;
-
-        .topTitle {
-            width: 25%;
-            height: 200px;
+        margin: 20PX auto;
+        max-width: 1920PX;
+        background: #f1f1f1;
+        font-family: "微软雅黑", Microsoft YaHei;
+        .bwzpTop {
+            width: 1400PX;
+            margin: 0 auto;
+            height: auto;
             overflow: hidden;
-            text-align: center;
-            padding: 3% 0;
-            position: absolute;
-            top: 50%;
-            left: 0;
-            margin-top: -7%;
-
-            h1 {
+            padding: 20PX 40PX;
+            background: #fff;
+            position: relative;
+            z-index: 1;
+            border: 5PX solid #c31d1d;
+            box-shadow: 3PX 0PX 5PX #c31d1d;
+            margin: 20PX auto 0;
+            border-radius: 20PX;
+            box-sizing: border-box;
+            .topTitle {
+                width: 25%;
+                height: 200PX;
+                overflow: hidden;
+                text-align: center;
+                padding: 3% 0;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                margin-top: -7%;
+                h1 {
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 60PX;
+                    font-weight: bold;
+                    color: #c31d1d;
+                }
+                span {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 26PX;
+                    color: #c31d1d;
+                    margin-top: 15PX;
+                }
+            }
+            .topContent {
+                width: 75%;
+                float: right;
+                font-family: "宋体";
+                p {
+                    height: auto;
+                    overflow: hidden;
+                    line-height: 35PX;
+                    font-size: 18PX;
+                    color: #333;
+                    strong {
+                        text-decoration: none;
+                        color: rgb(0, 0, 0);
+                        font-weight: bold;
+                        font-size: 19PX;
+                    }
+                }
+                p:nth-child(1) a {
+                    font-size: 24PX;
+                    font-weight: bold;
+                    color: #333;
+                }
+            }
+        }
+        .bwzpBottom {
+            width: 1300PX;
+            height: auto;
+            overflow: hidden;
+            padding: 40PX;
+            border-radius: 20PX;
+            margin: -20PX auto 20PX;
+            background: #fff;
+            border: 1PX solid #000;
+            .bottomTitle {
                 width: 100%;
                 height: auto;
-                overflow: hidden;
-                font-size: 60px;
-                font-weight: bold;
-                color: #c31d1d;
+                line-height: 30PX;
+                padding: 10PX;
+                font-size: 24PX;
+                color: #b52727;
+                border-bottom: 2PX solid #000;
+                box-sizing: border-box;
             }
-
-            span {
-                display: block;
+            .zhaopin_list {
                 width: 100%;
                 height: auto;
                 overflow: hidden;
-                font-size: 26px;
-                color: #c31d1d;
-                margin-top: 15px;
+                margin: 20PX auto;
+                >li {
+                    width: 99%;
+                    height: auto;
+                    overflow: hidden;
+                    border: 2PX solid #c31d1d;
+                    margin: 20PX auto;
+                    background: #c31d1d;
+                    min-height: 100PX;
+                    display: flex;
+                    .zhaopin_left {
+                        width: 30%;
+                        height: auto;
+                        overflow: hidden;
+                        padding: 32PX 116PX 30PX 10PX;
+                        display: table-cell;
+                        text-align: center;
+                        vertical-align: middle;
+                        position: relative;
+                        box-sizing: border-box;
+                        span {
+                            display: inline-block;
+                            width: 100%;
+                            height: auto;
+                            overflow: hidden;
+                            text-align: center;
+                            font-size: 24PX;
+                            color: #fff;
+                            position: absolute;
+                            left: -45PX;
+                            top: 34%;
+                        }
+                        .new_pin_text {
+                            width: 90PX;
+                            height: 90PX;
+                            line-height: 90PX;
+                            font-size: 65PX;
+                            color: #fff;
+                            font-weight: 400;
+                            position: absolute;
+                            right: 10PX;
+                            top: 50%;
+                            border: 1PX solid #fff;
+                            text-align: center;
+                            border-radius: 50%;
+                            margin-top: -12%;
+                        }
+                    }
+                    .zhaopin_item {
+                        width: 70%;
+                        height: auto;
+                        min-height: 118PX;
+                        overflow: hidden;
+                        padding: 10PX;
+                        background: #fff;
+                        li {
+                            width: 100%;
+                            height: 40PX;
+                            line-height: 40PX;
+                            overflow: hidden;
+                            font-size: 18PX;
+                            background: #fff;
+                            color: #000;
+                            padding: 0 10PX;
+                            border: none;
+                            margin: 0;
+                            box-sizing: border-box;
+                            a {
+                                font-size: 18PX;
+                                color: #000;
+                            }
+                            a:hover {
+                                color: #c31d1d;
+                            }
+                        }
+                    }
+                }
             }
-        }
-
-        .topContent {
-            width: 75%;
-            float: right;
-            font-family: "宋体";
-
-            p {
+            .bottomContent {
+                width: 100%;
                 height: auto;
                 overflow: hidden;
-                line-height: 35px;
-                font-size: 18px;
-                color: #333;
-
-                strong {
-                    text-decoration: none;
-                    color: rgb(0, 0, 0);
-                    font-weight: bold;
-                    font-size: 19px;
+                margin: 20PX auto;
+                .bottomContent_item {
+                    width: 49%;
+                    height: auto;
+                    overflow: hidden;
+                    float: left;
+                    margin: 10PX auto;
+                    margin-right: 20PX;
+                    .itemTitle {
+                        width: 226PX;
+                        height: 50PX;
+                        line-height: 50PX;
+                        background-color: #c31d1d;
+                        a {
+                            display: inline-block;
+                            width: auto;
+                            padding: 0 100PX 0 30PX;
+                            background: #c31d1d;
+                            overflow: hidden;
+                            height: 50PX;
+                            position: relative;
+                            line-height: 50PX;
+                            color: #fff;
+                            font-size: 24PX;
+                        }
+                        a::after {
+                            content: '';
+                            display: block;
+                            width: 100PX;
+                            height: 100PX;
+                            background: #fff;
+                            position: absolute;
+                            right: -54PX;
+                            top: -61PX;
+                            transform: rotate(307deg);
+                        }
+                    }
+                    .itemList {
+                        width: 100%;
+                        min-height: 42PX;
+                        overflow: hidden;
+                        border: 1PX solid #ccc;
+                        padding: 20PX;
+                        box-sizing: border-box;
+                        li {
+                            a {
+                                font-size: 18PX;
+                                color: #333;
+                            }
+                        }
+                    }
+                    &:last-child {
+                        margin-right: 0;
+                    }
                 }
             }
-
-            p:nth-child(1) a {
-                font-size: 24px;
-                font-weight: bold;
-                color: #333;
-            }
         }
     }
-
-    .bwzpBottom {
-        width: 1300px;
+}
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+    .bwzp {
+        width: 100%;
         height: auto;
         overflow: hidden;
-        padding: 40px;
-        border-radius: 20px;
-        margin: -20px auto 20px;
-        background: #fff;
-        border: 1px solid #000;
-
-        .bottomTitle {
+        margin: 20PX auto;
+        background: #f1f1f1;
+        font-family: "微软雅黑", Microsoft YaHei;
+        .bwzpTop {
             width: 100%;
+            margin: 0 auto;
             height: auto;
-            line-height: 30px;
-            padding: 10px;
-            font-size: 24px;
-            color: #b52727;
-            border-bottom: 2px solid #000;
+            overflow: hidden;
+            padding: 20PX 40PX;
+            background: #fff;
+            position: relative;
+            z-index: 0;
+            border: 5PX solid #c31d1d;
+            box-shadow: 3PX 0PX 5PX #c31d1d;
+            margin: 20PX auto 0;
+            border-radius: 20PX;
             box-sizing: border-box;
+            .topTitle {
+                width: 25%;
+                height: auto;
+                overflow: hidden;
+                text-align: center;
+                padding: 3% 0;
+                position: absolute;
+                top: 35%;
+                left: 0;
+                margin-top: -7%;
+                h1 {
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 60PX;
+                    font-weight: bold;
+                    color: #c31d1d;
+                }
+                span {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 24PX;
+                    color: #c31d1d;
+                    margin-top: 15PX;
+                }
+            }
+            .topContent {
+                width: 75%;
+                float: right;
+                font-family: "宋体";
+                p {
+                    height: auto;
+                    overflow: hidden;
+                    line-height: 35PX;
+                    font-size: 18PX;
+                    color: #333;
+                    strong {
+                        text-decoration: none;
+                        color: rgb(0, 0, 0);
+                        font-weight: bold;
+                        font-size: 19PX;
+                    }
+                }
+                p:nth-child(1) a {
+                    font-size: 24PX;
+                    font-weight: bold;
+                    color: #333;
+                }
+            }
         }
-
-        .zhaopin_list {
-            width: 100%;
+        .bwzpBottom {
+            width: 98%;
             height: auto;
             overflow: hidden;
-            margin: 20px auto;
-
-            >li {
-                width: 99%;
+            background: #fff;
+            border: 1px solid #000;
+            margin: 0 auto;
+            padding: 0 20px;
+            box-sizing: border-box;
+            margin-top: -3px;
+            .bottomTitle {
+                width: 100%;
+                height: auto;
+                line-height: 30px;
+                padding: 10px;
+                font-size: 24px;
+                color: #b52727;
+                border-bottom: 2px solid #000;
+                box-sizing: border-box;
+            }
+            .zhaopin_list {
+                width: 100%;
                 height: auto;
                 overflow: hidden;
-                border: 2px solid #c31d1d;
                 margin: 20px auto;
-                background: #c31d1d;
-                min-height: 100px;
-                display: flex;
-
-                .zhaopin_left {
-                    width: 30%;
+                >li {
+                    width: 99%;
                     height: auto;
                     overflow: hidden;
-                    padding: 32px 116px 30px 10px;
-                    display: table-cell;
-                    text-align: center;
-                    vertical-align: middle;
-                    position: relative;
-                    box-sizing: border-box;
-
-                    span {
-                        display: inline-block;
-                        width: 100%;
+                    border: 2px solid #c31d1d;
+                    margin: 20px auto;
+                    background: #c31d1d;
+                    min-height: 100px;
+                    display: flex;
+                    .zhaopin_left {
+                        width: 380PX;
                         height: auto;
                         overflow: hidden;
+                        padding: 32PX 116PX 30PX 10PX;
+                        display: table-cell;
                         text-align: center;
-                        font-size: 24px;
-                        color: #fff;
-                        position: absolute;
-                        left: -45px;
-                        top: 34%;
+                        vertical-align: middle;
+                        position: relative;
+                        box-sizing: border-box;
+                        span {
+                            display: inline-block;
+                            width: 100%;
+                            height: auto;
+                            overflow: hidden;
+                            text-align: center;
+                            font-size: 22PX;
+                            color: #fff;
+                            position: absolute;
+                            left: -46PX;
+                            top: 34%;
+                        }
+                        .new_pin_text {
+                            width: 80PX;
+                            height: 80PX;
+                            line-height: 80PX;
+                            font-size: 65PX;
+                            color: #fff;
+                            font-weight: 400;
+                            position: absolute;
+                            right: 10PX;
+                            top: 50%;
+                            border: 1PX solid #fff;
+                            text-align: center;
+                            border-radius: 50%;
+                            margin-top: -12%;
+                        }
                     }
-
-                    .new_pin_text {
-                        width: 90px;
-                        height: 90px;
-                        line-height: 90px;
-                        font-size: 65px;
-                        color: #fff;
-                        font-weight: 400;
-                        position: absolute;
-                        right: 10px;
-                        top: 50%;
-                        border: 1px solid #fff;
-                        text-align: center;
-                        border-radius: 50%;
-                        margin-top: -12%;
+                    .zhaopin_item {
+                        width: 70%;
+                        height: auto;
+                        min-height: 118PX;
+                        overflow: hidden;
+                        padding: 10PX;
+                        background: #fff;
+                        li {
+                            width: 100%;
+                            height: 40PX;
+                            line-height: 40PX;
+                            overflow: hidden;
+                            font-size: 18PX;
+                            background: #fff;
+                            color: #000;
+                            padding: 0 10PX;
+                            border: none;
+                            margin: 0;
+                            box-sizing: border-box;
+                            a {
+                                font-size: 18PX;
+                                color: #000;
+                            }
+                            a:hover {
+                                color: #c31d1d;
+                            }
+                        }
                     }
                 }
-
-                .zhaopin_item {
-                    width: 70%;
+            }
+            .bottomContent {
+                width: 100%;
+                height: auto;
+                overflow: hidden;
+                margin: 20PX auto;
+                padding: 0 3PX;
+                box-sizing: border-box;
+                .bottomContent_item {
+                    width: 48%;
                     height: auto;
-                    min-height: 118px;
                     overflow: hidden;
-                    padding: 10px;
-                    background: #fff;
-
-                    li {
+                    float: left;
+                    margin: 10PX auto;
+                    margin-right: 15PX;
+                    .itemTitle {
+                        width: 226PX;
+                        height: 50PX;
+                        line-height: 50PX;
+                        background-color: #c31d1d;
+                        a {
+                            display: inline-block;
+                            width: auto;
+                            padding: 0 100PX 0 30PX;
+                            background: #c31d1d;
+                            overflow: hidden;
+                            height: 50PX;
+                            position: relative;
+                            line-height: 50PX;
+                            color: #fff;
+                            font-size: 24PX;
+                        }
+                        a::after {
+                            content: '';
+                            display: block;
+                            width: 100PX;
+                            height: 100PX;
+                            background: #fff;
+                            position: absolute;
+                            right: -54PX;
+                            top: -61PX;
+                            transform: rotate(307deg);
+                        }
+                    }
+                    .itemList {
                         width: 100%;
-                        height: 40px;
-                        line-height: 40px;
+                        min-height: 42PX;
                         overflow: hidden;
-                        font-size: 18px;
-                        background: #fff;
-                        color: #000;
-                        padding: 0 10px;
-                        border: none;
-                        margin: 0;
+                        border: 1PX solid #ccc;
+                        padding: 20PX;
                         box-sizing: border-box;
-
-                        a {
-                            font-size: 18px;
-                            color: #000;
-                        }
-
-                        a:hover {
-                            color: #c31d1d;
+                        li {
+                            a {
+                                font-size: 18PX;
+                                color: #333;
+                            }
                         }
                     }
+                    &:last-child {
+                        margin-right: 0;
+                    }
                 }
             }
         }
-
-        .bottomContent {
+    }
+}
+@media screen and (max-width: 800px) {
+    .bwzp {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        margin: 20px auto;
+        background: #f1f1f1;
+        font-family: "微软雅黑", Microsoft YaHei;
+        .bwzpTop {
             width: 100%;
+            margin: 0 auto;
+            height: auto;
+            overflow: hidden;
+            padding: 20px 40px;
+            background: #fff;
+            position: relative;
+            z-index: 0;
+            border: 5px solid #c31d1d;
+            box-shadow: 3px 0px 5px #c31d1d;
+            margin: 20px auto 0;
+            border-radius: 20px;
+            box-sizing: border-box;
+            .topTitle {
+                overflow: hidden;
+                text-align: center;
+                padding: 3% 0;
+                margin-bottom: 10px;
+                h1 {
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 110px;
+                    font-weight: bold;
+                    color: #c31d1d;
+                }
+                span {
+                    display: block;
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    font-size: 46px;
+                    color: #c31d1d;
+                    margin-top: 30px;
+                }
+            }
+            .topContent {
+                font-family: "宋体";
+                p {
+                    height: auto;
+                    overflow: hidden;
+                    line-height: 68px;
+                    font-size: 34px;
+                    color: #333;
+                    strong {
+                        text-decoration: none;
+                        color: rgb(0, 0, 0);
+                        font-weight: bold;
+                        font-size: 36px;
+                    }
+                }
+                p:nth-child(1) a {
+                    font-size: 46px;
+                    font-weight: bold;
+                    color: #333;
+                }
+            }
+        }
+        .bwzpBottom {
+            width: 98%;
             height: auto;
             overflow: hidden;
-            margin: 20px auto;
-
-            .bottomContent_item {
-                width: 49%;
+            padding: 40px;
+            border-radius: 40px;
+            margin: -40px auto 40px;
+            box-sizing: border-box;
+            background: #fff;
+            border: 1px solid #000;
+            .bottomTitle {
+                width: 100%;
+                height: auto;
+                line-height: 60px;
+                padding: 20px;
+                font-size: 48px;
+                color: #b52727;
+                border-bottom: 2px solid #000;
+                box-sizing: border-box;
+            }
+            .zhaopin_list {
+                width: 100%;
                 height: auto;
                 overflow: hidden;
-                float: left;
-                margin: 10px auto;
-                margin-right: 20px;
-
-                .itemTitle {
-                    width: 226px;
-                    height: 50px;
-                    line-height: 50px;
-                    background-color: #c31d1d;
-
-                    a {
-                        display: inline-block;
-                        width: auto;
-                        padding: 0 100px 0 30px;
-                        background: #c31d1d;
+                margin: 20px auto;
+                >li {
+                    width: 99%;
+                    height: auto;
+                    overflow: hidden;
+                    border: 2px solid #c31d1d;
+                    margin: 20px auto;
+                    background: #c31d1d;
+                    min-height: 100px;
+                    box-sizing: border-box;
+                    position: relative;
+                    .zhaopin_left {
+                        width: 100%;
+                        height: 100px;
                         overflow: hidden;
-                        height: 50px;
-                        position: relative;
-                        line-height: 50px;
-                        color: #fff;
-                        font-size: 24px;
+                        padding: 32px 116px 30px 20px;
+                        display: table-cell;
+                        text-align: center;
+                        vertical-align: middle;
+                        box-sizing: border-box;
+                        span {
+                            display: inline-block;
+                            width: 100%;
+                            height: auto;
+                            overflow: hidden;
+                            text-align: center;
+                            font-size: 48px;
+                            color: #fff;
+                        }
+                        .new_pin_text {
+                            width: 90px;
+                            height: 90px;
+                            line-height: 90px;
+                            font-size: 65px;
+                            color: #fff;
+                            font-weight: 400;
+                            position: absolute;
+                            right: 10px;
+                            top: 15px;
+                            border: 1px solid #fff;
+                            border-radius: 50%;
+                        }
                     }
-
-                    a::after {
-                        content: '';
-                        display: block;
-                        width: 100px;
-                        height: 100px;
+                    .zhaopin_item {
+                        width: 100%;
+                        height: auto;
+                        min-height: 240px;
+                        overflow: hidden;
+                        padding: 20px;
                         background: #fff;
-                        position: absolute;
-                        right: -54px;
-                        top: -61px;
-                        transform: rotate(307deg);
+                        li {
+                            width: 100%;
+                            height: 80px;
+                            line-height: 80px;
+                            overflow: hidden;
+                            font-size: 30px;
+                            background: #fff;
+                            color: #000;
+                            padding: 0 10px;
+                            border: none;
+                            margin: 0;
+                            box-sizing: border-box;
+                            a {
+                                font-size: 30px;
+                                color: #000;
+                            }
+                            a:hover {
+                                color: #c31d1d;
+                            }
+                        }
                     }
                 }
-
-                .itemList {
-                    width: 100%;
-                    min-height: 42px;
+            }
+            .bottomContent {
+                width: 100%;
+                height: auto;
+                overflow: hidden;
+                margin: 20PX auto;
+                .bottomContent_item {
+                    width: 48%;
+                    height: auto;
                     overflow: hidden;
-                    border: 1px solid #ccc;
-                    padding: 20px;
-                    box-sizing: border-box;
-
-                    li {
+                    float: left;
+                    margin: 10PX auto;
+                    margin-right: 10PX;
+                    .itemTitle {
+                        width: 100%;
+                        height: 100px;
+                        line-height: 100px;
+                        background-color: #c31d1d;
                         a {
-                            font-size: 18px;
-                            color: #333;
+                            display: inline-block;
+                            width: auto;
+                            height: 100px;
+                            line-height: 100px;
+                            color: #fff;
+                            font-size: 48px;
+                            padding: 0 30px;
+                            background: #c31d1d;
+                            overflow: hidden;
                         }
                     }
-                }
-
-                &:last-child {
-                    margin-right: 0;
+                    .itemList {
+                        width: 100%;
+                        min-height: 80px;
+                        overflow: hidden;
+                        border: 1px solid #ccc;
+                        padding: 20px;
+                        box-sizing: border-box;
+                        li {
+                            margin-bottom: 20px;
+                            a {
+                                font-size: 30px;
+                                color: #333;
+                            }
+                            &:last-child {
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                    &:last-child {
+                        margin-right: 0;
+                    }
                 }
             }
-
         }
     }
-
 }
 </style>