新闻页面

src/pages/news/index.html

@@ -27,95 +27,100 @@
                         alt=""
                         />
                         <a class="news_content" href="../newsDetail.html">
-                            <div class="cont1">卡文汽车品牌标识正式发布</div>
-                            <div class="cont2">纵横交错的叶脉无限延展升级，恰若纵横交错的交通动脉，当阳光透过叶脉“卡”字与叶脉重合在一起。</div>
-                            <div class="cont3">2024.01.27</div>
+                            <div class="cont1">国家能源局：系统推进新型电力系统建设重点任务落地见效</div>
+                            <div class="cont2">2024-08-20</div>
                         </a> 
                     </div>
                     <div class="news_banner2">
                         <img src="./static/images/news/news1.png" alt="">
-                        <div>交通运输部、国家发展改革委联合印发
+                        <div class="txt1">交通运输部、国家发展改革委联合印发
                             《交通物流降本提质增效行动计化》</div>
-                        <div>2024-11-18</div>
-                        <div>《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产...</div>
-                        <a>
+                        <div class="txt2">2024-11-18</div>
+                        <div class="txt3">阿松大《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产</div>
+                        <a href="#">
                             查看详情
                             <span class="icon iconfont icon-jiantou"></span>
                         </a>
                     </div>
                     <div class="news_banner2">
                         <img src="./static/images/news/news1.png" alt="">
-                        <div>交通运输部、国家发展改革委联合印发
+                        <div class="txt1">交通运输部、国家发展改革委联合印发
                             《交通物流降本提质增效行动计化》</div>
-                        <div>2024-11-18</div>
-                        <div>《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产...</div>
-                        <a>
+                        <div class="txt2">2024-11-18</div>
+                        <div class="txt3">《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产...</div>
+                        <a href="#">
                             查看详情
                             <span class="icon iconfont icon-jiantou"></span>
                         </a>
                     </div>
                 </div>
+                <div class="tabs_box">
+                    <div class="tabs_li tabs_lis">全部</div>
+                    <div class="tabs_li">集团新闻</div>
+                    <div class="tabs_li">前沿资讯</div>
+                    <div class="tabs_li">政策引领</div>
+                    <div class="tabs_li">研发创新</div>
+                </div>
+            </div>
+            <div class="news_ul">
                 <div class="news_list">
                     <div class="news_li">
                         <div class="li_left">
-                            <span>01/27</span>
-                            <span>2024</span>
+                            <span>19</span>
+                            <span>24-12</span>
                         </div> 
-                        <div class="li_cont">
-                            <div>卡文汽车品牌正式发布“让每一公里更美好”</div>
-                            <div>2024.01.27</div>
-                            <a href="../newsDetail.html">查看更多</a>
-                        </div>
+                        <a class="li_cont" href="#">
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
+                        </a>
                     </div>
                     <div class="news_li">
                         <div class="li_left">
-                            <span>01/27</span>
-                            <span>2024</span>
+                            <span>09</span>
+                            <span>24-12</span>
                         </div>
                         <div class="li_cont">
                             <div>卡文汽车品牌正式发布“让每一公里更美好”</div>
-                            <div>2024.01.27</div>
                             <a href="../newsDetail.html">查看更多</a>
                         </div>
                     </div>
                     <div class="news_li">
                         <div class="li_left">
-                            <span>01/27</span>
-                            <span>2024</span>
+                            <span>10</span>
+                            <span>24-12</span> 
                         </div>
                         <div class="li_cont">
                             <div>卡文汽车品牌正式发布“让每一公里更美好”</div>
-                            <div>2024.01.27</div>
                             <a href="../newsDetail.html">查看更多</a>
                         </div>
                     </div>
                 </div>
-                <div class="news_paging">
-                    <a id="previousPage" class="previousPage">
-                        <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                            xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
-                            width="200" height="200">
-                            <path
-                                d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
-                                fill="currentColor" p-id="2766"></path>
-                        </svg>
-                    </a>
-                    <div id="paging" style="display: flex;align-items: center;">
-                        <a class="pageNum">1</a>
-                        <a class="pageNum">2</a>
-                        <a class="pageNum">3</a>
-                        <a class="ellipsis">...</a>
-                    </div>
-                    <a id="nextPage" class="nextPage">
-                        <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
-                            xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
-                            width="200" height="200">
-                            <path
-                                d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
-                                fill="currentColor" p-id="2766"></path>
-                        </svg>
-                    </a>
+            </div>
+            <div class="news_paging">
+                <a id="previousPage" class="previousPage">
+                    <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="200" height="200">
+                        <path
+                            d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
+                            fill="currentColor" p-id="2766"></path>
+                    </svg>
+                </a>
+                <div id="paging" style="display: flex;align-items: center;">
+                    <a class="pageNum">1</a>
+                    <a class="pageNum">2</a>
+                    <a class="pageNum">3</a>
+                    <a class="ellipsis">...</a>
                 </div>
