资讯详情

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%;
@@ -106,6 +107,7 @@
   background-color: #f8f8f8;
   box-shadow: 0 0 0.12rem 0 #0000001a;
   cursor: pointer;
+  overflow: hidden;
 }
 .news_list_item:nth-child(3n) {
   margin-right: 0;
@@ -114,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;
@@ -139,7 +151,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem 0;
+  padding: 0.2rem 0 0.5rem;
   font-size: 0.16rem;
   color: #333;
   background-color: #fff;
@@ -158,6 +170,9 @@
   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;
@@ -185,6 +200,9 @@
   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;
@@ -196,4 +214,35 @@
   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,17 +5,20 @@ $(function () {
   $(".header_root").data("nav_info", 5);
   // 新闻资讯搜索信息
   let newsInfo = {
-    page: 1,
+    page: Number($.getQueryVariable("page") || 1),
     size: 9,
-    newstitle: "",
+    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="' +
+        '<div class="news_list_item" data-newsid="' +
+        newsItem.newsid +
+        '"><img class="news_item_img" src="' +
         $.showImageUrl +
         newsItem.newspic +
         '" /><div class="news_item_title">' +
@@ -25,20 +28,81 @@ $(function () {
         "</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;
-    let newsPageHtml = "";
-    for (let _page = 0; _page < Math.ceil(params.total / 9); _page++) {
+    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 class="news_page_prev"><img src="../img/home/scheme/jiantou_right.png" /></div><div class="news_page_num ' +
-        (_page === 0 ? "selected" : "") +
+        '<div data-page="' +
+        (_page + 1) +
+        '" class="news_page_num ' +
+        (_page + 1 === newsInfo.page ? "selected" : "") +
         '">' +
         (_page + 1) +
-        '</div><div class="news_page_next"><img src="../img/home/scheme/jiantou_right.png" /></div>';
+        "</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;
+      }
+    });
   }
   // 搜索新闻列表
   function searchList() {
@@ -55,8 +119,13 @@ $(function () {
       }),
       success: function (data) {
         if (data.code === 0) {
-          loadNewsList(data.obj);
-          loadNewsPages(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);
         }
@@ -71,7 +140,8 @@ $(function () {
     let content = theEvent.target.value;
     newsInfo.newstitle = content;
     if (code == 13) {
-      searchList();
+      // searchList();
+      window.location.href = "/sections/news.html?page=" + newsInfo.page + "&newstitle=" + newsInfo.newstitle;
     }
   }
   // 输入内容改变
@@ -81,6 +151,9 @@ $(function () {
   }
   $(".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>

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

@@ -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;
+  }
 });