20210819

.idea/workspace.xml

@@ -1,11 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="82570a17-8430-4238-ae79-81bbbd2de81f" name="Default Changelist" comment="footer">
+    <list default="true" id="82570a17-8430-4238-ae79-81bbbd2de81f" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/components.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/components.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/components.less" beforeDir="false" afterPath="$PROJECT_DIR$/css/components.less" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/css/exam_detail_img.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/exam_detail_img.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/css/exam_detail_img.less" beforeDir="false" afterPath="$PROJECT_DIR$/css/exam_detail_img.less" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/js/exam_detail_img.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/exam_detail_img.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/h_exam/exam_detail_img.html" beforeDir="false" afterPath="$PROJECT_DIR$/h_exam/exam_detail_img.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/components.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/components.js" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -140,8 +143,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/css/components.less">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="264">
-              <caret line="752" column="34" lean-forward="true" selection-start-line="752" selection-start-column="34" selection-end-line="752" selection-end-column="34" />
+            <state relative-caret-position="198">
+              <caret line="750" column="45" lean-forward="true" selection-start-line="750" selection-start-column="45" selection-end-line="750" selection-end-column="45" />
             </state>
           </provider>
         </entry>
@@ -221,8 +224,8 @@
     <sorting>DEFINITION_ORDER</sorting>
   </component>
   <component name="ProjectFrameBounds">
-    <option name="x" value="-241" />
-    <option name="y" value="40" />
+    <option name="x" value="-17" />
+    <option name="y" value="57" />
     <option name="width" value="1933" />
     <option name="height" value="899" />
   </component>
@@ -546,11 +549,18 @@
       <option name="project" value="LOCAL" />
       <updated>1629344284315</updated>
     </task>
-    <option name="localTasksCounter" value="21" />
+    <task id="LOCAL-00021" summary="footer">
+      <created>1629362402814</created>
+      <option name="number" value="00021" />
+      <option name="presentableId" value="LOCAL-00021" />
+      <option name="project" value="LOCAL" />
+      <updated>1629362402815</updated>
+    </task>
+    <option name="localTasksCounter" value="22" />
     <servers />
   </component>
   <component name="ToolWindowManager">
-    <frame x="-241" y="40" width="1933" height="899" extended-state="0" />
+    <frame x="-17" y="57" width="1933" height="899" extended-state="0" />
     <editor active="true" />
     <layout>
       <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.16230646" />

css/components.css

@@ -706,3 +706,37 @@ body::-webkit-scrollbar-track {
     display: flex;
   }
 }
+#imglist {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+  background-color: #000;
+}
+#imglist div {
+  line-height: 100%;
+  position: relative;
+}
+#imglist div img {
+  position: absolute;
+}
+#imglist div .glyphicon {
+  color: #fff;
+  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 .pull-left {
+  margin-left: 50px;
+}
+#imglist div .pull-right {
+  margin-right: 100px;
+}

css/components.less

@@ -880,4 +880,37 @@ body {
     display: flex;
 
   }
+}
+// 通用图片轮播观看
+#imglist{
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+  background-color: #000;
+  div{
+    line-height: 100%;
+    position: relative;
+img{
+  position:absolute;
+}
+    .glyphicon{
+      &:hover{background-color: rgba(247, 237, 237, 0.5);}
+      color: #fff;
+      width: 20%;
+      max-width: 50px;
+      height: 100px;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 100px;
+      margin-top: calc(~"50vh - 50px");
+    } 
+    .pull-left{
+      margin-left: 50px;
+    }
+    .pull-right{
+      margin-right: 100px;
+    }
+  }
 }

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;

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;
   }
@@ -165,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,14 @@
   <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 pull-left"></div>
+      <div class="glyphicon glyphicon-chevron-right pull-right"></div>
+    </div>
+  </div>
   <!-- 分享功能 -->
   <div id="share">
     <div>分享</div>
@@ -138,4 +148,4 @@
   </div>
 </body>
 
-</html>
+</html>

js/components.js

@@ -467,3 +467,16 @@ $(function () {
     $(window).scrollTop(top)
   })
 })
+// 图片观看轮播
+$(function () {
+  let showimglist = Array.from($('.showimglist img')), imglist = [];
+  showimglist.map(item => {
+    imglist.push($(item).data("original"));
+  })
+  console.log(imglist);
+  let img = $("#imglist>div>img"), h = 0, w = 0;
+  h = img.css("height") || 0;
+  w = img.css("width") || 0;
+
+  console.log(h, w)
+})