suomingxiang před 4 měsíci
rodič
revize
6f7a04ace8

+ 170
- 68
src/pages/news/index.less Zobrazit soubor

@@ -390,61 +390,37 @@ img{
390 390
     .main{
391 391
         .content{
392 392
             width: calc(100% - 60px);
393
-            .banner_box{
394
-                .news_banner{
395
-                    width: 430px;
396
-                    height: 213px;
397
-                    .news_content{
398
-                        border-radius: 12px;
399
-                    }
400
-                }   
401
-                .news_banner2{
402
-                    width: 300px;
403
-                    img{
404
-                        height: 200px;
405
-                    }
406
-                    .txt1{
407
-                        font-size: 16px;
408
-                    }
409
-                    .txt2{
410
-                        font-size: 14px;
411
-                    }
412
-                    .txt3{
413
-                        font-size: 14px;
414
-                    }
415
-                    a{
416
-                        font-size: 14px;
417
-                        .icon{
418
-                            margin-top: -2px;
419
-                            font-size: 18px;
420
-                        }
421
-                    }
422
-                }
423
-            }
424
-            .tabs_box{
425
-                width: calc(100% - 60px);
426
-            }
427
-        }
428
-        .news_ul {
429
-            max-width: 100%;
430
-            width: calc(100% - 60px);
431
-            overflow: hidden;
432
-            .news_list{
433
-                width: calc(100% - 60px);
434
-                .news_li{
435
-                    .li_cont{
436
-                        width: 90%;
437
-                    }
438
-                }
439
-            }
440
-        }
441
-        .news_paging{}
442
-    }
443
-}
444
-@media screen and (min-width: 118px) and (max-width: 1400px) {
445
-    .main{
446
-        .content{
447
-            width: calc(100% - 60px);
393
+            // .banner_box{
394
+            //     .news_banner{
395
+            //         width: 430px;
396
+            //         height: 213px;
397
+            //         .news_content{
398
+            //             border-radius: 12px;
399
+            //         }
400
+            //     }   
401
+            //     .news_banner2{
402
+            //         width: 300px;
403
+            //         img{
404
+            //             height: 200px;
405
+            //         }
406
+            //         .txt1{
407
+            //             font-size: 16px;
408
+            //         }
409
+            //         .txt2{
410
+            //             font-size: 14px;
411
+            //         }
412
+            //         .txt3{
413
+            //             font-size: 14px;
414
+            //         }
415
+            //         a{
416
+            //             font-size: 14px;
417
+            //             .icon{
418
+            //                 margin-top: -2px;
419
+            //                 font-size: 18px;
420
+            //             }
421
+            //         }
422
+            //     }
423
+            // }
448 424
             .banner_box{
449 425
                 display: block;
450 426
                 margin-bottom: 15vw;
@@ -533,37 +509,162 @@ img{
533 509
                     }
534 510
                 }
535 511
             }
512
+            .tabs_box{
513
+                width: 100%;
514
+                font-size: 3.75vw;
515
+                display: flex;
516
+                align-items: center;
517
+                justify-content: space-between;
518
+                .tabs_li{
519
+                    margin-right: 0;
520
+                    padding-bottom: 5.625vw;
521
+                }
522
+            }
523
+        }
524
+        .news_ul {
525
+            max-width: 100%;
526
+            width: calc(100% - 60px);
527
+            overflow: hidden;
528
+            .news_list{
529
+                width: calc(100% - 60px);
530
+                .news_li{
531
+                    .li_cont{
532
+                        width: 88%;
533
+                    }
534
+                }
535
+            }
536
+        }
537
+        .news_paging{}
538
+    }
539
+}
540
+@media screen and (min-width: 1180px) and (max-width: 1400px) {
541
+    .main{
542
+        .content{
543
+            width: calc(100% - 60px);
536 544
             // .banner_box{
545
+            //     display: block;
546
+            //     margin-bottom: 15vw;
537 547
             //     .news_banner{
538
-            //         width: 630px;
539
-            //         height: 413px;
548
+            //         width: 100%;
549
+            //         height: auto;
550
+            //         margin-bottom: 8vw;
551
+                   
552
+            //         img{
553
+            //             width: 100%;
554
+            //             height: 62.75vw;
555
+            //             border-radius: 1.625vw;
556
+            //             object-fit: cover;
557
+            //         }
558
+                    
540 559
             //         .news_content{
541
-            //             border-radius: 12px;
560
+            //             padding: 3.75vw;
561
+            //             display: flex;
562
+            //             flex-wrap: wrap;
563
+            //             flex-direction: column-reverse;
564
+            //             .cont1{
565
+            //                 font-weight: bold;
566
+            //                 font-size: 3.75vw;
567
+            //                 color: #fff;
568
+            //                 display: -webkit-box;        /* 使用 Flexbox 布局 */
569
+            //                 -webkit-box-orient: vertical; /* 垂直方向排列 */
570
+            //                 -webkit-line-clamp: 2;      /* 限制显示的行数,这里是3行 */
571
+            //                 overflow: hidden;            /* 隐藏超出部分 */
572
+            //                 text-overflow: ellipsis;     /* 用省略号表示超出部分 */
573
+            //             }
574
+            //             .cont2{
575
+            //                 width: 100%;
576
+            //                 font-size: 3.375vw;
577
+            //                 color: #fff;
578
+            //                 margin-bottom: 2.5vw;
579
+            //             }
580
+            //             .cont3{
581
+            //                 font-size: 3.25vw;
582
+            //                 color: #fff;
583
+            //             }
542 584
             //         }
543
-            //     }   
585
+                    
586
+            //     }
544 587
             //     .news_banner2{
545
-            //         width: 300px;
588
+            //         width: 100%;
589
+            //         display: flex;
590
+            //         align-items: center;
591
+            //         justify-content: space-between;
592
+            //         margin-bottom: 10.75vw;
546 593
             //         img{
547
-            //             height: 200px;
594
+            //             width: 45.375vw;
595
+            //             height: 34vw;
596
+            //             margin-bottom: 0;
597
+            //             border-radius: 1.625vw;
598
+            //         }
599
+            //         .banner2_cont{
600
+            //             width: 42.5vw;
548 601
             //         }
549 602
             //         .txt1{
550
-            //             font-size: 16px;
603
+            //             width: 42.5vw;
604
+            //             font-size: 3.75vw;
605
+            //             display: -webkit-box;           /* 使用 Flexbox 布局 */
606
+            //             -webkit-box-orient: vertical;   /* 垂直方向排列 */
607
+            //             -webkit-line-clamp: 2;         /* 限制显示的行数,这里是3行 */
608
+            //             overflow: hidden;               /* 隐藏超出部分 */
609
+            //             text-overflow: ellipsis; 
610
+            //             line-height: 1.5;
611
+            //             padding-bottom: 0;
612
+            //             margin-bottom: 2.375vw;
613
+            //             border: 0;
551 614
             //         }
552 615
             //         .txt2{
553
-            //             font-size: 14px;
616
+            //             margin-bottom: 5.5vw;
617
+            //             font-size: 3.25vw;
618
+            //             color: #999999;
554 619
             //         }
555 620
             //         .txt3{
556
-            //             font-size: 14px;
621
+            //             display: none;
557 622
             //         }
558 623
             //         a{
559
-            //             font-size: 14px;
624
+            //             font-size: 3.325vw;
560 625
             //             .icon{
561
-            //                 margin-top: -2px;
562
-            //                 font-size: 18px;
626
+            //                 font-size: 4.325vw;
627
+            //                 margin-top: 0;
563 628
             //             }
564 629
             //         }
565 630
             //     }
566 631
             // }
632
+            .banner_box{
633
+                .news_banner{
634
+                    width: 530px;
635
+                    height: 363px;
636
+                    .news_content{
637
+                        border-radius: 12px;
638
+                    }
639
+                }   
640
+                .news_banner2{
641
+                    width: 300px;
642
+                    img{
643
+                        height: 180px;
644
+                        margin-bottom: 5px;
645
+                    }
646
+                    .txt1{
647
+                        font-size: 16px;
648
+                        margin-bottom: 5px;
649
+                    }
650
+                    .txt2{
651
+                        font-size: 14px;
652
+                        padding-top: 5px;
653
+                        margin-bottom: 10px;
654
+
655
+                    }
656
+                    .txt3{
657
+                        font-size: 14px;
658
+                    }
659
+                    a{
660
+                        font-size: 14px;
661
+                        .icon{
662
+                            margin-top: -2px;
663
+                            font-size: 18px;
664
+                        }
665
+                    }
666
+                }
667
+            }
567 668
             // .tabs_box{
568 669
             //     width: calc(100% - 60px);
569 670
             // }
@@ -956,7 +1057,7 @@ img{
956 1057
             }
957 1058
             .banner_box{
958 1059
                 display: block;
959
-                margin-bottom: 15vw;
1060
+                margin-bottom: 0;
960 1061
                 .news_banner{
961 1062
                     width: 100%;
962 1063
                     height: auto;
@@ -1048,6 +1149,7 @@ img{
1048 1149
                 display: flex;
1049 1150
                 align-items: center;
1050 1151
                 justify-content: space-between;
1152
+                padding-top: 60px;
1051 1153
                 .tabs_li{
1052 1154
                     margin-right: 0;
1053 1155
                     padding-bottom: 5.625vw;

+ 23
- 23
src/pages/partyBuilding/App.js Zobrazit soubor

@@ -64,30 +64,30 @@ export default class App {
64 64
                     },
65 65
                   },
66 66
             });
67
-            let mySwiper2 = new Swiper('.bannerSwiper2', {
68
-                autoplay: true,//可选选项,自动滑动
69
-                // 如果需要分页器
70
-                pagination: {
71
-                    el: '.swiper-pagination',
72
-                },
67
+            // let mySwiper2 = new Swiper('.bannerSwiper2', {
68
+            //     autoplay: true,//可选选项,自动滑动
69
+            //     // 如果需要分页器
70
+            //     pagination: {
71
+            //         el: '.swiper-pagination',
72
+            //     },
73 73
                 
74
-                // 如果需要前进后退按钮
75
-                navigation: {
76
-                    nextEl: '.btn-nextB',
77
-                    prevEl: '.btn-prevB',
78
-                },
79
-                on:{
80
-                    slideChange: function(){
81
-                        // if(menuChange){
82
-                        //     if(this.activeIndex==0){
83
-                        //         menuType.classList.add("menuType");
84
-                        //     }else{
85
-                        //         menuType.classList.remove("menuType");
86
-                        //     }
87
-                        // }
88
-                    },
89
-                  },
90
-            });
74
+            //     // 如果需要前进后退按钮
75
+            //     navigation: {
76
+            //         nextEl: '.btn-nextB',
77
+            //         prevEl: '.btn-prevB',
78
+            //     },
79
+            //     on:{
80
+            //         slideChange: function(){
81
+            //             // if(menuChange){
82
+            //             //     if(this.activeIndex==0){
83
+            //             //         menuType.classList.add("menuType");
84
+            //             //     }else{
85
+            //             //         menuType.classList.remove("menuType");
86
+            //             //     }
87
+            //             // }
88
+            //         },
89
+            //       },
90
+            // });
91 91
             
92 92
             
93 93
             // 获取滚动条位置并更新显示

+ 18
- 38
src/pages/partyBuilding/index.html Zobrazit soubor

@@ -15,27 +15,23 @@
15 15
 <body>
16 16
     <%= require('../common/tpl/header.tpl') %>
17 17
         <div class="main">
18
-            <div class="content" >
18
+            <div class="content">
19 19
                 <div class="news_title wow fadeInUp">党建工作</div>
20 20
             </div>
21 21
             <div class="wow domInUp banner">
22 22
                 <div class="swiper bannerSwiper bannerSwiper1">
23
-                  <div class="swiper-wrapper">
24
-                    <div class="swiper-slide">
25
-                      <img
26
-                        class="lazy"
27
-                        data-src="./static/images/partyBuilding/01.png"
28
-                        data-srcM="./static/images/partyBuilding/01.png"
29
-                        alt=""
30
-                      />
23
+                    <div class="swiper-wrapper">
24
+                        <div class="swiper-slide">
25
+                            <img class="lazy" data-src="./static/images/partyBuilding/01.png"
26
+                                data-srcM="./static/images/partyBuilding/01.png" alt="" />
27
+                        </div>
31 28
                     </div>
32
-                  </div>
33
-                  <!-- 如果需要分页器 -->
34
-                  <div class="swiper-pagination"></div>
35
-                  
36
-                  <!-- 如果需要导航按钮 -->
37
-                  <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
38
-                  <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
29
+                    <!-- 如果需要分页器 -->
30
+                    <div class="swiper-pagination"></div>
31
+
32
+                    <!-- 如果需要导航按钮 -->
33
+                    <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
34
+                    <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
39 35
                 </div>
40 36
             </div>
41 37
             <div class="content content2" id="p1">
@@ -93,10 +89,10 @@
93 89
                     <div class="txt1">中泽集团36人次当选党代表、人大代表、政协委员</div>
94 90
                     <div class="txt2">2024-12-13</div>
95 91
                 </a>
96
-            </div> 
92
+            </div>
97 93
             <div style="width: 100%;display: flex;justify-content: center;padding: 30px 0 50px;">
98
-                    <a href="./enterprisePartyBuilding.html" class="btn newsHref">查看更多</a>
99
-                </div>
94
+                <a href="./enterprisePartyBuilding.html" class="btn newsHref">查看更多</a>
95
+            </div>
100 96
             <!-- <div class="news_paging">
101 97
                 <a id="previousPage" class="previousPage">
102 98
                    <span class="icon iconfont icon-jiantou"></span>
@@ -116,25 +112,9 @@
116 112
                     <div class="txt">学习文件</div>
117 113
                     <a href="https://www.12371.cn/special/dnfg/" target="_blank">查看学习文件</a>
118 114
                 </div>
119
-                <div class="wow domInUp banner">
120
-                    <div class="swiper bannerSwiper bannerSwiper2">
121
-                      <div class="swiper-wrapper">
122
-                        <div class="swiper-slide">
123
-                          <img
124
-                            class="lazy"
125
-                            data-src="./static/images/partyBuilding/11.png"
126
-                            data-srcM="./static/images/partyBuilding/11.png"
127
-                            alt=""
128
-                          />
129
-                        </div>
130
-                      </div>
131
-                      <!-- 如果需要分页器 -->
132
-                      <div class="swiper-pagination"></div>
133
-                      
134
-                      <!-- 如果需要导航按钮 -->
135
-                      <div class="btn-prev btn-prevB"><span class="icon iconfont icon-jiantou"></span></div>
136
-                      <div class="btn-next btn-nextB"><span class="icon iconfont icon-jiantou"></span></div>
137
-                    </div>
115
+                <div class="bannerSwiper2 wow domInUp">
116
+                    <img class="lazy" data-src="./static/images/partyBuilding/11.png"
117
+                        data-srcM="./static/images/partyBuilding/11.png" alt="" />
138 118
                 </div>
139 119
             </div>
140 120
         </div>

+ 4
- 1
src/pages/partyBuilding/index.less Zobrazit soubor

@@ -290,7 +290,7 @@
290 290
         width: 100%;
291 291
         background-color: #F6F6F6;
292 292
         padding-top: 122px;
293
-        padding-bottom: 130px;
293
+        padding-bottom: 140px;
294 294
 
295 295
         .study_head{
296 296
             width: 1498px;
@@ -321,6 +321,9 @@
321 321
         .bannerSwiper2{
322 322
             width: 1498px;
323 323
             margin: 0 auto;
324
+            img{
325
+                display: block;
326
+            }
324 327
         }
325 328
     }
326 329
 }

Načítá se…
Zrušit
Uložit