20210810

css/components.css

@@ -0,0 +1,389 @@
+@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;
+}

css/components.less

@@ -0,0 +1,494 @@
+@title-top: #3181ff;
+@title-bg: #e0ecff;
+@body-bg: #2382ff;
+
+// 移动端下拉菜单动画
+@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;
+  }
+}
+
+// js 操作添加
+.show {
+  display: block !important;
+}
+
+.noshow {
+  display: none !important;
+}
+
+body {
+  height: 100vh;
+  overflow-y: scroll;
+  // 通用a标签
+  a{
+  text-decoration: none;
+  color: #777;
+  &:hover{
+    color:@body-bg;
+    text-decoration: none;
+  }
+  }
+  &::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 10px;
+  }
+
+  @media screen and (max-width:750px) {
+    &::-webkit-scrollbar {
+      /*滚动条整体样式*/
+      width: 10px;
+      /*高宽分别对应横竖滚动条的尺寸*/
+      height: 10px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #999;
+  }
+
+  //  2382ff
+  &::-webkit-scrollbar-thumb:hover {
+    background: @body-bg;
+  }
+
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #eee;
+  }
+}
+
+// 头部
+.header {
+  width: 100%;
+  background-color: #fff;
+  border-bottom: 1px solid #f1f1f1;
+  background-color: #fff;
+  position: fixed;
+  z-index: 1;
+
+  .ha-item {
+    margin-top: 10px;
+    height: 70px;
+
+    .img {
+      height: 100%;
+
+      span {
+        font-size: 50px;
+        font-weight: bold;
+        color: @body-bg;
+      }
+
+      img {
+        height: 100%;
+      }
+    }
+
+    .button {
+      display: none;
+
+      @media screen and (max-width:750px) {
+        & {
+          display: block;
+        }
+      }
+
+      .button {
+        color: @body-bg;
+        padding: 10px;
+        border: 2px solid @body-bg;
+        text-align: center;
+        font-size: 30px;
+        border-radius: 5px;
+      }
+    }
+
+    .app {
+      height: 100%;
+      text-align: center;
+
+      @media screen and (max-width:750px) {
+        & {
+          display: none;
+        }
+      }
+
+      a {
+        text-decoration: none;
+        color: @body-bg;
+
+        img {
+          width: 50px;
+        }
+      }
+    }
+  }
+
+  .hb-item {
+
+    // 大屏下拉菜单
+    .nav {
+      display: flex;
+      justify-content: flex-start;
+      align-content: center;
+
+      @media screen and (max-width:750px) {
+        & {
+          display: none;
+        }
+      }
+
+      &>.nav-item>a.active{
+        color: @body-bg;
+      }
+
+      .nav-item {
+        padding: 0 20px;
+
+        a {
+          color: #777;
+          font-weight: bold;
+          text-decoration: none;
+          line-height: 40px;
+          display: table-cell;
+          vertical-align: bottom;
+          font-size: 18px;
+
+          i {
+            margin-left: 5px;
+          }
+
+          &:hover {
+            color: @body-bg;
+          }
+        }
+
+        .nav-ul {
+          display: none;
+          overflow: hidden;
+          padding: 0;
+          position: absolute;
+          z-index: 1;
+          background-color: #fff;
+          overflow: auto !important;
+
+          .nav-li {
+            width: 100px;
+            padding: 10px;
+            list-style: none;
+
+            &:hover {
+              background-color: @body-bg;
+
+              a {
+                color: #fff;
+              }
+            }
+
+            a {
+              color: #777;
+              line-height: 15px;
+              font-size: small;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 小屏幕下拉菜单
+// 移动端下拉菜单
+#nav-sm {
+  position: fixed;
+  z-index: 99;
+  width: 100vw;
+  overflow-y: scroll;
+
+  @media screen and (max-width:768px) {
+    & {
+      border-top: 1px solid #eee;
+    }
+  }
+
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+
+  box-sizing: border-box;
+  background-color: #fff;
+  margin-top: 80px;
+  padding: 0;
+
+  &>ul>li>a.active{
+    color: @body-bg;
+  }
+
+  ul {
+    li {
+      list-style-type: none;
+
+      a {
+        font-weight: bold;
+        font-size: 20px;
+        font-size: 16px;
+        line-height: 40px;
+        color: #555;
+        text-decoration: none;
+
+        &:hover {
+          color: @body-bg;
+        }
+      }
+
+      .nav-sm-ul {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 0;
+
+        .nav-sm-li {
+          padding: 0 10px;
+
+          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) {
+    & {
+      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;
+
+  p {
+    margin: 0;
+    padding: 20px 0px 0px;
+  }
+
+  &>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) {
+    & {
+      display: none;
+    }
+  }
+
+  div {
+    height: 132px;
+    box-sizing: border-box;
+    background-color: @body-bg;
+    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；*/
+  }
+
+  ul {
+    width: 0px;
+    height: 132px;
+    border: 1px solid #aaa;
+    box-sizing: border-box;
+    border-right: none;
+    list-style: none;
+    padding: 0;
+    box-sizing: border-box;
+
+    &>li:first-child {
+      background-color: #c6c6c6;
+      line-height: 26px;
+      font-weight: bold;
+    }
+
+    li {
+      padding: 5px 10px;
+      width: 100px;
+      vertical-align: middle;
+
+      img {
+        width: 20px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+
+      &:hover:not(ul>li:first-child) {
+        background-color: #e6e6e6;
+      }
+    }
+  }
+
+  // width: 100px;height: 100px;
+}
+
+// 交互板
+#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;
+  div{
+    background-color: #fff;
+    position: absolute;
+    padding: 5px;
+    border-radius: 5px;
+    width: 260px;
+    // box-shadow: 0px 0px 5px #fff;
+    left: calc(~"50vw - 130px");
+    top: 30vh;
+  }
+ }

css/index.css

@@ -1,9 +1,3 @@
-.show {
-  display: block;
-}
-.noshow {
-  display: none;
-}
 @keyframes nav {
   from {
     height: 0;
@@ -56,10 +50,24 @@
     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;
@@ -153,7 +161,7 @@ body::-webkit-scrollbar-track {
     display: none;
   }
 }
-.header .hb-item .nav > .nav-item:first-child > a {
+.header .hb-item .nav > .nav-item > a.active {
   color: #2382ff;
 }
 .header .hb-item .nav .nav-item {
@@ -217,7 +225,7 @@ body::-webkit-scrollbar-track {
 #nav-sm::-webkit-scrollbar {
   height: 0;
 }
-#nav-sm > ul > li:first-child > a {
+#nav-sm > ul > li > a.active {
   color: #2382ff;
 }
 #nav-sm ul li {
@@ -266,6 +274,7 @@ body::-webkit-scrollbar-track {
 .body {
   background-color: #fff;
   max-width: 1200px;
+  min-height: 600px;
   overflow: hidden;
   position: relative;
   padding: 10px 15px 15px;
@@ -278,6 +287,86 @@ body::-webkit-scrollbar-track {
     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;
 }
@@ -382,83 +471,3 @@ body::-webkit-scrollbar-track {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.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;
-}

css/index.less

@@ -1,316 +1,8 @@
-// 通用颜色
-// 上边框
-@title-top: #3181ff;
-@title-bg: #e0ecff;
-@body-bg: #2382ff;
-.show {
-  display: block;
-}
-
-.noshow {
-  display: none;
-}
-
-// 移动端下拉菜单动画
-@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;}
-}
-body{
-  height: 100vh;
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 5px;
-    /*高宽分别对应横竖滚动条的尺寸*/
-    height: 10px;
-  }
-  @media screen  and (max-width:750px){
-    &::-webkit-scrollbar {
-      /*滚动条整体样式*/
-      width: 0px;
-      /*高宽分别对应横竖滚动条的尺寸*/
-      height: 10px;
-    }
-  }
-  &::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #999;
-  }
-
-  //  2382ff
-  &::-webkit-scrollbar-thumb:hover {
-    background: @body-bg;
-  }
-
-  &::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-    background: #eee;
-  }
-}
-// 头部
-.header {
-  width: 100%;
-  background-color: #fff;
-  border-bottom: 1px solid #f1f1f1;
-  background-color: #fff;
-  position: fixed;
-  z-index: 1;
-
-  .ha-item {
-    margin-top: 10px;
-    height: 70px;
-
-    .img {
-      height: 100%;
-
-      span {
-        font-size: 50px;
-        font-weight: bold;
-        color: @body-bg;
-      }
-
-      img {
-        height: 100%;
-      }
-    }
-
-    .button {
-      display: none;
-
-      @media screen and (max-width:750px) {
-        & {
-          display: block;
-        }
-      }
-
-      .button {
-        color: @body-bg;
-        padding: 10px;
-        border: 2px solid @body-bg;
-        text-align: center;
-        font-size: 30px;
-        border-radius: 5px;
-      }
-    }
-
-    .app {
-      height: 100%;
-      text-align: center;
-
-      @media screen and (max-width:750px) {
-        & {
-          display: none;
-        }
-      }
-
-      a {
-        text-decoration: none;
-        color: @body-bg;
-
-        img {
-          width: 50px;
-        }
-      }
-    }
-  }
-
-  .hb-item {
-
-    // 大屏下拉菜单
-    .nav {
-      display: flex;
-      justify-content: flex-start;
-      align-content: center;
-
-      @media screen and (max-width:750px) {
-        & {
-          display: none;
-        }
-      }
-      &>.nav-item:first-child>a{
-        color: @body-bg;
-      }
-      .nav-item {
-        padding: 0 20px;
-        a {
-          color: #777;
-          font-weight: bold;
-          text-decoration: none;
-          line-height: 40px;
-          display: table-cell;
-          vertical-align: bottom;
-          font-size: 18px;
-
-          i {
-            margin-left: 5px;
-          }
-
-          &:hover {
-            color: @body-bg;
-          }
-        }
-
-        .nav-ul {
-          display: none;
-          overflow: hidden;
-          padding: 0;
-          position: absolute;
-          z-index: 1;
-          background-color: #fff;
-          overflow: auto !important;
-
-          .nav-li {
-            width: 100px;
-            padding: 10px;
-            list-style: none;
-
-            &:hover {
-              background-color: @body-bg;
-
-              a {
-                color: #fff;
-              }
-            }
-
-            a {
-              color: #777;
-              line-height: 15px;
-              font-size: small;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 小屏幕下拉菜单
-// 移动端下拉菜单
-#nav-sm {
-  position: fixed;
-  z-index: 99;
-  width: 100vw;
-  overflow-y: scroll;
-
-  @media screen and (max-width:768px) {
-    & {
-      border-top: 1px solid #eee;
-    }
-  }
-
-  &::-webkit-scrollbar {
-    height: 0;
-  }
-
-  box-sizing: border-box;
-  background-color: #fff;
-  margin-top: 80px;
-  padding: 0;
-  &>ul>li:first-child>a{
-    color:@body-bg;
-  }
-  ul {
-    li {
-      list-style-type: none;
-      a {
-        font-weight: bold;
-        font-size: 20px;
-        font-size: 16px;
-        line-height: 40px;
-        color: #555;
-        text-decoration: none;
-        &:hover {
-          color: @body-bg;
-        }
-      }
-
-      .nav-sm-ul {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: wrap;
-        padding: 0;
-
-        .nav-sm-li {
-          padding: 0 10px;
-
-          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;
-}
-
+@import "components.less";
 .body {
-  background-color: #fff;
-  max-width: 1200px;
-  overflow: hidden;
-  position: relative;
-  padding: 10px 15px 15px;
-  margin: 141px 20px 20px;
-
-  @media screen and (max-width:768px) {
-    & {
-      padding: 0px;
-      border-radius: 10px 10px 0 0;
-      margin: 100px 20px 20px;
-    }
-  }
-
   // 行头
   .row-style {
     margin-top: 20px;
-
     @media screen and (max-width:768px) {
       & {
         margin-top: 0px;
@@ -318,7 +10,6 @@ body{
         overflow: hidden;
       }
     }
-
     // 轮播图片
     .carousel-img-style {
       width: 100%;
@@ -442,87 +133,3 @@ body{
   }
 
 }
-
-.footer {
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  background-color: #fff;
-  border-top: 1px solid #f1f1f1;
-  text-align: center;
-  color: #777;
-
-  p {
-    margin: 0;
-    padding: 20px 0px 0px;
-  }
-
-  &>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) {
-      &{display: none;}
-    }
-    div{
-      height: 132px;
-      box-sizing: border-box;
-      background-color: @body-bg;
-      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；*/  
-    }
-    ul{
-      width: 0px;
-      height: 132px;
-      border: 1px solid #aaa;
-      box-sizing: border-box;
-      border-right: none;
-      list-style: none;padding:0 ;
-      box-sizing: border-box;
-      &>li:first-child{
-        background-color: #c6c6c6;
-        line-height: 26px;
-        font-weight: bold;
-      }
-      li{
-        padding: 5px 10px;
-        width: 100px;
-        vertical-align: middle;
-        img{
-          width: 20px;
-          vertical-align: middle;
-          margin-right: 5px;
-        }
-        &:hover:not(ul>li:first-child){
-          background-color: #e6e6e6;
-        }
-      }
-    }
-    // width: 100px;height: 100px;
-  }

css/page1.css

@@ -1,15 +1,502 @@
-#content {
+@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;
+}
+.body .color {
+  color: #2382ff;
+}
+.body h3 {
+  margin-top: 0;
+}
+.body #content {
   text-align: justify;
 }
-#content p {
+.body #content p {
   text-indent: 30px;
 }
-#content > p:last-child {
+.body #content > p:last-child {
   padding: 10px 0px;
 }
-#content #read {
+.body #read {
+  margin-top: 20px;
   text-align: center;
 }
-#content #read .good {
+.body #read .good {
+  border-radius: 5px;
+  border: 1px solid #e6e6e6;
   display: inline-block;
+  padding: 5px 30px;
+  margin-bottom: 10px;
+}
+.body .articles ul {
+  width: 100%;
+  border-top: 1px solid #e6e6e6;
+  padding: 10px 20px;
+  list-style: square;
+  color: #777;
+  overflow: hidden;
+}
+.body .articles ul li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: 5px 0px;
+}
+.body #comment .h5 {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+.body #comment .remind {
+  text-align: center;
+  background-color: #e6e6e6;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 10px 0px;
+}
+.body #comment .comment {
+  border-top: 1px solid #e6e6e6;
+  padding-top: 10px;
+}
+.body #comment .comment .nocomment,
+.body #comment .comment .loading,
+.body #comment .comment .nodata {
+  display: none;
+  text-align: center;
+  margin: 10px;
+}
+.body #comment .comment .nocomment {
+  display: block;
+  padding-bottom: 10px;
+}
+.body #comment .comment .nocomment:hover {
+  color: #2382ff;
+}
+.body #comment .comment .user {
+  width: 100%;
+  padding: 20px 0;
+  border-bottom: 1px solid #e6e6e6;
+  display: grid;
+  grid-template-columns: 10%  90%;
+}
+.body #comment .comment .user .u-img {
+  width: 100%;
+  text-align: center;
+}
+.body #comment .comment .user .u-img .img {
+  width: 100%;
+  max-width: 64px;
+}
+.body #comment .comment .user .u-content {
+  margin-left: 10px;
+  text-align: justify;
+}
+.body #comment .comment .user .u-content .u-name {
+  font-size: 16px;
+}
+.body #comment .comment .user .u-content .u-detail {
+  padding: 5px  0px;
+}
+.body #comment .comment .user .u-content .u-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#toast #report {
+  display: none;
+  text-align: start;
+}
+#toast #report ul {
+  list-style: none;
+  padding: 0;
+}
+#toast #report ul li {
+  padding: 5px;
+  border-bottom: 1px solid #e6e6e6;
 }

