20210811

css/components.css

@@ -1,3 +1,6 @@
+textarea {
+  resize: none;
+}
 @keyframes nav {
   from {
     height: 0;
@@ -112,9 +115,11 @@ body::-webkit-scrollbar-track {
   height: 100%;
 }
 .header .ha-item .img span {
-  font-size: 50px;
+  font-size: 30px;
   font-weight: bold;
   color: #2382ff;
+  display: block;
+  line-height: 70px;
 }
 .header .ha-item .img img {
   height: 100%;
@@ -131,8 +136,9 @@ body::-webkit-scrollbar-track {
   color: #2382ff;
   padding: 10px;
   border: 2px solid #2382ff;
+  margin-top: 13px;
   text-align: center;
-  font-size: 30px;
+  font-size: 20px;
   border-radius: 5px;
 }
 .header .ha-item .app {
@@ -274,7 +280,7 @@ body::-webkit-scrollbar-track {
 .body {
   background-color: #fff;
   max-width: 1200px;
-  min-height: 600px;
+  min-height: 700px;
   overflow: hidden;
   position: relative;
   padding: 10px 15px 15px;
@@ -305,8 +311,8 @@ body::-webkit-scrollbar-track {
 }
 #top {
   position: fixed;
-  bottom: 30px;
-  right: 30px;
+  bottom: 80px;
+  right: 20px;
   padding: 20px;
   color: #fff;
   background-color: rgba(98, 96, 96, 0.3);
@@ -378,12 +384,51 @@ body::-webkit-scrollbar-track {
   background-color: rgba(29, 27, 27, 0.5);
   text-align: center;
 }
-#toast div {
+#toast > div {
   background-color: #fff;
   position: absolute;
   padding: 5px;
   border-radius: 5px;
-  width: 260px;
-  left: calc(50vw - 130px);
+  width: 100px;
+  height: 100px;
+  line-height: 92px;
+  left: calc(50vw - 50px);
   top: 30vh;
 }
+#download {
+  position: fixed;
+  bottom: 0px;
+  width: 100vw;
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgba(1, 1, 1, 0.5);
+  padding: 5px 10px;
+  color: #fff;
+}
+#download .left {
+  width: 200px;
+}
+#download .left::before {
+  display: block;
+  content: '';
+  clear: both;
+}
+#download .left img,
+#download .left div {
+  float: left;
+}
+#download .left img {
+  width: 50px;
+}
+#download .left div {
+  margin-left: 10px;
+}
+#download .left .row1 {
+  margin-bottom: 10px;
+}
+@media screen and (max-width: 768px) {
+  #download {
+    display: flex;
+  }
+}

css/components.less

@@ -1,6 +1,10 @@
 @title-top: #3181ff;
 @title-bg: #e0ecff;
 @body-bg: #2382ff;
