修改搜索和发展历程

src/pages/common/css/common.less

     .searchConIn{
         width: 70%;
         max-width: 1300px;
-        
+        // height: 100%;
         max-height: 80%;
         background: #fff;
         .searchUp{
         }
         .searchDw{
             width: 100%;
-            max-height: calc(100% - 60px);
+            height: calc(80vh - 60px);
             overflow-y: auto;
             box-sizing: border-box;
-            padding: 0px 30px 0;
+            padding: 20px 30px 20px;
+            display: none;
+            &::-webkit-scrollbar {
+                width: 3px;
+              }
+              &::-webkit-scrollbar-thumb {
+                background-color: #b5b5b5;
+              }
+        }
+        .searchShow{
+            display: block;
         }
     }
     
           justify-content: space-between;
           border-bottom: 1px solid #acacac5e;
           box-sizing: border-box;
-          padding: 27px 0px;
-          &:first-child {
-            margin-top: 30px;
-          }
+          padding: 30px 15px;
+          
           &:last-child{
             border-bottom: 0px solid #ACACAC;
           }
-          .timer{
-            width: 65px;
-            height: 66px;
-            border-radius: 8px;
-            border: 1px solid #A7A5A5;
-            text-align: center;
-            font-size: 12px;
-            padding: 0px 12px 0;
-            box-sizing: border-box;
-            .timerData{
-              font-size: 26px;
-              color: #b81c25;
-              border-bottom: 1px solid #b81c25;
-              padding-bottom: 3px;
-              margin-bottom: 3px;
-              line-height: 30px;
-              padding-top: 4px;
-            }
-          }
+          
           .newsLiCon{
-            width: calc(100% - 80px);
+            width: 100%;
             font-size: 18px;
             text-align: left;
             &>div{
             .liTitle{
               color: #231F20;
               font-weight: 500;
-              margin-bottom: 8px;
-              padding-top: 6px;
-            }
-            .licon{
-              font-weight: 400;
-              color: #999999;
-              font-size: 16px;
+              span{
+                color: #B81C25;
+              }
             }
           }
           transition: all 0.3s ease-in-out;

src/pages/common/js/Common.js

     let searchInput=document.querySelector(".searchInput");
     let searchClose=document.querySelector(".searchClose");
     let searchDw=document.querySelector(".searchDw");
+    let newsType=document.querySelector(".searchDw .newsType");
     searchDiv.addEventListener("click",(e)=>{
-      searchDw.innerHTML='';
+      // newsType.innerHTML='';
       searchCon.classList.add("searchConShow");
 
     });
     searchClose.addEventListener("click",(e)=>{
       searchCon.classList.remove("searchConShow");
+      newsType.innerHTML='';
+      searchInput.value='';
+      searchDw.classList.remove("searchShow");
     });
     //今天输入内容，3秒没有输入，则搜索
     let setTimeNum=null;
     searchInput.addEventListener("input",(e)=>{
       console.log('当前输入值:', e.target.value);
+      let title=e.target.value;
       if(setTimeNum){clearTimeout(setTimeNum)}
       setTimeNum=setTimeout(()=>{
         console.log("搜索内容：",e.target.value);
-        fetch('/system/news/search?keyword='+e.target.value)
+        fetch('http://60.205.233.182:90/api/system/news/select?title='+title)
         .then(response => {
           if (!response.ok) {
             throw new Error('网络响应不是 OK');
          //获取搜索数据循环添加内容
          let str='';
          if(response.data.length>0){
+
             response.data.forEach((item)=>{
               //把时间和内容,链接加上
+              let tit=item.title;
+              let highlightedTit = tit.replace(new RegExp(title, 'g'), `<span>${title}</span>`);
               str+=`<a class="newsLi" href="" target="_blank">
-                    <div class="timer">
-                    <div class="timerData">10</div>
-                    <div>24-12</div>
-                    </div>
-                    <div class="newsLiCon">
-                        <div class="liTitle">${item.title}</div>
-                      <div class="licon">${item.dec}</div>
-                    </div></a>`;
+                        <div class="newsLiCon">
+                            <div class="liTitle">${highlightedTit}</div>
+                        </div>
+                    </a>`;
             });
-            searchDw.innerHTML=str;
+            searchDw.classList.add("searchShow")
+            newsType.innerHTML=str;
           }else{
-            searchDw.innerHTML=`<div class="noData">暂无数据</div>`
+            searchDw.classList.add("searchShow")
+            newsType.innerHTML=`暂无数据`
           }
         })
       },3000)

src/pages/common/tpl/footer.tpl

             <input class="searchInput" type="text" placeholder="请输入搜索内容" />
             <div class="searchClose"><span class="iconfont icon-guanbi"></span></div>
         </div>
-        <div class="searchDw newsType">
-            <!--<a class="newsLi" href="" target="_blank">
-                <div class="timer">
-                <div class="timerData">10</div>
-                <div>24-12</div>
-                </div>
-                <div class="newsLiCon">
-                    <div class="liTitle">标题</div>
-                    <div class="licon">描述</div>
-                </div>
-            </a>-->
+        <div class="searchDw">
+            <div class="newsType">
+                <!--<a class="newsLi" href="" target="_blank">
+                    <div class="newsLiCon">
+                        <div class="liTitle">标题1<span>第三帝国</span></div>
+                    </div>
+                </a>-->
+            </div>
         </div>
     </div>
 </div>

src/pages/common/tpl/header.tpl

                 </div>
             </div>
         </div>
-        <div class="language menuOne" style="display:none">
+        <div class="language menuOne">
             <div class="btn2 btnW searchDiv"><span class="iconfont icon-search"></span></div>
             <!--<span class="line" style="display:none"></span>
             <a href="./join.html#contactUs" class="aborder">联系我们</a>-->

src/pages/index/App.js

                 spaceBetween: isMob?0:20,
                 allowTouchMove: false,
                 centeredSlides: true,
-                slidesOffsetBefore : isMob?0:pagebefore,
-                slidesOffsetAfter : isMob?0:pageAfter,
+                loop: true,
+                // slidesOffsetBefore : isMob?0:pagebefore,
+                // slidesOffsetAfter : isMob?0:pageAfter,
                 navigation: {
                     nextEl: '.btn-nextP1',
                     prevEl: '.btn-prevP1',
         let allNum = document.querySelector(".allNum");
         let nowNum = document.querySelector(".nowNum");
         let fillLine = document.querySelector(".fillLine");
+        let historySwiperText=document.querySelectorAll(".historySwiper .text");
+        historySwiperText.forEach(item=>{
+            let txt=item.innerText;
+            let textNew = txt.replace('@', '<br>');
+            item.innerHTML=textNew;
+        });
         allNum.textContent=historySlides.length;
         let historySwiper = null;
         let defaultYear=2020;

src/pages/index/index.html

                   <img class="lazy" data-src="./static/images/index/his1997.jpg" data-srcM="./static/images/index/his1997.jpg" alt="" />
                 </div>
                 <div class="hisTime">1997</div>
-                <div class="text">并购辽阳针织二厂，成立中泽集团针织有限公司</div>
+                <div class="text">并购辽阳针织二厂，@成立中泽集团针织有限公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">
                   <img class="lazy" data-src="./static/images/index/his2001.jpg" data-srcM="./static/images/index/his2001.jpg" alt="" />
                 </div>
                 <div class="hisTime">2001</div>
-                <div class="text">并购辽阳纺织厂，成立辽宁三耳兔服饰有限公司</div>
+                <div class="text">并购辽阳纺织厂，@成立辽宁三耳兔服饰有限公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">
                   <img class="lazy" data-src="./static/images/index/his2003.jpg" data-srcM="./static/images/index/his2003.jpg" alt="" />
                 </div>
                 <div class="hisTime">2003</div>
-                <div class="text">并购朝阳纺织厂，成立辽宁中泽集团朝阳纺织有限责任公司</div>
+                <div class="text">并购朝阳纺织厂，@成立辽宁中泽集团朝阳纺织有限责任公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">
                   <img class="lazy" data-src="./static/images/index/his2005.jpg" data-srcM="./static/images/index/his2005.jpg" alt="" />
                 </div>
                 <div class="hisTime">2005</div>
-                <div class="text">并购辽阳宾馆，成立辽阳宾馆有限责任公司</div>
+                <div class="text">并购辽阳宾馆，@成立辽阳宾馆有限责任公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">
                   <img class="lazy" data-src="./static/images/index/his2006.jpg" data-srcM="./static/images/index/his2006.jpg" alt="" />
                 </div>
                 <div class="hisTime">2006</div>
-                <div class="text">并购朝阳重型机器厂，成立朝阳重型机器有限公司</div>
+                <div class="text">并购朝阳重型机器厂，@成立朝阳重型机器有限公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">
                   <img class="lazy" data-src="./static/images/index/his2011.jpg" data-srcM="./static/images/index/his2011.jpg" alt="" />
                 </div>
                 <div class="hisTime">2011</div>
-                <div class="text">并购辽宁省机械研究院，成立辽宁省机械研究院有限公司</div>
+                <div class="text">并购辽宁省机械研究院，@成立辽宁省机械研究院有限公司</div>
                 <div class="hisBottom">
                   <div class="hisLine"></div>
                   <div class="hisIcon">

src/pages/index/index.less

     z-index: 2;
     padding-bottom: 60px;
     .corTits{
-      width: 440px;
+      width: 670px;
       margin: 0px auto;
       height: 60px;
       display: flex;
       color: rgba(255, 255, 255, 0.8);
       box-sizing: border-box;
       div{
-        font-size: 20px;
+        font-size: 32px;
         padding: 0px 10px;
         position: relative;
         cursor: pointer;
       width: 100%;
       margin-top: 20px;
       color: #fff;
-      font-size: 20px;
+      font-size: 30px;
       div{
         display: none;
       }