Merge commit 'd1e806868cdc2903bb0813eff8618e67d2ea40e8' into gzb

css/news.css

@@ -2,7 +2,8 @@
   position: relative;
   padding-top: 0.8rem;
   width: 100%;
-  height: 3.85rem;
+  height: 4.65rem;
+  box-sizing: border-box;
 }
 .news_banner img {
   width: 100%;
@@ -42,12 +43,12 @@
   font-size: 0.14rem;
   text-align: right;
 }
-.header_content_right{
+.header_content_right {
   position: relative;
   display: inline-block;
   width: 2.5rem;
   height: 0.3rem;
-  border: 0.01rem solid #DCDEE2;
+  border: 0.01rem solid #dcdee2;
   background-color: #fff;
   border-radius: 0.04rem;
   overflow: hidden;
@@ -103,8 +104,10 @@
   margin-bottom: 0.3rem;
   display: inline-block;
   width: 4.1rem;
-  background-color: #F8F8F8;
+  background-color: #f8f8f8;
   box-shadow: 0 0 0.12rem 0 #0000001a;
+  cursor: pointer;
+  overflow: hidden;
 }
 .news_list_item:nth-child(3n) {
   margin-right: 0;
@@ -113,6 +116,16 @@
   width: 100%;
   height: 2.7rem;
   object-fit: cover;
+  transition: all .3s ease-out;
+  -webkit-transition: all .3s ease-out;
+}
+.news_list_item:hover .news_item_img {
+  margin-left: -5%;
+  width: 110%;
+  height: 2.7rem;
+  object-fit: cover;
+  transition: all .3s ease-out;
+  -webkit-transition: all .3s ease-out;
 }
 .news_list_item .news_item_title {
   margin: 0.1rem 0.16rem;
@@ -133,4 +146,103 @@
   font-size: 0.16rem;
   line-height: 0.32rem;
   color: #666;
+}
+.news_page_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.2rem 0 0.5rem;
+  font-size: 0.16rem;
+  color: #333;
+  background-color: #fff;
+}
+.news_page_box .news_page_prev {
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  width: 0.4rem;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  text-align: center;
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  transform: rotateY(0.5turn);
+  background: #ffffff;
+  border: 1px solid #dddddd;
+  cursor: pointer;
+}
+.news_page_box .news_page_prev.disabled {
+  cursor: not-allowed;
+}
+.news_page_box .news_page_num {
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  width: 0.4rem;
+  height: 0.4rem;
+  color: #333;
+  line-height: 0.4rem;
+  text-align: center;
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  background: #ffffff;
+  border: 1px solid #dddddd;
+  cursor: pointer;
+}
+.news_page_box .news_page_next {
+  margin-left: 0.1rem;
+  margin-right: 0.1rem;
+  width: 0.4rem;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  text-align: center;
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
+  background: #ffffff;
+  border: 1px solid #dddddd;
+  cursor: pointer;
+}
+.news_page_box .news_page_next.disabled {
+  cursor: not-allowed;
+}
+.news_page_box .news_page_prev img,
+.news_page_box .news_page_next img {
+  display: inline-block;
+  width: 0.2rem;
+  vertical-align: middle;
+}
+.news_page_box > div:hover,
+.news_page_box .news_page_num.selected {
+  background-color: #1D70F2;
+  border: 1px solid #1D70F2;
+  color: #fff;
+}
+.news_detail_box {
+  padding: 0.73rem 0 0.84rem;
+  background-color: #fff;
+}
+.news_detail_main {
+  position: relative;
+  margin: 0 auto;
+  width: 13rem;
+}
+.news_detail_header {
+  font-size: 0.16rem;
+  border-bottom: 0.01rem dashed #ccc;
+  text-align: center;
+}
+.news_detail_header .detail_title {
+  font-size: 0.28rem;
+  line-height: 0.5rem;
+  color: #333;
+  font-weight: 700;
+}
+.news_detail_header .detail_stitle {
+  padding: 0.17rem 0 0.28rem;
+  font-size: 0.16rem;
+  color: #666;
+}
+.news_detail_content {
+  padding-top: 0.2rem;
+  font-size: 0.16rem;
+  line-height: 0.48rem;
+  color: #666;
 }

js/news.js