+// 标签默认样式
+textarea{
+  resize: none;
+}
 
 // 移动端下拉菜单动画
 @keyframes nav {
@@ -144,14 +148,15 @@ body {
   .ha-item {
     margin-top: 10px;
     height: 70px;
-
     .img {
       height: 100%;
 
       span {
-        font-size: 50px;
+        font-size: 30px;
         font-weight: bold;
         color: @body-bg;
+        display: block;
+        line-height: 70px;
       }
 
       img {
@@ -161,7 +166,6 @@ body {
 
     .button {
       display: none;
-
       @media screen and (max-width:750px) {
         & {
           display: block;
@@ -172,8 +176,9 @@ body {
         color: @body-bg;
         padding: 10px;
         border: 2px solid @body-bg;
+        margin-top: 13px;
         text-align: center;
-        font-size: 30px;
+        font-size: 20px;
         border-radius: 5px;
       }
     }
@@ -358,7 +363,7 @@ body {
 .body {
   background-color: #fff;
   max-width: 1200px;
-  min-height: 600px;
+  min-height: 700px;
   overflow: hidden;
   position: relative;
   padding: 10px 15px 15px;
@@ -395,8 +400,8 @@ body {
 // 顶部
 #top {
   position: fixed;
-  bottom: 30px;
-  right: 30px;
+  bottom: 80px;
+  right: 20px;
   padding: 20px;
   color: #fff;
   background-color: rgba(98, 96, 96, 0.3);
@@ -481,14 +486,50 @@ body {
   height: 100vh;
   background-color: rgba(29, 27, 27, 0.5) ;
   text-align: center;
-  div{
+  &>div{
     background-color: #fff;
     position: absolute;
     padding: 5px;
     border-radius: 5px;
-    width: 260px;
+    width: 100px;height: 100px;
+    line-height: 92px;
     // box-shadow: 0px 0px 5px #fff;
-    left: calc(~"50vw - 130px");
+    left: calc(~"50vw - 50px");
     top: 30vh;
   }
- }
+ }
+
+//  下载app
+#download{
+  position: fixed;
+  bottom: 0px;
+  width: 100vw;
+  display: none;
+  justify-content: space-between;align-items: center;
+  background-color: rgba(1,1,1,0.5);
+  padding: 5px 10px;
+  color: #fff;
+  .left{
+    width: 200px;
+    &::before{
+      display: block;content: '';
+      clear: both;
+    }
+    img,div{
+      float: left;
+    }
+    img{
+      width: 50px;
+    }
+    div{
+      margin-left: 10px;
+    }
+    .row1{
+      margin-bottom: 10px;
+    }
+  }
+  @media screen and (max-width:768px) {
+    display: flex;
+    
+  }
+}

css/index.css

@@ -1,372 +1,3 @@
-@keyframes nav {
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@-webkit-keyframes nav {
-  /* Safari and Chrome */
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@-moz-keyframes nav {
-  /* Safari and Chrome */
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@keyframes navc {
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-@-webkit-keyframes navc {
-  /* Safari and Chrome */
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-@-moz-keyframes navc {
-  /* Safari and Chrome */
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-.show {
-  display: block;
-}
-.noshow {
-  display: none;
-}
-body {
-  height: 100vh;
-  overflow-y: scroll;
-}
-body a {
-  text-decoration: none;
-  color: #777;
-}
-body a:hover {
-  color: #2382ff;
-  text-decoration: none;
-}
-body::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 10px;
-}
-@media screen and (max-width: 750px) {
-  body::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 0px;
-    /*高宽分别对应横竖滚动条的尺寸*/
-    height: 10px;
-  }
-}
-body::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #999;
-}
-body::-webkit-scrollbar-thumb:hover {
-  background: #2382ff;
-}
-body::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #eee;
-}
-.header {
-  width: 100%;
-  border-bottom: 1px solid #f1f1f1;
-  background-color: #fff;
-  position: fixed;
-  z-index: 1;
-}
-.header .ha-item {
-  margin-top: 10px;
-  height: 70px;
-}
-.header .ha-item .img {
-  height: 100%;
-}
-.header .ha-item .img span {
-  font-size: 50px;
-  font-weight: bold;
-  color: #2382ff;
-}
-.header .ha-item .img img {
-  height: 100%;
-}
-.header .ha-item .button {
-  display: none;
-}
-@media screen and (max-width: 750px) {
-  .header .ha-item .button {
-    display: block;
-  }
-}
-.header .ha-item .button .button {
-  color: #2382ff;
-  padding: 10px;
-  border: 2px solid #2382ff;
-  text-align: center;
-  font-size: 30px;
-  border-radius: 5px;
-}
-.header .ha-item .app {
-  height: 100%;
-  text-align: center;
-}
-@media screen and (max-width: 750px) {
-  .header .ha-item .app {
-    display: none;
-  }
-}
-.header .ha-item .app a {
-  text-decoration: none;
-  color: #2382ff;
-}
-.header .ha-item .app a img {
-  width: 50px;
-}
-.header .hb-item .nav {
-  display: flex;
-  justify-content: flex-start;
-  align-content: center;
-}
-@media screen and (max-width: 750px) {
-  .header .hb-item .nav {
-    display: none;
-  }
-}
-.header .hb-item .nav > .nav-item > a.active {
-  color: #2382ff;
-}
-.header .hb-item .nav .nav-item {
-  padding: 0 20px;
-}
-.header .hb-item .nav .nav-item a {
-  color: #777;
-  font-weight: bold;
-  text-decoration: none;
-  line-height: 40px;
-  display: table-cell;
-  vertical-align: bottom;
-  font-size: 18px;
-}
-.header .hb-item .nav .nav-item a i {
-  margin-left: 5px;
-}
-.header .hb-item .nav .nav-item a:hover {
-  color: #2382ff;
-}
-.header .hb-item .nav .nav-item .nav-ul {
-  display: none;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-  overflow: auto !important;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li {
-  width: 100px;
-  padding: 10px;
-  list-style: none;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li:hover {
-  background-color: #2382ff;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li:hover a {
-  color: #fff;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li a {
-  color: #777;
-  line-height: 15px;
-  font-size: small;
-}
-#nav-sm {
-  position: fixed;
-  z-index: 99;
-  width: 100vw;
-  overflow-y: scroll;
-  box-sizing: border-box;
-  background-color: #fff;
-  margin-top: 80px;
-  padding: 0;
-}
-@media screen and (max-width: 768px) {
-  #nav-sm {
-    border-top: 1px solid #eee;
-  }
-}
-#nav-sm::-webkit-scrollbar {
-  height: 0;
-}
-#nav-sm > ul > li > a.active {
-  color: #2382ff;
-}
-#nav-sm ul li {
-  list-style-type: none;
-}
-#nav-sm ul li a {
-  font-weight: bold;
-  font-size: 20px;
-  font-size: 16px;
-  line-height: 40px;
-  color: #555;
-  text-decoration: none;
-}
-#nav-sm ul li a:hover {
-  color: #2382ff;
-}
-#nav-sm ul li .nav-sm-ul {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 0;
-}
-#nav-sm ul li .nav-sm-ul .nav-sm-li {
-  padding: 0 10px;
-}
-#nav-sm ul li .nav-sm-ul .nav-sm-li a {
-  font-size: 14px;
-  font-weight: normal;
-}
-.nav-sm-noheight {
-  height: 0px;
-}
-.nav-sm-show {
-  height: calc(100vh - 80px);
-  animation: nav 1s;
-  -webkit-animation: nav 1s normal;
-  -moz-animation: nav 1s;
-}
-.nav-sm-noshow {
-  height: 0px;
-  animation: navc 1s;
-  -webkit-animation: navc 1s normal;
-  -moz-animation: navc 1s;
-}
-.body {
-  background-color: #fff;
-  max-width: 1200px;
-  min-height: 600px;
-  overflow: hidden;
-  position: relative;
-  padding: 10px 15px 15px;
-  margin: 141px 20px 20px;
-}
-@media screen and (max-width: 768px) {
-  .body {
-    padding: 0px;
-    border-radius: 10px 10px 0 0;
-    margin: 100px 20px 20px;
-  }
-}
-.footer {
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  background-color: #fff;
-  border-top: 1px solid #f1f1f1;
-  text-align: center;
-  color: #777;
-}
-.footer p {
-  margin: 0;
-  padding: 20px 0px 0px;
-}
-.footer > p:last-child {
-  padding-bottom: 50px;
-}
-#top {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  padding: 20px;
-  color: #fff;
-  background-color: rgba(98, 96, 96, 0.3);
-  border-radius: 10px;
-}
-#share {
-  position: fixed;
-  top: 60vh;
-  right: 0px;
-  box-sizing: border-box;
-  display: flex;
-}
-@media screen and (max-width: 768px) {
-  #share {
-    display: none;
-  }
-}
-#share div {
-  height: 132px;
-  box-sizing: border-box;
-  background-color: #2382ff;
-  color: #fff;
-  font-size: 15px;
-  width: 30px;
-  letter-spacing: 10px;
-  text-align: center;
-  line-height: 30px;
-  border-radius: 5px 0 0 5px;
-  writing-mode: vertical-lr;
-  /*从左向右 从右向左是 writing-mode: vertical-rl;*/
-  writing-mode: tb-lr;
-  /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
-}
-#share ul {
-  width: 0px;
-  height: 132px;
-  border: 1px solid #aaa;
-  border-right: none;
-  list-style: none;
-  padding: 0;
-  box-sizing: border-box;
-}
-#share ul > li:first-child {
-  background-color: #c6c6c6;
-  line-height: 26px;
-  font-weight: bold;
-}
-#share ul li {
-  padding: 5px 10px;
-  width: 100px;
-  vertical-align: middle;
-}
-#share ul li img {
-  width: 20px;
-  vertical-align: middle;
-  margin-right: 5px;
-}
-#share ul li:hover:not(ul>li:first-child) {
-  background-color: #e6e6e6;
-}
 .body .row-style {
   margin-top: 20px;
 }
