Merge remote-tracking branch 'origin/master'

# Conflicts:
#	.idea/workspace.xml

css/components.css

@@ -706,3 +706,80 @@ body::-webkit-scrollbar-track {
     display: flex;
   }
 }
+#imglist {
+  display: none;
+  overflow: scroll;
+  position: fixed;
+  width: 100vw;
+  box-sizing: border-box;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+  background-color: #fff;
+}
+#imglist::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 5px;
+}
+#imglist::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #999;
+}
+#imglist::-webkit-scrollbar-thumb:hover {
+  background: #2382ff;
+}
+#imglist::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 10px;
+  background: #eee;
+}
+#imglist span {
+  display: block;
+  position: fixed;
+  right: 20px;
+  top: 10px;
+  width: 35px;
+  height: 115px;
+  background-color: #000;
+  padding: 5px;
+  border-radius: 5px;
+}
+#imglist span img {
+  width: 25px;
+  position: relative !important;
+  margin: 5px 0;
+}
+#imglist div {
+  line-height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+#imglist div img {
+  position: absolute;
+}
+#imglist div .glyphicon {
+  position: fixed;
+  color: #000;
+  width: 20%;
+  max-width: 50px;
+  height: 100px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 100px;
+  margin-top: calc(50vh - 50px);
+}
+#imglist div .glyphicon:hover {
+  background-color: rgba(247, 237, 237, 0.5);
+}
+#imglist div .left {
+  left: 50px;
+}
+#imglist div .right {
+  right: 50px;
+}

css/components.less

@@ -2,6 +2,7 @@
 @title-bg: #e0ecff;
 @body-bg: #2382ff;
 