css/page1.less

@@ -1,15 +1,117 @@
-#content{
-  text-align: justify;
-  p{
-    text-indent: 30px;
+@import "./components.less";
+.body{
+  .color{
+    color: @body-bg;
   }
-  &>p:last-child{
-      padding: 10px 0px;
+  h3{
+    margin-top: 0;
+  }
+  #content{
+    text-align: justify;
+    p{
+      text-indent: 30px;
+    }
+    &>p:last-child{
+        padding: 10px 0px;
+    }
   }
   #read{
+    margin-top: 20px;
     text-align: center;
     .good{
+      border-radius:5px;
+      border:  1px solid #e6e6e6;
       display: inline-block;
+      padding: 5px 30px;
+      margin-bottom: 10px;
+    }
+  }
+  .articles{
+    ul{
+      width: 100%;
+      border-top: 1px solid #e6e6e6;
+      padding: 10px 20px;
+      list-style: square;
+      color: #777;
+      overflow: hidden;
+      li{
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+        padding: 5px 0px;
+      }
+    }
+  }
+  #comment{
+    .h5{
+      display: flex;justify-content: space-between;align-content: center;
+    }
+    .remind{
+      text-align: center;
+      background-color: #e6e6e6;
+      padding: 5px;
+      border-radius: 5px;
+      margin: 10px 0px;
+    }
+    .comment{
+      border-top: 1px solid #e6e6e6;
+      padding-top: 10px;
+      .nocomment,.loading,.nodata{
+        display: none;
+        text-align: center;
+        margin: 10px;
+      }
+      .nocomment{
+        display: block;
+        padding-bottom: 10px;
+        &:hover{
+          color: @body-bg;
+        }
+      }
+      .user{
+        width: 100%;
+        padding: 20px 0;
+        border-bottom: 1px solid #e6e6e6;
+        display: grid;
+        grid-template-columns: 10%  90%;
+        .u-img{
+         width: 100%;
+         text-align: center;
+         .img{
+           width: 100%;
+           max-width: 64px;
+         }
+        }
+        .u-content{
+          margin-left: 10px;
+         text-align: justify;
+         .u-name{
+           font-size: 16px;
+         }
+         .u-detail{
+           padding: 5px  0px;
+         }
+         
+        .u-flex{display: flex;justify-content: space-between;align-items: center;
+        }
+        }
+      }
+    }
+  }
+}
+
+// 交互板
+#toast{
+  #report{
+    display: none;
+    text-align: start;
+    ul{list-style: none;padding: 0;
+      li{
+        padding: 5px;
+        border-bottom: 1px solid #e6e6e6;
+       }
     }
   }
