新闻资讯

css/news.css

@@ -0,0 +1,136 @@
+.news_banner {
+  position: relative;
+  padding-top: 0.8rem;
+  width: 100%;
+  height: 3.85rem;
+}
+.news_banner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.news_header_info {
+  position: absolute;
+  top: 0.8rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 13rem;
+  height: 0.84rem;
+  color: #333;
+}
+.news_header_title {
+  font-size: 0.36rem;
+  font-weight: 700;
+}
+.news_header_stitle {
+  padding-top: 0.3rem;
+  font-size: 0.16rem;
+}
+.news_info {
+  padding-top: 0.93rem;
+  padding-bottom: 0.5rem;
+  background-color: #fff;
+}
+.news_main {
+  position: relative;
+  margin: 0 auto;
+  width: 13rem;
+}
+.news_search {
+  font-size: 0.14rem;
+  text-align: right;
+}
+.header_content_right{
+  position: relative;
+  display: inline-block;
+  width: 2.5rem;
+  height: 0.3rem;
+  border: 0.01rem solid #DCDEE2;
+  background-color: #fff;
+  border-radius: 0.04rem;
+  overflow: hidden;
+}
+#search_help {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0.4rem;
+  line-height: 0.3rem;
+  padding: 0 0.08rem;
+  font-size: 0.14rem;
+  border: none;
+  color: #333;
+  background-color: #fff;
+  background-image: none;
+  cursor: text;
+}
+#search_help::-webkit-input-placeholder,
+#search_help:-moz-placeholder,
+#search_help::-moz-placeholder,
+#search_help:-ms-input-placeholder {
+  color: #c1c6cf;
+  font-size: 0.14rem;
+}
+#search_help:focus {
+  outline: none;
+}
+.search_box {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  padding: 0.05rem 0.1rem;
+  cursor: pointer;
+}
+.search_img {
+  width: 0.14rem;
+  height: 0.14rem;
+}
+.news_list {
+  margin: 0 auto;
+  font-size: 0.16rem;
+  background-color: #fff;
+}
+.news_list_box {
+  margin: 0 auto;
+  width: 13rem;
+}
+.news_list_item {
+  margin-right: 0.27rem;
+  margin-bottom: 0.3rem;
+  display: inline-block;
+  width: 4.1rem;
+  background-color: #F8F8F8;
+  box-shadow: 0 0 0.12rem 0 #0000001a;
+}
+.news_list_item:nth-child(3n) {
+  margin-right: 0;
+}
+.news_list_item .news_item_img {
+  width: 100%;
+  height: 2.7rem;
+  object-fit: cover;
+}
+.news_list_item .news_item_title {
+  margin: 0.1rem 0.16rem;
+  height: 0.52rem;
+  font-size: 0.18rem;
+  font-weight: 700;
+  line-height: 0.26rem;
+  color: #333;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.news_list_item .news_item_stitle {
+  margin: 0.1rem 0.16rem;
+  font-size: 0.16rem;
+  line-height: 0.32rem;
+  color: #666;
+}

js/news.js

