瀏覽代碼

新闻资讯列表

gzb
wangzhonglu 1 年之前
父節點
當前提交
937b079ff2
共有 4 個檔案被更改,包括 108 行新增18 行删除
  1. 66
    3
      css/news.css
  2. 34
    10
      js/news.js
  3. 7
    4
      sections/news.html
  4. 1
    1
      utils/index.js

+ 66
- 3
css/news.css 查看文件

@@ -42,12 +42,12 @@
42 42
   font-size: 0.14rem;
43 43
   text-align: right;
44 44
 }
45
-.header_content_right{
45
+.header_content_right {
46 46
   position: relative;
47 47
   display: inline-block;
48 48
   width: 2.5rem;
49 49
   height: 0.3rem;
50
-  border: 0.01rem solid #DCDEE2;
50
+  border: 0.01rem solid #dcdee2;
51 51
   background-color: #fff;
52 52
   border-radius: 0.04rem;
53 53
   overflow: hidden;
@@ -103,8 +103,9 @@
103 103
   margin-bottom: 0.3rem;
104 104
   display: inline-block;
105 105
   width: 4.1rem;
106
-  background-color: #F8F8F8;
106
+  background-color: #f8f8f8;
107 107
   box-shadow: 0 0 0.12rem 0 #0000001a;
108
+  cursor: pointer;
108 109
 }
109 110
 .news_list_item:nth-child(3n) {
110 111
   margin-right: 0;
@@ -133,4 +134,66 @@
133 134
   font-size: 0.16rem;
134 135
   line-height: 0.32rem;
135 136
   color: #666;
137
+}
138
+.news_page_box {
139
+  display: flex;
140
+  justify-content: center;
141
+  align-items: center;
142
+  padding: 0.5rem 0;
143
+  font-size: 0.16rem;
144
+  color: #333;
145
+  background-color: #fff;
146
+}
147
+.news_page_box .news_page_prev {
148
+  margin-left: 0.1rem;
149
+  margin-right: 0.1rem;
150
+  width: 0.4rem;
151
+  height: 0.4rem;
152
+  line-height: 0.4rem;
153
+  text-align: center;
154
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
155
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
156
+  transform: rotateY(0.5turn);
157
+  background: #ffffff;
158
+  border: 1px solid #dddddd;
159
+  cursor: pointer;
160
+}
161
+.news_page_box .news_page_num {
162
+  margin-left: 0.1rem;
163
+  margin-right: 0.1rem;
164
+  width: 0.4rem;
165
+  height: 0.4rem;
166
+  color: #333;
167
+  line-height: 0.4rem;
168
+  text-align: center;
169
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
170
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
171
+  background: #ffffff;
172
+  border: 1px solid #dddddd;
173
+  cursor: pointer;
174
+}
175
+.news_page_box .news_page_next {
176
+  margin-left: 0.1rem;
177
+  margin-right: 0.1rem;
178
+  width: 0.4rem;
179
+  height: 0.4rem;
180
+  line-height: 0.4rem;
181
+  text-align: center;
182
+  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
183
+  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
184
+  background: #ffffff;
185
+  border: 1px solid #dddddd;
186
+  cursor: pointer;
187
+}
188
+.news_page_box .news_page_prev img,
189
+.news_page_box .news_page_next img {
190
+  display: inline-block;
191
+  width: 0.2rem;
192
+  vertical-align: middle;
193
+}
194
+.news_page_box > div:hover,
195
+.news_page_box .news_page_num.selected {
196
+  background-color: #1D70F2;
197
+  border: 1px solid #1D70F2;
198
+  color: #fff;
136 199
 }

+ 34
- 10
js/news.js 查看文件

@@ -8,36 +8,59 @@ $(function () {
8 8
     page: 1,
9 9
     size: 9,
10 10
     newstitle: "",
11
-    total: 0
11
+    total: 0,
12 12
   };
13 13
   // 加载新闻资讯列表
14 14
   function loadNewsList(params) {
15 15
     let newsItemHtml = "";
16
-    $.each(params.list, function(newsIndex, newsItem) {
17
-      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>';
16
+    $.each(params.list, function (newsIndex, newsItem) {
17
+      newsItemHtml =
18
+        '<div class="news_list_item"><img class="news_item_img" src="' +
19
+        $.showImageUrl +
20
+        newsItem.newspic +
21
+        '" /><div class="news_item_title">' +
22
+        newsItem.newstitle +
23
+        '</div><div class="news_item_stitle">' +
24
+        $.msToDateString(newsItem.createtime * 1000) +
25
+        "</div></div>";
18 26
     });
19
-    $(".news_list_box").html(newsItem);
27
+    $(".news_list_box").html(newsItemHtml);
28
+  }
29
+  // 加载新闻资讯页码
30
+  function loadNewsPages(params) {
31
+    newsInfo.total = params.total || 0;
32
+    let newsPageHtml = "";
33
+    for (let _page = 0; _page < Math.ceil(params.total / 9); _page++) {
34
+      newsPageHtml +=
35
+        '<div class="news_page_prev"><img src="../img/home/scheme/jiantou_right.png" /></div><div class="news_page_num ' +
36
+        (_page === 0 ? "selected" : "") +
37
+        '">' +
38
+        (_page + 1) +
39
+        '</div><div class="news_page_next"><img src="../img/home/scheme/jiantou_right.png" /></div>';
40
+    }
41
+    $(".news_page_box").html(newsPageHtml);
20 42
   }
21 43
   // 搜索新闻列表
22 44
   function searchList() {
23 45
     let _url = $.baseUrl + "n/listc";
24 46
     $.ajax({
25
-      type: 'POST',
47
+      type: "POST",
26 48
       url: _url,
27 49
       dataType: "json",
28 50
       contentType: "application/json; charset=utf-8",
29 51
       data: JSON.stringify({
30 52
         page: newsInfo.page,
31 53
         size: newsInfo.size,
32
-        newstitle: newsInfo.newstitle
54
+        newstitle: newsInfo.newstitle,
33 55
       }),
34 56
       success: function (data) {
35 57
         if (data.code === 0) {
36 58
           loadNewsList(data.obj);
59
+          loadNewsPages(data.obj);
37 60
         } else {
38 61
           alert(data.msg);
39 62
         }
40
-      }
63
+      },
41 64
     });
42 65
   }
43 66
   // 回车搜索
@@ -46,7 +69,7 @@ $(function () {
46 69
     let theEvent = event || window.event;
47 70
     let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
48 71
     let content = theEvent.target.value;
49
-    search_helpcomm = content;
72
+    newsInfo.newstitle = content;
50 73
     if (code == 13) {
51 74
       searchList();
52 75
     }
@@ -54,9 +77,10 @@ $(function () {
54 77
   // 输入内容改变
55 78
   function searchInputChange(event) {
56 79
     let theEvent = event || window.event;
57
-    search_helpcomm = theEvent.target.value;
80
+    newsInfo.newstitle = theEvent.target.value;
58 81
   }
59 82
   $(".news_info #search_help").on("change", searchInputChange);
60 83
   $(".news_info #search_help").on("keydown", enterSearch);
61 84
   $(".news_info .search_box").click(searchList);
62
-});
85
+  searchList();
86
+});

+ 7
- 4
sections/news.html 查看文件

@@ -46,10 +46,13 @@
46 46
       </div>
47 47
     </div>
48 48
     <div class="news_page_box">
49
-      <div></div>
50
-      <div></div>
51
-      <div></div>
52
-      <div></div>
49
+      <!-- <div class="news_page_prev">
50
+        <img src="../img/home/scheme/jiantou_right.png" />
51
+      </div>
52
+      <div class="news_page_num selected">1</div>
53
+      <div class="news_page_next">
54
+        <img src="../img/home/scheme/jiantou_right.png" />
55
+      </div> -->
53 56
     </div>
54 57
     <div class="footer_root"></div>
55 58
     <script src="../librarys/jquery@1.12.4/jquery.min.js"></script>

+ 1
- 1
utils/index.js 查看文件

@@ -1,6 +1,6 @@
1 1
 jQuery.extend({
2 2
   baseUrl: "//xhwebapitest.xhkjedu.com/",
3
-  showImageUrl: "//schoolstatic.xhkjedu.com/static/",
3
+  showImageUrl: "//schoolstatictest.xhkjedu.com/static/",
4 4
   //毫秒时间转换为yyyy-MM-dd
5 5
   msToDateString: function (ms) {
6 6
     let date = new Date(ms);

Loading…
取消
儲存