-}
+}
+

index.html

@@ -9,11 +9,13 @@
   <script src="./js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/index.css">
+  <script src="./js/components.js"></script>
   <script src="./js/index.js"></script>
   <title>公司</title>
 </head>
 
 <body>
+  <!-- components 共用头部 -->
   <div class="header">
     <div class="container">
       <div id="face" class="ha-item">
@@ -37,6 +39,7 @@
         <!-- @大屏修改下拉菜单 -->
         <div id="nav" class="nav">
           <div class="nav-item">
+            <!-- active 表明当前页面属于那个动作分类 -->
             <a class="active" href="/" target="_blank" draggable="false">首页</a>
             <ul class="nav-ul">
             </ul>
@@ -69,9 +72,11 @@
       </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></li>
       <li>
         <a class="nav-sm-title" href="/" target="_blank" draggable="false">新高考</a>
@@ -102,6 +107,7 @@
       </li>
     </ul>
   </div>
+  <!-- components 共用主体内容外壳 -->
   <div id="body" class="container">
     <div class="row">
       <div class="col">
@@ -467,6 +473,8 @@
       </div>
     </div>
   </div>
+
+  <!-- 以下为通用html -->
   <div class="footer">
     <p>商务合作电话：0371-86586728</p>
     <p>豫ICP备15004940号-5</p>

