Browse Source

修改反馈2

zjm
等你 4 months ago
parent
commit
b459754f2b

BIN
dev/static/images/index/bannerV.mp4 View File


BIN
dev/static/images/index/corporate1.jpg View File


BIN
dev/static/images/product/Industrial1.png View File


BIN
dev/static/images/product/Industrial1m.png View File


BIN
dev/static/images/product/Industrial2.png View File


BIN
dev/static/images/product/Industrial2m.png View File


BIN
dev/static/images/product/Industrial3.png View File


BIN
dev/static/images/product/Industrial3m.png View File


+ 158
- 2
src/pages/common/css/common.less View File

250
                 background-size: 142px 32px;
250
                 background-size: 142px 32px;
251
             }
251
             }
252
             .language{
252
             .language{
253
-                a{
253
+                .btn2{
254
                     color: #ffffff;
254
                     color: #ffffff;
255
                     &:hover{
255
                     &:hover{
256
                         color: #B81C25;
256
                         color: #B81C25;
411
         cursor: pointer;
411
         cursor: pointer;
412
         position: absolute;
412
         position: absolute;
413
         right: 100px;
413
         right: 100px;
414
-        a{
414
+        .btn2{
415
             display: inline-block;
415
             display: inline-block;
416
             color: #000000;
416
             color: #000000;
417
             transition: all .3s ease;
417
             transition: all .3s ease;
888
         }
888
         }
889
     }
889
     }
890
 }
890
 }
891
+.searchCon{
892
+    width: 100%;
893
+    height: 100%;
894
+    position: fixed;
895
+    background: rgba(0,0,0,0.4);
896
+    display: flex;
897
+    top: 0px;
898
+    left: 0px;
899
+    z-index: -1;
900
+    justify-content: center;
901
+    align-items: center;
902
+    transition: all .6s ease-in-out;
903
+    opacity: 0;
904
+    transform: translateY(-100%);
905
+    .searchConIn{
906
+        width: 70%;
907
+        max-width: 1300px;
908
+        
909
+        max-height: 80%;
910
+        background: #fff;
911
+        .searchUp{
912
+            width: 100%;
913
+            border-bottom: 1px solid #dbdbdb;
914
+            height: 60px;
915
+            line-height: 60px;
916
+            text-align: left;
917
+            box-sizing: border-box;
918
+            padding: 0px 30px;
919
+            .searchInput{
920
+                padding-left: 20px;
921
+                border: 0px;
922
+                width: calc(100% - 60px);
923
+                font-size: 20px;
924
+            }
925
+            .icon-search{
926
+                color: #B81C25;
927
+            }
928
+            .searchClose{
929
+                float: right;
930
+                cursor: pointer;
931
+                .iconfont{
932
+                    transform: rotate(0deg);
933
+                    transition: all .3s ease-in-out;
934
+                    display: inline-block;
935
+                }
936
+                &:hover{
937
+                    .iconfont{
938
+                        transform: rotate(180deg);
939
+                        color: #B81C25;
940
+                    }
941
+                    
942
+                }
943
+            }
944
+        }
945
+        .searchDw{
946
+            width: 100%;
947
+            max-height: calc(100% - 60px);
948
+            padding-top: 30px;
949
+            overflow-y: auto;
950
+            box-sizing: border-box;
951
+            padding: 30px 30px 0;
952
+        }
953
+    }
954
+    
955
+    .newsType{
956
+        width: 100%;
957
+        height: 100%;
958
+        .newsLi{
959
+          width: 100%;
960
+          display: flex;
961
+          justify-content: space-between;
962
+          border-bottom: 1px solid #acacac5e;
963
+          box-sizing: border-box;
964
+          padding: 27px 0px;
965
+          &:last-child{
966
+            border-bottom: 0px solid #ACACAC;
967
+          }
968
+          .timer{
969
+            width: 65px;
970
+            height: 66px;
971
+            border-radius: 8px;
972
+            border: 1px solid #A7A5A5;
973
+            text-align: center;
974
+            font-size: 12px;
975
+            padding: 0px 12px 0;
976
+            box-sizing: border-box;
977
+            .timerData{
978
+              font-size: 26px;
979
+              color: #b81c25;
980
+              border-bottom: 1px solid #b81c25;
981
+              padding-bottom: 3px;
982
+              margin-bottom: 3px;
983
+              line-height: 30px;
984
+              padding-top: 4px;
985
+            }
986
+          }
987
+          .newsLiCon{
988
+            width: calc(100% - 80px);
989
+            font-size: 18px;
990
+            text-align: left;
991
+            &>div{
992
+              overflow: hidden;
993
+              white-space: nowrap;
994
+              width: 100%;
995
+              height: 24px;
996
+              text-overflow: ellipsis;
997
+            }
998
+            .liTitle{
999
+              color: #231F20;
1000
+              font-weight: 500;
1001
+              margin-bottom: 8px;
1002
+              padding-top: 6px;
1003
+            }
1004
+            .licon{
1005
+              font-weight: 400;
1006
+              color: #999999;
1007
+              font-size: 16px;
1008
+            }
1009
+          }
1010
+          transition: all 0.3s ease-in-out;
1011
+          &:hover{
1012
+            background: rgba(184, 28, 37, 0.05);
1013
+            .newsLiCon{
1014
+                .liTitle{
1015
+                    color: #B81C25;
1016
+                }
1017
+            }
1018
+            
1019
+          }
1020
+        }
1021
+    }
1022
+}
1023
+.searchConShow{
1024
+    opacity: 1;
1025
+    z-index: 33;
1026
+    transform: translateY(0%);
1027
+}
1028
+
891
 .chooseM{
1029
 .chooseM{
892
     display: none;
1030
     display: none;
893
 }
1031
 }
1308
           background: #000;
1446
           background: #000;
1309
         }
1447
         }