@@ -395,18 +26,26 @@ body::-webkit-scrollbar-track {
   width: 100%;
   text-decoration: none;
   color: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 }
 .body .hotspot h4 a .icon-fire-style {
   margin-right: 10px;
   color: #a94442;
 }
+.body .hotspot h4 a span {
+  padding: 5px 0;
+}
+.body .hotspot h4 a > span:last-child {
+  font-size: 14px;
+  margin-bottom: 3px;
+}
 .body .hotspot h4 a .b {
   border-bottom: 3px solid #a94442;
-  padding: 5px 0;
 }
 .body .hotspot h4 a .a {
   border-bottom: 3px solid #2382ff;
-  padding: 5px 0;
 }
 .body .hotspot ul {
   padding-left: 20px;
@@ -432,6 +71,9 @@ body::-webkit-scrollbar-track {
   margin-top: 20px;
   padding: 0 15px;
 }
+.body .title-style i {
+  margin-right: 10px;
+}
 .body .title-style .h4 {
   padding: 15px;
   border-top: 2px solid #3181ff;

css/index.less

@@ -1,4 +1,6 @@
-@import "components.less";
+@body-bg:#2382ff;
+@title-top:#3181ff;
+@title-bg: #e0ecff;
 .body {
   // 行头
   .row-style {
@@ -27,26 +29,30 @@
       padding-bottom: 7px;
       border-bottom: 1px solid #eee;
       font-size: 16px;
-
+      
       a {
         width: 100%;
         text-decoration: none;
         color: black;
-
+         display: flex;justify-content: space-between;align-items: flex-end;        
         .icon-fire-style {
           margin-right: 10px;
           color: #a94442;
         }
-
+        span{
+          padding: 5px 0;
+        }
+        &>span:last-child{
+          font-size: 14px;
+          margin-bottom: 3px;
+        }
         // 卡片底边颜色
         .b {
           border-bottom: 3px solid #a94442;
-          padding: 5px 0;
         }
 
         .a {
           border-bottom: 3px solid #2382ff;
-          padding: 5px 0;
         }
       }
     }
@@ -59,7 +65,6 @@
         color: #777;
         list-style-position: inherit;
         line-height: 36px;
-
         a {
           display: block;
           width: 100%;
@@ -79,7 +84,9 @@
     width: 100%;
     margin-top: 20px;
     padding: 0 15px;
-
+    i{
+      margin-right: 10px;
+    }
     .h4 {
       padding: 15px;
       border-top: 2px solid @title-top;

css/page1.css

@@ -1,391 +1,5 @@
-@keyframes nav {
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@-webkit-keyframes nav {
-  /* Safari and Chrome */
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@-moz-keyframes nav {
-  /* Safari and Chrome */
-  from {
-    height: 0;
-  }
-  to {
-    height: calc(100vh - 90px);
-  }
-}
-@keyframes navc {
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-@-webkit-keyframes navc {
-  /* Safari and Chrome */
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-@-moz-keyframes navc {
-  /* Safari and Chrome */
-  from {
-    height: calc(100vh - 90px);
-  }
-  to {
-    height: 0;
-  }
-}
-.show {
-  display: block !important;
-}
-.noshow {
-  display: none !important;
-}
-body {
-  height: 100vh;
-  overflow-y: scroll;
-}
-body a {
-  text-decoration: none;
-  color: #777;
-}
-body a:hover {
-  color: #2382ff;
-  text-decoration: none;
-}
-body::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 10px;
-}
-@media screen and (max-width: 750px) {
-  body::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 10px;
-    /*高宽分别对应横竖滚动条的尺寸*/
-    height: 10px;
-  }
-}
-body::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: #999;
-}
-body::-webkit-scrollbar-thumb:hover {
-  background: #2382ff;
-}
-body::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #eee;
-}
-.header {
-  width: 100%;
-  border-bottom: 1px solid #f1f1f1;
-  background-color: #fff;
-  position: fixed;
-  z-index: 1;
-}
-.header .ha-item {
-  margin-top: 10px;
-  height: 70px;
-}
-.header .ha-item .img {
-  height: 100%;
-}
-.header .ha-item .img span {
-  font-size: 50px;
-  font-weight: bold;
-  color: #2382ff;
-}
-.header .ha-item .img img {
-  height: 100%;
-}
-.header .ha-item .button {
-  display: none;
-}
-@media screen and (max-width: 750px) {
-  .header .ha-item .button {
-    display: block;
-  }
-}
-.header .ha-item .button .button {
-  color: #2382ff;
-  padding: 10px;
-  border: 2px solid #2382ff;
-  text-align: center;
-  font-size: 30px;
-  border-radius: 5px;
-}
-.header .ha-item .app {
-  height: 100%;
-  text-align: center;
-}
-@media screen and (max-width: 750px) {
-  .header .ha-item .app {
-    display: none;
-  }
-}
-.header .ha-item .app a {
-  text-decoration: none;
-  color: #2382ff;
-}
-.header .ha-item .app a img {
-  width: 50px;
-}
-.header .hb-item .nav {
-  display: flex;
-  justify-content: flex-start;
-  align-content: center;
-}
-@media screen and (max-width: 750px) {
-  .header .hb-item .nav {
-    display: none;
-  }
-}
-.header .hb-item .nav > .nav-item > a.active {
-  color: #2382ff;
-}
-.header .hb-item .nav .nav-item {
-  padding: 0 20px;
-}
-.header .hb-item .nav .nav-item a {
-  color: #777;
-  font-weight: bold;
-  text-decoration: none;
-  line-height: 40px;
-  display: table-cell;
-  vertical-align: bottom;
-  font-size: 18px;
-}
-.header .hb-item .nav .nav-item a i {
-  margin-left: 5px;
-}
-.header .hb-item .nav .nav-item a:hover {
-  color: #2382ff;
-}
-.header .hb-item .nav .nav-item .nav-ul {
-  display: none;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-  overflow: auto !important;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li {
-  width: 100px;
-  padding: 10px;
-  list-style: none;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li:hover {
-  background-color: #2382ff;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li:hover a {
-  color: #fff;
-}
-.header .hb-item .nav .nav-item .nav-ul .nav-li a {
-  color: #777;
-  line-height: 15px;
-  font-size: small;
-}
-#nav-sm {
-  position: fixed;
-  z-index: 99;
-  width: 100vw;
-  overflow-y: scroll;
-  box-sizing: border-box;
-  background-color: #fff;
-  margin-top: 80px;
-  padding: 0;
-}
-@media screen and (max-width: 768px) {
-  #nav-sm {
-    border-top: 1px solid #eee;
-  }
-}
-#nav-sm::-webkit-scrollbar {
-  height: 0;
-}
-#nav-sm > ul > li > a.active {
-  color: #2382ff;
-}
-#nav-sm ul li {
-  list-style-type: none;
-}
-#nav-sm ul li a {
-  font-weight: bold;
-  font-size: 20px;
-  font-size: 16px;
-  line-height: 40px;
-  color: #555;
-  text-decoration: none;
-}
-#nav-sm ul li a:hover {
-  color: #2382ff;
-}
-#nav-sm ul li .nav-sm-ul {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 0;
-}
-#nav-sm ul li .nav-sm-ul .nav-sm-li {
-  padding: 0 10px;
-}
-#nav-sm ul li .nav-sm-ul .nav-sm-li a {
-  font-size: 14px;
-  font-weight: normal;
-}
-.nav-sm-noheight {
-  height: 0px;
-}
-.nav-sm-show {
-  height: calc(100vh - 80px);
-  animation: nav 1s;
-  -webkit-animation: nav 1s normal;
-  -moz-animation: nav 1s;
-}
-.nav-sm-noshow {
-  height: 0px;
-  animation: navc 1s;
-  -webkit-animation: navc 1s normal;
-  -moz-animation: navc 1s;
-}
 .body {
-  background-color: #fff;
-  max-width: 1200px;
-  min-height: 600px;
-  overflow: hidden;
-  position: relative;
-  padding: 10px 15px 15px;
-  margin: 141px 20px 20px;
-}
-@media screen and (max-width: 768px) {
-  .body {
-    padding: 0px;
-    border-radius: 10px 10px 0 0;
-    margin: 100px 20px 20px;
-  }
-}
-.footer {
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  background-color: #fff;
-  border-top: 1px solid #f1f1f1;
-  text-align: center;
-  color: #777;
-}
-.footer p {
-  margin: 0;
-  padding: 20px 0px 0px;
-}
-.footer > p:last-child {
-  padding-bottom: 50px;
-}
-#top {
-  position: fixed;
-  bottom: 30px;
-  right: 30px;
-  padding: 20px;
-  color: #fff;
-  background-color: rgba(98, 96, 96, 0.3);
-  border-radius: 10px;
-}
-#share {
-  position: fixed;
-  top: 60vh;
-  right: 0px;
-  box-sizing: border-box;
-  display: flex;
-}
-@media screen and (max-width: 768px) {
-  #share {
-    display: none;
-  }
-}
-#share div {
-  height: 132px;
-  box-sizing: border-box;
-  background-color: #2382ff;
-  color: #fff;
-  font-size: 15px;
-  width: 30px;
-  letter-spacing: 10px;
-  text-align: center;
-  line-height: 30px;
-  border-radius: 5px 0 0 5px;
-  writing-mode: vertical-lr;
-  /*从左向右 从右向左是 writing-mode: vertical-rl;*/
-  writing-mode: tb-lr;
-  /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
-}
-#share ul {
-  width: 0px;
-  height: 132px;
-  border: 1px solid #aaa;
-  border-right: none;
-  list-style: none;
-  padding: 0;
-  box-sizing: border-box;
-}
-#share ul > li:first-child {
-  background-color: #c6c6c6;
-  line-height: 26px;
-  font-weight: bold;
-}
-#share ul li {
-  padding: 5px 10px;
-  width: 100px;
-  vertical-align: middle;
-}
-#share ul li img {
-  width: 20px;
-  vertical-align: middle;
-  margin-right: 5px;
-}
-#share ul li:hover:not(ul>li:first-child) {
-  background-color: #e6e6e6;
-}
-#toast {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(29, 27, 27, 0.5);
-  text-align: center;
-}
-#toast div {
-  background-color: #fff;
-  position: absolute;
-  padding: 5px;
-  border-radius: 5px;
-  width: 260px;
-  left: calc(50vw - 130px);
-  top: 30vh;
+  margin-top: 90px;
 }
 .body .color {
   color: #2382ff;
@@ -500,3 +114,11 @@ body::-webkit-scrollbar-track {
   padding: 5px;
   border-bottom: 1px solid #e6e6e6;
 }
+#toast #ping {
+  display: none;
+}
+#toast #ping .alert {
+  display: none;
+  padding: 5px;
+  margin-bottom: 5px;
+}

