20210813

css/components.css

@@ -331,15 +331,15 @@ body::-webkit-scrollbar-track {
 }
 .nav-sm-show {
   height: calc(100vh - 80px);
-  animation: nav 1s;
-  -webkit-animation: nav 1s normal;
-  -moz-animation: nav 1s;
+  animation: nav 0.5s;
+  -webkit-animation: nav 0.5s normal;
+  -moz-animation: nav 0.5s;
 }
 .nav-sm-noshow {
   height: 0px;
-  animation: navc 1s;
-  -webkit-animation: navc 1s normal;
-  -moz-animation: navc 1s;
+  animation: navc 0.5s;
+  -webkit-animation: navc 0.5s normal;
+  -moz-animation: navc 0.5s;
 }
 .body {
   background-color: #fff;
@@ -456,6 +456,7 @@ body::-webkit-scrollbar-track {
 .body .my-nav ul li {
   float: left;
   padding: 5px;
+  margin: 0px 5px;
   color: #777;
 }
 .body .my-nav ul .active {

css/components.less

@@ -428,16 +428,16 @@ body {
 
 .nav-sm-show {
   height: calc(~"100vh - 80px");
-  animation: nav 1s;
-  -webkit-animation: nav 1s normal;
-  -moz-animation: nav 1s;
+  animation: nav 0.5s;
+  -webkit-animation: nav 0.5s normal;
+  -moz-animation: nav 0.5s;
 }
 
 .nav-sm-noshow {
   height: 0px;
-  animation: navc 1s;
-  -webkit-animation: navc 1s normal;
-  -moz-animation: navc 1s;
+  animation: navc 0.5s;
+  -webkit-animation: navc 0.5s normal;
+  -moz-animation: navc 0.5s;
 }
 
 // 主题默认样式
@@ -585,6 +585,7 @@ body {
       li {
         float: left;
         padding: 5px;
+        margin: 0px 5px;
         color: #777;
       }
 

css/exam_detail_img.css

@@ -0,0 +1,154 @@
+.body {
+  margin-top: 90px;
+}
+.body h4 {
+  font-weight: 600;
+}
+.body .edi-a {
+  display: block;
+  background-color: #f5f5f5;
+  padding: 10px;
+  margin: 5px 0px;
+  border-radius: 5px;
+  color: #777;
+  position: relative;
+}
+.body .edi-a span {
+  display: block !important;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: calc(100% - 16px);
+}
+.body .edi-a i {
+  color: #ccc;
+  position: absolute;
+  right: 10px;
+  top: 12px;
+}
+.body .edi-p1 {
+  font-size: 12px;
+  color: #777;
+  line-height: 50px;
+  margin: 0;
+}
+.body .edi-p2 {
+  color: #999;
+  padding-bottom: 25px;
+  border-bottom: 8px solid #f5f5f5;
+}
+.body .edi-p2 > span:first-child {
+  display: inline-block;
+  padding: 5px 5px 0px 5px;
+  border-radius: 15px 15px 5px 5px;
+  background-color: #f5f5f5;
+}
+.body .edi-p2 .edi-p-span {
+  padding: 5px 0px 0px;
+}
+.body .edi-p2 .edi-p-span span {
+  margin-right: 20px;
+  font-size: 12px;
+}
+.body .edi-p2 .edi-p-span img {
+  width: 20px;
+  height: 20px;
+}
+.body .edi-body {
+  position: relative;
+  padding-bottom: 50px;
+  height: 800px;
+  overflow: hidden;
+}
+.body .edi-body .edi-user {
+  margin-top: 10px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (max-width: 768px) {
+  .body .edi-body .edi-user {
+    padding: 10px 0px;
+  }
+}
+.body .edi-body .edi-user .left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.body .edi-body .edi-user .left img {
+  width: 50px;
+  height: 50px;
+  margin: 0 10px;
+}
+@media screen and (max-width: 768px) {
+  .body .edi-body .edi-user .left img {
+    width: 30px;
+    height: 30px;
+    margin-left: 0px;
+    margin-right: 5px;
+  }
+}
+.body .edi-body .edi-user .left div p {
+  text-align: start;
+  margin: 5px 0;
+}
+@media screen and (max-width: 768px) {
+  .body .edi-body .edi-user .left div p {
+    margin: 0;
+  }
+}
+.body .edi-body .edi-user .left div > p:last-child {
+  font-size: 12px;
+  color: #999;
+}
+.body .edi-body .edi-user .right i {
+  background-color: #2382ff;
+  font-size: 25px;
+  padding: 10px;
+  border-radius: 50%;
+  color: #fff;
+  text-align: center;
+  margin-left: 10px;
+}
+@media screen and (max-width: 768px) {
+  .body .edi-body .edi-user .right i {
+    font-size: 5px;
+    margin-left: 0;
+  }
+}
+.body .edi-body #title {
+  font-weight: bold;
+}
+.body .edi-body p {
+  width: 100%;
+  text-align: center;
+}
+.body .edi-body p img {
+  width: 100%;
+}
+.body .edi-body #edi-answer {
+  color: #f03;
+}
+.body .edi-body .edi-open {
+  width: 100%;
+  text-align: center;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 100%);
+  position: absolute;
+  bottom: 0px;
+  padding-top: 50px;
+}
+.body .edi-body .edi-open span {
+  display: inline-block;
+  border-radius: 30px;
+  background-color: #eef5ff;
+  padding: 6px 10px;
+  color: #2382ff;
+}
+.body .edi-body .edi-open span i {
+  margin-left: 5px;
+}
+.body .edi-body-height {
+  height: auto;
+}

css/exam_detail_img.less

@@ -0,0 +1,187 @@
+@title-top: #3181ff;
+@title-bg: #e0ecff;
+@body-bg: #2382ff;
+
+.body {
+  margin-top: 90px;
+
+  h4 {
+    font-weight: 600;
+  }
+
+  .edi-a {
+    display: block;
+    background-color: #f5f5f5;
+    padding: 10px;
+    margin: 5px 0px;
+    border-radius: 5px;
+    color: #777;
+    position: relative;
+
+    span {
+      display: block !important;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: calc(~"100% - 16px");
+    }
+
+    i {
+      color: #ccc;
+      position: absolute;
+      right: 10px;
+      top: 12px
+    }
+  }
+
+  .edi-p1 {
+    font-size: 12px;
+    color: #777;
+    line-height: 50px;
+    margin: 0;
+  }
+
+  .edi-p2 {
+    color: #999;
+    padding-bottom: 25px;
+    border-bottom: 8px solid #f5f5f5;
+
+    &>span:first-child {
+      display: inline-block;
+      padding: 5px 5px 0px 5px;
+      border-radius: 15px 15px 5px 5px;
+      background-color: #f5f5f5;
+    }
+
+    .edi-p-span {
+      padding: 5px 0px 0px;
+
+      span {
+        margin-right: 20px;
+        font-size: 12px;
+      }
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .edi-body {
+    position: relative;
+    padding-bottom: 50px;
+    height: 800px;
+    overflow: hidden;
+    .edi-user {
+      margin-top: 10px;
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      @media screen and (max-width:768px) {
+        & {
+          padding: 10px 0px;
+        }
+      }
+
+      .left {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          width: 50px;
+          height: 50px;
+          margin: 0 10px;
+
+          @media screen and (max-width:768px) {
+            & {
+              width: 30px;
+              height: 30px;
+              margin-left: 0px;
+              margin-right: 5px;
+            }
+          }
+        }
+
+        div {
+          p {
+            text-align: start;
+            margin: 5px 0;
+
+            @media screen and (max-width:768px) {
+              & {
+                margin: 0;
+              }
+            }
+          }
+
+          &>p:last-child {
+            font-size: 12px;
+            color: #999;
+          }
+        }
+      }
+
+      .right {
+        i {
+          background-color: @body-bg;
+          font-size: 25px;
+          padding: 10px;
+          border-radius: 50%;
+          color: #fff;
+          text-align: center;
+          margin-left: 10px;
+
+          @media screen and (max-width:768px) {
+            & {
+              font-size: 5px;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+    }
+
+    #title {
+      font-weight: bold;
+    }
+
+    p {
+      width: 100%;
+      text-align: center;
+
+      img {
+        width: 100%;
+      }
+    }
+
+    #edi-answer {
+      color: #f03;
+    }
+
+    .edi-open {
+      width: 100%;
+      text-align: center;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 100%);
+      position: absolute;
+      bottom: 0px;
+      padding-top: 50px;
+      span{
+        display: inline-block;
+        border-radius: 30px;
+        background-color: #eef5ff;
+        padding: 6px 10px;
+        color:@body-bg;
+        i{
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+  .edi-body-height{
+    height: auto;
+  }
+}

css/exam_list.less

@@ -1,30 +0,0 @@
-@title-top: #3181ff;
-@title-bg: #e0ecff;
-@body-bg: #2382ff;
-
-
-.body {
-  padding-top: 0px;
-  transform: translateY(-10px);
-
-  .ke {
-    margin-top: 10px;
-
-    .my-list {
-      display: none;
-      .province{
-        display: inline-block;
-        padding: 2px 8px;
-        background-color: #f6f6f6;
-        color: #777;
-        margin: 5px 0px;
-        border-radius: 5px;
-      }
-    }
-
-    .active {
-      display: block;
-    }
-  }
-
-}

h_exam/exam_detail_img.html

@@ -0,0 +1,154 @@
+<!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">
+  <link rel="shortcut icon" type="image/x-icon" href="../imgs/favicon.ico">
+  <title>2021天津南开区高一期末语文试题及参考答案</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_detail_img.css">
+  <script src="../js/components.js"></script>
+  <script src="../js/exam_detail_img.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="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>
+    </div>
+  </div>
+  <div id="body" class="container">
+    <div class="row">
+      <div class="col">
+        <div class="body">
+          <h4>2021天津南开区高一期末语文试题及参考答案</h4>
+          <a class="edi-a" href="http://127.0.0.1:5500/h_exam/exam_detail.html">
+            <span>2021天津南开区高一期末语文试题及参考答汇总（更新中）</span><i class="glyphicon glyphicon-chevron-right"></i>
+          </a>
+          <p class="edi-p1">更新于 2021-08-09 | 1条贡献 · 55次浏览</p>
+          <p class="edi-p2"><span>语文</span> <span class="edi-p-span pull-right"><span>贡献者</span><img class="img-circle"
+                src="https://imgs.app.gaokaozhitongche.com/resource/2020062418/20200624180035_nhWd3VtqZG.png!avatar"
+                alt=""></span></p>
+          <div class="edi-body" data-spy="scroll" data-target="" data-offset="0">
+            <div class="my-nav">
+              <ul>
+                <li class="active">试题</li>
+                <li>答案</li>
+                <li>互动（0）</li>
+              </ul>
+            </div>
+            <div class="edi-user">
+              <div class="left">
+                <img class="pull-left img-circle"
+                  src="https://imgs.app.gaokaozhitongche.com/resource/2020062418/20200624180035_nhWd3VtqZG.png!avatar"
+                  alt="" />
+                <div>
+                  <p>高考123321</p>
+                  <p>共8335分试卷，已采纳5355份</p>
+                </div>
+              </div>
+              <div class="right">
+                <i class="glyphicon glyphicon-download-alt"></i>
+                <i class="glyphicon glyphicon-fullscreen"></i>
+              </div>
+            </div>
+            <div id="title">试题</div>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280934369.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280934369.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280824722.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280824722.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280342021.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280342021.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280701434.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280701434.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280456087.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280456087.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280702443.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280702443.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280755438.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280755438.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280328546.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502280328546.png" style=""></p>
+            <p name="answer" id="edi-answer">参考答案<br></p>
+            <p><br></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250729707.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250729707.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250555207.png"
+                src="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250555207.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250934878.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250400353.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250453026.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250160744.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250348465.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250762326.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><img data-imgsrc="https://imgs.app.gaokaozhitongche.com/uploads/img/2021/0809/1628502250144162.png"
+                src="//app.gaokaozhitongche.com/static/img/base/img_default.png" style=""></p>
+            <p><br></p>
+            <div class="edi-open">
+              <span data-click="open" data-open="false">展开阅读全部<i class="glyphicon glyphicon-chevron-down"></i></span>
+            </div>
+          </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="toast">
+    <div class="msg" style="display: none;">查看更多内容，请点击下载APP</div>
+  </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>

js/exam_detail_img.js

@@ -0,0 +1,19 @@
+$(function () {
+  // const globaldata = {
+  // };
+  $(".my-nav").click(function (e) {
+    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");
+  })
+  $("[data-click='open']").click(function () {
+    let bool = $(this).data("open");
+    if (!bool) {
+      $(this).data("open", true).children("i").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up").parent().parent().parent().addClass("edi-body-height");
+    } else {
+      $(this).data("open", false).children("i").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down").parent().parent().parent().removeClass("edi-body-height");
+    }
+  })
+})

js/exam_list.js

@@ -3,7 +3,6 @@ $(function () {
     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;