20210812

css/components.css

@@ -176,6 +176,8 @@ body::-webkit-scrollbar-track {
 }
 .header .hb-item .nav .nav-item a i {
   margin-left: 5px;
+  font-size: 12px;
+  color: #e6e6e6;
 }
 .header .hb-item .nav .nav-item a:hover {
   color: #2382ff;
@@ -369,6 +371,90 @@ body::-webkit-scrollbar-track {
   justify-content: space-between;
   align-items: center;
 }
+.body .my-nav {
+  border-bottom: 1px solid #e6e6e6;
+}
+.body .my-nav::after {
+  display: block;
+  content: '';
+  clear: both;
+}
+.body .my-nav ul {
+  list-style: none;
+  padding: 0;
+}
+.body .my-nav ul li {
+  float: left;
+  padding: 5px;
+  color: #777;
+}
+.body .my-nav ul .active {
+  color: black;
+  border-bottom: 3px solid #2382ff;
+  font-weight: bold;
+}
+.body .my-list .list-item {
+  text-decoration: none;
+  color: black;
+  display: flex;
+  justify-content: flex-start;
+  align-items: start;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #e6e6e6;
+}
+.body .my-list .list-item:hover {
+  color: #2382ff;
+}
+.body .my-list .list-item .item-img {
+  flex: 1;
+  padding: 0 20px;
+}
+@media screen and (max-width: 768px) {
+  .body .my-list .list-item .item-img {
+    padding: 0 10px;
+  }
+}
+.body .my-list .list-item .item-img img {
+  width: 100%;
+  border-radius: 5px;
+}
+.body .my-list .list-item .item-img img:hover {
+  transform: scale(1.1);
+}
+.body .my-list .list-item .item-detail {
+  flex: 4;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+@media screen and (max-width: 768px) {
+  .body .my-list .list-item .item-detail {
+    flex: 2;
+  }
+}
+.body .my-list .list-item .item-detail .title {
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@media screen and (max-width: 768px) {
+  .body .my-list .list-item .item-detail .title {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}
+.body .my-list .list-item .item-detail .time {
+  font-size: 12px;
+  color: #777;
+  margin-top: 5px;
+}
+.body .my-list .list-item .item-detail .time span {
+  margin-left: 5px;
+}
 @media screen and (max-width: 768px) {
   .body {
     padding: 0px;

css/components.less

@@ -229,6 +229,8 @@ body {
 
           i {
             margin-left: 5px;
+            font-size: 12px;
+            color: #e6e6e6;
           }
 
           &:hover {
@@ -476,6 +478,92 @@ body {
         }
       }
     }
+    // 横向菜单
+    .my-nav{
+      border-bottom: 1px solid #e6e6e6;
+      &::after{
+        display: block;
+        content: '';
+        clear: both;
+      }
+      ul{
+        list-style: none;
+        padding: 0;
+        li{
+          float: left;
+          padding: 5px;
+          color: #777;
+        }
+        .active{
+          color: black;
+          border-bottom: 3px solid @body-bg;
+          font-weight: bold;
+        }
+      }
+    }
+    // 上拉刷新 列表
+    .my-list{
+    .list-item {
+    text-decoration: none;
+    color: black;
+    display: flex;
+    justify-content: flex-start;
+    align-items: start;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #e6e6e6;
+    &:hover{ color: #2382ff;}
+    .item-img {
+      flex: 1;
+      padding: 0 20px;
+      @media screen and (max-width: 768px) {
+        &{
+          padding: 0 10px;
+        }
+      }
+      img {
+        width: 100%;
+        border-radius: 5px;
+        &:hover{
+          transform: scale(1.1);
+        }
+      }
+    }
+    .item-detail {
+      flex: 4;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+      @media screen and (max-width: 768px) {
+       & {
+          flex: 2;
+        }
+      }
+      .title {
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @media screen and (max-width: 768px) {
+          & {
+            white-space: normal;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+          }
+        }
+      }
+      .time {
+        font-size: 12px;
+        color: #777;
+        margin-top: 5px;
+        span {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+    }
 
   @media screen and (max-width:768px) {
     & {
@@ -639,4 +727,8 @@ body {
     display: flex;
     
   }
-}
+}
+
+
+
+

css/exam_list.css

@@ -0,0 +1,29 @@
+.header .address {
+  margin-left: 5px;
+  margin-top: 30px;
+  position: relative;
+}
+.header .address span {
+  line-height: normal;
+  color: #f03;
+  font-size: 14px;
+  margin-right: 5px;
+}
+.header .address i {
+  margin-left: 5px;
+  font-size: 12px;
+  color: #e6e6e6;
+}
+.body {
+  padding-top: 0px;
+  transform: translateY(-10px);
+}
+.body .ke {
+  margin-top: 10px;
+}
+.body .ke .my-list {
+  display: none;
+}
+.body .ke .active {
+  display: block;
+}

css/exam_list.less

@@ -0,0 +1,39 @@
+@title-top: #3181ff;
+@title-bg: #e0ecff;
+@body-bg: #2382ff;
+
+.header {
+  .address {
+    margin-left: 5px;
+    margin-top: 30px;
+    position: relative;
+    span {
+      line-height: normal;
+      color: #f03;
+      font-size: 14px;
+      margin-right: 5px;
+    }
+    i{
+      margin-left: 5px;
+      font-size: 12px;
+      color: #e6e6e6;
+    }
+  }
+}
+
+.body {
+  padding-top: 0px;
+  transform: translateY(-10px);
+
+  .ke {
+    margin-top: 10px;
+
+    .my-list {
+      display: none;
+    }
+
+    .active {
+      display: block;
+    }
+  }
+}

h_news/new3.html → h_exam/exam_detail.html

@@ -10,9 +10,8 @@
   <script src="../bootstrap/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
   <link rel="stylesheet" href="../css/components.css">
-  <link rel="stylesheet" href="../css/news/new3.css">
+  <link rel="stylesheet" href="../css/exam_detail.css">
   <script src="../js/components.js"></script>
-  <script src="../js/new/new3.js"></script>
 </head>
 
 <body class="new3">

h_exam/exam_list.html

@@ -0,0 +1,457 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>高三试题-模拟考试-大联考官网</title>
+  <script src="../js/jquery.js"></script>
+  <script src="../bootstrap/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
+  <link rel="stylesheet" href="../css/components.css">
+  <link rel="stylesheet" href="../css/exam_list.css">
+  <script src="../js/components.js"></script>
+  <script src="../js/exam_list.js"></script>
+</head>
+
+<body class="new3">
+  <!-- 通用头部 -->
+  <div class="header">
+    <div class="container">
+      <div id="face" class="ha-item">
+        <div class="img pull-left">
+          <!-- 网站图标 -->
+          <!-- <img src="http://www.nostone.cn/static/img/logo.dd1b687.png " alt="" draggable="false"> -->
+          <span>大联考</span>
+        </div>
+        <div class="address pull-left" data-container="body" data-html="" data-toggle="popover" data-placement="bottom">
+          <span>全国</span><i class="glyphicon glyphicon-chevron-down"></i>
+          <!-- <ul>
+            <li>全国</li>
+            <li>北京</li>
+            <li>河南</li>
+            <li>天津</li>
+            <li>河北</li>
+            <li>山西</li>
+            <li>内蒙古</li>
+            <li>辽宁</li>
+            <li></li>
+            <li>全国</li>
+            <li>全国</li>
+            <li>全国</li>
+          </ul> -->
+        </div>
+        <div class="app pull-right">
+          <a href="http://down.gaokaoapp.net" draggable="false">
+            <img src="../imgs/app_dowload.png" alt="" draggable="false"><br>
+            <span>大联考App下载</span>
+          </a>
+        </div>
+        <div class="button pull-right">
+          <div id="listbutton" class="glyphicon glyphicon-th-list button"></div>
+        </div>
+      </div>
+      <div class="hb-item">
+        <!-- @大屏修改下拉菜单 -->
+        <div id="nav" class="nav">
+          <div class="nav-item">
+            <!-- active 表明当前页面属于那个动作分类 -->
+            <a class="active" href="/" target="_blank" draggable="false">首页</a>
+            <ul class="nav-ul">
+            </ul>
+          </div>
+          <div class="nav-item">
+            <a href="/" target="_blank" draggable="false">新高考<i class="glyphicon glyphicon-chevron-down"></i></a>
+            <ul class="nav-ul">
+              <li class="nav-li"><a href="new_href1" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="href2" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+            </ul>
+          </div>
+          <div class="nav-item">
+            <a href="/" target="_blank" draggable="false">机构联考<i class="glyphicon glyphicon-chevron-down"></i></a>
+            <ul class="nav-ul">
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+            </ul>
+          </div>
+          <div class="nav-item">
+            <a href="/" target="_blank" draggable="false">模拟考试<i class="glyphicon glyphicon-chevron-down"></i></a>
+            <ul class="nav-ul">
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+              <li class="nav-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- components 共用菜单 -->
+  <!-- @小屏幕 下拉菜单 -->
+  <div id="nav-sm" class="nav-sm-noheight">
+    <ul>
+      <!-- active 表明当前页面属于那个动作分类 -->
+      <li><a class="nav-sm-title active" href="/" target="_blank" draggable="false">首页</a>
+        <ul class="nav-sm-ul"></ul>
+      </li>
+      <li>
+        <a class="nav-sm-title" href="/" target="_blank" draggable="false">新高考</a>
+        <ul class="nav-sm-ul">
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+        </ul>
+      </li>
+      <li>
+        <a class="nav-sm-title" href="/" target="_blank" draggable="false">机构联考</a>
+        <ul class="nav-sm-ul">
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">模拟考试</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+        </ul>
+      </li>
+      <li>
+        <a class="nav-sm-title" href="/" target="_blank" draggable="false">模拟考试</a>
+        <ul class="nav-sm-ul">
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">模拟考试</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+          <li class="nav-sm-li"><a href="/" target="_blank" draggable="false">新item 1</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <div id="body" class="container">
+    <div class="row">
+      <div class="col">
+        <div class="body">
+          <div class="my-nav">
+            <ul>
+              <li class="active">高三试题</li>
+              <li>高二试题</li>
+              <li>高一试题</li>
+            </ul>
+          </div>
+          <div class="ke">
+            <!-- 高三 -->
+            <div class="my-list active">
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传;广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+            </div>
+            <!-- 高二 -->
+            <div class="my-list ">
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传;广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+            </div>
+            <!-- 高一 -->
+            <div class="my-list ">
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传;广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+              <a target="_blank" href="https://www.baidu.com" class="list-item">
+                <div class="item-img">
+                  <img src="../imgs/app_dowload.png" alt="">
+                </div>
+                <div class="item-detail">
+                  <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+                  <div class="time">高考动态<span>2021-04-21</span></div>
+                </div>
+              </a>
+            </div>
+          </div>
+          <div class="my-loading">加载中......</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 以下通用html -->
+  <div class="footer">
+    <p>商务合作电话：0371-86586728</p>
+    <p>豫ICP备15004940号-5</p>
+  </div>
+  <!-- 返回顶部 -->
+  <div id="top" class="noshow">
+    <i class="glyphicon glyphicon-chevron-up"></i>
+  </div>
+  <!-- 分享功能 -->
+  <div id="share">
+    <div>分享</div>
+    <ul>
+      <li>分享到</li>
+      <li><img src="../imgs/qq.png" alt="qq">QQ</li>
+      <!-- <li><img src="./imgs/weixin.png" alt="qq">微信</li> -->
+      <li><img src="../imgs/weibo.png" alt="qq">微博</li>
+    </ul>
+  </div>
+  <!-- 下载app -->
+  <div id="download">
+    <div class="left">
+      <img src="../imgs/app.png" alt="">
+      <div class=" row1">大联考
+      </div>
+      <div class="row2">全国中学生都在用</div>
+    </div>
+    <div class="right"><button class="btn btn-info">下载</button></div>
+  </div>
+</body>
+
+</html>

h_news/new1.html → h_news/new_detail.html

@@ -10,7 +10,7 @@
   <script src="../bootstrap/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
   <link rel="stylesheet" href="../css/components.css">
-  <link rel="stylesheet" href="../css/news/new1.css">
+  <link rel="stylesheet" href="../css/new_detail.css">
   <script src="../js/components.js"></script>
 </head>
 

h_news/new2.html → h_news/new_list.html

@@ -10,9 +10,9 @@
   <script src="../bootstrap/bootstrap.min.js"></script>
   <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
   <link rel="stylesheet" href="../css/components.css">
-  <link rel="stylesheet" href="../css/news/new2.css">
+  <link rel="stylesheet" href="../css/new_list.css">
   <script src="../js/components.js"></script>
-  <script src="../js/new/new2.js"></script>
+  <script src="../js/new_list.js"></script>
 </head>
 
 <body class="new2">
@@ -38,7 +38,7 @@
     <div class="row">
       <div class="col">
         <div class="body">
-          <div class="list">
+          <div class="my-list list">
             <a target="_blank" href="https://www.baidu.com" class="list-item">
               <div class="item-img">
                 <img src="../imgs/app_dowload.png" alt="">

js/components.js

@@ -351,4 +351,4 @@ $(function () {
     }
   })
 
-})
+})

js/exam_list.js

@@ -0,0 +1,56 @@
+$(function () {
+  const globaldata = {
+    active: 0
+  }
+  $(".my-nav").click(function (e) {
+    console.log()
+    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");
+    $(".ke>.active").removeClass("active");
+    $($(".ke>.my-list")[active]).addClass("active");
+  })
+
+  // 加载数据
+  // 显示区高度
+  let ch = document.documentElement.clientHeight || document.body.clientHeight;
+  let lock = false;
+  $(window).scroll(function () {
+    if (lock) return false;
+    // 滑动区高度
+    let sh = document.documentElement.scrollHeight || document.body.scrollHeight;
+    // 滑动位置
+    let st = document.documentElement.scrollTop || document.body.scrollTop;
+    let c = sh * 1 - ch * 1 - st * 1;
+    if (c == 0) {
+      lock = true;
+      $(".my-loading").show();
+      data().then(res => { lock = res; $(".my-loading").hide(); })
+    }
+  })
+  // 加载数据
+  function data () {
+    let str = `<a target="_blank" href="https://www.baidu.com" class="list-item">
+     <div class="item-img">
+       <img src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628514522805675.png!cover2"
+         alt="">
+     </div>
+     <div class="item-detail">
+       <div class="title">广东省警察学院：从未委托任何个人或机构进行招生宣传;广东省警察学院：从未委托任何个人或机构进行招生宣传</div>
+       <div class="time">高考动态<span>2021-04-21</span></div>
+     </div>
+   </a>`
+    return new Promise(resolve => {
+      setTimeout(() => {
+        // globaldata.active 请求不同数据
+        $(".ke>.active").append(str);
+        resolve(false)
+      }, 2000)
+    })
+  }
+  let str = `heml`;
+  // 底部弹出框
+  $("[data-toggle='popover']").data("html", "123").popover({ html: true });
+})