css/page1.less

@@ -1,5 +1,7 @@
-@import "./components.less";
+@body-bg:#2382ff;
+
 .body{
+  margin-top: 90px;
   .color{
     color: @body-bg;
   }
@@ -113,5 +115,12 @@
        }
     }
   }
+  #ping{
+    display: none;
+    .alert{
+      display: none;
+      padding: 5px;margin-bottom: 5px;
+    }
+  }
 }
 

index.html

@@ -8,6 +8,7 @@
   <script src="./js/jquery.js"></script>
   <script src="./js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="./css/bootstrap.min.css">
+  <link rel="stylesheet" href="./css/components.css">
   <link rel="stylesheet" href="./css/index.css">
   <script src="./js/components.js"></script>
   <script src="./js/index.js"></script>
@@ -47,8 +48,8 @@
           <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="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>
@@ -77,7 +78,9 @@
   <div id="nav-sm" class="nav-sm-noheight">
     <ul>
       <!-- active 表明当前页面属于那个动作分类 -->
-      <li><a class="nav-sm-title active" href="/" target="_blank" draggable="false">首页</a></li>
+      <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">
@@ -157,7 +160,7 @@
                 <!-- @热点 id="hotspot"-->
                 <h4><a target="_blank" href="https://www.baidu.com"><span class="b">
                       <i class="glyphicon glyphicon-fire icon-fire-style"></i>今日热点
