zhongze
/
zhongze-front
Наблюдаван 5
Харесван 0
Разклонения 0
Код Задачи 0 Заявки за сливане 0 Версии 0 Уики Activity
Преглед на файлове

中泽新闻页面+文章详情页面

zjm
suomingxiang преди 5 месеца
родител
9893a733cf
ревизия
7dbb13a1f2
променени са 14 файла, в които са добавени 784 реда и са изтрити 470 реда
Разделен изглед Покажи статистика за разликите
  1. Двоични данни
      dev/static/images/vx.png
  2. 80
    0
      src/pages/articleDetails/App.js
  3. 65
    0
      src/pages/articleDetails/index.html
  4. 0
    0
      src/pages/articleDetails/index.js
  5. 92
    11
      src/pages/articleDetails/index.less
  6. 14
    224
      src/pages/news/App.js
  7. 35
    42
      src/pages/news/index.html
  8. 178
    107
      src/pages/news/index.less
  9. 0
    34
      src/pages/newsDetail/App.js
  10. 0
    52
      src/pages/newsDetail/index.html
  11. 86
    0
      src/pages/partyBuilding/App.js
  12. 42
    0
      src/pages/partyBuilding/index.html
  13. 15
    0
      src/pages/partyBuilding/index.js
  14. 177
    0
      src/pages/partyBuilding/index.less

Двоични данни
dev/static/images/vx.png Целия файл


+ 80
- 0
src/pages/articleDetails/App.js Целия файл 

@@ -0,0 +1,80 @@
1 
+import Swiper from 'swiper/bundle'
2 
+import gsap from 'gsap'
3 
+import Common from '../common/js/Common'
4 
+import {
5 
+    isMobile
6 
+} from '../common/js/utils'
7 
+
8 
+export default class App {
9 
+    constructor() {
10 
+        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
11 
+        this.isMobile = isMobile()
12 
+        // this.tabChange()
13 
+        // 图片及视频资源懒加载。防止阻塞js执行
14 
+        let lazyDoms = document.querySelectorAll(".lazy");
15 
+        lazyDoms.forEach((item) => {
16 
+            console.log(item, 'item---1')
17 
+            if (item.nodeName == "PICTURE") {
18 
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
19 
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
20 
+            }
21 
+            if (item.nodeName == "IMG") {
22 
+                item.setAttribute("src", item.dataset.src);
23 
+            }
24 
+            if (item.nodeName == "VIDEO") {
25 
+                console.log(item, 'item---2')
26 
+                item.setAttribute("src", item.dataset.src);
27 
+                // item.load();
28 
+            }
29 
+        });
30 
+        vx()
31 
+        function vx(){
32 
+            console.log('vx',wx)
33 
+            wx.config({
34 
+                debug: false, // 开启调试模式
35 
+                appId: 'YOUR_APP_ID', // 公众号的唯一标识
36 
+                timestamp: 176565448486313, // 生成签名的时间戳
37 
+                nonceStr: 'NONCESTR', // 生成签名的随机串
38 
+                signature: 'SIGNATURE', // 签名，见附录1
39 
+                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的 JS 接口列表
40 
+            });
41 
+
42 
+            wx.ready(function () {
43 
+                // 分享到朋友圈
44 
+                wx.onMenuShareTimeline({
45 
+                    title: '分享标题', // 分享标题
46 
+                    link: 'https://example.com', // 分享链接
47 
+                    imgUrl: 'https://example.com/image.jpg', // 分享图标
48 
+                    success: function () {
49 
+                        // 用户确认分享后执行的回调函数
50 
+                    },
51 
+                    cancel: function () {
52 
+                        // 用户取消分享后执行的回调函数
53 
+                    }
54 
+                });
55 
+                const shareWx = document.querySelector('.shareWx');
56 
+                console.log(shareWx)
57 
+                shareWx.addEventListener('click',function(){
58 
+                    // 分享给朋友
59 
+                    wx.onMenuShareAppMessage({
60 
+                        title: '分享标题', // 分享标题
61 
+                        desc: '分享描述', // 分享描述
62 
+                        type: 'link', // 分享类型,music、video或link，不填默认为link
63 
+                        success: function () {
64 
+                            // 用户确认分享后执行的回调函数
65 
+
66 
+                        },
67 
+                        cancel: function () {
68 
+                            // 用户取消分享后执行的回调函数
69 
+                        }
70 
+                    });
71 
+                })
72 
+
73 
+            });
74 
+        }
75 
+    }
76 
+
77 
+
78 
+
79 
+
80 
+}

+ 65
- 0
src/pages/articleDetails/index.html Целия файл 

@@ -0,0 +1,65 @@
1 
+<!DOCTYPE html>
2 
+<html lang="cn">
3 
+
4 
+<head>
5 
+    <meta charset="utf-8" />
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 
+    <title>文章详情</title>
8 
+    <meta name="description" content="" />
9 
+    <meta name="Keywords" content="" />
10 
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
11 
+    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
12 
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
13 
+    <%= require('../common/tpl/headerLink.tpl') %>
14 
+</head>
15 
+
16 
+<body>
17 
+    <%= require('../common/tpl/header.tpl') %>
18 
+        <div class="main">
19 
+            <div class="content">
20 
+                <div class="detail_head">
21 
+                    <div class="head_left">
22 
+                        <div>发稿时间：2024-11-04 16:56:34</div>
23 
+                        <div>来源：中泽集团</div>
24 
+                        <div>浏览次数：227</div>
25 
+                    </div>
26 
+                    <div class="head_right">
27 
+                        分享到：<img src="./static/images/vx.png" alt="" /></span>
28 
+                    </div>
29 
+                </div>
30 
+                <div class="detail_head2">
31 
+                    <div class="head_left">
32 
+                        <div>发稿时间：2024-11-04 16:56:34</div>
33 
+                        <div>来源：中泽集团</div>
34 
+                    </div>
35 
+                    <div class="head_right">
36 
+                        <div>浏览次数：227</div>
37 
+                        <div class="shareWx">
38 
+                            分享到：<img src="./static/images/vx.png" alt="" /></span>
39 
+                        </div>
40 
+                    </div>
41 
+                </div>
42 
+                <div class="detail_title">
43 
+                    <div class="title">中泽集团总经理鞠自力出席中国炭素行业协会七届五次会员大会并作报告</div>
44 
+                </div>
45 
+                <!-- <div class="paragraphHeadings marginTop100">01 卡文汽车品牌使命</div> -->
46 
+                <!-- <div class="paragraphHeadings marginTop80">02 卡文汽车品牌愿景</div> -->
47 
+                <div class="paragraphContext marginTop30">10月30日，中国炭素行业协会七届五次会员大会暨炭素行业发展高峰论坛在厦门成功召开。会议以习近平新时代中国特色社会主义思想为指导，贯彻落实党的二十届三中全会精神，分析研究行业形势，凝聚共识，攻坚克难，形成合力，推动炭素行业高质量发展。</div>
48 
+                <div class="paragraphContext marginTop30">中国炭素行业协会党支部书记秦松，协会会长、中泽集团总经理鞠自力，协会副会长、方大炭素董事长马卓，协会副会长、扬子碳素董事长刘明，协会原秘书长孙庆等领导出席会议，来自炭素行业及上下游企业近200人参加会议。</div>
49 
+                <div class="paragraphContext marginTop30">协会会长、中泽集团总经理鞠自力在会上作了题为《迎难而上 应对经济形势新变化 共克时艰 推动炭素工业新发展》的工作报告。他全面回顾了炭素行业的运行情况，介绍了协会一年来的工作。并从十个方面部署2025年工作任务：以学铸魂提升使命担当；创新引领实现高质量发展；提质降耗控产保效；强化行业自律遏制内卷式恶性竞争；上下游通力合作推动产业链协同发展；恪守绿色发展战略在节能降碳上下功夫；立足高质量发展完善行业标准体系；推动整合重组增强产业集中度；规范统计工作强化信息分析交流；履职尽责提升服务水平。</div>
50 
+                <div class="imgBox marginTop45">
51 
+                    <img src="./static/images/news/news1.png" alt="">
52 
+                </div>
53 
+                <div class="paragraphHeadings marginTop80">正式发布《中国炭素行业自律公约》</div>
54 
+                <div class="paragraphContext marginTop30">会上，正式发布了《中国炭素行业自律公约》，以更好推动中国炭素行业可持续、高质量发展；更好地适应国际、国内市场变化，鼓励公平竞争，更好发挥企业在维护市场竞争秩序等方面的积极作用。多位专家、学者、权威人士分享了对宏观经济形势的分析，以及企业先进工艺技术，为与会者提供了宝贵的参考和启示。</div>
55 
+                <div class="detail_footer">
56 
+                    <a href="#">上一篇：中泽集团与内蒙古自治区工信厅签署战略合作协议</a>
57 
+                    <a href="#">下一篇：中泽集团总经理鞠自力出席中国炭素行业协会七届五次会员大会并作报告</a>
58 
+                </div>
59 
+            </div>
60 
+        </div>
61 
+        <%= require('../common/tpl/footer.tpl') %>
62 
+            <%= require('../common/tpl/bottomBar.tpl') %>
63 
+</body>
64 
+
65 
+</html>

