更新图标库；新增皮肤，增加彩蛋

css/global.css

@@ -7,19 +7,20 @@
 body{
   font-family:-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', sans-serif;
   font-size:12px !important;
+  overflow: hidden;
 }
 /*滑块*/
 ::-webkit-scrollbar-thumb:horizontal { /*水平滚动条的样式*/
-  background-color: #999;
+  background-color: #ddd;
 }
 ::-webkit-scrollbar-thumb:vertical { /*垂直滚动条的样式*/
-  background-color: #999;
+  background-color: #ddd;
 }
 .nav-link,.btn-link{
-  color:#ff6501;
+  color:#999;
 }
 .nav-link:hover,.btn-link:hover{
-  color:#d45300;
+  color:#333;
   text-decoration: none;
 }
 .container-width{
@@ -28,8 +29,9 @@ body{
   /*width:900px;
   height:564px;*/
   /*overflow: hidden;*/
-  background: -prefix-linear-gradient(left top,#6d5855,#3b2d2a);
-  background: linear-gradient(to bottom right,#6d5855,#3b2d2a);
+  background: linear-gradient(to bottom right,#f2f3fa 10%,#eaecf1 60%,#f0f1f8);/*
+  background: linear-gradient(to bottom right,#eaecf1 10%,#BED8FE 60%,#EDF3FF);*/
+   /*background: linear-gradient(to bottom right,#eaecf1,#eef0f7);*/
 }
 ::-webkit-scrollbar-track
 {
@@ -51,11 +53,53 @@ body{
   margin-top: -20px;
   padding-top: 5px;
   height:60px;
-  color:#fff;
 }
 .header i{
-  color:#fff;
 }
+.cat-meow{
+  position: absolute;
+    bottom: 47px;
+    left: -8px;
+    z-index: 9999;
+    cursor: pointer;
+}
+.cat-meow:hover {
+  transform: translate(8px);
+}
+.cat{
+  position: absolute;
+    bottom: 47px;
+    left: -110px;
+}
+.cat img{
+  width:100px;
+  }
+.catgogogo{
+  animation-name: catwalk;
+  animation-duration: 12s; 
+  animation-timing-function: linear;
+  animation-iteration-count:1;
+  animation-direction:alternate;
+  animation-play-state:running;
+  -webkit-animation-name: catwalk;
+  -webkit-animation-duration: 12s; 
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count:1;
+  -webkit-animation-direction:alternate;
+  -webkit-animation-play-state:running;
+}
+
+@keyframes catwalk
+{
+    0% {left:-110px;}
+    100% {left:500px;}
+}
+@-webkit-keyframes catwakl
+{
+    0% {left:-110px;}
+    100% {left:500px;}
+} 
+
 .header-return{
   display:inline-block;
   font-size: 20px;
@@ -65,18 +109,36 @@ body{
 .header i{
   cursor:pointer;
 }
+.head-tool .btn-light{
+  background: none;
+  border:none;
+  color: #999
+}
+.head-tool .btn-group>.btn:nth-child(2){
+  border:none;
+}
+.head-tool .btn-light:hover{
+  background: #e2e6ea;
+  border:none;
+  color:#333;
+}
+.head-tool .btn-del:hover{
+  background: rgb(228, 132, 131);
+  border:none;
+  color:#fff;
+}
 .version-name{
   margin-left: 15px;
   color:#ddd;
   font-size: 12px;
 }
 .top-nav .nav-link{
-  color:#ccc;
+  color:#999;
   font-size:18px;
 }
 .top-nav .nav-link.active{
-  color:#fff;
-  text-shadow:0px 0px 6px #fff, 0px 0px 20px #f72, 0px 0px 30px #f84,0px 0px 70px #fa5;
+  color:#333;
+  /*text-shadow:0px 0px 6px #fff, 0px 0px 20px #f72, 0px 0px 30px #f84,0px 0px 70px #fa5;*/
   position: relative;
 }
 .top-nav .nav-link.active:before{
@@ -88,21 +150,21 @@ body{
   height: 0px;
   width: 0px;
   border-left: 7px solid transparent;
-  border-bottom: 8px solid #fbf6f3;
+  border-bottom: 8px solid #DDD;
   border-right: 8px solid transparent;
 }
 .top-nav .nav-link:hover{
-  color:#fff;
-  text-shadow: 0px 0px 20px #f72;
+  color:#000;
+  /*text-shadow: 0px 0px 20px #1e6eff;*/
 }
 .top-nav .nav-link.active:hover{
-  color:#fff;
-  text-shadow:0px 0px 6px #fff, 0px 0px 20px #f72, 0px 0px 30px #f84,0px 0px 70px #fa5;
+  color:#333;
+  /*text-shadow:0px 0px 6px #fff, 0px 0px 20px #f72, 0px 0px 30px #f84,0px 0px 70px #fa5;*/
   cursor: default;
 }
 .software-wrap{
   position:relative;
-  background:#fbf6f3;
+  background:#f5f6f7;
   overflow:hidden;
 }
 .software-down{
@@ -138,6 +200,7 @@ body{
 .software-wrapscroll{
   width:100%;
   overflow-y:auto;
+  border:1px solid #eaeaea;
 }
 .software-list{
   background:#fff;
@@ -150,12 +213,12 @@ body{
   width:85% !important;
 }
 .software-list:hover,.details:hover{
-  border:2px solid rgba(255,101,5,0.2);
+  background: #ebeced
 }
 .software-list:hover .btn-white,.details:hover .btn-white{
-  background:#ff6501;
+  background:#1e6eff;
   color:#fff;
-  border:1px solid #ff6501;
+  border:1px solid #1e6eff;
 }
 .software-list a{
   color:#333;
@@ -259,6 +322,8 @@ body{
   bottom:0;
   left:0;
   background:#fff;
+  border:1px solid #eaeaea;
+  border-right:none;
 }
 .local-software{
   position:absolute;
@@ -267,24 +332,29 @@ body{
   left:0;
   bottom:47px;
   overflow-y:auto;
+  overflow-x:hidden;
 }
 .software{
   position:relative;
-  padding:12px 0;
-  margin:0 15px;
-  border-bottom: 1px solid #f5ede7;
+  padding:16px 24px;
   cursor:pointer;
+  border-bottom:1px solid #eaeaea;
+}
+.software:hover{
+  background: #eaeaea
 }
 .software a{
   color:#333;
   text-decoration: none;
 }
 .software:hover a{
-  color:#ff6501;
+  color:#333;
+  font-weight: bold;
 }
 .software.active{
   font-weight: bold;
-  color:#ff6501;
+  color:#000;
+  background: #eaeaea
 }
 .software.active:before{
   position:absolute;
@@ -298,10 +368,10 @@ body{
   border-bottom: 8px solid transparent;
 }
 .software.active a{
-  color:#ff6501;
+  color:#333;
 }
 .software.active .software-num,.software:hover .software-num{
-  background:#ff6501;
+  background:#999;
   color:#fff;
 }
 .open-left{
@@ -324,7 +394,7 @@ body{
 .software-num{
   position:absolute;
   top:15px;
-  right:0;
+  right:24px;
   background:#e9e9e9;
   color:#555;
   display:inline-block;
@@ -336,7 +406,6 @@ body{
   width:100%;
   bottom:0;
   left:0;
-  background:#fff;
   height:55px;
 }
 .local-install{
@@ -346,25 +415,29 @@ body{
   bottom:0;
   width:73%;
   overflow-y:hidden;
+  border:1px solid #eaeaea;
+}
+.software-detail-top{
+  border-bottom:1px solid #eaeaea;
 }
 .software-content{
   width:100%;
 }
 .software-tab-pane{
-  background:#fff;
   overflow-y:auto;
 }
 .software-content .tab-pane{
-  padding:0 15px;
+  padding:0 ;
 }
 .software-nav{
   position:absolute;
   right:15px;
   top:0;
-  border-color: #fff;
+  border-color: #eaeaea;
 }
 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
-  border-color: #fff;
+  border-color: #eaeaea;
+  background: #eaeaea
 }
 .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
   border-color: #fff;
@@ -376,10 +449,13 @@ body{
 .iconbg{
   display:block;
   width:30px;
-  padding:7px 0;
-  margin:0 0 5px 9px;
+  padding:5px 0 5px 0;
+  margin:0 0 0 9px;
   text-align: center;
 }
+.iconbg i{
+  font-size: 24px
+}
 .iconbg-purple{
   background:#8a7bfd;
   color:#fff;
@@ -393,17 +469,15 @@ body{
   color:#fff;
 }
 .details{
-  background:#fbf6f3;
-  padding:15px;
-  border: 2px solid #fff;
+  background:#f5f6f7;
+  padding:20px 30px;
   border-radius: 3px;
-  margin:15px;
   color:#888;
   font-size: 14px;
+  border-bottom:1px solid #eaeaea;
 }
 .details-title{
   width:85%;
-  font-size: 16px;
   color:#333;
 }
 .details .w-25{
@@ -412,8 +486,8 @@ body{
   color:#333;
 }
 .details .details-title .w-25{
-  width:62%!important;
-  font-weight: 500;
+  width:70%!important;
+  font-weight: 600;
 }
 .local-software-content{
   height:364px;
@@ -461,15 +535,15 @@ body{
   color:#333;
 }
 .downloaded{
-  background:#fbf6f3;
+  background:#f5f6f7;
   border-radius: 3px;
   padding:10px;
   font-size: 14px;
-  border:2px solid #fbf6f3;
+  border:2px solid #f5f6f7;
   margin:10px 0 10px 0;
 }
 .downloaded:hover{
-  border:2px solid rgba(255,101,5,0.2);
+  border:2px solid rgba(30,110,255,0.2);
 }
 .progress-content .float-right{
   font-size: 16px;
@@ -480,15 +554,18 @@ body{
 .dropdown-wrap{
   min-width: 0;
 }
+.btn-group>.btn:nth-child(2){
+  border-left: 1px solid #73a5ff
+}
 .btn-white {
   color: #333;
   background-color: #fff;
   border-color: #ddd;
 }
 .btn-white:hover{
-  background:#d45300 !important;
-  color:#fff !important;
-  border:1px solid #d45300 !important;
+  background:#eaecf1 !important;
+  color:#333 !important;
+  border:1px solid #eef0f7 !important;
 }
 
 
@@ -527,8 +604,8 @@ body{
 
 .btn-blue {
   color: #fff;
-  background-color: #14a5e8;
-  border-color: #14a5e8;
+  background-color: #1e6eff;
+  border-color: #1e6eff;
 }
 
 .btn-blue:hover {
@@ -581,7 +658,7 @@ body{
   border-radius: 13px;
 }
 .downloading .dropdown-item{
-  color:#007bff;
+  color:#1e6eff;
 }
 .modal-online .media{
   background:#fbf6f3;
@@ -620,8 +697,8 @@ body{
   background:#fff;
 }
 .news-list .news-item:hover{
-  border:1px solid rgba(255,101,5,0.3);
-  box-shadow: 0 0 10px #ccc
+  border:1px solid #ddd;
+  box-shadow: 0 0 10px #eaeaea
 }
 /*培训*/
 .train-nav .nav-link{
@@ -631,11 +708,11 @@ body{
   font-size: 14px
 }
 .train-nav .nav-link.active{
-  color:#ff6501;
+  color:#1e6eff;
   font-weight: 600
 }
 .train-nav .nav-link:hover{
-  color:#ff6501;
+  color:#1e6eff;
 
 }
 .train-nav .nav-link.active:before{
@@ -709,28 +786,4 @@ body{
 }
 .lead-sm{
   font-size: 12px;
-}
-.nav-wrap .nav-link{
-  border-radius: 0rem;
-  background: #fbf6f3;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 2rem;
-  position: relative;
-}
-.nav-wrap .nav-link.active, .nav-wrap .show>.nav-link{
-  background: #fff;
-  font-size: 2rem;
-  color: rgba(0, 0, 0, 0.8);
-  border-radius: 0rem;
-}
-.nav-wrap .nav-link.active::before{
-  content: "";
-  display: block;
-  width: 85%;
-  height: 2px;
-  background-color: #007BFF;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
 }

js/global.js

@@ -18,10 +18,8 @@ function autoFlashHeight(){
 	$(".autoHeightL3").height($(window).height()-80-softwareDetailTop);
 	$(".autoHeightL4").height($(window).height()-80-119);
 	$(".autoHeightL5").height($(window).height()-80-softwareDetailTop-30);
-	$(".autoHeightL6").height($(window).height()-80-softwareDetailTop-125);
 	// console.log($(window).height());
 	console.log($(document).height());
-	console.log($(".autoHeightL1").height());
 };
 $(window).resize(autoFlashHeight);
 

software-buliding.html

@@ -160,67 +160,31 @@
       </div>
       <div class="software-wrap">
         <div class="software-wrapscroll autoHeightL1">
-          <div class="m-3 bg-white">
-            <div class="software-detail-top">
-              <div class="jumbotron bg-white mb-0 px-3 pb-1 pt-4">
+          <div class="software-detail-top">
+            <div class="p-3">
+              <div class="jumbotron bg-white mb-0 pb-1 pt-5">
                 <div class="container">
-                  <!-- <div class="float-right"><a class="btn btn-primary btn-lg ml-3" href="#" role="button" data-toggle="modal" data-target="#phonebinding">点击免费使用</a></div> -->
+                  <div class="float-right"><a class="btn btn-primary btn-lg ml-3" href="#" role="button" data-toggle="modal" data-target="#phonebinding">点击免费使用</a></div>
                   <h2 class="display-5"><img src="images/building.png" width="36" class="mr-2 mb-1">大司空云计价</h2>
+                  <p class="lead lead-sm ml-4"><span class="ml-4">市政、房建、轨道、管廊管线等专业工程计价软件</span></p>
                   <hr class="my-4">
-                  <p class="lead lead-sm">市政、房建、轨道、管廊管线等专业工程计价软件</p>
-                  <p class="lead mt-5">目前已提供：</p>
                 </div>
               </div>
+                  <p class="lead mt-3 mb-0">目前已提供：</p>
             </div>
-            <div class="autoHeightL5" style="overflow: auto;">
-              <div class="row m-0" id="version-area">
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 ml-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">重庆建筑（2018）</h5><p class="card-text">符合渝建[2018]200号文</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 mr-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">江西建筑（2017）</h5><p class="card-text">符合赣建价[2017]7号文</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 ml-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">重庆建筑（2018）</h5><p class="card-text">符合渝建[2018]200号文</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 mr-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">江西建筑（2017）</h5><p class="card-text">符合赣建价[2017]7号文</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 ml-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">重庆建筑（2018）</h5><p class="card-text">符合渝建[2018]200号文</p>
+          </div>
+          <div class="autoHeightL5 " style="overflow: auto;">
+            <div class="px-3">
+              <div class="row" id="version-area">
+                <div class="col-6 mb-4">
+                  <div class="card card-block mb-4">
+                      <div class="card-body"><h5 class="card-title">重庆建筑（2018）</h5><p class="card-text">符合渝建[2018]200号文</p></div>
                     </div>
-                  </div>
                 </div>
-                <div class="col-6 mb-2">
-                  <div class="card card-block mb-4 mr-3">
-                    <div class="card-body">
-                      <div class="float-right"><a class="btn btn-primary btn-sm" href="#">开始使用</a></div>
-                      <h5 class="card-title">江西建筑（2017）</h5><p class="card-text">符合赣建价[2017]7号文</p>
+                <div class="col-6 mb-4">
+                  <div class="card card-block mb-4">
+                      <div class="card-body"><h5 class="card-title">江西建筑（2017）</h5><p class="card-text">符合赣建价[2017]7号文</p></div>
                     </div>
-                  </div>
                 </div>
               </div>
             </div>
@@ -400,7 +364,7 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body ml-2 mr-2">
+          <div class="modal-body">
             <p><i class="text-danger fa fa-exclamation-triangle"></i> 您的通行帐号未绑定手机号，请先验证手机号进行绑定。</p>
             <form>
               <div class="form-group row">

software-index1.html

@@ -297,7 +297,7 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body ml-2 mr-2">
+          <div class="modal-body">
             <form>
               <div class="form-group row">
                  <label for="" class="col-sm-3 col-form-label"><span class="text-danger">*</span>&nbsp;&nbsp;真实姓名</label>
@@ -381,7 +381,7 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body ml-2 mr-2">
+          <div class="modal-body">
             <div class="text-right"><a href="#">修改信息</a></div>
             <form>
               <div class="form-group row">

software-list.html

@@ -154,8 +154,8 @@
       </div>
       <div class="software-wrap">
         <div class="software-wrapscroll autoHeightL1">
-          <!-- <div class="freewrap mt-3">
-            <div class="free-title"><img src="images/mainlogo.png" class="mr-2">纵横造价免费网络版</div>
+          <div class="freewrap mt-3">
+            <!-- <div class="free-title"><img src="images/mainlogo.png" class="mr-2">纵横造价免费网络版</div> -->
              <div class="pt-3">
               <div class="row">
                 <div class="col-6">
@@ -186,8 +186,8 @@
                 </div>
               </div>
              </div>
-          </div> -->
-          <div class="software-list mt-3">
+          </div>
+          <div class="software-list">
             <a href="software-details.html">
               <div class="media">
                 <img class="mr-3" src="images/product01.png" width="40" height="40" alt="公路造价（增值税）">

software-train-details.html

@@ -434,8 +434,8 @@
     </div>
 
     <!-- 登录 -->
-    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" id="enrol" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-      <div class="modal-dialog modal-lg" role="document">
+    <div class="modal" tabindex="-1" role="dialog" id="enrol" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">报名方式</h5>
@@ -443,7 +443,7 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body ml-2 mr-2">
+          <div class="modal-body">
             <div class="alert alert-danger" role="alert">
               该培训班已经正在火热进行中。
             </div>