-                    </span><span class="pull-right">更多</span></a>
+                    </span><span>更多</span></a>
                 </h4>
                 <ul>
                   <li><a target="_blank" href="https://www.baidu.com">item
@@ -237,7 +240,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -262,7 +265,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -287,7 +290,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -320,7 +323,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -345,7 +348,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -370,7 +373,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -395,7 +398,7 @@
                   <div class="hotspot">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -420,7 +423,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -445,7 +448,7 @@
                   <div class="hotspot flex-item-style">
                     <h4 class=".h4"><a target="_blank" href="https://www.baidu.com"><span class="a">
                           高三考试
-                        </span><span class="pull-right">更多</span></a>
+                        </span><span>更多</span></a>
                     </h4>
                     <ul>
                       <li><a target="_blank" href="https://www.baidu.com">item
@@ -493,6 +496,15 @@
       <li><img src="./imgs/weibo.png" alt="qq">微博</li>
     </ul>
   </div>
+  <!-- 下载app -->
+  <div id="download">
+    <div class="left">
+      <img src="https://app.gaokaozhitongche.com/static/img/pc/app_download_qrcode.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/components.js

@@ -214,10 +214,11 @@ $(function () {
 })
 // toast 背景事件
 $(function () {
-  $("#toast").click(function () {
-    // $(this).removeClass("show");
+  $("#toast").click(function (e) {
+    if (e.target.id != 'toast') return false
+    $(this).removeClass("show");
     Array.prototype.slice.call($(this).find(".show")).forEach(e => {
-      $(e).removeClass("show").find("#ping").addClass("show")
+      $(e).removeClass("show")
     })
   })
 })

js/index.js

@@ -6,6 +6,3 @@ $(function () {
   )
 })
 
-
-
-

js/page1.js

@@ -1,10 +1,12 @@
 $(function () {
   const globaldata = {
     // 用户是否登录
-    user: true,
+    user: false,
     // 登录弹框
     sgin () {
-      $("#toast").addClass("show").find("#sgin").addClass("show");
+      $("#toast").addClass("show").find("#sgin").addClass("show").unbind("click").click(function () {
+        window.location.href = "https://www.baidu.com"
+      });
     }
   }
   // 显示区高度
@@ -39,7 +41,7 @@ $(function () {
   function data () {
     // 请求 根据请求改变内容 唯一标识 data-userid="1" data-good="false"
     let com = `<div class="user" data-good="false" data-userid="1" >
-    <div class="u-img"><img src="./imgs/qq.png" alt="" class="img"></div>
+    <div class="u-img"><img src="../imgs/qq.png" alt="" class="img"></div>
     <div class="u-content">
       <div class="u-flex">
         <div class="u-name">QQ官方</div>
@@ -95,15 +97,6 @@ $(function () {
       resolve(false);
     })
   }
-  // 发表评论 登录状态 请求
-  $("#comment>.comment>.nocomment").click(function () {
-    if (!globaldata.user) {
-      globaldata.sgin();
-      return false
-    }
-    // $(this).addClass("noshow");
-    $("#toast").addClass("show")
-  })
   // 阅读点赞 登录状态 请求
   $("#read>.good").click(function () {
     if (!globaldata.user) {
@@ -125,11 +118,4 @@ $(function () {
     }
   })
 
-  // 举报事件
-  $("#report").click(function (e) {
-    let $that = $(this);
-    let lis = $that.find("li");
-    let i = Array.prototype.slice.call(lis).indexOf(e.target);
-    alert("点击举报" + i)
-  })
 })

news/page1.html

@@ -0,0 +1,146 @@
+<!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="../js/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="../css/bootstrap.min.css">
+  <link rel="stylesheet" href="../css/components.css">
+  <link rel="stylesheet" href="../css/page1.css">
+  <script src="../js/components.js"></script>
+  <script src="../js/page1.js"></script>
+</head>
+
+<body>
+  <!-- 通用头部 -->
+  <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://www.gaokaozhitongche.com/" target="_blank" draggable="false">
+            <img src="https://app.gaokaozhitongche.com/static/img/pc/app_download_qrcode.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">
+          <!-- 标题 -->
+          <h3>文章</h3>
+          <!-- 创建时间 作者  -->
+          <h6>2021-04-06 gaokao 评论</h6>
+          <!-- 文章 -->
+          <div id="content">
+            <p>4月20日，广东警官学院在其官方微信公众号发布关于招生工作的严正声明，称学校从未委托任何个人、中介组织或招生机构开展提前招生等宣传，学校也不举办任何形式的营利性培训活动。</p>
+            <p>声明指出，近期，广东警官学院发现有个别招生机构或个人冒用该校名义进行虚假招生宣传，甚至向考生及家长收取费用并作虚假承诺。</p>
+            <p>
+              对此，广东警官学院表示，其普通高等教育(全日制)招生工作严格执行教育部的“阳光高考”规定和工作程序，不以任何形式承诺录取，不因任何理由降低标准录取。学校从未委托任何个人、中介组织或招生机构开展提前招生、高职扩招等宣
+            </p>
+            <p style="text-align: end;">记者 速记 编辑 扁鹊 校对 亮相零</p>
+          </div>
+          <!-- 点赞 阅读数 -->
+          <div id="read">
+            <div class="good"><i data-good="false" style="margin-right: 5px;"
+                class="glyphicon glyphicon-thumbs-up"></i><span>29</span></div>
+            <div class="see">阅读数：5000</div>
+          </div>
+          <!-- 相关文章 -->
+          <div class="articles">
+            <h5>相关文章</h5>
+            <ul>
+              <li><a target="_blank"
+                  href="">某某的文章111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</a>
+              </li>
+              <li><a target="_blank" href="">某某的文章</a></li>
+              <li><a target="_blank" href="">某某的文章</a></li>
+              <li><a target="_blank" href="">某某的文章</a></li>
+            </ul>
+          </div>
+          <div id="comment">
+            <div class="h5">
+              <div class="left">评论区 （<span>0</span>）</div>
+              <div class="right">文明上网，理性发言</div>
+            </div>
+            <div class="remind">
+              特别提醒： 发布广告，卖答案信息，一律封号处理！
+            </div>
+            <div class="comment">
+              <!-- 功能 用户图片 昵称 言论  回复功能 点赞功能 -->
+              <!-- <div class="nocomment">说说你对套卷的看法吧！</div> -->
+              <div id="detail"></div>
+              <div class="loading">正在加载中....</div>
+              <div class="nodata">到底了</div>
+            </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="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>
+  <!-- 交互板 登录 举报 发表评论 -->
+  <div id="toast">
+    <div id="sgin" style="display: none;">请先登录</div>
+    <!-- 举报 -->
+    <!-- <div id="report">
+      <ul>
+        <li>
+          辱骂等不文明行为
+        </li>
+        <li>
+          涉嫌发布广告信息
+        </li>
+        <li>兜售、发布考前答案</li>
+        <li>留QQ、群、微信、微博号等</li>
+      </ul>
+    </div> -->
+    <!-- 评论 -->
+    <!-- <div id="ping">
+      <div class="alert alert-warning">警告！不能为空！</div>
+      <textarea placeholder="我来说两句...." name="" id="" cols="30" rows="10"></textarea>
+      <button type="button" class="btn btn-primary">发表</button>
+    </div> -->
+  </div>
+  <!-- 下载app -->
+  <div id="download">
+    <div class="left">
+      <img src="https://app.gaokaozhitongche.com/static/img/pc/app_download_qrcode.png" alt="">
+      <div class="row1">大联考</div>
+      <div class="row2">全国中学生都在用</div>
+    </div>
+    <div class="right"><button class="btn btn-info">下载</button></div>
+  </div>
+</body>
+
+</html>

page1.html

@@ -1,205 +0,0 @@
-<!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="./js/bootstrap.min.js"></script>
-  <link rel="stylesheet" href="./css/bootstrap.min.css">
-  <link rel="stylesheet" href="./css/page1.css">
-  <script src="./js/components.js"></script>
-  <script src="./js/page1.js"></script>
-</head>
-
-<body>
-  <!-- 通用头部 -->
-  <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://www.gaokaozhitongche.com/" target="_blank" draggable="false">
-            <img src="https://app.gaokaozhitongche.com/static/img/pc/app_download_qrcode.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">
-            <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="/" 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>
-              <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>
-  <!-- @小屏幕 下拉菜单 -->
-  <div id="nav-sm" class="nav-sm-noheight">
-    <ul>
-      <li><a class="nav-sm-title active" href="/" target="_blank" draggable="false">首页</a></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">
-          <!-- 标题 -->
-          <h3>文章</h3>
-          <!-- 创建时间 作者  -->
-          <h6>2021-04-06 gaokao 评论</h6>
-          <!-- 文章 -->
-          <div id="content">
-            <p>4月20日，广东警官学院在其官方微信公众号发布关于招生工作的严正声明，称学校从未委托任何个人、中介组织或招生机构开展提前招生等宣传，学校也不举办任何形式的营利性培训活动。</p>
-            <p>声明指出，近期，广东警官学院发现有个别招生机构或个人冒用该校名义进行虚假招生宣传，甚至向考生及家长收取费用并作虚假承诺。</p>
-            <p>
-              对此，广东警官学院表示，其普通高等教育(全日制)招生工作严格执行教育部的“阳光高考”规定和工作程序，不以任何形式承诺录取，不因任何理由降低标准录取。学校从未委托任何个人、中介组织或招生机构开展提前招生、高职扩招等宣
-            </p>
-            <p style="text-align: end;">记者 速记 编辑 扁鹊 校对 亮相零</p>
-          </div>
-          <!-- 点赞 阅读数 -->
-          <div id="read">
-            <div class="good"><i data-good="false" style="margin-right: 5px;"
-                class="glyphicon glyphicon-thumbs-up"></i><span>29</span></div>
-            <div class="see">阅读数：5000</div>
-          </div>
-          <!-- 相关文章 -->
-          <div class="articles">
-            <h5>相关文章</h5>
-            <ul>
-              <li><a
-                  href="">某某的文章111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</a>
-              </li>
-              <li><a href="">某某的文章</a></li>
-              <li><a href="">某某的文章</a></li>
-              <li><a href="">某某的文章</a></li>
-            </ul>
-          </div>
-          <div id="comment">
-            <div class="h5">
-              <div class="left">评论区 （<span>0</span>）</div>
-              <div class="right">文明上网，理性发言</div>
-            </div>
-            <div class="remind">
-              特别提醒： 发布广告，卖答案信息，一律封号处理！
-            </div>
-            <div class="comment">
-              <!-- 功能 用户图片 昵称 言论  回复功能 点赞功能 -->
-              <div class="nocomment">说说你对套卷的看法吧！</div>
-              <div id="detail"></div>
-              <div class="loading">正在加载中....</div>
-              <div class="nodata">到底了</div>
-            </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="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>
-  <!-- 交互板 登录 举报 发表评论 -->
-  <div id="toast">
-    <div id="sgin" style="display: none;"><a href="https://www.baidu.com">请先登录</a></div>
-    <!-- 举报 -->
-    <div id="report">
-      <ul>
-        <li>
-          辱骂等不文明行为
-        </li>
-        <li>
-          涉嫌发布广告信息
-        </li>
-        <li>兜售、发布考前答案</li>
-        <li>留QQ、群、微信、微博号等</li>
-      </ul>
-    </div>
-    <!-- 评论 -->
-    <div id="ping">
-      <textarea name="" id="" cols="30" rows="10"></textarea>
-      <button>发表</button>
-    </div>
-  </div>
-</body>
-
-</html>