js/components.js

@@ -0,0 +1,223 @@
+// 通用数据
+let globaldata = {
+  // 滚动高度
+  scrollheight: 50,
+  // body 
+  body: document.documentElement || document.body
+}
+// 大屏 下拉菜单
+$(
+  function () {
+    let navitems = $("#nav>.nav-item");
+    const move = (that, show) => {
+      let lis = $(that).find("li"),
+        i = $(that).find("i");
+      ul = $(that).find("ul");
+      if (lis.length != 0 && show) {
+        ul.addClass("show");
+        i.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
+        return false;
+      }
+      if (lis.length != 0 && !show) {
+        ul.removeClass("show")
+        i.removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
+        return false;
+      }
+      return false;
+    }
+    for (let i = 0; i < navitems.length; i++) {
+      $(navitems[i]).mouseenter(function () {
+        let that = this;
+        move(that, true)
+      }).mouseleave(function () {
+        let that = this;
+        move(that, false)
+      })
+
+    }
+  }
+)
+// 监听滚动轴 
+$(function () {
+  // face显示锁
+  let lock = true;
+  // top显示锁
+  let locktop = false;
+  // 滚动高度
+  let height = globaldata.scrollheight;
+  $("body")[0].onscroll = function () {
+    let stop = globaldata.body.scrollTop;
+    // console.log(stop)
+    // 可是区域宽度；
+    if (stop > height && !locktop) {
+      $("#top").removeClass("noshow");
+      locktop = true;
+    }
+    if (stop < height && locktop) {
+      $("#top").addClass("noshow");
+      locktop = false;
+    }
+    if ($("body")[0].clientWidth < 768) {
+      return false;
+    }
+    if (stop > height && lock) {
+      $("#face").addClass("noshow");
+      lock = false
+      return false;
+    }
+    if (stop <= height && !lock) {
+      $("#face").removeClass("noshow");
+      lock = true;
+      return false;
+    }
+  }
+})
+// 小屏幕 下拉菜单
+$(function () {
+  // 按钮开关
+  let lock = false;
+  const open = () => {
+    if (!lock) {
+      $("#nav-sm").addClass("nav-sm-show").removeClass("nav-sm-noshow");
+      globaldata.body.addEventListener('touchmove', e =>
+        e.preventDefault()
+        , { passive: false })
+      lock = true
+      return false;
+    }
+    if (lock) {
+      $("#nav-sm").addClass("nav-sm-noshow").removeClass("nav-sm-show");
+      globaldata.body.removeEventListener('touchmove', e => e.preventDefault() = true, { passive: false })
+      lock = false;
+      return false;
+    }
+  }
+  $('#listbutton').click(function () {
+    open()
+  })
+  // 可视区域变化
+  window.onresize = () => {
+    let appwidth = $("body")[0].clientWidth;
+    if (appwidth > 768) {
+      $("#nav-sm").removeClass("nav-sm-show");
+      lock = false;
+      return false;
+    } else {
+      // face 移动端显示
+      try {
+        $("#face").removeClass("noshow");
+      } catch (err) { }
+    }
+    // if (lock) {
+    //   $("#nav-sm").addClass("nav-sm-show");
+    //   return false;
+    // }
+  }
+})
+// 分享设置
+var shareModel = {
+  // /**
+  //  * 分享QQ好友
+  //  * @param  {[type]} title [分享标题]
+  //  * @param  {[type]} url   [分享url链接，默认当前页面链接]
+  //  * @param  {[type]} pic   [分享图片]
+  //  * @return {[type]}       [description]
+  //  */
+  shareQQ: function (url, title, pic) {
+    var param = {
+      url: url || window.location.href,
+      desc: '', /*分享理由*/
+      title: title || '', /*分享标题(可选)*/
+      summary: '',/*分享描述(可选)*/
+      pics: pic || '',/*分享图片(可选)*/
+      flash: '', /*视频地址(可选)*/
+      site: '' /*分享来源 (可选) */
+    };
+    var s = [];
+    for (var i in param) {
+      s.push(i + '=' + encodeURIComponent(param[i] || ''));
+    }
+    var targetUrl = "https://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&');
+    window.open(targetUrl, 'qq');
+  },
+
+  //  /**
+  //    * 微信分享
+  //    * @return {[type]} [description]
+  //    */
+  weixin: function () {
+    var url = window.location.href,
+      encodePath = encodeURIComponent(url),
+      targetUrl = 'https://api.gaokaozhitongche.com/v1/direct?text=' + encodePath;
+    window.open(targetUrl, 'weixin');
+  },
+
+  //  /**
+  //    * 分享新浪微博
+  //    * @param  {[type]} title [分享标题]
+  //    * @param  {[type]} url   [分享url链接，默认当前页面]
+  //    * @param  {[type]} pic   [分享图片]
+  //    * @return {[type]}       [description]
+  //    */
+  sinaWeiBo: function (title, url, pic) {
+    var param = {
+      url: url || window.location.href,
+      type: '3',
+      count: '1', /** 是否显示分享数，1显示(可选)*/
+      appkey: '', /** 您申请的应用appkey,显示分享来源(可选)*/
+      title: '', /** 分享的文字内容(可选，默认为所在页面的title)*/
+      pic: pic || '', /**分享图片的路径(可选)*/
+      ralateUid: '', /**关联用户的UID，分享微博会@该用户(可选)*/
+      rnd: new Date().valueOf()
+    }
+    var temp = [];
+    for (var p in param) {
+      temp.push(p + '=' + encodeURIComponent(param[p] || ''))
+    }
+    var targetUrl = 'https://service.weibo.com/share/share.php?' + temp.join('&');
+    window.open(targetUrl, 'sinaweibo');
+  }
+};
+$(function () {
+  $("#share").mouseenter(function () {
+    $(this).children("ul").css("width", 'auto')
+  }).mouseleave(function () {
+    $(this).children("ul").css("width", '0px')
+  })
+  let lis = $("#share>ul>li");
+  for (let i = 0; i < lis.length; i++) {
+    if (i == 1) {
+      $(lis[i]).click(function () {
+        shareModel.shareQQ();
+      })
+    }
+    // if (i == 2) {
+    //   $(lis[i]).click(function () {
+    //     shareModel.weixin(url = "https://app.gaokaozhitongche.com/");
+    //   })
+    // }
+    if (i == 2) {
+      $(lis[i]).click(function () {
+        console.log(1)
+        shareModel.sinaWeiBo();
+      })
+    }
+  }
+})
+// 按钮锁
+$(function () {
+  $("#top").click(function () {
+    let dom = globaldata.body;
+    // let top = document.documentElement.scrollTop || document.body.scrollTop;
+    $(dom).animate({ scrollTop: 0 }, 500);
+  })
+})
+// toast 背景事件
+$(function () {
+  $("#toast").click(function () {
+    // $(this).removeClass("show");
+    Array.prototype.slice.call($(this).find(".show")).forEach(e => {
+      $(e).removeClass("show").find("#ping").addClass("show")
+    })
+  })
+})