@@ -5,39 +5,131 @@ $(function () {
   $(".header_root").data("nav_info", 5);
   // 新闻资讯搜索信息
   let newsInfo = {
-    page: 1,
+    page: Number($.getQueryVariable("page") || 1),
     size: 9,
-    newstitle: "",
-    total: 0
+    newstitle: $.getQueryVariable("newstitle") || "",
+    total: 0,
   };
+  $(".news_info #search_help").val(newsInfo.newstitle);
   // 加载新闻资讯列表
   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>';
+    $.each(params.list, function (newsIndex, newsItem) {
+      newsItemHtml =
+        '<div class="news_list_item" data-newsid="' +
+        newsItem.newsid +
+        '"><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 * 1000) +
+        "</div></div>";
+    });
+    $(".news_list_box").html(newsItemHtml);
+    $(".news_list_box").on("click", ".news_list_item", function () {
+      window.location.href =
+        "/sections/news_detail.html?newsid=" + $(this).data("newsid");
+    });
+  }
+  // 加载新闻资讯页码
+  function loadNewsPages(params) {
+    newsInfo.total = params.total || 0;
+    if (newsInfo.total === 0) {
+      $(".news_page_box").html("");
+      return;
+    }
+    let newsPageHtml =
+      '<div class="news_page_prev"><img src="../img/home/scheme/jiantou_right.png" /></div>';
+    for (let _page = 0; _page < Math.ceil(newsInfo.total / 9); _page++) {
+      newsPageHtml +=
+        '<div data-page="' +
+        (_page + 1) +
+        '" class="news_page_num ' +
+        (_page + 1 === newsInfo.page ? "selected" : "") +
+        '">' +
+        (_page + 1) +
+        "</div>";
+    }
+    newsPageHtml +=
+      '<div class="news_page_next"><img src="../img/home/scheme/jiantou_right.png" /></div>';
+    $(".news_page_box").html(newsPageHtml);
+    // 上下页禁止点击
+    function setNotAllowed() {
+      if (newsInfo.page === 1) {
+        $(".news_page_box .news_page_prev").addClass("disabled");
+      } else {
+        $(".news_page_box .news_page_prev.disabled").removeClass("disabled");
+      }
+      if (newsInfo.page === Math.ceil(newsInfo.total / 9)) {
+        $(".news_page_box .news_page_next").addClass("disabled");
+      } else {
+        $(".news_page_box .news_page_next.disabled").removeClass("disabled");
+      }
+    }
+    setNotAllowed();
+    $(".news_page_box").on("click", ".news_page_prev", function () {
+      if (newsInfo.page > 1) {
+        newsInfo.page--;
+        $(".news_page_box .news_page_num.selected").removeClass("selected");
+        $(
+          ".news_page_box .news_page_num[data-page='" + newsInfo.page + "']"
+        ).addClass("selected");
+        setNotAllowed();
+        // searchList();
+        window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
+      }
+    });
+    $(".news_page_box").on("click", ".news_page_num", function () {
+      newsInfo.page = $(this).data("page");
+      $(".news_page_box .news_page_num.selected").removeClass("selected");
+      $(
+        ".news_page_box .news_page_num[data-page='" + newsInfo.page + "']"
+      ).addClass("selected");
+      setNotAllowed();
+      // searchList();
+      window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
+    });
+    $(".news_page_box").on("click", ".news_page_next", function () {
+      if (newsInfo.page < Math.ceil(newsInfo.total / 9)) {
+        newsInfo.page++;
+        $(".news_page_box .news_page_num.selected").removeClass("selected");
+        $(
+          ".news_page_box .news_page_num[data-page='" + newsInfo.page + "']"
+        ).addClass("selected");
+        setNotAllowed();
+        // searchList();
+        window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
+      }
     });
-    $(".news_list_box").html(newsItem);
   }
   // 搜索新闻列表
   function searchList() {
     let _url = $.baseUrl + "n/listc";
     $.ajax({
-      type: 'POST',
+      type: "POST",
       url: _url,
       dataType: "json",
       contentType: "application/json; charset=utf-8",
       data: JSON.stringify({
         page: newsInfo.page,
         size: newsInfo.size,
-        newstitle: newsInfo.newstitle
+        newstitle: newsInfo.newstitle,
       }),
       success: function (data) {
         if (data.code === 0) {
-          loadNewsList(data.obj);
+          if (data.obj.list.length === 0 && newsInfo.page > 1) {
+            newsInfo.page--;
+            searchList();
+          } else {
+            loadNewsList(data.obj);
+            loadNewsPages(data.obj);
+          }
         } else {
           alert(data.msg);
         }
-      }
+      },
     });
   }
   // 回车搜索