src/pages/newsDetail/index.js → src/pages/articleDetails/index.js Целия файл


src/pages/newsDetail/index.less → src/pages/articleDetails/index.less Целия файл 

@@ -34,17 +34,51 @@
34 34 
     .content{
35 35 
         width: 1300px;
36 36 
         margin: 0 auto;
37 
+        .detail_head{
38 
+            width: 100%;
39 
+            display: flex;
40 
+            align-items: center;
41 
+            justify-content: space-between;
42 
+            margin-top: 80px;
43 
+            padding-bottom: 20px;
44 
+            font-size: 18px;
45 
+            color: #231F20;
46 
+            border-bottom: 1px solid #DDE2E6;
47 
+            .head_left{
48 
+                display: flex;
49 
+                align-items: center;
50 
+                div{
51 
+                    margin-right: 60px;
52 
+                }
53 
+            }
54 
+            .head_right{
55 
+                font-family: Source Han Sans CN;
56 
+                font-size: 18px;
57 
+                color: #231F20;
58 
+                cursor: pointer;
59 
+                display: flex;
60 
+                align-items: center;
61 
+                img{
62 
+                    width: 30px;
63 
+                    height: 30px;
64 
+                    object-fit: cover;
65 
+                }
66 
+            }
67 
+        }
68 
+        .detail_head2{
69 
+            display: none;
70 
+        }
37 71 
         .detail_title{
38 72 
             width: 100%;
39 
-            text-align: center;
40 
-            margin-top: 143px;
73 
+            text-align: left;
74 
+            margin-top: 80px;
41 75 
             .title{
42 76 
                 font-family: Microsoft YaHei;
43 77 
                 font-weight: bold;
44 78 
                 font-size: 40px;
45 79 
                 color: #333333;
46 
-                text-align: center;
47 
-                margin-bottom: 39px;
80 
+                text-align: left;
81 
+                margin-bottom: 80px;
48 82 
             }
49 83 
             .date{
50 84 
                 font-family: Source Han Sans CN;
 
@@ -62,16 +96,29 @@
62 96 
         }
63 97 
         .paragraphContext{
64 98 
             font-family: Source Han Sans CN;
65 
-            font-size: 16px;
66 
-            color: #333333;
67 
-            line-height: 32px;
99 
+            line-height: 36px;
100 
+            font-weight: 400;
101 
+            font-size: 20px;
102 
+            color: #231F20;
68 103 
         }
69 104 
         .imgBox{
70 105 
             width: 100%;
71 106 
             background-color: #EAECEF;
72 107 
             img{
73 108 
                 width: 100%;
74 
-                height: 604px;
109 
+                height: 731px;
110 
+            }
111 
+        }
112 
+        .detail_footer{
113 
+            width: 100%;
114 
+            border-top: 1px solid #DDE2E6;
115 
+            padding-top: 40px;
116 
+            font-size: 18px;
117 
+            color: #231F20;
118 
+            margin-top: 128px;
119 
+            a{
120 
+                margin-bottom: 40px;
121 
+                display: block;
75 122 
             }
76 123 
         }
77 124 
         
@@ -111,14 +158,14 @@ a{
111 158 
             margin: 0 auto;
112 159 
             .detail_title{
113 160 
                 width: 100%;
114 
-                text-align: center;
161 
+                text-align: left;
115 162 
                 margin-top: 17.625vw;
116 163 
                 .title{
117 164 
                     font-family: Microsoft YaHei;
118 165 
                     font-weight: bold;
119 166 
                     font-size: 6vw;
120 167 
                     color: #333333;
121 
-                    text-align: center;
168 
+                    text-align: left;
122 169 
                     margin-bottom: 7.5vw;
123 170 
                 }
124 171 
                 .date{
 
@@ -129,6 +176,29 @@ a{
129 176 
                 }
130 177
131 178 
             }
179 
+            .detail_head{
180 
+                display: none;
181 
+            }
182 
+            .detail_head2{
183 
+                display: block;
184 
+                margin-top: 12.5vw;
185 
+                border-bottom: 1px solid #DDE2E6;
186 
+                .head_left,.head_right{
187 
+                    width: 100%;
188 
+                    display: flex;
189 
+                    align-items: center;
190 
+                    justify-content: space-between;
191 
+                    margin-bottom: 20px;
192 
+                    div{
193 
+                        display: flex;
194 
+                        align-items: center;
195 
+                    }
196 
+                    img{
197 
+                        width: 6.5vw;
198 
+                        height: 6.5vw;
199 
+                    }
200 
+                }
201 
+            }
132 202 
             .paragraphHeadings{
133 203 
                 font-family: Source Han Sans CN;
134 204 
                 font-weight: bold;
 
@@ -149,7 +219,18 @@ a{
149 219 
                     height: 40.125vw;
150 220 
                 }
151 221 
             }
152 
-
222 
+            .detail_footer{
223 
+                font-size: 3.375vw;
224 
+                a{
225 
+                    width: 100%;
226 
+                    display: block;
227 
+                    display: -webkit-box;        /* 使用 Flexbox 布局 */
228 
+                    -webkit-box-orient: vertical; /* 垂直方向排列 */
229 
+                    -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
230 
+                    overflow: hidden;            /* 隐藏超出部分 */
231 
+                    text-overflow: ellipsis;
232 
+                }
233 
+            }
153 234 
         }
154 235 
     }
155 236 
 }

+ 14
- 224
src/pages/news/App.js Целия файл 

@@ -13,89 +13,21 @@ export default class App {
13 13 
         let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
14 14 
         this.isMobile = isMobile()
15 15
16 
-        initDomClick()
17 
-        initYearList()
18 
-        // initList()
19 
-        hotNews()
20 
-        initCategoryList()
21 
-        pageTurningClickEvent()
22 
-
23 
-        function initDomClick(){
24 
-            let screenBox1 = document.getElementsByClassName('screen_box')[0];
25 
-            screenBox1.addEventListener('click', function(event) {
26 
-                if (event.target.classList.contains('screen_box_li')) {
27 
-                    const category = event.target.getAttribute('data-category');
28 
-                    const spanElement = event.target.closest('.screen_li').querySelector('span');
29 
-                    spanElement.innerHTML = event.target.innerHTML;
30 
-                    sessionStorage.setItem('news_category',category)
31 
-                    initList()
32 
-                }
33 
-            });
34 
-            let screenBox2 = document.getElementsByClassName('screen_box')[1];
35 
-            screenBox2.addEventListener('click', function(event) {
36 
-                if (event.target.classList.contains('screen_box_li')) {
37 
-                    const year = event.target.getAttribute('data-year');
38 
-                    const spanElement = event.target.closest('.screen_li').querySelector('span');
39 
-                    spanElement.innerHTML = event.target.innerHTML;
40 
-                    sessionStorage.setItem('news_year',year)
41 
-                    initList()
42 
-                }
43 
-            });
16 
+        bindDom();
17 
+
18 
+        function bindDom(){
19 
+            const tabs_ul =  document.querySelectorAll(".tabs_li");
20 
+            tabs_ul.forEach((item,index)=>{
44 21
45 
-        }
46 
-        function initYearList(){
47 
-            let screenBox2 = document.getElementsByClassName('screen_box')[1];
48 
-            fetch(BASEURL+'/system/news/yearList')
49 
-                .then(response => {
50 
-                    if (!response.ok) {
51 
-                        throw new Error('网络响应不是 OK');
52 
-                    }
53 
-                    return response.json();
54 
-                })
55 
-                .then(data => {
56 
-                    try {
57 
-                        screenBox2.innerHTML = '';
58 
-                        data.forEach(year => {
59 
-                            let link = document.createElement('a');
60 
-                            link.className = 'screen_box_li';
61 
-                            link.setAttribute('data-year', year);
62 
-                            link.textContent = `${year}年`;
63 
-                            screenBox2.appendChild(link);
64 
-                        });
65 
-                        sessionStorage.setItem('news_year','0')
66 
-                    } catch (error) {}
67 
-
68 
-                })
69 
-                .catch(error => {
70 
-                    console.error('请求失败:', error); // 处理错误
71 
-                });
72 
-        }
73 
-        function initCategoryList(){
74 
-            let screenBox2 = document.getElementsByClassName('screen_box')[0];
75 
-            fetch(BASEURL+'/system/enum/data/list?enumUuid=2024810214616101')
76 
-                .then(response => {
77 
-                    if (!response.ok) {
78 
-                        throw new Error('网络响应不是 OK');
79 
-                    }
80 
-                    return response.json();
81 
-                })
82 
-                .then(data => {
83 
-                    try {
84 
-                        screenBox2.innerHTML = '';
85 
-                        data.rows.forEach(item => {
86 
-                            let link = document.createElement('a');
87 
-                            link.className = 'screen_box_li';
88 
-                            link.setAttribute('data-category', item.uuid);
89 
-                            link.textContent = `${item.dataName}`;
90 
-                            screenBox2.appendChild(link);
91 
-                        });
92 
-                        sessionStorage.setItem('news_category',data[0].uuid)
93 
-                    } catch (error) {}
94 
-
22 
+                item.addEventListener('click',()=>{
23 
+                    tabs_ul.forEach((li) => {
24 
+                        li.classList.remove('tabs_lis');
25 
+                    });
26 
+
27 
+                    // 给当前点击的元素添加 tabs_lis 类名
28 
+                    item.classList.add('tabs_lis');
95 29 
                 })
96 
-                .catch(error => {
97 
-                    console.error('请求失败:', error); // 处理错误
98 
-                });
30 
+            })
99 31 
         }
100 32 
         function hotNews(){
101 33 
             const news_banner = document.querySelector('.news_banner');
 
@@ -116,7 +48,7 @@ export default class App {
116 48 
                 cont2.textContent = response.digest
117 49 
                 cont3.textContent = response.date
118 50 
                 news_banner.addEventListener('click',() => {
119 
-                    window.open('/newsDetail.html?id='+response.uuid)
51 
+                    window.open('/articleDetails.html?id='+response.uuid)
120 52 
                 })
121 53
122 54 
             })
 
@@ -124,148 +56,6 @@ export default class App {
124 56 
                 console.error('请求失败:', error); // 处理错误
125 57 
             });
126 58 
         }
127 
-        function initList(currentPage){
128 
-            const newsListContainer = document.querySelector('.news_list');
129 
-            newsListContainer.innerHTML = '';
130 
-            const params = {
131 
-                pageSize: pageSize,
132 
-                pageNum: currentPage ? currentPage : 1,
133 
-                column: sessionStorage.getItem('news_category') || undefined,
134 
-                queryYear: sessionStorage.getItem('news_year') || undefined
135 
-            }
136 
-            // 使用 URLSearchParams 处理参数
137 
-            const queryParams = new URLSearchParams();
138 
-            for (const key in params) {
139 
-                if (params[key] !== undefined) { // 检查属性值是否不为 undefined
140 
-                    queryParams.append(key, params[key]); // 将非空属性添加到查询参数
141 
-                }
142 
-            }
143 
-            const url = `${BASEURL}/system/news/list?${queryParams.toString()}`;
144 
-            fetch(url)
145 
-            .then(response => {
146 
-                if (!response.ok) {
147 
-                    throw new Error('网络响应不是 OK');
148 
-                }
149 
-                return response.json();
150 
-            })
151 
-            .then(res => {
152 
-                let data = res.rows;
153 
-                let total = res.total;
154 
-                sessionStorage.setItem('news_total',total)
155 
-                sessionStorage.setItem('news_currentPage',currentPage?currentPage:1)
156 
-                try {
157 
-                    data.forEach(item => {
158 
-                        // 创建新闻列表项
159 
-                        const newsLi = document.createElement('div');
160 
-                        newsLi.className = 'news_li';
161 
-
162 
-                        // 创建左侧部分
163 
-                        const liLeft = document.createElement('div');
164 
-                        liLeft.className = 'li_left';
165 
-                        liLeft.innerHTML = `
166 
-                            <span>${item.month}/${item.day}</span>
167 
-                            <span>${item.year}</span>
168 
-                        `;
169 
-
170 
-                        // 创建内容部分
171 
-                        const liCont = document.createElement('div');
172 
-                        liCont.className = 'li_cont';
173 
-                        liCont.innerHTML = `
174 
-                            <div>${item.title}</div>
175 
-                            <div>${item.date}</div>
176 
-                            <a target="_blank" href=${'/newsDetail.html?id='+item.uuid}>查看更多</a>
177 
-                        `;
178 
-
179 
-                        // 将左侧部分和内容部分添加到新闻列表项中
180 
-                        newsLi.appendChild(liLeft);
181 
-                        newsLi.appendChild(liCont);
182 
-
183 
-                        // 将新闻列表项添加到新闻列表容器中
184 
-                        newsListContainer.appendChild(newsLi);
185 
-                    });
186 
-                    renderPagination(total,currentPage?currentPage:1)
187 
-                    const previousPage = document.querySelector('#previousPage');
188 
-                    const nextPage = document.querySelector('#nextPage');
189 
-                    if(!data || !data.length){
190 
-                        previousPage.style.display = 'none'
191 
-                        nextPage.style.display = 'none'
192 
-                    }else{
193 
-                        previousPage.style.display = 'inline-flex'
194 
-                        nextPage.style.display = 'inline-flex'
195 
-                    }
196 
-                } catch (error) {}
197 
-
198 
-            })
199 
-            .catch(error => {
200 
-                console.error('请求失败:', error);
201 
-            });
202 
-        }
203 
-        function bindADom(dom){
204 
-            dom.addEventListener('click', function(event) {
205 
-                event.preventDefault()
206 
-                let currentPage = event.target.getAttribute('data-pagenum')
207 
-
208 
-                initList(currentPage)
209 
-            });
210 
-        }
211 
-
212 
-        function renderPagination(total, currentPage) {
213 
-            const pageCount = Math.ceil(total / pageSize);
214 
-            const pagingContainer = document.getElementById('paging');
215 
-            pagingContainer.innerHTML = '';
216 
-
217 
-            let startPage, endPage;
218 
-
219 
-            if (pageCount <= 3) {
220 
-                // 总页数小于等于3，直接显示所有页码
221 
-                startPage = 1;
222 
-                endPage = pageCount;
223 
-            } else {
224 
-                // 总页数大于3，计算起始和结束页码
225 
-                if (currentPage <= 2) {
226 
-                    // 当前页在前两页，显示1, 2, 3
227 
-                    startPage = 1;
228 
-                    endPage = 3;
229 
-                } else if (currentPage >= pageCount - 1) {
230 
-                    // 当前页在最后两页，显示最后3页
231 
-                    startPage = pageCount - 2;
232 
-                    endPage = pageCount;
233 
-                } else {
234 
-                    // 当前页在中间，显示前后各一页
235 
-                    startPage = currentPage - 1;
236 
-                    endPage = currentPage + 1;
237 
-                }
238 
-            }
239 
-
240 
-            // 添加省略号和页码
241 
-            if (startPage > 1) {
242 
-                const ellipsis = document.createElement('a');
243 
-                ellipsis.className = 'ellipsis';
244 
-                ellipsis.textContent = '...';
245 
-                pagingContainer.appendChild(ellipsis);
246 
-            }
247 
-
248 
-            for (let i = startPage; i <= endPage; i++) {
249 
-                const pageNum = document.createElement('a');
250 
-                pageNum.className = 'pageNum';
251 
-                pageNum.textContent = i;
252 
-                const currentPage = sessionStorage.getItem('news_currentPage');
253 
-                if (currentPage && parseInt(currentPage) === i) {
254 
-                    pageNum.classList.add('pageNumActive'); // 添加类名
255 
-                }
256 
-                pageNum.setAttribute('data-pagenum',i)
257 
-                // pageNum.href = '#'; // 或者设置为实际链接
258 
-                bindADom(pageNum)
259 
-                pagingContainer.appendChild(pageNum);
260 
-            }
261 
-
262 
-            if (endPage < pageCount) {
263 
-                const ellipsis = document.createElement('a');
264 
-                ellipsis.className = 'ellipsis';
265 
-                ellipsis.textContent = '...';
266 
-                pagingContainer.appendChild(ellipsis);
267 
-            }
268 
-        }
269 59
270 60 
         function pageTurningClickEvent (){
271 61 
             // 上一页

+ 35
- 42
src/pages/news/index.html Целия файл 

@@ -26,35 +26,39 @@
26 26 
                         src="./static/images/news/news1.png"
27 27 
                         alt=""
28 28 
                         />
29 
-                        <a class="news_content" href="../newsDetail.html">
29 
+                        <a class="news_content" href="../articleDetails.html">
30 30 
                             <div class="cont1">国家能源局：系统推进新型电力系统建设重点任务落地见效</div>
31 31 
                             <div class="cont2">2024-08-20</div>
32 32 
                         </a>
33 33 
                     </div>
34 34 
                     <div class="news_banner2">
35 35 
                         <img src="./static/images/news/news1.png" alt="">
36 
-                        <div class="txt1">交通运输部、国家发展改革委联合印发
37 
-                            《交通物流降本提质增效行动计化》</div>
38 
-                        <div class="txt2">2024-11-18</div>
39 
-                        <div class="txt3">阿松大《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产</div>
40 
-                        <a href="#">
41 
-                            查看详情
42 
-                            <span class="icon iconfont icon-jiantou"></span>
43 
-                        </a>
36 
+                        <div class="banner2_cont">
37 
+                            <div class="txt1">交通运输部、国家发展改革委联合印发
38 
+                                《交通物流降本提质增效行动计化》</div>
39 
+                            <div class="txt2">2024-11-18</div>
40 
+                            <div class="txt3">阿松大《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产</div>
41 
+                            <a href="#">
42 
+                                查看详情
43 
+                                <span class="icon iconfont icon-jiantou"></span>
44 
+                            </a>
45 
+                        </div>
44 46 
                     </div>
45 47 
                     <div class="news_banner2">
46 48 
                         <img src="./static/images/news/news1.png" alt="">
47 
-                        <div class="txt1">交通运输部、国家发展改革委联合印发
48 
-                            《交通物流降本提质增效行动计化》</div>
49 
-                        <div class="txt2">2024-11-18</div>
50 
-                        <div class="txt3">《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产...</div>
51 
-                        <a href="#">
52 
-                            查看详情
53 
-                            <span class="icon iconfont icon-jiantou"></span>
54 
-                        </a>
49 
+                        <div class="banner2_cont">
50 
+                            <div class="txt1">交通运输部、国家发展改革委联合印发
51 
+                                《交通物流降本提质增效行动计化》</div>
52 
+                            <div class="txt2">2024-11-18</div>
53 
+                            <div class="txt3">《计划》提出，到2027年，交通物流降本提质增效取得显著成效，社会物流总费用与国内生产...</div>
54 
+                            <a href="#">
55 
+                                查看详情
56 
+                                <span class="icon iconfont icon-jiantou"></span>
57 
+                            </a>
58 
+                        </div>
55 59 
                     </div>
56 60 
                 </div>
57 
-                <div class="tabs_box">
61 
+                <div class="tabs_box" id="tab">
58 62 
                     <div class="tabs_li tabs_lis">全部</div>
59 63 
                     <div class="tabs_li">集团新闻</div>
60 64 
                     <div class="tabs_li">前沿资讯</div>
 
@@ -69,7 +73,7 @@
69 73 
                             <span>19</span>
70 74 
                             <span>24-12</span>
71 75 
                         </div>
72 
-                        <a class="li_cont" href="#">
76 
+                        <a class="li_cont" href="./articleDetails.html">
73 77 
                             <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
74 78 
                             <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
75 79 
                         </a>
 
@@ -79,47 +83,36 @@
79 83 
                             <span>09</span>
80 84 
                             <span>24-12</span>
81 85 
                         </div>
82 
-                        <div class="li_cont">
83 
-                            <div>卡文汽车品牌正式发布“让每一公里更美好”</div>
84 
-                            <a href="../newsDetail.html">查看更多</a>
85 
-                        </div>
86 
+                        <a class="li_cont" href="#">
87 
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
88 
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
89 
+                        </a>
86 90 
                     </div>
87 91 
                     <div class="news_li">
88 92 
                         <div class="li_left">
89 93 
                             <span>10</span>
90 94 
                             <span>24-12</span>
91 95 
                         </div>
92 
-                        <div class="li_cont">
93 
-                            <div>卡文汽车品牌正式发布“让每一公里更美好”</div>
94 
-                            <a href="../newsDetail.html">查看更多</a>
95 
-                        </div>
96 
+                        <a class="li_cont" href="#">
97 
+                            <div>中共中央办公厅 国务院办公厅关于推进新型城市基础设施建设打造韧性城市的意见</div>
98 
+                            <div>为深化城市安全韧性提升行动，推进数字化、网络化、智能化新型城市基础设施建设，打造承受适应能力强、恢复速度快的韧性城市，增强城市风险防控和治理能力，经党...</div>
99 
+                        </a>
96 100 
                     </div>
97 101 
                 </div>
98 102 
             </div>
99 103 
             <div class="news_paging">
104 
+                <!-- 锚点：#tab -->
100 105 
                 <a id="previousPage" class="previousPage">
101 
-                    <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
102 
-                        xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
103 
-                        width="200" height="200">
104 
-                        <path
105 
-                            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"
106 
-                            fill="currentColor" p-id="2766"></path>
107 
-                    </svg>
106 
+                   <span class="icon iconfont icon-jiantou"></span>
108 107 
                 </a>
109 108 
                 <div id="paging" style="display: flex;align-items: center;">
110 109 
                     <a class="pageNum">1</a>
111 110 
                     <a class="pageNum">2</a>
112 111 
                     <a class="pageNum">3</a>
113 
-                    <a class="ellipsis">...</a>
112 
+                    <a class="pageNum pageNums">...</a>
114 113 
                 </div>
115 114 
                 <a id="nextPage" class="nextPage">
116 
-                    <svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1"
117 
-                        xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink"
118 
-                        width="200" height="200">
119 
-                        <path
120 
-                            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"
121 
-                            fill="currentColor" p-id="2766"></path>
122 
-                    </svg>
115 
+                    <span class="icon iconfont icon-jiantou"></span>
123 116 
                 </a>
124 117 
             </div>
125 118 
         </div>

+ 178
- 107
src/pages/news/index.less Целия файл 

@@ -15,7 +15,6 @@
15 15 
     max-width: 1920px;
16 16 
     margin: 0 auto;
17 17 
     padding-top: 70px;
18 
-    padding-bottom: 110px;
19 18 
     .content{
20 19 
         width: 1500px;
21 20 
         margin: 0 auto;
 
@@ -138,6 +137,11 @@
138 137 
                 margin-right: 80px;
139 138 
                 cursor: pointer;
140 139 
                 padding-bottom: 48px;
140 
+                transition: all .2s;
141 
+                border-bottom: 2px solid #fff;
142 
+                &:hover{
143 
+                    color: #B81C25;
144 
+                }
141 145 
             }
142 146 
             .tabs_lis{
143 147 
                 color: #B81C25;
 
@@ -222,6 +226,9 @@
222 226 
                         }
223 227 
                     }
224 228 
                 }
229 
+                &:last-child{
230 
+                    border: none;
231 
+                }
225 232 
             }
226 233 
         }