js/page1.js

@@ -0,0 +1,135 @@
+$(function () {
+  const globaldata = {
+    // 用户是否登录
+    user: true,
+    // 登录弹框
+    sgin () {
+      $("#toast").addClass("show").find("#sgin").addClass("show");
+    }
+  }
+  // 显示区高度
+  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;
+      $(".comment>.loading").addClass("show")
+      setTimeout(function (
+      ) {
+        $(".comment>.loading").removeClass("show");
+        data().then(res => {
+          if (res) {
+            $(".comment>.nodata").addClass("show");
+          }
+          lock = res;
+        });
+      }, 2000)
+    }
+  })
+  // 阅读量问题
+
+  // 评论区
+  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-content">
+      <div class="u-flex">
+        <div class="u-name">QQ官方</div>
+        <div class="u-fabulous" data-gods="1"><span>0</span><i data-gods="1" style="margin-left:5px" class="glyphicon glyphicon-thumbs-up"></i></div>
+      </div>
+      <div class="u-detail">
+        对此，广东警官学院表示，其普通高等教育(全日制)招生工作严格执行教育部的“阳光高考”规定和工作程序，不以任何形式承诺录取，不因任何理由降低标准录取。学校从未委托任何个人、中介组织或招生机构开展提前招生、高职扩招等宣
+      </div>
+      <div class="u-flex">
+        <div class="u-date">2020-12-15</div>
+        <div data-gods="2"  class="u-report">举报</div>
+      </div>
+    </div>
+  </div>`;
+    return new Promise(resolve => {
+      $("#detail").append(com);
+      //评论点赞 登录状态 请求
+      let lists = $("#detail>.user");
+      // 模拟无信息加载情况
+      if (lists.length == 10) {
+        resolve(true)
+      }
+      for (let i = 0; i < lists.length; i++) {
+        $(lists[i]).unbind("click");
+        $(lists[i]).click(function (e) {
+          if (!globaldata.user) {
+            globaldata.sgin();
+            return false
+          }
+          let userid = $(this).data("userid");
+          let lock = $(this).data("good");
+          let gods = e.target.dataset.gods;
+          if (gods == 1) {
+            let $i = $(this).find("i");
+            let $span = $(this).find("span");
+            let num = $span.text();
+            if (!lock) {
+              $i.addClass("color");
+              $(this).data("good", true);
+              $span.text(num * 1 + 1);
+            } else {
+              $i.removeClass("color");
+              $(this).data("good", false);
+              $span.text(num * 1 - 1);
+            }
+            return false;
+          }
+          if (gods == 2) {
+            $("#toast").addClass("show").find("#report").addClass("show").data("userid", userid);
+          }
+        })
+      }
+      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) {
+      globaldata.sgin();
+      return false
+    }
+    let $i = $(this).find("i");
+    let $span = $(this).find("span");
+    let num = $span.text();
+    let lock = $i.data("good");
+    if (!lock) {
+      $i.addClass("color");
+      $i.data("good", true);
+      $span.text(num * 1 + 1);
+    } else {
+      $i.removeClass("color");
+      $i.data("good", false);
+      $span.text(num * 1 - 1);
+    }
+  })
+
+  // 举报事件
+  $("#report").click(function (e) {
+    let $that = $(this);
+    let lis = $that.find("li");
+    let i = Array.prototype.slice.call(lis).indexOf(e.target);
+    alert("点击举报" + i)
+  })
+})

page1.html

@@ -10,25 +10,194 @@
   <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="container">
-    <!-- 标题 -->
-    <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 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 id="read">
-      <div class="good"><i class="glyphicon glyphicon-thumbs-up"></i>29</div>
-      <div class="see">阅读数：5000</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>