@@ -46,17 +138,22 @@ $(function () {
     let theEvent = event || window.event;
     let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
     let content = theEvent.target.value;
-    search_helpcomm = content;
+    newsInfo.newstitle = content;
     if (code == 13) {
-      searchList();
+      // searchList();
+      window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
     }
   }
   // 输入内容改变
   function searchInputChange(event) {
     let theEvent = event || window.event;
-    search_helpcomm = theEvent.target.value;
+    newsInfo.newstitle = theEvent.target.value;
   }
   $(".news_info #search_help").on("change", searchInputChange);
   $(".news_info #search_help").on("keydown", enterSearch);
-  $(".news_info .search_box").click(searchList);
-});
+  $(".news_info .search_box").click(function () {
+    // searchList();
+    window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
+  });
+  searchList();
+});

js/news_detail.js

@@ -0,0 +1,39 @@
+$(function () {
+  $(".header_root").load("./comm/header.html");
+  $(".footer_root").load("./comm/footer.html");
+  // nav传值显示下划线
+  $(".header_root").data("nav_info", 5);
+  // 请求新闻详情
+  function getNewsDetail() {
+    let _url = $.baseUrl + "n/detail";
+    $.ajax({
+      type: "POST",
+      url: _url,
+      dataType: "json",
+      contentType: "application/json; charset=utf-8",
+      data: JSON.stringify({
+        newsid: $.getQueryVariable("newsid")
+      }),
+      success: function (data) {
+        if (data.code === 0) {
+          loadNewsDetail(data.obj);
+        } else {
+          alert(data.msg);
+        }
+      },
+    });
+  }
+  // 加载详情页面
+  function loadNewsDetail(params) {
+    if (!params) {
+      $(".news_detail_header .detail_title").html("");
+      $(".news_detail_header .detail_stitle").html("发布时间：");
+      $(".news_detail_content").html("");
+      return;
+    }
+    $(".news_detail_header .detail_title").html(params.newstitle);
+    $(".news_detail_header .detail_stitle").html("发布时间：" + $.msToDateString(params.createtime * 1000));
+    $(".news_detail_content").html(params.newscontent);
+  }
+  getNewsDetail();
+});

sections/news.html

@@ -38,7 +38,7 @@
     </div>
     <div class="news_list">
       <div class="news_list_box">
-        <!-- <div class="news_list_item">
+        <!-- <div class="news_list_item" data-newsid="1">
           <img class="news_item_img" src="" />
           <div class="news_item_title"></div>
           <div class="news_item_stitle"></div>
@@ -46,10 +46,13 @@
       </div>
     </div>
     <div class="news_page_box">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
+      <!-- <div class="news_page_prev">
+        <img src="../img/home/scheme/jiantou_right.png" />
+      </div>
+      <div class="news_page_num selected">1</div>
+      <div class="news_page_next">
+        <img src="../img/home/scheme/jiantou_right.png" />
+      </div> -->
     </div>
     <div class="footer_root"></div>
     <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>

sections/news_detail.html

@@ -13,9 +13,26 @@
   </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_detail_box">
+      <div class="news_detail_main">
+        <div class="news_detail_header">
+          <div class="detail_title"></div>
+          <div class="detail_stitle">发布时间：</div>
+        </div>
+        <div class="news_detail_content"></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_detail.js"></script>
   </body>
 </html>

utils/index.js

@@ -1,6 +1,6 @@
 jQuery.extend({
   baseUrl: "//xhwebapitest.xhkjedu.com/",
-  showImageUrl: "//schoolstatic.xhkjedu.com/static/",
+  showImageUrl: "//schoolstatictest.xhkjedu.com/static/",
   //毫秒时间转换为yyyy-MM-dd
   msToDateString: function (ms) {
     let date = new Date(ms);
@@ -15,4 +15,17 @@ jQuery.extend({
     }
     return year + "-" + month + "-" + day;
   },
+  // 读取url参数
+  getQueryVariable: function(variable) {
+    let query = window.location.search.substring(1);
+    query = decodeURI(query);
+    let vars = query.split("&");
+    for (let i = 0; i < vars.length; i++) {
+      let pair = vars[i].split("=");
+      if (pair[0] === variable) {
+        return pair[1];
+      }
+    }
+    return false;
+  }
 });