1310
       }
1448
       }
1449
+    .searchCon{
1450
+        .newsType{
1451
+            .newsLi{
1452
+                padding-bottom: 20px;
1453
+                margin-top: 20px;
1454
+                .newsLiCon{
1455
+                    font-size: 16px;
1456
+                    padding-top: 4px;
1457
+                    &>div{
1458
+                        height: 20px;
1459
+                    }
1460
+                    .liTitle{
1461
+                        margin-bottom: 8px;
1462
+                    }
1463
+                }
1464
+            }
1465
+        }
1466
+    }
1311
 }
1467
 }

+ 52
- 0
src/pages/common/js/Common.js View File

214
     // 添加滚动事件监听器
214
     // 添加滚动事件监听器
215
     window.addEventListener('scroll', updateScrollChange);
215
     window.addEventListener('scroll', updateScrollChange);
216
 
216
 
217
+    let searchCon=document.querySelector(".searchCon");
218
+    let searchDiv=document.querySelector(".searchDiv");
219
+    let searchInput=document.querySelector(".searchInput");
220
+    let searchClose=document.querySelector(".searchClose");
221
+    let searchDw=document.querySelector(".searchDw");
222
+    searchDiv.addEventListener("click",(e)=>{
223
+      searchDw.innerHTML='';
224
+      searchCon.classList.add("searchConShow");
225
+
226
+    });
227
+    searchClose.addEventListener("click",(e)=>{
228
+      searchCon.classList.remove("searchConShow");
229
+    });
230
+    //今天输入内容,3秒没有输入,则搜索
231
+    let setTimeNum=null;
232
+    searchInput.addEventListener("input",(e)=>{
233
+      console.log('当前输入值:', e.target.value);
234
+      if(setTimeNum){clearTimeout(setTimeNum)}
235
+      setTimeNum=setTimeout(()=>{
236
+        console.log("搜索内容:",e.target.value);
237
+        fetch('/system/news/search?keyword='+e.target.value)
238
+        .then(response => {
239
+          if (!response.ok) {
240
+            throw new Error('网络响应不是 OK');
241
+          }
242
+          return response.json();
243
+        })
244
+        .then(response => {
245
+         console.log(response,'response');
246
+         //获取搜索数据循环添加内容
247
+         let str='';
248
+         if(response.data.length>0){
249
+            response.data.forEach((item)=>{
250
+              //把时间和内容,链接加上
251
+              str+=`<a class="newsLi" href="" target="_blank">
252
+                    <div class="timer">
253
+                    <div class="timerData">10</div>
254
+                    <div>24-12</div>
255
+                    </div>
256
+                    <div class="newsLiCon">
257
+                        <div class="liTitle">${item.title}</div>
258
+                      <div class="licon">${item.dec}</div>
259
+                    </div></a>`;
260
+            });
261
+            searchDw.innerHTML=str;
262
+          }else{
263
+            searchDw.innerHTML=`<div class="noData">暂无数据</div>`
264
+          }
265
+        })
266
+      },3000)
267
+    });
268
+
217
 
269
 
218
   }
270
   }
219
 
271
 

+ 22
- 1
src/pages/common/tpl/footer.tpl View File

87
         </div>
87
         </div>
88
     </div>-->
88
     </div>-->
89
     <div class="footerText">中泽集团版权所有 ZHONGZE GROUP COPYRIGHT <br>@ 2014-2025 <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备2022002992号</a></div>