+
 // 通用样式
 .my-province {
   position: relative;
@@ -44,9 +45,11 @@
       align-items: center;
       flex-wrap: wrap;
       margin: 0;
-      &>li:last-child{
-        color:#f03;
+
+      &>li:last-child {
+        color: #f03;
       }
+
       li {
         padding: 5px;
         width: 60px;
@@ -273,7 +276,8 @@ body {
           width: 50px;
         }
       }
-      div{
+
+      div {
         position: absolute;
         right: 0px;
       }
@@ -366,13 +370,16 @@ body {
   background-color: #fff;
   margin-top: 80px;
   padding: 0 20px;
+
   // 通用样式
-  .my-province{
+  .my-province {
     padding: 20px 0;
-    div{
-     top: 50px;
-   }  
+
+    div {
+      top: 50px;
+    }
   }
+
   @media screen and (max-width:768px) {
     & {
       border-top: 1px solid #eee;
@@ -391,6 +398,7 @@ body {
 
   ul {
     padding-inline-start: 0;
+
     li {
       list-style-type: none;
 
@@ -483,19 +491,22 @@ body {
       width: 100%;
       border-top: 1px solid #e6e6e6;
       padding: 0;
-      list-style:  none;
+      list-style: none;
       overflow: hidden;
+
       // margin: ;
       li {
-        &::before{
+        &::before {
           content: "";
           display: inline-block;
-          width: 6px;height: 6px;
+          width: 6px;
+          height: 6px;
           background-color: #000;
           transform: translateY(-2px);
           margin-right: 5px;
           border-radius: 50%;
         }
+
         color: #777;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -622,7 +633,7 @@ body {
       padding-bottom: 10px;
       margin-bottom: 10px;
       border-bottom: 1px solid #e6e6e6;
-      
+
       &:hover {
         color: #2382ff;
       }
@@ -785,8 +796,9 @@ body {
       }
     }
   }
-  #qrcode{
-    &::before{
+
+  #qrcode {
+    &::before {
       display: block;
       content: "微信扫一扫：分享";
       line-height: 30px;
@@ -794,10 +806,12 @@ body {
       text-align: center;
       background-color: #e6e6e6;
     }
-    img{
+
+    img {
       margin: auto;
       padding: 20px 0;
     }
+
     width: 180px;
     box-sizing: border-box;
     box-shadow: 0px 0px 5px #999;
@@ -807,7 +821,8 @@ body {
     top: -210px;
     border-radius: 5px;
     right: 140px;
-    .wei{
+
+    .wei {
       text-align: center;
     }
   }
@@ -880,4 +895,92 @@ body {
     display: flex;
 
   }
+}
+
+// 通用图片轮播观看
+#imglist {
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 5px;
+  }
+
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #999;
+  }
+
+  //  2382ff
+  &::-webkit-scrollbar-thumb:hover {
+    background: @body-bg;
+  }
+
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #eee;
+  }
+  display: none;
+  overflow: scroll;
+  position: fixed;
+  width: 100vw;
+  box-sizing: border-box;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+  background-color: #fff;
+  span{
+    display: block;
+    position: fixed;
+    right: 20px;
+    top: 10px;
+    width: 35px;
+    height:115px;
+    background-color: #000;
+    padding: 5px;
+    border-radius: 5px;
+    img{
+      width: 25px;
+      position:relative !important;
+      margin: 5px 0;
+    }
+  }
+  div {
+    line-height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(0, 0, 0, 0.6);
+    img {
+      position: absolute;
+    }
+
+    .glyphicon {
+      &:hover {
+        background-color: rgba(247, 237, 237, 0.5);
+      }
+      position:fixed;
+      color: #000;
+      width: 20%;
+      max-width: 50px;
+      height: 100px;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 100px;
+      margin-top: calc(~"50vh - 50px");
+    }
+
+    .left {
+      left: 50px;
+    }
+
+    .right {
+      right:50px;
+    }
+  }
 }

css/exam_detail_img.css

@@ -1,5 +1,19 @@
+.header {
+  max-width: 768px;
+  margin-left: calc(50vw - 389px);
+}
+@media screen and (max-width: 768px) {
+  .header {
+    margin: auto;
+  }
+}
+.header .container {
+  max-width: 768px ;
+}
 .body {
+  margin: auto;
   margin-top: 90px;
+  max-width: 768px;
 }
 .body h4 {
   font-weight: 600;
@@ -60,6 +74,19 @@
   height: 800px;
   overflow: hidden;
 }
+.body .edi-body .fixed {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 0;
+  padding-bottom: 10px;
+}
+@media screen and (max-width: 768px) {
+  .body .edi-body .fixed {
+    top: 80px;
+  }
+}
 .body .edi-body .edi-user {
   margin-top: 10px;
   padding: 10px;

css/exam_detail_img.less

@@ -1,10 +1,20 @@
 @title-top: #3181ff;
 @title-bg: #e0ecff;
 @body-bg: #2382ff;
-
+.header{
+  max-width: 768px;
+  margin-left: calc(~"50vw - 389px");
+  @media screen and (max-width:768px) {
+    margin: auto;
+  }
+  .container{
+   max-width:  768px ;
+  }
+}
 .body {
+  margin: auto;
   margin-top: 90px;
-
+  max-width: 768px;
   h4 {
     font-weight: 600;
   }
@@ -73,6 +83,19 @@
     padding-bottom: 50px;
     height: 800px;
     overflow: hidden;
+    .fixed{
+      position: fixed;
+      top: 0;
+      width: 100%;
+      background-color: #fff;
+      border-bottom: 0;
+      padding-bottom: 10px;
+      @media screen and (max-width:768px){
+        &{
+          top: 80px;
+        }
+      }
+    }
     .edi-user {
       margin-top: 10px;
       padding: 10px;
@@ -105,7 +128,6 @@
             }
           }
         }
-
         div {
           p {
             text-align: start;
@@ -153,7 +175,6 @@
     p {
       width: 100%;
       text-align: center;
-
       img {
         width: 100%;
       }

h_exam/exam_detail_img.html

@@ -58,7 +58,8 @@
         <div class="body">
           <h4>2021天津南开区高一期末语文试题及参考答案</h4>
           <a class="edi-a" href="http://127.0.0.1:5500/h_exam/exam_detail.html">
-            <span class="exam-title">2021天津南开区高一期末语文试题及参考答汇总（更新中）</span><i class="glyphicon glyphicon-chevron-right"></i>
+            <span class="exam-title">2021天津南开区高一期末语文试题及参考答汇总（更新中）</span><i
+              class="glyphicon glyphicon-chevron-right"></i>
           </a>
           <div class="edi-body" data-spy="scroll" data-target="" data-offset="0">
             <div class="my-nav">
@@ -71,14 +72,15 @@
             <p id="title" class="edi-line">试题</p>
             <!-- 懒加载图片 除非静态页面含有大量图片 否则没有必要使用 -->
             <br>
-            <div class="subject-img">
-              <p class="exam-img"> <img data-original="http://www.zzliaoyuan.com/pics/app1.png" src="../imgs/juanzi.png" alt="大联考"></p>
+            <div class="showimglist">
+              <p class="exam-img"> <img data-original="../imgs/app.png" src="../imgs/juanzi.png" alt="大联考"></p>
             </div>
             <p><br></p>
-            <p  class="edi-line" id="edi-answer">参考答案<br></p>
+            <p class="edi-line" id="edi-answer">参考答案<br></p>
             <p><br></p>
-            <div class="answer-img">
-              <p  class="exam-img"> <img data-original="http://www.zzliaoyuan.com/pics/app1.png" src="../imgs/juanzi.png" alt="大联考"></p>
+            <div class="showimglist">
+              <p class="exam-img"> <img data-original="http://www.zzliaoyuan.com/pics/app1.png" src="../imgs/juanzi.png"
+                  alt="大联考"></p>
             </div>
             <p><br></p>
             <div class="edi-open">
@@ -96,7 +98,7 @@
           <div id="interactive" class="interactive">
 
             <div class="alert alert-danger"><span><i
-                  class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;&nbsp;特别提醒：</span>   发布广告、买卖答案、考试对答案，一律封号！
+                  class="glyphicon glyphicon-exclamation-sign"></i>&nbsp;&nbsp;特别提醒：</span> 发布广告、买卖答案、考试对答案，一律封号！
             </div>
           </div>
         </div>
@@ -116,6 +118,19 @@
   <div id="toast">
     <div class="msg" style="display: none;">查看更多内容，请点击下载APP</div>
   </div>
+  <!-- 图片轮播观看 -->
+  <div id="imglist">
+    <div>
+      <img src="../imgs/qq.png" alt="">
+      <div class="glyphicon glyphicon-chevron-left left"></div>
+      <div class="glyphicon glyphicon-chevron-right right"></div>
+      <span>
+        <img src="../imgs/jia.png" alt="">
+        <img src="../imgs/jian.png" alt="">
+        <img src="../imgs/back.png" alt="">
+      </span>
+    </div>
+  </div>
   <!-- 分享功能 -->
   <div id="share">
     <div>分享</div>
@@ -138,4 +153,4 @@
   </div>
 </body>
 
-</html>
+</html>

js/components.js

@@ -467,3 +467,61 @@ $(function () {
     $(window).scrollTop(top)
   })
 })
+// 图片观看轮播
+$(function () {
+  // 获取图片
+  let showimglist = Array.from($('.showimglist img')), imglist = [], imglistdom = $("#imglist")
+  i = 0, size = 1;
+  $('.showimglist img').click(function () {
+    $("body").css({ "overflow-y": "hidden" })
+    i = showimglist.indexOf(this);
+    imgshow(0)
+    imglistdom.show()
+  })
+  showimglist.map(item => {
+    imglist.push($(item).data("original"));
+  })
+  function loop (src) {
+    $("#imglist>div>img").attr("src", src);
+    let newimg = new Image();
+    newimg.src = src;
+    newimg.onload = function (e) {
+      let w = this.width / 2,
+        h = this.height / 2;
+      $("#imglist>div>img").css({ "top": `calc(50vh - ${h}px)`, "left": `calc(50vw - ${w}px)` })
+    }
+  }
+  let btns = $("#imglist>div>.glyphicon");
+  function imgshow (num) {
+    i += num;
+    if (i < 0) i = imglist.length - 1;
+    if (i >= imglist.length) i = 0;
+    loop(imglist[i]);
+  }
+  $(btns[0]).click(function (e) {
+    size = 1;
+    scale(0);
+    imgshow(-1);
+  });
+  $(btns[1]).click(function (e) {
+    size = 1;
+    scale(0);
+    imgshow(1);
+  })
+  let btnss = $("#imglist>div>span>img");
+  function scale (num) {
+    size += num;
+    if (size <= 0) size = 0.5;
+    $("#imglist>div>img").css({ "transform": `scale(${size})` })
+  }
+  $(btnss[0]).click(function (e) {
+    scale(0.5);
+  });
+  $(btnss[1]).click(function (e) {
+    scale(-0.5);
+  });
+  $(btnss[2]).click(function (e) {
+    $("body").css({ "overflow-y": "scroll" })
+    imglistdom.hide()
+  });
+})

js/exam_detail_img.js

@@ -5,9 +5,12 @@ $(function () {
     maxlength: null,
   };
   // 实现跳转
+  let my_nav = $(".my-nav"), top = my_nav.offset().top;
   $(".my-nav").click(function (e) {
+    if (e.target.className == "my-nav") return false;
     let active = Array.prototype.slice.call($(this).find("li")).indexOf(e.target);
     if (active == globaldata.active) return false;
+    globaldata.active = active;
     $(this).find(".active").removeClass("active");
     $(e.target).addClass("active");
     // 获取跳转锚点到顶部的距离
@@ -20,6 +23,14 @@ $(function () {
     let maos = [title, edi_answer, interactive];
     $(window).scrollTop(maos[i]);
   })
+  $(window).scroll(
+    function () {
+      let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
+      if (scrolltop >= top) { my_nav.addClass("fixed"); } else {
+        my_nav.removeClass("fixed")
+      }
+    }
+  )
   // 查看更多
   $("[data-click='open']").click(function () {
     let bool = $(this).data("open");
@@ -30,83 +41,6 @@ $(function () {
     }
   })
 
-  // 进度条拖动
-  window.onresize = function () {
-    globaldata.maxlength = $(".pro").width();
-  }
-  // 进度条宽度
-  let maxlength = globaldata.maxlength || $(".pro").width();
-  // 移动dom
-  let movedom = $(".pro>.icon");
-  //起始坐标
-  let startX = null;
-  // 分数
-  let gross = $(".pro").data("gross");
-  // 进度条
-  let showdom = $(".pro>.pro-content");
-  // 显示数值
-  let pro_show = $(".pro>.pro-show");
-
-  movedom.mousedown(function (e) {
-    e.preventDefault();
-    $(".prog>.title").hide();
-    $(".pro>.pro-title").hide();
-    startX = e.pageX;
-    $(this).css('left') ? $(this).css('left') : $(this).css('left', '0px');
-    let startLeft = parseInt($(this).css('left'));
-    let $that = $(this);
-    document.onmousemove = function (e) {
-      e.preventDefault();
-      let moveX = (e.pageX - startX) > 0 ? true : false;
-      let movesection = startLeft + (e.pageX - startX);
-      if (movesection >= 0 && movesection <= maxlength) {
-        let percent = (movesection / maxlength).toFixed(4) * gross;
-        percent = Math.round(percent) + "分";
-        let move = movesection + "px";
-        showdom.css("width", move);
-        pro_show.css("left", move).text(percent);
-        $that.css("left", move)
-        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
-      }
-    }
-  })
-  movedom.mouseup(function () { document.onmousemove = null })
-  movedom.mouseleave(function () { document.onmousemove = null })
-  // 手机端更改
-  let x1, y1, oldTime, newTime, olfLeft, newLeft;
-  movedom[0].addEventListener("touchstart", function (e) {
-    e.preventDefault();
-    $(".prog>.title").hide();
-    $(".pro>.pro-title").hide();
-    var touches = e.changedTouches;
-    x1 = touches[0].pageX;
-    olfLeft = this.offsetLeft;
-  }, false)
-
-  movedom[0].addEventListener("touchmove", function (e) {
-    e.preventDefault();
-    var x2 = e.changedTouches[0].pageX;
-    newLeft = x2 - x1;
-    nowLeft = olfLeft + newLeft;
-    if (nowLeft < 0) {
-      nowLeft = 0;
-    }
-    if (nowLeft > maxlength) {
-      nowLeft = maxlength;
-    }
-    showdom.css("width", nowLeft + "px");
-    $(this).css("left", nowLeft + "px");
-    let percent = nowLeft / maxlength * gross;
-    percent = Math.round(percent);
-    pro_show.css("left", nowLeft).text(percent);
-  }, false)
-  function handleEnd (e) {
-    this.removeEventListener("touchmove", handleEnd, false);
-  }
-  movedom[0].addEventListener("touchend", function () {
-    this.removeEventListener("touchmove", handleEnd, false);
-  }, false)
-
   // 不能实现的事件
   function warm () {
     alert("请在大联考App内登录后操作")

js/new_list.js

@@ -4,6 +4,8 @@ $(function () {
   // 显示区高度
   let ch = document.documentElement.clientHeight || document.body.clientHeight;
   let lock = false;
+  // 加载 数据
+  let currentPage = 3, totalPage = 3;
   $(window).scroll(function () {
     if (lock) return false;
     // 滑动区高度
@@ -11,31 +13,51 @@ $(function () {
     // 滑动位置
     let st = document.documentElement.scrollTop || document.body.scrollTop;
     let c = sh * 1 - ch * 1 - st * 1;
-    if (c == 0) {
+    if (c == 0 && currentPage <= totalPage) {
       lock = true;
       $(".my-loading").show();
-      data().then(res => { lock = res; $(".my-loading").hide(); })
+      data({ currentPage }).then(res => { console.log(res.totalPage); totalPage = res.totalPage; currentPage++; lock = res.lock; $(".my-loading").hide(); })
     }
   })
   // 加载数据
-  function data () {
-    let str = `<a target="_blank" href="https://www.baidu.com" class="list-item">
-    <div class="item-img">
-      <img  data-original="https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1975401466.png"
-      src="../imgs/app.png"
-        alt="">
-    </div>
-    <div class="item-detail">
-      <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传;广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
-      <div class="time">高考动态<span>2021-04-21</span></div>
-    </div>
-  </a>`
+  function data (data) {
     return new Promise(resolve => {
-      setTimeout(() => {
-        $(".list").append(str);
-        $("img").lazyload();
-        resolve(false)
-      }, 2000)
+      $.ajax({
+        url: "http://192.168.2.45:8033/member/news/",
+        data: {
+          ...data,
+          pageSize: 10
+        },
+        type: "get",
+        error: function () {
+          $(".my-loading").html("已经没有可以加载的数据了")
+        },
+        success: function (res) {
+          let { dataList, totalPage } = res.data;
+          console.log(res.data)
+          console.log(totalPage)
+          let father = document.createDocumentFragment();
+          Array.from(dataList).forEach(
+            item => {
+              let str = `<a target="_blank" href="http://www.gaokaoapp.net/h_exam/${item.id}.html" class="list-item">
+              <div class="item-img">
+                <img  data-original="${item.thumbnail}"
+                src="../imgs/app.png"
+                  alt="">
+              </div>
+              <div class="item-detail">
+                <div class="title">${item.title}</div>
+                <div class="time">${item.source}<span>${item.delay_time}</span></div>
+              </div>
+            </a>`
+              $(father).append(str);
+            }
+          )
+          $(".list").append(father);
+          $("img").lazyload();
+          resolve({ lock: false, totalPage })
+        }
+      })
     })
   }
-})
+})