+                <a id="nextPage" class="nextPage">
+                    <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="200" height="200">
+                        <path
+                            d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
+                            fill="currentColor" p-id="2766"></path>
+                    </svg>
+                </a>
             </div>
         </div>
         <%= require('../common/tpl/footer.tpl') %>

src/pages/news/index.less

@@ -34,6 +34,7 @@
         .banner_box{
             display: flex;
             justify-content: space-between;
+            margin-bottom: 120px;
             .news_banner{
                 width: 750px;
                 height: 512px;
@@ -41,26 +42,26 @@
                 img{
                     width: 100%;
                     height: 100%;
+                    border-radius: 12px;
                 }
 
                 .news_content{
                     position: absolute;
-                    top: 243px;
                     left: 0;
+                    bottom: 0;
                     width: 100%;
-                    height: 362px;
                     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
                     color: #fff;
-                    padding: 218px 80px 0;
+                    padding: 218px 30px 40px;
                     box-sizing: border-box;
                     .cont1{
                         font-weight: bold;
-                        font-size: 24px;
+                        font-size: 20px;
                     }
                     .cont2{
                         font-weight: 400;
                         font-size: 16px;
-                        margin-top: 28px;
+                        margin-top: 20px;
                     }
                     .cont3{
                         font-weight: 400;
@@ -72,37 +73,118 @@
             }
             .news_banner2{
                 width: 340px;
+                img{
+                    width: 100%;
+                    height: 255px;
+                    object-fit: cover;
+                    border-radius: 12px;
+                    margin-bottom: 30px;
+                }
+                .txt1{
+                    font-family: Source Han Sans CN;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: #333333;
+                    line-height: 30px;
+                    padding-bottom: 20px;
+                    border-bottom: 1px solid #E7E7E7;
+                    margin-bottom: 20px;
+                }
+                .txt2{
+                    font-family: Source Han Sans CN;
+                    font-size: 16px;
+                    color: #333333;
+                    margin-bottom: 20px;
+                }
+                .txt3{
+                    font-family: Source Han Sans CN;
+                    font-size: 16px;
+                    color: #333333;
+                    margin-bottom: 18px;
+                    display: -webkit-box;        /* 使用 Flexbox 布局 */
+                    -webkit-box-orient: vertical; /* 垂直方向排列 */
+                    -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
+                    overflow: hidden;            /* 隐藏超出部分 */
+                    text-overflow: ellipsis;     /* 用省略号表示超出部分 */
+                }
+                a{
+                    font-family: Source Han Sans CN;
+                    font-size: 16px;
+                    color: #333333;
+                    display: flex;
+                    align-items: center;
+                    .icon{
+                        transform: rotate(90deg);
+                        display: inline-block;
+                        color: #000000;
+                        font-size: 24px;
+                        margin-top: 5px;
+                        margin-left: 5px;
+                    }
+                }
             }
+           
+        }
+        .tabs_box{
+            width: 1300px;
+            margin: 0 auto;
+            font-weight: 400;
+            font-size: 24px;
+            display: flex;
+            align-items: center;
+
+            .tabs_li{
+                color: #231F20;
+                margin-right: 80px;
+                cursor: pointer;
+                padding-bottom: 48px;
+            }   
+            .tabs_lis{
+                color: #B81C25;
+                border-bottom: 2px solid #B81C25;
+            }   
         }
 
+      
+    }
+    .news_ul{
+        width: 100%;
+        max-width: 1920px;
+        margin: 0 auto;
+        background: #F6F6F6;
+
         .news_list{
-            margin-top: 80px;
+            width: 1300px;
+            margin: 0 auto;
             .news_li{
                 display: flex;
                 align-items: center;
                 padding: 40px 0;
                 border-bottom:1px solid #DADADA;
+                transition: all .2s;
                 .li_left{
-                    width: 120px;
-                    height: 120px;
-                    background: #FFFFFF;
-                    border: 1px solid #DADADA;
+                    width: 66px;
+                    height: 66px;
+                    background: #F6F6F6;
+                    border: 1px solid #A7A5A5;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
                     margin-right: 30px;
                     transition: all .5s;
+                    border-radius: 8px;
                     span:nth-child(1){
-                        font-weight: 400;
-                        font-size: 24px;
-                        color: #48A038;
+                        font-family: Source Han Sans CN;
+                        font-weight: 500;
+                        font-size: 30px;
+                        color: #B81C25;
                     }
                     span:nth-child(2){
                         font-family: Source Han Sans CN;
                         font-weight: 500;
-                        font-size: 28px;
-                        color: #003A40;
+                        font-size: 13px;
+                        color: #231F20
                     }
                     a{
                         cursor: pointer;
@@ -111,114 +193,112 @@
                 .li_cont{
                     font-family: Source Han Sans CN;
                     font-weight: 400;
-                    transition: all .5s;
+                    transition: all .2s;
 
                     div:nth-child(1){
-                        font-size: 18px;
-                        color: #282828;
+                        font-weight: 500;
+                        font-size: 20px;
+                        color: #231F20;
+                        line-height: 30px;
+                        margin-bottom: 10px;
+                        transition: all .2s;
                     }
                     div:nth-child(2){
-                        width: 0;
-                        height: 0;
-                        overflow: hidden;
-                    }
-                    a{
-                        margin-top: 30px;
+                        font-weight: 500;
                         font-size: 16px;
-                        color: #0D0D0D;
+                        color: #A7A5A5;
+                        line-height: 30px;
+                        display: -webkit-box;        /* 使用 Flexbox 布局 */
+                        -webkit-box-orient: vertical; /* 垂直方向排列 */
+                        -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
+                        overflow: hidden;            /* 隐藏超出部分 */
                     }
                 }
                 &:hover{
-                    .li_left{
-                        background: #48A038;
-                        border: 1px solid #DADADA;
-                        span{
-                            color: #fff;
-                        } 
-                    }
+                    background: #EFEFEF;
                     .li_cont{
-                        div,a{
-                            color: #48A038;
+                        div:nth-child(1){
+                            color: #B81C25;
                         }
                     }
                 }
             }
         }
-        .news_paging{
+    }
+    .news_paging{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 100px;
+        .previousPage{
+            width: 40px;
+            height: 40px;
+            color: #48A038;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-top: 100px;
-            .previousPage{
-                width: 40px;
-                height: 40px;
-                color: #48A038;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: 1px solid #48A038;
-                margin-right: 20px;
-                cursor: pointer;
-                transition: all 0.2s;
-                svg{
-                    width: 20px;
-                    height: 20px;
-                    transform: rotate(90deg);
-                }
-                &:hover{
-                    background-color: #48A038;
-                    color: #fff;
-                }
+            border: 1px solid #48A038;
+            margin-right: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            svg{
+                width: 20px;
+                height: 20px;
+                transform: rotate(90deg);
             }
-            .nextPage{
-                width: 40px;
-                height: 40px;
-                color: #48A038;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: 1px solid #48A038;
-                margin-left: 20px;
-                cursor: pointer;
-                transition: all 0.2s;
-                svg{
-                    width: 20px;
-                    height: 20px;
-                    transform: rotate(-90deg);
-                }
-                &:hover{
-                    background-color: #48A038;
-                    color: #fff;
-                }
+            &:hover{
+                background-color: #48A038;
+                color: #fff;
             }
-            .pageNum{
-                font-family: Source Han Sans CN;
-                font-weight: bold;
-                font-size: 16px;
-                color: #333333;
-                transition: all 0.2s;
-                padding: 10px 15px;
-                cursor: pointer;
-                &:hover{
-                    color: #48A038;
-                }
+        }
+        .nextPage{
+            width: 40px;
+            height: 40px;
+            color: #48A038;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid #48A038;
+            margin-left: 20px;
+            cursor: pointer;
+            transition: all 0.2s;
+            svg{
+                width: 20px;
+                height: 20px;
+                transform: rotate(-90deg);
             }
-            .pageNumActive{
-                color: #48A038;
+            &:hover{
+                background-color: #48A038;
+                color: #fff;
             }
-            .ellipsis{
-                font-family: Source Han Sans CN;
-                font-weight: bold;
-                font-size: 22px;
-                padding: 10px 15px;
-                color: #333333;
-                // cursor: pointer;
-                transition: all 0.2s;
-                // &:hover{
-                //     color:#48A038
-                // }
+        }
+        .pageNum{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 16px;
+            color: #333333;
+            transition: all 0.2s;
+            padding: 10px 15px;
+            cursor: pointer;
+            &:hover{
+                color: #48A038;
             }
         }
+        .pageNumActive{
+            color: #48A038;
+        }
+        .ellipsis{
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 22px;
+            padding: 10px 15px;
+            color: #333333;
+            // cursor: pointer;
+            transition: all 0.2s;
+            // &:hover{
+            //     color:#48A038
+            // }
+        }
     }
 }
 a{