227 234 
     }
 
@@ -229,63 +236,78 @@
229 236 
         display: flex;
230 237 
         align-items: center;
231 238 
         justify-content: center;
232 
-        margin-top: 100px;
239 
+        padding: 100px 0 120px;
240 
+        background: #F6F6F6;
233 241 
         .previousPage{
234 242 
             width: 40px;
235 243 
             height: 40px;
236 
-            color: #48A038;
244 
+            color: #041954;
237 245 
             display: flex;
238 246 
             align-items: center;
239 247 
             justify-content: center;
240 
-            border: 1px solid #48A038;
248 
+            border: 1px solid #041954;
241 249 
             margin-right: 20px;
242 250 
             cursor: pointer;
243 251 
             transition: all 0.2s;
244 
-            svg{
245 
-                width: 20px;
246 
-                height: 20px;
247 
-                transform: rotate(90deg);
252 
+            span{
253 
+                font-size: 26px;
254 
+                transform: rotate(-90deg);
248 255 
             }
249 256 
             &:hover{
250 
-                background-color: #48A038;
257 
+                background: #B81C25;
258 
+                border: 1px solid #B81C25;
251 259 
                 color: #fff;
252 260 
             }
253 261 
         }
254 262 
         .nextPage{
255 263 
             width: 40px;
256 264 
             height: 40px;
257 
-            color: #48A038;
265 
+            color: #041954;
258 266 
             display: flex;
259 267 
             align-items: center;
260 268 
             justify-content: center;
261 
-            border: 1px solid #48A038;
269 
+            border: 1px solid #041954;
262 270 
             margin-left: 20px;
263 271 
             cursor: pointer;
264 272 
             transition: all 0.2s;
265 
-            svg{
266 
-                width: 20px;
267 
-                height: 20px;
268 
-                transform: rotate(-90deg);
273 
+            span{
274 
+                font-size: 26px;
275 
+                transform: rotate(90deg);
269 276 
             }
270 277 
             &:hover{
271 
-                background-color: #48A038;
278 
+                background: #B81C25;
279 
+                border: 1px solid #B81C25;
272 280 
                 color: #fff;
273 281 
             }
274 282 
         }
275 283 
         .pageNum{
284 
+            min-width: 40px;
285 
+            height: 40px;
286 
+            line-height: 40px;
276 287 
             font-family: Source Han Sans CN;
277 
-            font-weight: bold;
278 
-            font-size: 16px;
279 
-            color: #333333;
288 
+            font-size: 18px;
289 
+            color: #000;
280 290 
             transition: all 0.2s;
281 
-            padding: 10px 15px;
291 
+            padding: 0 5px;
292 
+            box-sizing: border-box;
282 293 
             cursor: pointer;
294 
+            text-align: center;
295 
+            border: 1px solid #DDE2E6;
296 
+            border-radius: 2px;
283 297 
             &:hover{
284 
-                color: #48A038;
298 
+                background: #B81C25;
299 
+                border: 1px solid #B81C25;
300 
+                color: #fff;
285 301 
             }
286 302 
         }
303 
+        .pageNums{
304 
+            pointer-events: none;
305 
+        }
306 
+        .pageNum+.pageNum{
307 
+            margin-left: 10px;
308 
+        }
287 309 
         .pageNumActive{
288 
-            color: #48A038;
310 
+            color: #041954;
289 311 
         }
290 312 
         .ellipsis{
291 313 
             font-family: Source Han Sans CN;
 
@@ -317,12 +339,12 @@ a{
317 339 
     .main {
318 340 
         width: 100%;
319 341 
         padding-top: 3.5vw;
320 
-        padding-bottom: 16vw;
321 342 
         .content{
322 
-            width: 90%;
343 
+            width: 92vw;
323 344 
             margin: 0 auto;
324 345 
             .news_title{
325 346 
                 display: block;
347 
+                margin-bottom: 10.75vw;
326 348 
                 .title{
327 349 
                     font-size: 6.375vw;
328 350 
                     text-align: center;
 
@@ -347,120 +369,169 @@ a{
347 369 
                     }
348 370 
                 }
349 371 
             }
350 
-            .news_banner{
351 
-                width: 100%;
352 
-                height: auto;
353 
-                img{
372 
+            .banner_box{
373 
+                display: block;
374 
+                margin-bottom: 15vw;
375 
+                .news_banner{
354 376 
                     width: 100%;
355 
-                    height: 42.75vw;
356 
-                }
357 
-
358 
-                .news_content{
359 
-                    // display: none;
360 
-                    background: none;
361 
-                    position: unset;
362 377 
                     height: auto;
363 
-                    padding: 7.875vw 0 16vw;
364 
-                    border-bottom: 1px solid #DADADA;
365 
-                    .cont1{
366 
-                        font-family: Source Han Sans CN;
367 
-                        font-weight: bold;
368 
-                        font-size: 4.75vw;
369 
-                        color: #333333;
378 
+                    margin-bottom: 8vw;
379 
+                    img{
380 
+                        width: 100%;
381 
+                        height: 62.75vw;
382 
+                        border-radius: 1.625vw;
383 
+                        object-fit: cover;
370 384 
                     }
371 
-                    .cont2{
372 
-                        font-family: Source Han Sans CN;
385 
+
386 
+                    .news_content{
387 
+                        padding: 3.75vw;
388 
+                        .cont1{
389 
+                            font-family: Source Han Sans CN;
390 
+                            font-weight: bold;
391 
+                            font-size: 3.75vw;
392 
+                            color: #fff;
393 
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
394 
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
395 
+                            -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
396 
+                            overflow: hidden;            /* 隐藏超出部分 */
397 
+                            text-overflow: ellipsis;     /* 用省略号表示超出部分 */
398 
+                        }
399 
+                        .cont2{
400 
+                            font-family: Source Han Sans CN;
401 
+                            font-size: 2.375vwvw;
402 
+                            color: #fff;
403 
+                            margin-top: 2.5vw;
404 
+                        }
405 
+                        .cont3{
406 
+                            font-family: Source Han Sans CN;
407 
+                            font-size: 3.25vw;
408 
+                            color: #fff;
409 
+                        }
410 
+                    }
411 
+
412 
+                }
413 
+                .news_banner2{
414 
+                    width: 100%;
415 
+                    display: flex;
416 
+                    align-items: center;
417 
+                    justify-content: space-between;
418 
+                    margin-bottom: 10.75vw;
419 
+                    img{
420 
+                        width: 45.375vw;
421 
+                        height: 34vw;
422 
+                        margin-bottom: 0;
423 
+                        border-radius: 1.625vw;
424 
+                    }
425 
+                    .banner2_cont{
426 
+                        width: 42.5vw;
427 
+                    }
428 
+                    .txt1{
429 
+                        width: 42.5vw;
373 430 
                         font-size: 3.75vw;
374 
-                        color: #333333;
375 
-                        line-height: 7.5vw;
431 
+                        display: -webkit-box;           /* 使用 Flexbox 布局 */
432 
+                        -webkit-box-orient: vertical;   /* 垂直方向排列 */
433 
+                        -webkit-line-clamp: 2;         /* 限制显示的行数，这里是3行 */
434 
+                        overflow: hidden;               /* 隐藏超出部分 */
435 
+                        text-overflow: ellipsis;
436 
+                        line-height: 1.5;
437 
+                        padding-bottom: 0;
438 
+                        margin-bottom: 5.375vw;
439 
+                        border: 0;
376 440 
                     }
377 
-                    .cont3{
378 
-                        font-family: Source Han Sans CN;
441 
+                    .txt2{
442 
+                        margin-bottom: 5.5vw;
379 443 
                         font-size: 3.25vw;
380 
-                        color: #333333;
444 
+                        color: #999999;
445 
+                    }
446 
+                    .txt3{
447 
+                        display: none;
448 
+                    }
449 
+                    a{
450 
+                        font-size: 3.325vw;
451 
+                        .icon{
452 
+                            font-size: 4.325vw;
453 
+                            margin-top: 3px;
454 
+                        }
381 455 
                     }
382 456 
                 }
383 
-
384 457 
             }
458 
+            .tabs_box{
459 
+                width: 100%;
460 
+                font-size: 3.75vw;
461 
+                .tabs_li{
462 
+                    margin-right: 4.9vw;
463 
+                    padding-bottom: 5.625vw;
464 
+                }
465 
+            }
466 
+        }
467 
+        .news_ul{
468 
+            width: 100%;
385 469 
             .news_list{
386 470 
                 margin-top: 0;
471 
+                width: 100%;
472 
+                box-sizing: border-box;
473 
+                padding: 0 3.75vw;
387 474 
                 .news_li{
388 
-                    padding:7.5vw 0;
475 
+                    padding:5.625vw 0;
389 476 
                     .li_left{
390 
-                        display: none;
477 
+                        width: 16.25vw;
391 478 
                     }
392 479 
                     .li_cont{
480 
+                        width: 71.5vw;
393 481 
                         div:nth-child(1){
394 482 
                             font-family: Source Han Sans CN;
395 483 
                             font-size: 3.75vw;
396 484 
                             color: #282828;
397 485 
                             line-height: 7.5vw;
486 
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
487 
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
488 
+                            -webkit-line-clamp: 1;      /* 限制显示的行数，这里是3行 */
489 
+                            overflow: hidden;
490 
+                            font-weight: bold;
398 491 
                         }
399 492 
                         div:nth-child(2){
400 493 
                             width: auto;
401 494 
                             height: auto;
402 495 
                             overflow: unset;
496 
+                            line-height: 1.5;
403 497 
                             font-family: Source Han Sans CN;
404 498 
                             font-size: 3.25vw;
405 
-                            color: #333333;
406 
-                            padding: 5vw 0;
407 
-                        }
408 
-                        a{
409 
-                            width: auto;
410 
-                            height: auto;
411 
-                            overflow: unset;
412 
-                            margin-top: 0;
413 
-                            font-size: 3.25vw;
414 
-                            color: #48A038;
499 
+                            color: #A7A5A5;
500 
+                            padding: 0;
501 
+                            display: -webkit-box;        /* 使用 Flexbox 布局 */
502 
+                            -webkit-box-orient: vertical; /* 垂直方向排列 */
503 
+                            -webkit-line-clamp: 2;      /* 限制显示的行数，这里是3行 */
504 
+                            overflow: hidden;
415 505 
                         }
506 
+
416 507 
                     }
417 508 
                 }
418 509 
             }
419 
-            .news_paging{
420 
-                margin-top: 16vw;
421 
-                .previousPage{
422 
-                    width: 6.625vw;
423 
-                    height: 6.625vw;
424 
-                    margin-right: 20px;
425 
-                    svg{
426 
-                        width: 3.25vw;
427 
-                        height: 3.25vw;
428 
-                        transform: rotate(90deg);
429 
-                    }
430 
-                    &:hover{
431 
-                        background-color: #48A038;
432 
-                        color: #fff;
433 
-                    }
434 
-                }
435 
-                .nextPage{
436 
-                    width: 6.625vw;
437 
-                    height: 6.625vw;
438 
-                    margin-left: 3.25vw;
439 
-                    transition: all 0.2s;
440 
-                    svg{
441 
-                        width: 3.25vw;
442 
-                        height: 3.25vw;
443 
-                        transform: rotate(-90deg);
444 
-                    }
445 
-                    &:hover{
446 
-                        background-color: #48A038;
447 
-                        color: #fff;
448 
-                    }
449 
-                }
450 
-                .pageNum{
451 
-                    font-size: 3.5vw;
452 
-                    padding: 1.875vw 2.5vw;
453 
-                    &:hover{
454 
-                        color: #48A038;
455 
-                    }
456 
-                }
457 
-                .ellipsis{
458 
-                    font-size: 3.5vw;
459 
-                    padding: 1.875vw 2.5vw;
460 
-                    // &:hover{
461 
-                    //     color:#48A038
462 
-                    // }
463 
-                }
510 
+        }
511 
+        .news_paging{
512 
+            padding-top: 16vw;
513 
+            .previousPage{
514 
+                width: 40px;
515 
+                height: 40px;
516 
+                margin-right: 20px;
517 
+                box-sizing: border-box;
518 
+            }
519 
+            .nextPage{
520 
+                width: 40px;
521 
+                height: 40px;
522 
+                margin-left: 3.25vw;
523 
+                transition: all 0.2s;
524 
+                box-sizing: border-box;
525 
+            }
526 
+            .pageNum{
527 
+                font-size: 3.5vw;
528 
+            }
529 
+            .ellipsis{
530 
+                font-size: 3.5vw;
531 
+                padding: 1.875vw 2.5vw;
532 
+                // &:hover{
533 
+                //     color:#48A038
534 
+                // }
464 535 
             }
465 536 
         }
466 537 
     }

+ 0
- 34
src/pages/newsDetail/App.js Целия файл 

@@ -1,34 +0,0 @@
1 
-import Swiper from 'swiper/bundle'
2 
-import gsap from 'gsap'
3 
-import Common from '../common/js/Common'
4 
-import {
5 
-    isMobile
6 
-} from '../common/js/utils'
7 
-
8 
-export default class App {
9 
-    constructor() {
10 
-        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
11 
-        this.isMobile = isMobile()
12 
-        // this.tabChange()
13 
-        // 图片及视频资源懒加载。防止阻塞js执行
14 
-        let lazyDoms = document.querySelectorAll(".lazy");
15 
-        lazyDoms.forEach((item) => {
16 
-            console.log(item, 'item---1')
17 
-            if (item.nodeName == "PICTURE") {
18 
-                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
19 
-                item.children[1].setAttribute("src", item.children[1].dataset.src);
20 
-            }
21 
-            if (item.nodeName == "IMG") {
22 
-                item.setAttribute("src", item.dataset.src);
23 
-            }
24 
-            if (item.nodeName == "VIDEO") {
25 
-                console.log(item, 'item---2')
26 
-                item.setAttribute("src", item.dataset.src);
27 
-                // item.load();
28 
-            }
29 
-        });
30 
-    }
31 
-
32 
-
33 
-
34 
-}

+ 0
- 52
src/pages/newsDetail/index.html Целия файл 

@@ -1,52 +0,0 @@
1 
-<!DOCTYPE html>
2 
-<html lang="cn">
3 
-
4 
-<head>
5 
-    <meta charset="utf-8" />
6 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 
-    <title>新闻资讯</title>
8 
-    <meta name="description" content="" />
9 
-    <meta name="Keywords" content="" />
10 
-    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
11 
-    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
12 
-    <%= require('../common/tpl/headerLink.tpl') %>
13 
-</head>
14 
-
15 
-<body>
16 
-    <%= require('../common/tpl/header.tpl') %>
17 
-        <div class="main">
18 
-            <div class="content">
19 
-                <div class="detail_title">
20 
-                    <div class="title">卡文汽车品牌正式发布“让每一公里更美好”</div>
21 
-                    <div class="date">2024.01.27</div>
22 
-                </div>
23 
-                <div class="paragraphHeadings marginTop100">01 卡文汽车品牌使命</div>
24 
-                <div class="paragraphContext marginTop30">让每一公里更美好</div>
25 
-                <div class="paragraphHeadings marginTop80">02 卡文汽车品牌愿景</div>
26 
-                <div class="paragraphContext marginTop30">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
27 
-                <div class="paragraphContext marginTop30">1）交付超客户预期的智能车辆服务</div>
28 
-                <div class="paragraphContext">2）实现平台技术及新能源技术领先</div>
29 
-                <div class="paragraphContext">3）发展高阶智能的新生态商业模式</div>
30 
-                <div class="paragraphContext">4）构建可持续的绿色能源业务体系</div>
31 
-                <div class="paragraphContext marginTop80">（北京）1月27日，以“让每一公里更美好”为主题的卡文汽车品牌发布会在北京国家科技传播中心举行，新能源商用车品牌卡文汽车正式发布。卡文汽车以创造美好之路（R.O.A.D）为引领，构建了卡文汽车从企业责任（Responsibility）、最优解决方案（Optimization）、探索创新（Adventure）到可持续发展观（Development）的品牌战略。</div>
32 
-                <div class="paragraphContext marginTop45">卡文汽车由中国规模最大的商用车企业北汽福田联合全球领先的汽车技术与服务商博世旗下博世创投与博原资本、中国氢能第一股亿华通及产业资本头部机构北汽产投共同成立。集聚高端科技资源与创新要素，汇聚国际一流人才、资本、技术、知识，深刻洞察新能源商用车行业趋势和客户需求，在科技革命、能源革命交汇发展的新时代，卡文汽车致力于通过新能源领先科技，打造智能化新能源专属整车平台架构和新商业生态，为全球用户创造价值，提供新能源解决方案，构建零碳、可持续发展的美好之路。</div>
33 
-                <div class="imgBox marginTop45">
34 
-                    <img src="./static/images/product/详情01.jpg" alt="">
35 
-                </div>
36 
-                <div class="paragraphContext marginTop80">（北京）1月27日，以“让每一公里更美好”为主题的卡文汽车品牌发布会在北京国家科技传播中心举行，新能源商用车品牌卡文汽车正式发布。卡文汽车以创造美好之路（R.O.A.D）为引领，构建了卡文汽车从企业责任（Responsibility）、最优解决方案（Optimization）、探索创新（Adventure）到可持续发展观（Development）的品牌战略。</div>
37 
-                <div class="paragraphContext marginTop45">卡文汽车由中国规模最大的商用车企业北汽福田联合全球领先的汽车技术与服务商博世旗下博世创投与博原资本、中国氢能第一股亿华通及产业资本头部机构北汽产投共同成立。集聚高端科技资源与创新要素，汇聚国际一流人才、资本、技术、知识，深刻洞察新能源商用车行业趋势和客户需求，在科技革命、能源革命交汇发展的新时代，卡文汽车致力于通过新能源领先科技，打造智能化新能源专属整车平台架构和新商业生态，为全球用户创造价值，提供新能源解决方案，构建零碳、可持续发展的美好之路。</div>
38 
-                <div class="imgBox marginTop45">
39 
-                    <img src="./static/images/product/详情02.jpg" alt="">
40 
-                </div>
41 
-                <div class="paragraphContext marginTop80">（北京）1月27日，以“让每一公里更美好”为主题的卡文汽车品牌发布会在北京国家科技传播中心举行，新能源商用车品牌卡文汽车正式发布。卡文汽车以创造美好之路（R.O.A.D）为引领，构建了卡文汽车从企业责任（Responsibility）、最优解决方案（Optimization）、探索创新（Adventure）到可持续发展观（Development）的品牌战略。</div>
42 
-                <div class="paragraphContext marginTop45">卡文汽车由中国规模最大的商用车企业北汽福田联合全球领先的汽车技术与服务商博世旗下博世创投与博原资本、中国氢能第一股亿华通及产业资本头部机构北汽产投共同成立。集聚高端科技资源与创新要素，汇聚国际一流人才、资本、技术、知识，深刻洞察新能源商用车行业趋势和客户需求，在科技革命、能源革命交汇发展的新时代，卡文汽车致力于通过新能源领先科技，打造智能化新能源专属整车平台架构和新商业生态，为全球用户创造价值，提供新能源解决方案，构建零碳、可持续发展的美好之路。</div>
43 
-                <div class="imgBox marginTop45">
44 
-                    <img src="./static/images/product/详情03.jpg" alt="">
45 
-                </div>
46 
-            </div>
47 
-        </div>
48 
-        <%= require('../common/tpl/footer.tpl') %>
49 
-            <%= require('../common/tpl/bottomBar.tpl') %>
50 
-</body>
51 
-
52 
-</html>

+ 86
- 0
src/pages/partyBuilding/App.js Целия файл 

@@ -0,0 +1,86 @@
1 
+import Swiper from 'swiper/bundle'
2 
+import gsap from 'gsap'
3 
+import Common from '../common/js/Common'
4 
+import {
5 
+    isMobile
6 
+} from '../common/js/utils'
7 
+// const BASEURL = 'http://192.168.1.33:9100';
8 
+const BASEURL = 'http://localhost:3002/api';
9 
+const pageSize = 5;
10 
+
11 
+export default class App {
12 
+    constructor() {
13 
+        let common = new Common(document.querySelector('.main'),4)   //导航菜单高亮，0是首页，后面的按顺序添加
14 
+        this.isMobile = isMobile()
15 
+
16 
+        // bindDom();
17 
+
18 
+        function bindDom(){
19 
+            const tabs_ul =  document.querySelectorAll(".tabs_li");
20 
+            tabs_ul.forEach((item,index)=>{
21 
+
22 
+                item.addEventListener('click',()=>{
23 
+                    tabs_ul.forEach((li) => {
24 
+                        li.classList.remove('tabs_lis');
25 
+                    });
26 
+
27 
+                    // 给当前点击的元素添加 tabs_lis 类名
28 
+                    item.classList.add('tabs_lis');
29 
+                })
30 
+            })
31 
+        }
32 
+        function hotNews(){
33 
+            const news_banner = document.querySelector('.news_banner');
34 
+            const img = news_banner.querySelector('img')
35 
+            const cont1 = news_banner.querySelector('.cont1')
36 
+            const cont2 = news_banner.querySelector('.cont2')
37 
+            const cont3 = news_banner.querySelector('.cont3')
38 
+            fetch(BASEURL+'/system/news/top')
39 
+            .then(response => {
40 
+                if (!response.ok) {
41 
+                    throw new Error('网络响应不是 OK');
42 
+                }
43 
+                return response.json();
44 
+            })
45 
+            .then(response => {
46 
+                if (response.surfaceUrl) img.src = response.surfaceUrl
47 
+                cont1.textContent = response.title
48 
+                cont2.textContent = response.digest
49 
+                cont3.textContent = response.date
50 
+                news_banner.addEventListener('click',() => {
51 
+                    window.open('/articleDetails.html?id='+response.uuid)
52 
+                })
53 
+
54 
+            })
55 
+            .catch(error => {
56 
+                console.error('请求失败:', error); // 处理错误
57 
+            });
58 
+        }
59 
+
60 
+        function pageTurningClickEvent (){
61 
+            // 上一页
62 
+            const previousPage = document.querySelector('#previousPage');
63 
+            previousPage.addEventListener('click', function(event) {
64 
+                event.preventDefault()
65 
+                const currentPage = sessionStorage.getItem('news_currentPage');
66 
+                if(currentPage && parseInt(currentPage) > 1){
67 
+                    initList(parseInt(currentPage) - 1)
68 
+                }
69 
+
70 
+            })
71 
+            //下一页
72 
+            const nextPage = document.querySelector('#nextPage');
73 
+            nextPage.addEventListener('click', function(event) {
74 
+                event.preventDefault()
75 
+                const currentPage = sessionStorage.getItem('news_currentPage');
76 
+                const pageCount = Math.ceil(parseInt(sessionStorage.getItem('news_total')) / pageSize)
77 
+                if(currentPage && parseInt(currentPage) < pageCount){
78 
+                    initList(parseInt(currentPage) + 1)
79 
+                }
80 
+            })
81 
+        }
82 
+    }
83 
+
84 
+
85 
+
86 
+}

+ 42
- 0
src/pages/partyBuilding/index.html Целия файл 

@@ -0,0 +1,42 @@
1 
+<!DOCTYPE html>
2 
+<html lang="cn">
3 
+
4 
+<head>
5 
+    <meta charset="utf-8" />
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7 
+    <title>新闻资讯</title>
8 
+    <meta name="description" content="" />
9 
+    <meta name="Keywords" content="" />
10 
+    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
11 
+    <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
12 
+    <%= require('../common/tpl/headerLink.tpl') %>
13 
+</head>
14 
+
15 
+<body>
16 
+    <%= require('../common/tpl/header.tpl') %>
17 
+        <div class="main">
18 
+            <div class="content">
19 
+                <div class="news_title">新闻中心</div>
20 
+            </div>
21 
+
22 
+            <div class="news_paging">
23 
+                <!-- 锚点：#tab -->
24 
+                <a id="previousPage" class="previousPage">
25 
+                   <span class="icon iconfont icon-jiantou"></span>
26 
+                </a>
27 
+                <div id="paging" style="display: flex;align-items: center;">
28 
+                    <a class="pageNum">1</a>
29 
+                    <a class="pageNum">2</a>
30 
+                    <a class="pageNum">3</a>
31 
+                    <a class="pageNum pageNums">...</a>
32 
+                </div>
33 
+                <a id="nextPage" class="nextPage">
34 
+                    <span class="icon iconfont icon-jiantou"></span>
35 
+                </a>
36 
+            </div>
37 
+        </div>
38 
+        <%= require('../common/tpl/footer.tpl') %>
39 
+            <%= require('../common/tpl/bottomBar.tpl') %>
40 
+</body>
41 
+
42 
+</html>

+ 15
- 0
src/pages/partyBuilding/index.js Целия файл 

@@ -0,0 +1,15 @@
1 
+import "./../common/css/common.less";
2 
+import "./index.less";
3 
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
4 
+import App from './App.js';
5 
+
6 
+// swiper的css目前环境解析不出来，放static下，不走webpack
7 
+//import 'swiper/swiper-bundle.css';
8 
+
9 
+vhCheck();
10 
+//禁止浏览器刷新后回到上一个页面滚动位置
11 
+if ('scrollRestoration' in history) {
12 
+    history.scrollRestoration = 'manual';
13 
+}
14 
+
15 
+new App();

+ 177
- 0
src/pages/partyBuilding/index.less Целия файл 

@@ -0,0 +1,177 @@
1 
+// pc端：
2 
+// 设计稿1440*900 所有尺寸基本按px来即可;
3 
+// 正文 16px;
4 
+
5 
+
6 
+// 移动端：
7 
+// 设计稿宽800px，按逻辑尺寸的两倍制作。因此真实尺寸需要除2；
8 
+// 如设计稿字体大小28px,则实真字体大小为28px/2=14px;
9 
+// 或使用vw 字体大小：28/800*10 = 3.5vw
10 
+// 正文 14px 或 3.5vw
11 
+
12 
+//pc端样式
13 
+.main {
14 
+    width: 100%;
15 
+    max-width: 1920px;
16 
+    margin: 0 auto;
17 
+    padding-top: 70px;
18 
+    .content{
19 
+        width: 1500px;
20 
+        margin: 0 auto;
21 
+        .news_title{
22 
+            text-align: center;
23 
+            padding-top: 143px;
24 
+            margin-bottom: 80px;
25 
+            font-weight: bold;
26 
+            font-size: 40px;
27 
+            font-family: Microsoft YaHei;
28 
+            color: #333333;
29 
+        }
30 
+    }
31 
+
32 
+    .news_paging{
33 
+        display: flex;
34 
+        align-items: center;
35 
+        justify-content: center;
36 
+        padding: 100px 0 120px;
37 
+        background: #F6F6F6;
38 
+        .previousPage{
39 
+            width: 40px;
40 
+            height: 40px;
41 
+            color: #041954;
42 
+            display: flex;
43 
+            align-items: center;
44 
+            justify-content: center;
45 
+            border: 1px solid #041954;
46 
+            margin-right: 20px;
47 
+            cursor: pointer;
48 
+            transition: all 0.2s;
49 
+            span{
50 
+                font-size: 26px;
51 
+                transform: rotate(-90deg);
52 
+            }
53 
+            &:hover{
54 
+                background: #B81C25;
55 
+                border: 1px solid #B81C25;
56 
+                color: #fff;
57 
+            }
58 
+        }
59 
+        .nextPage{
60 
+            width: 40px;
61 
+            height: 40px;
62 
+            color: #041954;
63 
+            display: flex;
64 
+            align-items: center;
65 
+            justify-content: center;
66 
+            border: 1px solid #041954;
67 
+            margin-left: 20px;
68 
+            cursor: pointer;
69 
+            transition: all 0.2s;
70 
+            span{
71 
+                font-size: 26px;
72 
+                transform: rotate(90deg);
73 
+            }
74 
+            &:hover{
75 
+                background: #B81C25;
76 
+                border: 1px solid #B81C25;
77 
+                color: #fff;
78 
+            }
79 
+        }
80 
+        .pageNum{
81 
+            min-width: 40px;
82 
+            height: 40px;
83 
+            line-height: 40px;
84 
+            font-family: Source Han Sans CN;
85 
+            font-size: 18px;
86 
+            color: #000;
87 
+            transition: all 0.2s;
88 
+            padding: 0 5px;
89 
+            box-sizing: border-box;
90 
+            cursor: pointer;
91 
+            text-align: center;
92 
+            border: 1px solid #DDE2E6;
93 
+            border-radius: 2px;
94 
+            &:hover{
95 
+                background: #B81C25;
96 
+                border: 1px solid #B81C25;
97 
+                color: #fff;
98 
+            }
99 
+        }
100 
+        .pageNums{
101 
+            pointer-events: none;
102 
+        }
103 
+        .pageNum+.pageNum{
104 
+            margin-left: 10px;
105 
+        }
106 
+        .pageNumActive{
107 
+            color: #041954;
108 
+        }
109 
+        .ellipsis{
110 
+            font-family: Source Han Sans CN;
111 
+            font-weight: bold;
112 
+            font-size: 22px;
113 
+            padding: 10px 15px;
114 
+            color: #333333;
115 
+            // cursor: pointer;
116 
+            transition: all 0.2s;
117 
+            // &:hover{
118 
+            //     color:#48A038
119 
+            // }
120 
+        }
121 
+    }
122 
+}
123 
+a{
124 
+    display: inline-block;
125 
+}
126 
+
127 
+@media screen and (min-width: 801px) and (max-width: 1400px) {
128 
+    .main{
129 
+
130 
+    }
131 
+}
132 
+
133 
+//移动端样式
134 
+@media screen and (max-width:800px) {
135 
+
136 
+    .main {
137 
+        width: 100%;
138 
+        padding-top: 3.5vw;
139 
+        .content{
140 
+            width: 92vw;
141 
+            margin: 0 auto;
142 
+            .news_title{
143 
+                display: block;
144 
+                margin-bottom: 10.75vw;
145 
+                font-size: 6.375vw;
146 
+                text-align: center;
147 
+            }
148 
+        }
149 
+
150 
+        .news_paging{
151 
+            padding-top: 16vw;
152 
+            .previousPage{
153 
+                width: 40px;
154 
+                height: 40px;
155 
+                margin-right: 20px;
156 
+                box-sizing: border-box;
157 
+            }
158 
+            .nextPage{
159 
+                width: 40px;
160 
+                height: 40px;
161 
+                margin-left: 3.25vw;
162 
+                transition: all 0.2s;
163 
+                box-sizing: border-box;
164 
+            }
165 
+            .pageNum{
166 
+                font-size: 3.5vw;
167 
+            }
168 
+            .ellipsis{
169 
+                font-size: 3.5vw;
170 
+                padding: 1.875vw 2.5vw;
171 
+                // &:hover{
172 
+                //     color:#48A038
173 
+                // }
174 
+            }
175 
+        }
176 
+    }
177 
+}

Write Preview
Loading…
Отказ
Запис