@@ -3,5 +3,60 @@ $(function () {
   $(".footer_root").load("./comm/footer.html");
   // nav传值显示下划线
   $(".header_root").data("nav_info", 5);
-  
+  // 新闻资讯搜索信息
+  let newsInfo = {
+    page: 1,
+    size: 9,
+    newstitle: "",
+    total: 0
+  };
+  // 加载新闻资讯列表
+  function loadNewsList(params) {
+    let newsItemHtml = "";
+    $.each(params.list, function(newsIndex, newsItem) {
+      newsItemHtml = '<div class="news_list_item"><img class="news_item_img" src="' + $.showImageUrl + newsItem.newspic + '" /><div class="news_item_title">' + newsItem.newstitle + '</div><div class="news_item_stitle">' + $.msToDateString(newsItem.createtime) + '</div></div>';
+    });
+    $(".news_list_box").html(newsItem);
+  }
+  // 搜索新闻列表
+  function searchList() {
+    let _url = $.baseUrl + "n/listc";
+    $.ajax({
+      type: 'POST',
+      url: _url,
+      dataType: "json",
+      contentType: "application/json; charset=utf-8",
+      data: JSON.stringify({
+        page: newsInfo.page,
+        size: newsInfo.size,
+        newstitle: newsInfo.newstitle
+      }),
+      success: function (data) {
+        if (data.code === 0) {
+          loadNewsList(data.obj);
+        } else {
+          alert(data.msg);
+        }
+      }
+    });
+  }
+  // 回车搜索
+  function enterSearch(event) {
+    // 兼容FF和IE和Opera
+    let theEvent = event || window.event;
+    let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
+    let content = theEvent.target.value;
+    search_helpcomm = content;
+    if (code == 13) {
+      searchList();
+    }
+  }
+  // 输入内容改变
+  function searchInputChange(event) {
+    let theEvent = event || window.event;
+    search_helpcomm = theEvent.target.value;
+  }
+  $(".news_info #search_help").on("change", searchInputChange);
+  $(".news_info #search_help").on("keydown", enterSearch);
+  $(".news_info .search_box").click(searchList);
 });

sections/comm/header.html

@@ -181,14 +181,17 @@
             console.log("语言切换");
           }
         });
-        $(window).on("scroll", function() {
-          let top = $(window).scrollTop();
-          if(top > 100){
-            $(".header_root").addClass("bg_white");
-          } else {
-            $(".header_root").removeClass("bg_white");
-          }
-        });
+        let _pathname = window.location.pathname;
+        if (_pathname === "/index.html" || _pathname === "/") {
+          $(window).on("scroll", function() {
+            let top = $(window).scrollTop();
+            if(top > 100){
+              $(".header_root").addClass("bg_white");
+            } else {
+              $(".header_root").removeClass("bg_white");
+            }
+          });
+        }
       });
     </script>
   </body>

sections/news.html

@@ -13,9 +13,48 @@
   </head>
   <body>
     <div class="header_root bg_white"></div>
+    <div class="news_banner">
+      <img src="../img/news/news_banner.png" />
+      <div class="news_header_info">
+        <div class="news_header_title">新闻资讯</div>
+        <div class="news_header_stitle">星火最新资讯，让一切皆有可能</div>
+      </div>
+    </div>
+    <div class="news_info">
+      <div class="news_main">
+        <div class="news_search">
+          <div class="header_content_right">
+            <input
+              type="text"
+              id="search_help"
+              placeholder="请输入关键词"
+            />
+            <div class="search_box">
+              <img class="search_img" src="../img/news/search.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="news_list">
+      <div class="news_list_box">
+        <!-- <div class="news_list_item">
+          <img class="news_item_img" src="" />
+          <div class="news_item_title"></div>
+          <div class="news_item_stitle"></div>
+        </div> -->
+      </div>
+    </div>
+    <div class="news_page_box">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
     <div class="footer_root"></div>
     <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>
     <script src="../librarys/swiper@3.4.2/swiper.jquery.min.js"></script>
+    <script src="../utils/index.js"></script>
     <script src="../js/news.js"></script>
   </body>
 </html>

sections/news_detail.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="../librarys/swiper@3.4.2/swiper.min.css" />
     <link rel="stylesheet" href="../css/comm.css" />
-    <link rel="stylesheet" href="../css/news_detail.css" />
+    <link rel="stylesheet" href="../css/news.css" />
     <script src="../utils/rem.js"></script>
   </head>
   <body>

utils/index.js

@@ -1 +1,18 @@
-jQuery.extend({});
+jQuery.extend({
+  baseUrl: "//xhwebapitest.xhkjedu.com/",
+  showImageUrl: "//schoolstatic.xhkjedu.com/static/",
+  //毫秒时间转换为yyyy-MM-dd
+  msToDateString: function (ms) {
+    let date = new Date(ms);
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    if (month < 10) {
+      month = "0" + month;
+    }
+    if (day < 10) {
+      day = "0" + day;
+    }
+    return year + "-" + month + "-" + day;
+  },
+});