89
     <div class="footerText">中泽集团版权所有 ZHONGZE GROUP COPYRIGHT <br>@ 2014-2025 <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备2022002992号</a></div>
90
-</footer>
90
+</footer>
91
+<div class="searchCon">
92
+    <div class="searchConIn">
93
+        <div class="searchUp">
94
+            <span class="iconfont icon-search"></span>
95
+            <input class="searchInput" type="text" placeholder="请输入搜索内容" />
96
+            <div class="searchClose"><span class="iconfont icon-guanbi"></span></div>
97
+        </div>
98
+        <div class="searchDw newsType">
99
+            <!--<a class="newsLi" href="" target="_blank">
100
+                <div class="timer">
101
+                <div class="timerData">10</div>
102
+                <div>24-12</div>
103
+                </div>
104
+                <div class="newsLiCon">
105
+                    <div class="liTitle">标题</div>
106
+                    <div class="licon">描述</div>
107
+                </div>
108
+            </a>-->
109
+        </div>
110
+    </div>
111
+</div>

+ 5
- 5
src/pages/common/tpl/header.tpl View File

56
                 </div>
56
                 </div>
57
             </div>
57
             </div>
58
         </div>
58
         </div>
59
-        <!--<div class="language menuOne">
60
-            <a class="btn2 btnW" style="display:none;"><span class="iconfont icon-search"></span></a>
61
-            <span class="line" style="display:none"></span>
62
-            <a href="./join.html#contactUs" class="aborder">联系我们</a>
63
-        </div>-->
59
+        <div class="language menuOne">
60
+            <div class="btn2 btnW searchDiv"><span class="iconfont icon-search"></span></div>
61
+            <!--<span class="line" style="display:none"></span>
62
+            <a href="./join.html#contactUs" class="aborder">联系我们</a>-->
63
+        </div>
64
     </div>
64
     </div>
65
     <div class="headerMobile">
65
     <div class="headerMobile">
66
         <div class="logo"></div>
66
         <div class="logo"></div>

+ 11
- 4
src/pages/index/App.js View File

47
         let menuType = document.querySelector(".headCon");
47
         let menuType = document.querySelector(".headCon");
48
         menuType.classList.add("menuType");
48
         menuType.classList.add("menuType");
