完成首页和列表页

完成首页和列表页

.nuxt/manifest/latest.json

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

.nuxt/manifest/meta/dev.json

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

.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2025-12-31T07:41:50.380Z",
+  "date": "2026-01-04T07:59:21.806Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.10.4"
   },
   "dev": {
-    "pid": 18716,
+    "pid": 25372,
     "workerAddress": {
-      "socketPath": "\\\\.\\pipe\\nitro\\worker-18716-1.sock"
+      "socketPath": "\\\\.\\pipe\\nitro\\worker-25372-1.sock"
     }
   }
 }

404.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="errorBox">
-    <img src="https://img.bjzxtw.org.cn/pre/public/error/404.png" alt="遇到了网络错误！">
+    <img src="/public/error/error.png" alt="遇到了网络错误！">
     <div @click="goHome" class="goHome">
       返回网站首页
     </div>
@@ -41,4 +41,4 @@ const goHome = () => {
       cursor: pointer;
     }
   }
-</style>
+</style>

assets/css/article/pc.less

@@ -0,0 +1,500 @@
+//导航条
+.breadcrumb {
+    width: 100%;
+    height: 22px;
+    margin-bottom: 20px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 20px;
+    color: #666666;
+    line-height: 23px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+
+    .el-breadcrumb::v-deep {
+        display: inline-block;
+        vertical-align: -4px;
+    }
+
+    /deep/.el-breadcrumb__inner a,
+    /deep/.el-breadcrumb__inner.is-link {
+        color: #666666;
+        font-weight: 400;
+        text-decoration: none;
+        transition: var(--el-transition-color);
+    }
+
+    span {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    span:hover {
+        color: #666666;
+    }
+
+    .location {
+        margin-right: 5px;
+        width: 100px;
+        height: 22px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+// 资讯列表
+.newsDetail {
+    width: 100%;
+    //height: 1400px;
+    margin-bottom: 10px;
+
+    .inner {
+        width: 1200px;
+        //height: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+
+        .innerLeft {
+            // height: 1400px;
+            border-top: 1px solid #139602;
+
+            .LeftTop {
+                margin-top: 20px;
+
+                >h1 {
+
+                    line-height: 40px;
+                    margin-bottom: 20px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 30px;
+                    color: #333333;
+                }
+
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+
+            .leftBottom {
+                width: 790px;
+                // height: 754px;
+                margin-top: 20px;
+                font-size: 20px;
+                line-height: 38px;
+                margin-bottom: 30px;
+                word-break:break-all;
+
+                ul>li img {
+                    width: 790px;
+                    height: 382px;
+                }
+
+                img {
+                    width: 790px;
+                    height: 382px;
+                }
+
+                p.tinymce-material {
+                    img {
+                        width: 790px;
+                    }
+                }
+
+                >h3,
+                >p {
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 38px;
+                    padding-bottom: 30px;
+
+                    img {
+                        width: 790px;
+                    }
+                }
+
+                >h3 {
+                    font-weight: 600px;
+                }
+
+                >p {
+                    font-weight: 400;
+                }
+
+            }
+
+            .disclaimer {
+                width: 790px;
+                overflow: hidden;
+                border-top: 1px solid #e6e6e6;
+                padding: 30px 0px;
+                color: #999999;
+                font-size: 17px;
+
+                p {
+                    width: 790px;
+                    line-height: 30px;
+                }
+            }
+
+            .recommendRead {
+                width: 790px;
+
+                margin: 30px 0px;
+
+                .recommendReadTitle {
+                    font-weight: bold;
+                    font-size: 22px;
+                    color: #49A769;
+                    height: 42px;
+                    line-height: 35px;
+                    letter-spacing: 1px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    .read_title {
+                        display: inline-block;
+                        width: 94px;
+                        height: 40px;
+                        border-bottom: 3px solid #49A769;
+                    }
+                }
+
+                .recommendReadList {
+                    min-height: 155px;
+                    margin-top: 30px;
+                    padding-bottom: 10px;
+                    font-size: 20px;
+                    border-bottom: 1px solid #D9D9D9;
+
+                    .recommendReadListTitle {
+                        margin-top: 25px;
+
+                        a {
+                            color: #333333;
+                        }
+                    }
+
+                    .recommendReadListTitle:nth-child(1)::after {
+                        content: "热";
+                        margin-left: 13px;
+                        background: #FF8A37;
+                        color: #fff;
+                        font-size: 14px;
+                        padding: 0px 2px;
+                    }
+
+                    .recommendReadListTitle:hover a {
+                        color: #49A769;
+                    }
+
+                }
+
+            }
+        }
+
+        .innerRight {
+            width: 381px;
+            // height: 605px;
+            overflow: hidden;
+            border-top: 1px solid #139602;
+
+            .hotList1 {
+                margin-bottom: 50px;
+            }
+        }
+    }
+}
+
+.leftBottom::v-deep p img,
+.leftBottom::v-deep img,
+.leftBottom::v-deep video {
+    max-width: 700px;
+}
+
+.leftBottom::v-deep h1,
+.leftBottom::v-deep h2,
+.leftBottom::v-deep h3,
+.leftBottom::v-deep h4,
+.leftBottom::v-deep h5,
+.leftBottom::v-deep h6 {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+//投票
+.index_3_box_vote {
+    .voteTitle {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        color: #333333;
+        padding-left: 20px;
+        width: 100%;
+        border-bottom: 1px solid #E7E7E7;
+        border-top: 1px solid #139602;
+        box-sizing: border-box;
+    }
+
+    width:100%;
+    box-sizing:border-box;
+    border:solid 1px #FBFBFB;
+    background: #FBFBFB;
+
+    .inquire {
+        height: 394px;
+        margin-top: 20px;
+        border-radius: 6px 6px 6px 6px;
+        padding: 4px 40px 4px 6px;
+        box-sizing: border-box;
+
+        p {
+            font-weight: bold;
+            height: 69px;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 20px;
+            color: #333333;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 12px 20px 0 32px;
+        }
+
+        .radioBox {
+            height: 250px;
+            padding-left: 30px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-bottom: 20px;
+        }
+
+        .radio {
+            /deep/.el-radio {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+
+            /deep/.el-radio-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+
+            /deep/.el-radio.el-radio--large {
+                width: 100%;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+
+            /deep/.el-radio.el-radio--large .el-radio__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+
+            /deep/.el-radio.el-radio--large .el-radio__inner {
+                height: 16px;
+                width: 16px;
+            }
+
+            /deep/.el-radio__input.is-checked+.el-radio__label {
+                color: #27881a;
+            }
+
+            /deep/.el-radio__input.is-checked .el-radio__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+
+        .checkInputBox {
+            /deep/.el-checkbox {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+
+            /deep/.el-checkbox-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+
+            /deep/.el-checkbox.el-checkbox--large {
+                width: 330px;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
+                height: 16px;
+                width: 16px;
+            }
+
+            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #27881a;
+            }
+
+            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+
+        .btn {
+            padding-left: 30px;
+
+            button {
+                width: 78px;
+                height: 37px;
+                line-height: 37px;
+                border-radius: 6px;
+                border: none;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #999999;
+            }
+
+            .voting {
+                background-color: #49A769;
+                color: #fff;
+                margin-right: 44px;
+                cursor: pointer;
+            }
+
+            .look {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .inquireData {
+        .inquireDataItem {
+            width: 100%;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #F3F3F3;
+            border: 1px solid #D2D2D2;
+            margin-bottom: 10px;
+            border-radius: 6px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            color: #999999;
+
+            .inquireDataItemTitle {
+                width: 290px;
+                height: 38px;
+                font-size: 16px;
+                line-height: 38px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .inquireDataItemNum {
+                font-size: 16px;
+            }
+        }
+
+        .active {
+            color: #49A769;
+            background: #dff7e8;
+            border: 1px solid #49A769;
+        }
+    }
+}
+
+//放大图片
+.preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.preview-modal img {
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
+    /* 关闭按钮样式 */
+}
+
+
+@media screen and (min-width:801px) {
+    /*pc*/
+
+    .breadcrumb {
+        margin-top: 20px;
+    }
+}
+
+@media screen and (max-width:800px) {
+    /*ipad_phone*/
+ 
+    .newsDetail .inner .innerLeft .leftBottom *,
+    .newsDetail .inner .innerLeft .leftBottom {
+        line-height: 24px !important;
+        font-size: 16px !important;
+        background: rgba(0, 0, 0, 0) !important;
+    }
+}

assets/css/article/yd.less

@@ -0,0 +1,87 @@
+@media screen and (min-width:801px){/*pc*/
+    .pc_none{display:none;}
+    
+    
+}
+
+@media screen and (max-width:800px){/*ipad_phone*/
+   .location{float:left;width:auto!important;} 
+   .breadcrumb .el-breadcrumb{width:100%;display:block;}
+    .breadcrumb{margin:15px auto 10px;}
+    // .breadcrumb .inner{ height:24px; }
+    .breadcrumb .phone_breadcrumb_text{
+        display:block;float:none;   
+        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+    }   
+      
+    .breadcrumb .location{ font-size: 14px; margin-right:5px;}
+        .breadcrumb span { font-size: 14px; }
+    .newsDetail .inner .innerLeft .LeftTop > h1{font-size:20px;line-height:28px;margin-bottom:15px;}
+    .newsDetail .inner .innerLeft .LeftTop{margin-top:15px;font-size:18px;}
+
+    .newsDetail .inner{width:92%;}
+    .innerLeft{width:100%;}
+    .newsDetail .inner .innerLeft .LeftTop > p{height:auto;}
+    .newsDetail .inner .innerLeft .leftBottom{width:100%;margin-bottom:15px;}
+    .newsDetail .inner .innerLeft .leftBottom :deep(img){max-width:100%;height:auto!important;}
+
+    .index_3_box_vote .inquire{margin-top:15px;height:auto;}
+    .index_3_box_vote .inquire p{height:auto;padding:0;font-size:14px;
+                        margin:0px 0px 5px 18px;}
+
+
+    .index_3_box_vote .inquire .radio .el-radio.el-radio--large .el-radio__label span{font-size:14px;}
+
+    .index_3_box_vote .voteTitle{font-size:14px;}
+    .index_3_box_vote .inquire .btn{padding-left:22px;}    
+
+    .index_3_box_vote{overflow:hidden;}
+    .index_3_box_vote .inquire .radio .el-radio.el-radio--large{margin-bottom:3px;}
+
+    .index_3_box_vote .inquire .radioBox{height:auto; 
+                    padding:0px 0px 12px 18px;}
+    .index_3_box_vote .inquire .radio .el-radio-group{width:100%;}
+
+    .index_3_box_vote .inquire .btn button{width:auto;padding:0px 10px;line-height:33px;height:33px;font-size:14px;margin-bottom:14px;}
+
+
+     .newsDetail .inner .innerLeft .disclaimer{width:100%; }   
+     .newsDetail .inner .innerLeft .disclaimer *{word-wrap: break-word;width:100%!important;display:block!important;
+        overflow-wrap: break-word;font-size:16px;
+        white-space: pre-wrap;
+        word-break: break-all; 
+    }   
+
+
+
+    // 推荐阅读
+
+    .newsDetail .inner .innerLeft .recommendRead{
+        width:100%;margin:22px 0px;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle{width:100%;height:auto;}
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{
+            width:auto;font-size:14px;box-sizing:border-box;height:33px;line-height:33px;
+            border-bottom:1px solid #49A769;
+        }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList{
+        height:auto;margin-top:11px; min-height:auto;padding-bottom:8px;
+    }
+
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle{
+        margin-top:0px;overflow:hidden;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a{
+        line-height:33px;height:33px;font-size:14px;float:left;max-width:90%; 
+        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+    }
+    .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle[data-v-1ea5c530]:nth-child(1)::after{font-size:12px;}
+    .newsDetail .inner .innerLeft .LeftTop > p span:nth-last-of-type(1){margin-right:0px;}
+
+
+
+    .innerRight{display:none;}
+    .phone_none{display:none;}
+        
+        
+}

assets/css/list/yd.less

@@ -0,0 +1,82 @@
+
+@media screen and (min-width:801px){/*pc*/
+    
+    .pagination_pc_none{display:none!important;}
+
+    .pc_none{display:none;}  
+}        
+@media screen and (max-width:800px){/*ipad_phone*/
+.sannongzhichuang .inner{width:100%;height:33px;background:#fafafa;}    
+.sannongzhichuang h2{display:none;}
+
+.sannongzhichuang p.introduction{background:#fafafa;
+    height:33px;line-height:33px;right:4%;box-sizing:border-box;
+    width:92%;display:block;word-break: keep-all; white-space: nowrap;
+    overflow-x:auto;
+    overflow-y:hidden;
+
+      &::-webkit-scrollbar {
+            height:0px;
+        }
+
+}
+
+.sannongzhichuang p.introduction > strong{display:none!important;}
+.sannongzhichuang p.introduction div{display:inline-block;height:33px;line-height:33px;}
+.sannongzhichuang p.introduction div span{display: block;height:33px;line-height:33px;margin-top:0px;width:auto;}
+.sannongzhichuang p.introduction div:nth-of-type(1) span{padding-left:0px;}
+
+.sannongzhichuang p.introduction div span{display:block;height:33px;line-height:33px;font-size:14px;padding:0px 10px;}
+.sannongzhichuang p.introduction div a{display:block;height:33px;line-height:33px;font-size:14px;}
+
+.introduction .router-link-exact-active{color:#139602!important;}
+
+.location{float:left;width:auto!important;} 
+   .breadcrumb .el-breadcrumb{width:100%;display:block;}
+    .breadcrumb{margin:15px auto 10px;}
+    // .breadcrumb .inner{ height:24px; }
+    .breadcrumb .phone_breadcrumb_text{
+        display:block;float:none;   
+        word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+    }   
+      .breadcrumb .location{ font-size: 14px; margin-right:5px;}
+        .breadcrumb span { font-size: 14px; }
+
+.newsList .inner{width:92%!important;}
+        .newsList .inner .innerLeft > .list > li{width:96%;margin:0px auto;}
+
+        .newsList .inner .innerLeft{width:100%;}
+
+
+        .newsList .inner .innerLeft > .list > li{line-height:50px;}
+        
+        
+        .newsList .inner .innerLeft > .list > li > a{
+            width:100%;display:block; height:50px;line-height:50px;font-size:16px;
+            word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        }
+        
+
+        .newsList .inner .innerLeft > .list > li a{float:left;width:92%; }
+        .newsList .inner .innerLeft > .list > li:nth-of-type(-n+2)::after{display: block;height:22px;margin:16px 0px 0px 0px;line-height:22px;float:right;}
+
+        .newsList .inner .innerLeft > .pagination{width:100%;}
+        .newsList .inner .innerLeft > .list{margin-bottom:11px;}
+        .newsList .inner .innerLeft > .pagination{margin-bottom:11px;}
+
+        .newsList .inner .innerRight {width:100%;display:none;}
+
+        .index_foot{margin-top:11px;}
+
+
+         ::v-deep .el-pager li{
+            margin:0px 4px!important;
+
+        }
+        
+        .sannongzhichuang{margin:10px auto 10px;}
+        .pagination_phone_none{display:none!important;}
+
+
+
+}

components/detail/HotNews2.vue

@@ -7,13 +7,11 @@
     <!-- 列表 -->
     <ul class="rightList">
         <li v-for="item in hotNewsList">
-            <NuxtLink :to="item.linkurl" v-show="item.islink == 1" :title="item.title">
-                <img class="hotNewsImg" :src="item.imgurl">
-                <p>{{ item.title }}</p>
+            <NuxtLink :to="item.linkurl" v-if="item.islink == 1" :title="item.title">
+                {{ item.title }}
             </NuxtLink>
             <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" v-if="item.islink == 0" :title="item.title">
-                <img class="hotNewsImg" :src="item.imgurl">
-                <p>{{ item.title }}</p>
+                {{ item.title }}
             </NuxtLink>
         </li>
     </ul>
@@ -57,24 +55,19 @@ getPageData();
 
 <style lang="less" scoped>
 .title {
-    width: 380px;
-    height: 40px;
-    line-height: 40px;
-    border-top: 1px solid #139602;
-    border-bottom: 1px solid #e7e7e7;
-    background-color: #fbfbfb;
-
-
+    width: 100%;
+    overflow: hidden;
     >h4 {
-        font-family: Microsoft YaHei, Microsoft YaHei;
-        font-weight: 400;
-        margin-left: 20px;
-        font-size: 20px;
-        color: #000000;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-
+        width: 100%;
+        height: 70px;
+        line-height: 70px;
+        background-size: 100% 100%;
+        background: url('../../public/index/reconewsh2.gif') no-repeat #158d91;
+        font-size: 22px;
+        color: #fff;
+        font-weight: bold;
+        padding-left: 30px;
+        box-sizing: border-box;
         >span {
             float: right;
             font-family: Microsoft YaHei, Microsoft YaHei;
@@ -91,78 +84,28 @@ getPageData();
 }
 
 .rightList {
-    height: 556px;
     padding-top: 20px;
-    background-color: #fbfbfb;
+    background-color: #f1f1f1;
+    padding-bottom: 30px;
 
     >li {
-        width: 380px;
-        height: 100px;
-        margin-bottom: 10px;
-        margin-left: 15px;
-        // background-color: #a5caa0;
-
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px dashed #ccc;
+        background: url(../../public/index/reconlia.png) no-repeat 0 20px;
+        padding-left: 20px;
+        box-sizing: border-box;
         a {
             display: block;
-        }
-
-        >img {
-            width: 150px;
-            height: 100px;
-            border-radius: 4px;
-        }
-
-        p {
-            float: left;
-            width: 220px;
-            height: 100px;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            overflow: hidden;
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            font-size: 14px;
+            color: #333;
             text-overflow: ellipsis;
-            word-break: break-all;
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 400;
-            font-size: 16px;
-            color: #333333;
-            line-height: 29px;
-            // border-bottom: 1px solid #e7e7e7;
-            padding-left: 12px;
-            padding-right: 10px;
-            padding-bottom: 10px;
-            padding-top: 8px;
-            box-sizing: border-box;
-        }
-
-
-    }
-
-    >li:hover {
-        p {
-            //box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
-            color: #139602;
+            overflow: hidden;
+            white-space: nowrap;
         }
     }
 }
-
-.hotNewsImg {
-    float: left;
-    width: 150px;
-    height: 100px;
-    border-radius: 4px;
-}
-
-    @media screen and (max-width:800px){/*ipad_phone*/
-    
-        .rightList > li{overflow:hidden;height:auto;width:100%;display:block;margin:0px auto 11px;}
-        .rightList > li>a{overflow:hidden;height:auto;width:100%;display:block;}
-        .hotNewsImg{width:39%;height:26vw;}
-        .rightList > li p{width:58%; float:right;}
-    
-    }
-
-
-
-
-</style>
+</style>

components/home/pageHead.vue

@@ -11,7 +11,7 @@
                         <span>|</span>
                         <NuxtLink to="/">车辆查询</NuxtLink>
                         <span>|</span>
-                        <NuxtLink to="/">用户登录</NuxtLink>
+                        <NuxtLink to="/" @click="phone_close_fun">用户登录</NuxtLink>
                     </div>
                 </div>
             </div>

components/home/pageNavigation.vue

@@ -10,7 +10,7 @@
         <div class="headerNavTop">
             <div class="first"><NuxtLink to="/">首页</NuxtLink></div>
             <ul>
-                <li><NuxtLink to="/">法制资讯</NuxtLink></li>
+                <li><NuxtLink to="/sannongkejiao/nongcunjiaoyu/list-1.html">法制资讯</NuxtLink></li>
                 <li><NuxtLink to="/">政策法规</NuxtLink></li>
                 <li><NuxtLink to="/">各地动态</NuxtLink></li>
                 <li><NuxtLink to="/">廉政时讯</NuxtLink></li>
@@ -480,7 +480,8 @@ onMounted(async () => {
     }
 }
 .headerNavMainBox {
-    width: 1400px;
+    max-width: 1400px;
+    width: 100%;
     overflow: hidden;
     margin: 20px auto 0;
     .headerNavTop,.headerNavCenter,.headerNavBottom {
@@ -506,7 +507,7 @@ onMounted(async () => {
     }
     .headerNavTop {
         width: 100%;
-        height: 70px;
+        //height: 70px;
         overflow: hidden;
         background: #158d91;
         .first {
@@ -525,7 +526,7 @@ onMounted(async () => {
     }
     .headerNavCenter {
         width: 100%;
-        height: 40px;
+        //height: 40px;
         overflow: hidden;
         background: #0072ff;
         margin-top: 4px;
@@ -547,7 +548,7 @@ onMounted(async () => {
     }
     .headerNavBottom {
         background: #f90;
-        height: 40px;
+        //height: 40px;
         margin-top: 4px;
         overflow: hidden;
         .first {

components/news/detail.vue

@@ -2,11 +2,9 @@
     <!-- 页面头部 -->
     <HomePageHead></HomePageHead>
     <!-- 导航栏 -->
-    <HomePageNavigation1></HomePageNavigation1>
-    <!-- 列表页广告一 -->
-    <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
+    <HomePageNavigation></HomePageNavigation>
     <!-- 面包屑导航 -->
-    <div class="breadcrumb">
+    <div class="breadcrumb-box">
         <div class="inner">
             <span class="location">当前位置：</span>
             <el-breadcrumb :separator-icon="ArrowRight">
@@ -20,7 +18,7 @@
                     <NuxtLink :to="`list-1.html`"> {{ routLevelTitle }}</NuxtLink>
                 </el-breadcrumb-item>
                 <el-breadcrumb-item class="phone_breadcrumb_text">
-                     {{ routeNewsTtitle }}
+                    {{ routeNewsTtitle }}
                 </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
@@ -31,23 +29,12 @@
             <div class="innerLeft">
                 <div class="LeftTop">
                     <h1>{{ newsDetail.title }}</h1>
-
-                    <p class="phone_none">
-                        来源: <span>{{ newsDetail.copyfrom }}</span>
-                        作者: <span>{{ newsDetail.author }}</span>
-                        发布时间: <span>{{ time }}</span>
-                    </p>
-
                     <p class="pc_none">
-
-                       <span>{{ newsDetail.copyfrom }}</span>
-                       <span>{{ newsDetail.author }}</span>
+                        <span>{{ newsDetail.copyfrom }}</span>
+                        <span>{{ newsDetail.author }}</span>
                         <span>{{ time }}</span>
                     </p>
-
-                    <!-- <img :src="newsDetail.imgurl" v-if="newsDetail.imgurl&&newsDetail.level==2||newsDetail.level==3"> -->
                 </div>
-                <!-- <div class="leftBottom" v-html="newsDetail.content" v-if="newsDetail.content"></div> -->
                 <div 
                     class="leftBottom" 
                     v-html="newsDetail.content" 
@@ -153,9 +140,9 @@
             </div>
             <div class="innerRight">
                 <!-- 热点资讯1 -->
-                <div class="hotList1">
+                <!-- <div class="hotList1">
                     <DetailHotNews></DetailHotNews>
-                </div>
+                </div> -->
                 <!-- 热点资讯2 -->
                 <div class="hotList2">
                     <DetailHotNews2></DetailHotNews2>
@@ -164,7 +151,7 @@
         </div>
     </div>
     <!-- 页面底部 -->
-    <HomeFoot1></HomeFoot1>
+    <HomeFoot></HomeFoot>
 </template>
 
 <script setup>
@@ -172,14 +159,11 @@
 import { onMounted } from 'vue'
 import { ElBreadcrumb, ElBreadcrumbItem,ElRadio, ElRadioGroup,ElCheckbox,ElCheckboxGroup,ElMessage,ElInput } from 'element-plus'
 import { ArrowRight } from '@element-plus/icons-vue'
-
 const nuxtApp = useNuxtApp();
 const axios = nuxtApp.$axios;
-
 //1.1 获得跳转过来的id
 const route = useRoute();
 const articleId = parseInt(route.params.id);  //获得该页面的id
-
 //1.2 获得父级栏目的名称、id
 //获得当前的完整路径
 const fullPath = route.path;
@@ -191,8 +175,6 @@ const targetSegment1 = getRoutePath(2);
 const targetSegment2 = getRoutePath(3);
 // const numberPart = targetSegment.match(/\d+$/)?.[0]; 
 // const routeId = numberPart;
-
-
 let routeId;
 //通过导航路径反向查询导航id
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
@@ -209,7 +191,6 @@ if(getRouteId.code == 200){
     console.log("后端错误反馈：",getRouteId.message)
     console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
-
 //面包屑导航
 const parent_name = ref("");
 const parent_id = ref("");
@@ -222,7 +203,6 @@ let getParentNav = async () => {
         },
     });
     console.log("获取面包屑导航",listData);
-    
     if (listData.code == 200) {
         parent_name.value = listData.data.parent_name;
         parent_id.value = listData.data.parent_id;
@@ -238,7 +218,6 @@ let getParentNav = async () => {
 //获得父级栏目详情
 getParentNav();
 //1.页面依赖 end ---------------------------------------->
-
 //2.页面数据 start ---------------------------------------->
 //2.1 资讯详情
 const newsDetail = ref({})
@@ -287,27 +266,9 @@ async function getPageData() {
     }
 }
 getPageData();
-
 //2.5 获得广告
 //广告列表
 let adImg1 = ref([]);
-// async function getAdData(){
-//     const adData = await requestDataPromise('/web/getWebsiteAdvertisement',{method:'GET',query:{'ad_tag':'DETAIL'}});
-//     if(adData.code==200){
-//         for(let item of adData.data){
-//             if(item.ad_tag == 'DETAIL_0001'){
-//                 adImg1.value = item;
-//             }
-//         }
-//     }else{
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//         console.log("错误位置：获取详情页广告列表")
-//         console.log("后端错误反馈：",adData.message)
-//         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
-//     }
-// }
-// getAdData();
-
 onMounted(async ()  => {
     const { $webUrl, $CwebUrl } = useNuxtApp();
     //广告1
@@ -322,9 +283,7 @@ 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', {
@@ -339,7 +298,6 @@ if(setData.code==200){
     let seoKeywords = setData.data.keyword;
     let seoSuffix = setData.data.suffix;
     let seoName = setData.data.website_name;
-
     useSeoMeta({
         title: seoTitle + "_" + seoName + "_" + seoSuffix,
         meta: [
@@ -355,19 +313,16 @@ if(setData.code==200){
     // 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(){
@@ -394,7 +349,6 @@ async function getVoteList(){
         }
         //用户投票属于哪一篇文章
         userSurId.value = voteData.data[0].sur_id;
-
     }else{
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
         console.log("错误位置：首页投票")
@@ -402,8 +356,6 @@ async function getVoteList(){
         console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->") 
     }
 }
-
-
 //3.2当用户选择了选项，判断是否展示其他输入框
 const handleRadioChange = (value) => {
     if(value == userIsChoice.value){
@@ -412,7 +364,6 @@ const handleRadioChange = (value) => {
         showUserChoice.value = false;
     }
 }
-
 const handleCheckboxChange = (value) => {
     if (value.includes(userIsChoice.value)) {
         showUserChoice.value = true;
@@ -420,7 +371,6 @@ const handleCheckboxChange = (value) => {
         showUserChoice.value = false;
     }
 }
-
 //3.2发起投票
 async function addWebsiteSurvey(){
     //判断当前是单选还是多选
@@ -649,7 +599,6 @@ async function addWebsiteSurvey(){
     }
 }
 //4.投票 end---------------------------------------->
-
 //5.页面图片放大 start---------------------------------------->
 const previewVisible = ref(false)
 const selectedImage = ref(' ')
@@ -667,100 +616,399 @@ const closePreview = () => {
 </script>
 
 <style lang="less" scoped>
-@import url('@/assets/css/detail.less');
-</style>
-
-
-<style lang="less" scoped>
-    @media screen and (min-width:801px){/*pc*/
-        .pc_none{display:none;}
-        
-        
+//@import url('@/assets/css/article/pc.less');
+//@import url('@/assets/css/article/yd.less');
+//面包屑
+.breadcrumb-box {
+    width: 1400px;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
     }
-
-    @media screen and (max-width:800px){/*ipad_phone*/
-       .location{float:left;width:auto!important;} 
-       .breadcrumb .el-breadcrumb{width:100%;display:block;}
-        .breadcrumb{margin:15px auto 10px;}
-        // .breadcrumb .inner{ height:24px; }
-        .breadcrumb .phone_breadcrumb_text{
-            display:block;float:none;   
-            word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
-        }   
-          
-        .breadcrumb .location{ font-size: 14px; margin-right:5px;}
-            .breadcrumb span { font-size: 14px; }
-        .newsDetail .inner .innerLeft .LeftTop > h1{font-size:20px;line-height:28px;margin-bottom:15px;}
-        .newsDetail .inner .innerLeft .LeftTop{margin-top:15px;font-size:18px;}
-
-        .newsDetail .inner{width:92%;}
-        .innerLeft{width:100%;}
-        .newsDetail .inner .innerLeft .LeftTop > p{height:auto;}
-        .newsDetail .inner .innerLeft .leftBottom{width:100%;margin-bottom:15px;}
-        .newsDetail .inner .innerLeft .leftBottom :deep(img){max-width:100%;height:auto!important;}
-
-        .index_3_box_vote .inquire{margin-top:15px;height:auto;}
-        .index_3_box_vote .inquire p{height:auto;padding:0;font-size:14px;
-                            margin:0px 0px 5px 18px;}
- 
-
-        .index_3_box_vote .inquire .radio .el-radio.el-radio--large .el-radio__label span{font-size:14px;}
-
-        .index_3_box_vote .voteTitle{font-size:14px;}
-        .index_3_box_vote .inquire .btn{padding-left:22px;}    
-
-        .index_3_box_vote{overflow:hidden;}
-        .index_3_box_vote .inquire .radio .el-radio.el-radio--large{margin-bottom:3px;}
-
-        .index_3_box_vote .inquire .radioBox{height:auto; 
-                        padding:0px 0px 12px 18px;}
-        .index_3_box_vote .inquire .radio .el-radio-group{width:100%;}
-
-        .index_3_box_vote .inquire .btn button{width:auto;padding:0px 10px;line-height:33px;height:33px;font-size:14px;margin-bottom:14px;}
-
-
-         .newsDetail .inner .innerLeft .disclaimer{width:100%; }   
-         .newsDetail .inner .innerLeft .disclaimer *{word-wrap: break-word;width:100%!important;display:block!important;
-            overflow-wrap: break-word;font-size:16px;
-            white-space: pre-wrap;
-            word-break: break-all; 
-        }   
-
-
-
-        // 推荐阅读
-
-        .newsDetail .inner .innerLeft .recommendRead{
-            width:100%;margin:22px 0px;
+}
+//资讯详情
+.newsDetail {
+    width: 100%;
+    margin-bottom: 10px;
+    .inner {
+        width: 1400px;
+        overflow: hidden;
+        font-size: 16px;
+        .innerLeft {
+            width: 1030px;
+            .LeftTop {
+                margin-top: 20px;
+                >h1 {
+                    line-height: 40px;
+                    margin-bottom: 20px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: bold;
+                    font-size: 30px;
+                    color: #333333;
+                }
+                >p {
+                    height: 18px;
+                    line-height: 18px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #999999;
+                    span {
+                        margin-right: 40px;
+                    }
+                }
+                >img {
+                    width: 680px;
+                    height: 382px;
+                    padding: 50px 0px 60px 55px;
+                }
+            }
+            .leftBottom {
+                margin-top: 20px;
+                font-size: 20px;
+                line-height: 38px;
+                margin-bottom: 30px;
+                word-break:break-all;
+                ul>li img {
+                    width: 790px;
+                    height: 382px;
+                }
+                img {
+                    width: 790px;
+                    height: 382px;
+                }
+                p.tinymce-material {
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3,
+                >p {
+                    text-indent: 2em;
+                    width: 790px;
+                    font-family: Microsoft YaHei, Microsoft YaHei;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 38px;
+                    padding-bottom: 30px;
+                    img {
+                        width: 790px;
+                    }
+                }
+                >h3 {
+                    font-weight: 600px;
+                }
+                >p {
+                    font-weight: 400;
+                }
+            }
+            .disclaimer {
+                width: 790px;
+                overflow: hidden;
+                border-top: 1px solid #e6e6e6;
+                padding: 30px 0px;
+                color: #999999;
+                font-size: 17px;
+                p {
+                    width: 790px;
+                    line-height: 30px;
+                }
+            }
+            .recommendRead {
+                width: 790px;
+                margin: 30px 0px;
+                .recommendReadTitle {
+                    font-weight: bold;
+                    font-size: 22px;
+                    color: #49A769;
+                    height: 42px;
+                    line-height: 35px;
+                    letter-spacing: 1px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    border-bottom: 1px solid #D9D9D9;
+                    .read_title {
+                        display: inline-block;
+                        width: 94px;
+                        height: 40px;
+                        border-bottom: 3px solid #49A769;
+                    }
+                }
+                .recommendReadList {
+                    min-height: 155px;
+                    margin-top: 30px;
+                    padding-bottom: 10px;
+                    font-size: 20px;
+                    border-bottom: 1px solid #D9D9D9;
+                    .recommendReadListTitle {
+                        margin-top: 25px;
+                        a {
+                            color: #333333;
+                        }
+                    }
+                    .recommendReadListTitle:nth-child(1)::after {
+                        content: "热";
+                        margin-left: 13px;
+                        background: #FF8A37;
+                        color: #fff;
+                        font-size: 14px;
+                        padding: 0px 2px;
+                    }
+                    .recommendReadListTitle:hover a {
+                        color: #49A769;
+                    }
+                }
+            }
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle{width:100%;height:auto;}
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadTitle .read_title{
-                width:auto;font-size:14px;box-sizing:border-box;height:33px;line-height:33px;
-                border-bottom:1px solid #49A769;
+        .innerRight {
+            width: 315px;
+            overflow: hidden;
+            border-top: 1px solid #139602;
+            .hotList1 {
+                margin-bottom: 50px;
             }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList{
-            height:auto;margin-top:11px; min-height:auto;padding-bottom:8px;
         }
-
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle{
-            margin-top:0px;overflow:hidden;
+    }
+}
+.leftBottom::v-deep p img,
+.leftBottom::v-deep img,
+.leftBottom::v-deep video {
+    max-width: 700px;
+}
+.leftBottom::v-deep h1,
+.leftBottom::v-deep h2,
+.leftBottom::v-deep h3,
+.leftBottom::v-deep h4,
+.leftBottom::v-deep h5,
+.leftBottom::v-deep h6 {
+    font-size: 20px;
+    font-weight: 500;
+}
+//投票
+.index_3_box_vote {
+    .voteTitle {
+        font-size: 20px;
+        height: 40px;
+        line-height: 40px;
+        color: #333333;
+        padding-left: 20px;
+        width: 100%;
+        border-bottom: 1px solid #E7E7E7;
+        border-top: 1px solid #139602;
+        box-sizing: border-box;
+    }
+    width:100%;
+    box-sizing:border-box;
+    border:solid 1px #FBFBFB;
+    background: #FBFBFB;
+    .inquire {
+        height: 394px;
+        margin-top: 20px;
+        border-radius: 6px 6px 6px 6px;
+        padding: 4px 40px 4px 6px;
+        box-sizing: border-box;
+        p {
+            font-weight: bold;
+            height: 69px;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 20px;
+            color: #333333;
+            line-height: 21px;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+            padding: 12px 20px 0 32px;
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle a{
-            line-height:33px;height:33px;font-size:14px;float:left;max-width:90%; 
-            word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+        .radioBox {
+            height: 250px;
+            padding-left: 30px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding-bottom: 20px;
+        }
+        .radio {
+            /deep/.el-radio {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-radio-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-radio.el-radio--large {
+                width: 100%;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-radio.el-radio--large .el-radio__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-radio__input.is-checked+.el-radio__label {
+                color: #27881a;
+            }
+            /deep/.el-radio__input.is-checked .el-radio__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .checkInputBox {
+            /deep/.el-checkbox {
+                --el-radio-input-border-color-hover: #27881a;
+            }
+            /deep/.el-checkbox-group {
+                align-items: center;
+                display: inline-flex;
+                flex-wrap: wrap;
+                font-size: 0;
+                //padding-left: 35px;
+            }
+            /deep/.el-checkbox.el-checkbox--large {
+                width: 330px;
+                height: 29px;
+                margin-bottom: 15px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__label {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #333333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 300px;
+            }
+            /deep/.el-checkbox.el-checkbox--large .el-checkbox__inner {
+                height: 16px;
+                width: 16px;
+            }
+            /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #27881a;
+            }
+            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
+                background: #33b023;
+                border-color: #27881a;
+            }
+        }
+        .btn {
+            padding-left: 30px;
+            button {
+                width: 78px;
+                height: 37px;
+                line-height: 37px;
+                border-radius: 6px;
+                border: none;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 16px;
+                color: #999999;
+            }
+            .voting {
+                background-color: #49A769;
+                color: #fff;
+                margin-right: 44px;
+                cursor: pointer;
+            }
+            .look {
+                cursor: pointer;
+            }
         }
-        .newsDetail .inner .innerLeft .recommendRead .recommendReadList .recommendReadListTitle[data-v-1ea5c530]:nth-child(1)::after{font-size:12px;}
-        .newsDetail .inner .innerLeft .LeftTop > p span:nth-last-of-type(1){margin-right:0px;}
-
-
-
-        .innerRight{display:none;}
-        .phone_none{display:none;}
-            
-            
     }
-
-
+    .inquireData {
+        .inquireDataItem {
+            width: 100%;
+            height: 38px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: #F3F3F3;
+            border: 1px solid #D2D2D2;
+            margin-bottom: 10px;
+            border-radius: 6px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            color: #999999;
+            .inquireDataItemTitle {
+                width: 290px;
+                height: 38px;
+                font-size: 16px;
+                line-height: 38px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .inquireDataItemNum {
+                font-size: 16px;
+            }
+        }
+        .active {
+            color: #49A769;
+            background: #dff7e8;
+            border: 1px solid #49A769;
+        }
+    }
+}
+//放大图片
+.preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+.preview-modal img {
+    max-width: 100%;
+    max-height: 100%;
+    cursor: pointer;
+}
 </style>
 
 

components/news/list.vue

@@ -341,7 +341,7 @@ onMounted(async ()  => {
 </script>
 
 <style lang="less" scoped>
-@import url('@/assets/css/list.less');
+@import url('@/assets/css/list/pc.less');
 </style>
 
 <style lang="less" scoped>

error.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="errorBox">
-    <img src="https://img.bjzxtw.org.cn/pre/public/error/404.png" alt="遇到了网络错误！">
+    <img src="/public/error/error.png" alt="遇到了网络错误！">
     <div @click="goHome" class="goHome">
       返回网站首页
     </div>
@@ -41,4 +41,4 @@ const goHome = () => {
       cursor: pointer;
     }
   }
-</style>
+</style>

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

@@ -1,32 +0,0 @@
-<template>
-    <NewsList v-if="routeType == 1"></NewsList>
-    <GoodsList v-if="routeType == 2"></GoodsList>
-</template>
-<script setup>
-//0.加载页面依赖 start ---------------------------------------->
-import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-//0.加载页面依赖 end ---------------------------------------->
-
-//1.获得路由id start ---------------------------------------->
-const targetSegment = getRoutePath(1);
-const targetSegment1 = getRoutePath(2);
-//1.1 获得当前的路由id
-let routeId;
-let routeType;
-//通过导航路径反向查询导航id
-const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
-    method: 'GET',
-    query: {
-        'pinyin': targetSegment1,
-    },
-});
-if (getRouteId.code == 200) {
-    console.log('getRouteId', getRouteId.data);
-    routeId = getRouteId.data.category_id
-    routeType = getRouteId.data.type
-} else {
-    console.log("获得路由id出错！", getRouteId.message)
-}
-//1.获得路由id end ---------------------------------------->
-</script>

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

@@ -1,32 +1,424 @@
 <template>
-    <NewsList v-if="routeType == 1"></NewsList>
-    <GoodsList v-if="routeType == 2"></GoodsList>
+    <div id="newsList">
+        <!-- 页面头部 -->
+        <HomePageHead></HomePageHead>
+        <!-- 导航栏 -->
+        <HomePageNavigation></HomePageNavigation>
+        <!-- 面包屑导航 -->
+        <div class="breadcrumb-box">
+            <div class="inner">
+                <span class="location">当前位置：</span>
+                <el-breadcrumb :separator-icon="ArrowRight">
+                    <el-breadcrumb-item>
+                        <NuxtLink to="/">首页</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item v-if="parent_name !=''">
+                        <NuxtLink :to="`/${parent_pinyin}/index.html`"> {{ parent_name }}</NuxtLink>
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item class="phone_breadcrumb_text">{{ name }}</el-breadcrumb-item>
+                </el-breadcrumb>
+            </div>
+        </div>
+        <!-- 资讯列表 -->
+        <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>
+                            <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" 
+                        />
+                        <span class="total">共{{ total }}条</span>
+                    </div>
+                </div>
+                <div class="listBoxRight">
+                    <!-- <DetailHotNews></DetailHotNews> -->
+                    <DetailHotNews2></DetailHotNews2>
+                </div>
+            </div>
+        </div>
+        <!-- 页面底部 -->
+        <HomeFoot></HomeFoot>
+    </div>
 </template>
+
 <script setup>
-//0.加载页面依赖 start ---------------------------------------->
+//1.页面必备依赖 start ---------------------------------------->
+import { ElBreadcrumb, ElBreadcrumbItem, ElPagination } from 'element-plus'
+import { ArrowRight } from '@element-plus/icons-vue'
 import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-//0.加载页面依赖 end ---------------------------------------->
+//当前列表名称
+const name = ref('')
+const { $webUrl, $CwebUrl, $BwebUrl } = useNuxtApp()
+
+//格式化跳转路径
+const getLinkPathDetail = (item) => {
+    if (item.islink == 1) {
+        return `${item.linkurl}`;
+    } else {
+        //return `/${item.aLIas_pinyin}/${item.id}`;
+        //return `/newsDetail/${item.id}`
+        return `/${item.pinyin}/${item.id}.html`;
+    }
+}
+//1.页面必备依赖 end ---------------------------------------->
 
 //1.获得路由id start ---------------------------------------->
-const targetSegment = getRoutePath(1);
-const targetSegment1 = getRoutePath(2);
-//1.1 获得当前的路由id
-let routeId;
-let routeType;
+const route = useRoute();
+let articleId = 0;//路由id
+let pageNum = ref(2);
+let total = ref(1);
+let pageSize = ref(20);
+//获得当前的完整路径
+const fullPath = route.path;
+//拆分，取出来中间这一段，然后提取数字部分
+const segments = fullPath.split('/'); 
+const targetSegment = segments[2]; 
+const targetRoute = segments[1]; 
 //通过导航路径反向查询导航id
 const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
     method: 'GET',
     query: {
-        'pinyin': targetSegment+'/'+targetSegment1,
+        'pinyin': targetRoute+'/'+targetSegment,
     },
 });
-if (getRouteId.code == 200) {
-    console.log('getRouteId', getRouteId.data);
-    routeId = getRouteId.data.category_id
-    routeType = getRouteId.data.type
-} else {
-    console.log("获得路由id出错！", getRouteId.message)
+if(getRouteId.code == 200){
+    articleId = getRouteId.data.category_id
+}else{
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：通过url路径查询导航池id")
+    console.log("后端错误反馈：",getRouteId.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
 }
+//获得html前的数字
+pageNum.value = parseInt(route.params.id);
 //1.获得路由id end ---------------------------------------->
-</script>
+
+//2.页面数据 start ---------------------------------------->
+//2.2新闻列表
+const newsList = ref([]);
+let newslists = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteArticleList', {
+        method: 'GET',
+        query: {
+            'page': pageNum.value,
+            'pageSize': pageSize.value,
+            'catid': articleId
+        },
+    });
+    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("错误位置：获取新闻列表")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得列表
+newslists();
+
+//分页事件
+let changePage = (value) => {
+    console.log("当前页码", value);
+    navigateTo(`/${targetSegment}/${value}.html`)
+}
+
+//2.3获得页面名称
+let getPageName = async () => {
+    const pageName = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
+    if (pageName.code == 200) {
+        name.value = pageName.data.alias
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：设置页面标题")
+        console.log("后端错误反馈：", pageName.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//获得列表
+getPageName();
+//2.页面数据 end ---------------------------------------->
+//3.二级栏目 start ---------------------------------------->
+//3.1通过id获取父栏目
+const parent_name = ref([]);
+const parent_id = ref([]);
+const parent_pinyin = ref("");
+let getParentNav = async () => {
+    const listData = await requestDataPromise('/web/getOneWebsiteCategory', {
+        method: 'GET',
+        query: {
+            'catid': articleId
+        },
+    });
+    if (listData.code == 200) {
+        parent_name.value = listData.data.parent_name;
+        parent_id.value = listData.data.parent_id;
+        parent_pinyin.value = listData.data.parent_pinyin;
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取新闻列表")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+    getSecondNav();
+}
+//获得父级栏目详情
+getParentNav();
+
+// 3.2获取二级栏目
+const secondNav = ref([]);
+let getSecondNav = async () => {
+    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
+        method: 'GET',
+        query: {
+            'placeid': 1,
+            'pid': parent_id.value,
+            'num': 8,
+        },
+    });
+    console.log('listData', listData);
+    if (listData.code == 200) {
+        secondNav.value = listData.data;
+    } else {
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+        console.log("错误位置：获取新闻列表")
+        console.log("后端错误反馈：", listData.message)
+        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    }
+}
+//3.二级栏目 end ---------------------------------------->
+//4.设置seo信息 start---------------------------------------->
+//4.1 设置seo信息
+const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
+    method: 'GET',
+    query: {
+        '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 }
+        ]
+    });
+} else {
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+    console.log("错误位置：设置列表页面SEO数据")
+    console.log("后端错误反馈：", setData.message)
+    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
+}
+//4.设置seo信息 end---------------------------------------->
+//5.广告 start---------------------------------------->
+let adImg1 = ref({});
+let adImg2 = ref({});
+onMounted(async ()  => {
+    //从客户端获取行政职能部门 加快打开速度
+    const { $webUrl, $CwebUrl } = useNuxtApp();
+    //广告1
+    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_list_0001`
+    const responseAd1 = await fetch(url, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd1 = await responseAd1.json();
+    adImg1.value = resultAd1.data[0];
+    //广告2
+    let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_list_0002`
+    const responseAd2 = await fetch(url2, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Userurl': $CwebUrl,
+            'Origin': $CwebUrl
+        }
+    });
+    const resultAd2 = await responseAd2.json();
+    adImg2.value = resultAd2.data[0];
+
+})
+//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;
+    margin: 0 auto;
+    .inner {
+        width: 100%;
+        height: 22px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        color: #666666;
+        line-height: 23px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px dashed #ccc;
+        margin-bottom: 10px;
+        padding: 20px 20px 20px 0;
+        box-sizing: border-box;
+        a {
+            font-size: 16px;
+            color: #000; 
+            line-height: 20px;
+        }
+        span {
+            font-size: 16px;
+            color: #000;
+            line-height: 20px;
+            &.location {
+                line-height: 20px;
+            }
+        }
+    }
+}
+
+//资讯列表
+.newsList {
+    width: 1400px;
+    margin: 0 auto;
+    .listBox {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        .listBoxLeft {
+            width: 1030px;
+            .list {
+                >li {
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    border-bottom: 1px dashed #ccc;
+                    margin-top: 30px;
+                    padding-bottom: 30px;
+                    a {
+                        color: #337ab7;
+                        text-decoration: none;
+                        display: block;
+                        width: 100%;
+                        height: 22px;
+                        line-height: 22px;
+                        font-size: 20px;
+                        font-weight: bold;
+                        color: #333;
+                        overflow: hidden;
+                        word-break: keep-all;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    p {
+                        a {
+                            width: 100%;
+                            height: 72px;
+                            line-height: 24px;
+                            overflow: hidden;
+                            font-size: 14px;
+                            color: #666;
+                            font-weight: normal;
+                        }
+                    }
+                }
+            }
+        }
+        .listBoxRight {
+            width: 315px;
+            overflow: hidden;
+        }
+    }
+}
+
+//分页
+.pagination {
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+    margin: 20px 0;
+    padding: 20px 0;
+    // 鼠标移入后字体颜色
+    .el-pagination::v-deep :hover {
+        color: #139609;
+    }
+    .el-pagination.is-background::v-deep .btn-next,
+    .el-pagination.is-background::v-deep .btn-prev {
+        width: 70px;
+        height: 34px;
+        margin: 0px 10px;
+        border-radius: 4px;
+    }
+    .el-pagination.is-background::v-deep .el-pager li {
+        margin: 0px 10px;
+        width: 38px;
+        height: 34px;
+        border-radius: 4px;
+    }
+    .el-pagination.is-background::v-deep .btn-next.is-active,
+    .el-pagination.is-background::v-deep .btn-prev.is-active,
+    .el-pagination.is-background::v-deep .el-pager li.is-active {
+        background-color: #337ab7;
+        color: #fff;
+    }
+    .total {
+        display: block;
+        height: 34px;
+        line-height: 34px;
+        font-size: 18px;
+        margin-left: 20px;
+    }
+}
+</style>
+
+
+
+

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

@@ -4,7 +4,7 @@
         <HomePageHead></HomePageHead>
 
         <!-- 导航栏 -->
-        <HomePageNavigation1></HomePageNavigation1>
+        <HomePageNavigation></HomePageNavigation>
 
         <!-- 列表页广告一 -->
         <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
@@ -339,7 +339,7 @@ onMounted(async ()  => {
 </script>
 
 <style lang="less" scoped>
-@import url('@/assets/css/list.less');
+@import url('@/assets/css/list/pc.less');
 </style>
 
 <style lang="less" scoped>