修改样式

src/pages/articleDetails/App.js

@@ -8,7 +8,7 @@ import {
 
 export default class App {
     constructor() {
-        let common = new Common(document.querySelector('.main'),2)   //导航菜单高亮，0是首页，后面的按顺序添加
+        // let common = new Common(document.querySelector('.main'),2)   //导航菜单高亮，0是首页，后面的按顺序添加
         this.isMobile = isMobile()
         // this.tabChange()
         // 图片及视频资源懒加载。防止阻塞js执行

src/pages/articleDetails/index.less

@@ -177,6 +177,7 @@ a{
                 display: block;
                 margin-top: 12.5vw;
                 border-bottom: 1px solid #DDE2E6;
+                font-size: 13px;
                 .head_left,.head_right{
                     width: 100%;
                     display: flex;

src/pages/news/index.html

@@ -58,7 +58,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="tabs_box wow fadeInUp" id="point">
+                <div class="tabs_box" id="point">
                     <a class="tabs_li tabs_lis">全部</a>
                     <a class="tabs_li">集团新闻</a>
                     <a class="tabs_li">前沿资讯</a>

src/pages/news/index.less

@@ -144,7 +144,7 @@
                 color: #231F20;
                 margin-right: 80px;
                 cursor: pointer;
-                padding-bottom: 30px;
+                padding: 30px 0;
                 transition: all .2s;
                 border-bottom: 2px solid transparent;
                 position: relative;
@@ -381,65 +381,18 @@
 a{
     display: inline-block;
 }
+img{
+    display: block;
+}
 
-// @media screen and (min-width: 808px) and (max-width: 1180px){
-//     .main{
-//         .content{
-//             width: calc(100% - 60px);
-//             .banner_box{
-//                 .news_banner{
-//                     width: 430px;
-//                     height: 213px;
-//                     .news_content{
-//                         border-radius: 12px;
-//                     }
-//                 }   
-//                 .news_banner2{
-//                     width: 300px;
-//                     img{
-//                         height: 200px;
-//                     }
-//                     .txt1{
-//                         font-size: 16px;
-//                     }
-//                     .txt2{
-//                         font-size: 14px;
-//                     }
-//                     .txt3{
-//                         font-size: 14px;
-//                     }
-//                     a{
-//                         font-size: 14px;
-//                         .icon{
-//                             margin-top: -2px;
-//                             font-size: 18px;
-//                         }
-//                     }
-//                 }
-//             }
-//             .tabs_box{
-//                 width: calc(100% - 60px);
-//             }
-//         }
-//         .news_ul {
-//             max-width: 100%;
-//             width: calc(100% - 60px);
-//             overflow: hidden;
-//             .news_list{
-//                 width: calc(100% - 60px);
-//             }
-//         }
-//         .news_paging{}
-//     }
-// }
-@media screen and (min-width: 808px) and (max-width: 1400px) {
+@media screen and (min-width: 808px) and (max-width: 1180px){
     .main{
         .content{
             width: calc(100% - 60px);
             .banner_box{
                 .news_banner{
-                    width: 630px;
-                    height: 413px;
+                    width: 430px;
+                    height: 213px;
                     .news_content{
                         border-radius: 12px;
                     }
@@ -473,17 +426,225 @@ a{
         }
         .news_ul {
             max-width: 100%;
-            // width: calc(100% - 60px);
-            width: 100%;
-            padding: 0 30px;
+            width: calc(100% - 60px);
             overflow: hidden;
-            box-sizing: border-box;
             .news_list{
                 width: calc(100% - 60px);
+                .news_li{
+                    .li_cont{
+                        width: 90%;
+                    }
+                }
             }
         }
         .news_paging{}
     }
+}
+@media screen and (min-width: 118px) and (max-width: 1400px) {
+    .main{
+        .content{
+            width: calc(100% - 60px);
+            .banner_box{
+                display: block;
+                margin-bottom: 15vw;
+                .news_banner{
+                    width: 100%;
+                    height: auto;
+                    margin-bottom: 8vw;
+                   
+                    img{
+                        width: 100%;
+                        height: 62.75vw;
+                        border-radius: 1.625vw;
+                        object-fit: cover;
+                    }
+                    
+                    .news_content{
+                        padding: 3.75vw;
+                        display: flex;
+                        flex-wrap: wrap;
+                        flex-direction: column-reverse;
+                        .cont1{
+                            font-weight: bold;
+                            font-size: 3.75vw;
+                            color: #fff;
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
+                            -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                            overflow: hidden;            /* 隐藏超出部分 */
+                            text-overflow: ellipsis;     /* 用省略号表示超出部分 */
+                        }
+                        .cont2{
+                            width: 100%;
+                            font-size: 3.375vw;
+                            color: #fff;
+                            margin-bottom: 2.5vw;
+                        }
+                        .cont3{
+                            font-size: 3.25vw;
+                            color: #fff;
+                        }
+                    }
+                    
+                }
+                .news_banner2{
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 10.75vw;
+                    img{
+                        width: 45.375vw;
+                        height: 34vw;
+                        margin-bottom: 0;
+                        border-radius: 1.625vw;
+                    }
+                    .banner2_cont{
+                        width: 42.5vw;
+                    }
+                    .txt1{
+                        width: 42.5vw;
+                        font-size: 3.75vw;
+                        display: -webkit-box;           /* 使用 Flexbox 布局 */
+                        -webkit-box-orient: vertical;   /* 垂直方向排列 */
+                        -webkit-line-clamp: 2;         /* 限制显示的行数，这里是3行 */
+                        overflow: hidden;               /* 隐藏超出部分 */
+                        text-overflow: ellipsis; 
+                        line-height: 1.5;
+                        padding-bottom: 0;
+                        margin-bottom: 2.375vw;
+                        border: 0;
+                    }
+                    .txt2{
+                        margin-bottom: 5.5vw;
+                        font-size: 3.25vw;
+                        color: #999999;
+                    }
+                    .txt3{
+                        display: none;
+                    }
+                    a{
+                        font-size: 3.325vw;
+                        .icon{
+                            font-size: 4.325vw;
+                            margin-top: 0;
+                        }
+                    }
+                }
+            }
+            // .banner_box{
+            //     .news_banner{
+            //         width: 630px;
+            //         height: 413px;
+            //         .news_content{
+            //             border-radius: 12px;
+            //         }
+            //     }   
+            //     .news_banner2{
+            //         width: 300px;
+            //         img{
+            //             height: 200px;
+            //         }
+            //         .txt1{
+            //             font-size: 16px;
+            //         }
+            //         .txt2{
+            //             font-size: 14px;
+            //         }
+            //         .txt3{
+            //             font-size: 14px;
+            //         }
+            //         a{
+            //             font-size: 14px;
+            //             .icon{
+            //                 margin-top: -2px;
+            //                 font-size: 18px;
+            //             }
+            //         }
+            //     }
+            // }
+            // .tabs_box{
+            //     width: calc(100% - 60px);
+            // }
+            .tabs_box{
+                width: 100%;
+                font-size: 3.75vw;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .tabs_li{
+                    margin-right: 0;
+                    padding-bottom: 5.625vw;
+                }
+            }
+        }
+        .news_ul{
+            padding: 0 3.75vw;
+            box-sizing: border-box;
+            .news_list{
+                margin-top: 0;
+                width: 100%;
+                box-sizing: border-box;
+                // padding: 0 3.75vw;
+                padding: 0;
+                .news_li{
+                    padding:5.625vw 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    .li_left{
+                        width: 16.25vw;
+                        height: 16.25vw;
+                        margin-right: 0;
+                        font-size: 3vw;
+                        .timerData{
+                            font-size: 5.75vw;
+                            padding: 2.5vw 0 3vw 0;
+                        }
+                    }
+                    .li_cont{
+                        width: 70vw;
+                        div:nth-child(1){
+                            font-size: 3.75vw;
+                            color: #282828;
+                            line-height: 7.5vw;
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
+                            -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
+                            overflow: hidden;     
+                            font-weight: bold;
+                        }
+                        div:nth-child(2){
+                            width: auto;
+                            height: auto;
+                            overflow: unset;
+                            line-height: 1.5;
+                            font-size: 3.25vw;
+                            color: #A7A5A5;
+                            padding: 0;
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
+                            -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                            overflow: hidden;     
+                        }
+                      
+                    }
+                }
+            }
+        }
+        // .news_ul {
+        //     max-width: 100%;
+        //     // width: calc(100% - 60px);
+        //     width: 100%;
+        //     padding: 0 30px;
+        //     overflow: hidden;
+        //     box-sizing: border-box;
+        //     .news_list{
+        //         width: calc(100% - 60px);
+        //     }
+        // }
+        .news_paging{}
+    }
     // .main {
     //     width: 100%;
     //     padding-top: 14.5vw;
@@ -700,7 +861,7 @@ a{
     //     }
     // }
 }
-@media screen and (min-width: 1400px) and (max-width: 1600px) {
+@media screen and (min-width: 1400px) and (max-width: 1650px) {
     .main{
         .content{
             width: calc(100% - 60px);
@@ -745,6 +906,7 @@ a{
             width: 100%;
             padding: 0 30px;
             overflow: hidden;
+            box-sizing: border-box;
             .news_list{
                 width: calc(100% - 60px);
             }
@@ -859,7 +1021,7 @@ a{
                         text-overflow: ellipsis; 
                         line-height: 1.5;
                         padding-bottom: 0;
-                        margin-bottom: 5.375vw;
+                        margin-bottom: 2.375vw;
                         border: 0;
                     }
                     .txt2{
@@ -893,11 +1055,13 @@ a{
         }
         .news_ul{
             width: 100%;
+            padding: 0 3.75vw;
             .news_list{
                 margin-top: 0;
                 width: 100%;
                 box-sizing: border-box;
-                padding: 0 3.75vw;
+                // padding: 0 3.75vw;
+                padding: 0;
                 .news_li{
                     padding:5.625vw 0;
                     display: flex;
@@ -908,7 +1072,7 @@ a{
                         margin-right: 0;
                     }
                     .li_cont{
-                        width: 71.5vw;
+                        width: 70vw;
                         div:nth-child(1){
                             font-size: 3.75vw;
                             color: #282828;

src/pages/partyBuilding/index.less

@@ -583,8 +583,8 @@ a{
                 a{
                     position: absolute;
                     bottom:15vw;
-                    left: 50%;
-                    margin-left: -25%;
+                    left: calc(50% - 100px);
+                    // margin-left: -25%;
                 }
             }
             .bannerSwiper2{

src/pages/socialResponsibility/index.less

@@ -486,6 +486,22 @@ a{
             width: 100%;
             .news_list{
                 width: calc(100% - 60px);
+                .news_li{
+                    .li_left{
+                        width: 12.25vw;
+                        height: 12.25vw;
+                        font-size: 2.5vw;
+                        .timerData{
+                            font-size:3.5vw ;
+                            padding: 1vw 0 2.8vw 0;
+                        }
+                        // width: 10vw;
+                        // height: 10vw;
+                    }
+                    .li_cont{
+                        width: 83%;
+                    }
+                }
             }
         }
         .typeCon{
@@ -596,6 +612,14 @@ a{
                     padding:5.625vw 0;
                     .li_left{
                         width: 16.25vw;
+                        height: 16.25vw;
+                        font-size: 3vw;
+                        .timerData{
+                            font-size:4.5vw ;
+                            padding: 2.6vw 0 2.8vw 0;
+                        }
+                        // width: 10vw;
+                        // height: 10vw;
                     }
                     .li_cont{
                         width: 71.5vw;