49
         let mySwiper = new Swiper('.bannerSwiper', {
49
         let mySwiper = new Swiper('.bannerSwiper', {
50
-            autoplay: true,//可选选项,自动滑动
50
+            autoplay: false,//可选选项,自动滑动
51
+            // autoplay: {
52
+            //     delay: 6000,//1秒切换一次
53
+            //   },
51
             effect: "fade",
54
             effect: "fade",
52
-            speed:800,
55
+            speed:1000,
53
             // 如果需要分页器
56
             // 如果需要分页器
54
             pagination: {
57
             pagination: {
55
                 el: '.swiper-paginationB',
58
                 el: '.swiper-paginationB',
224
             pageAfter=pageT+560-312;
227
             pageAfter=pageT+560-312;
225
         }
228
         }
226
         let mySwiper = new Swiper('.productSwiper', {
229
         let mySwiper = new Swiper('.productSwiper', {
227
-                autoplay: false,//可选选项,自动滑动
230
+                // autoplay: true,//可选选项,自动滑动
231
+                autoplay: {
232
+                    delay: 3000,//1秒切换一次
233
+                  },
228
                 autoHeight: true,
234
                 autoHeight: true,
229
                 slidesPerView: "auto",
235
                 slidesPerView: "auto",
230
-                slidesPerGroup : isMob?1:3,
236
+                slidesPerGroup : isMob?1:1,
231
                 spaceBetween: isMob?0:20,
237
                 spaceBetween: isMob?0:20,
232
                 allowTouchMove: false,
238
                 allowTouchMove: false,
239
+                centeredSlides: true,
233
                 slidesOffsetBefore : isMob?0:pagebefore,
240
                 slidesOffsetBefore : isMob?0:pagebefore,
234
                 slidesOffsetAfter : isMob?0:pageAfter,
241
                 slidesOffsetAfter : isMob?0:pageAfter,
235
                 navigation: {
242
                 navigation: {

BIN
src/pages/index/images/aboutbg0.png View File


+ 8
- 8
src/pages/index/index.html View File

25
       <div class="wow domInUp banner">
25
       <div class="wow domInUp banner">
26
         <div class="swiper bannerSwiper">
26
         <div class="swiper bannerSwiper">
27
           <div class="swiper-wrapper">
27
           <div class="swiper-wrapper">
28
-            <!--<div class="swiper-slide">
29
-              <img
28
+            <div class="swiper-slide">
29
+              <!-- <img
30
                 class="lazy"
30
                 class="lazy"
31
                 data-src="./static/images/index/banner1.jpg"
31
                 data-src="./static/images/index/banner1.jpg"
32
                 data-srcM="./static/images/index/banner1m.jpg"
32
                 data-srcM="./static/images/index/banner1m.jpg"
33
                 alt=""
33
                 alt=""
34
               />-->
34
               />-->
35
               <!-- 用视频就用下面的,把图片删除 -->
35
               <!-- 用视频就用下面的,把图片删除 -->
36
-              <!-- <video
36
+              <video
37
                 class="lazy"
37
                 class="lazy"
38
-                data-src="./static/2.mp4"
39
-                data-srcM="./static/2.mp4"
38
+                data-src="./static/images/index/bannerV.mp4"
39
+                data-srcM="./static/images/index/bannerV.mp4"
40
                 autoplay
40
                 autoplay
41
                 muted
41
                 muted
42
                 loop
42
                 loop
43
                 playsinline
43
                 playsinline
44
-              ></video> -->
44
+              ></video>
45
               <!-- <div class="slideCon">
45
               <!-- <div class="slideCon">
46
                   <div class="title">投资并购与企业<br>运营双轮驱动</div>
46
                   <div class="title">投资并购与企业<br>运营双轮驱动</div>
47
-              </div>
48
-            </div>-->
47
+              </div>-->
48
+            </div>
49
             <!-- 多个直接复制添加swiper-slide -->
49
             <!-- 多个直接复制添加swiper-slide -->
50
             <div class="swiper-slide">
50
             <div class="swiper-slide">
51
               <img
51
               <img

+ 9
- 1
src/pages/index/index.less View File

22
         object-fit: cover;
22
         object-fit: cover;
23
       }
23
       }
24
       .title{
24
       .title{
25
-        text-shadow: 4px 5px 1px rgba(255, 255, 255, 0.3);
25
+        text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.28);
26
       }
26
       }
27
       .btn-prev,.btn-next{
27
       .btn-prev,.btn-next{
28
         position: absolute;
28
         position: absolute;
450
           }
450
           }
451
         }
451
         }
452
       }
452
       }
453
+      .swiper-slide-active{
454
+          width: 560px;
455
+          .slideCon{
456
+            opacity: 1;
457
+          }
458
+      }
453
     }
459
     }
454
     .swiper-page{
460
     .swiper-page{
455
       width: 100%;
461
       width: 100%;
513
     max-width: 1920px;
519
     max-width: 1920px;
514
     position: relative;
520
     position: relative;
515
     margin: 0px auto;
521
     margin: 0px auto;
522
+    background: url(./images/aboutbg0.png) no-repeat;
523
+    background-size: contain;
516
     img{
524
     img{
517
       width: 100%;
525
       width: 100%;
518
       display: block;
526
       display: block;

+ 1
- 2
src/pages/product/index.html View File

120
         <img class="wow fadeInUp lazy" data-wow-delay="0.2s" data-src="./static/images/product/Industrial1.png" data-srcM="./static/images/product/Industrial1m.png" alt="" />
120
         <img class="wow fadeInUp lazy" data-wow-delay="0.2s" data-src="./static/images/product/Industrial1.png" data-srcM="./static/images/product/Industrial1m.png" alt="" />
121
         <div>
121
         <div>
122
           <img class="wow fadeInUp lazy" data-wow-delay="0.4s" data-src="./static/images/product/Industrial2.png" data-srcM="./static/images/product/Industrial2m.png" alt="" />
122
           <img class="wow fadeInUp lazy" data-wow-delay="0.4s" data-src="./static/images/product/Industrial2.png" data-srcM="./static/images/product/Industrial2m.png" alt="" />
123
-          <img class="wow fadeInUp lazy" data-wow-delay="0.6s" data-src="./static/images/product/Industrial3.png" data-srcM="./static/images/product/Industrial3m.png" alt="" />
124
-          <img class="wow fadeIn lazy" data-wow-delay="0.8s" data-src="./static/images/product/Industrial4.png" data-srcM="./static/images/product/Industrial4m.png" alt="" />
123
+          <img class="wow fadeIn lazy" data-wow-delay="0.6s" data-src="./static/images/product/Industrial3.png" data-srcM="./static/images/product/Industrial3m.png" alt="" />
125
         </div>
124
         </div>
126
       </div>
125
       </div>
127
       <div class="member" id="cyml">
126
       <div class="member" id="cyml">

Loading…
Cancel
Save