动画调整

css/styles.css

@@ -1,164 +1,195 @@
 @charset "utf-8";
-body{
+* {
+	scrollbar-width: thin;
+	scrollbar-track-color: transparent;
+}
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	min-width: 50px;
+	min-height: 50px;
+	background-color: #c1c1c1;
+	border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(0, 0, 0, 0.46);
+}
+
+html,
+body {
+	width: 100%;
+	height: 100%;
+}
+body {
+	padding: 0;
+	margin: 0;
+	font-weight: normal;
+	font-style: normal;
+	font-size: 12px;
+	font-family: "微软雅黑", "Tahoma";
+	vertical-align: baseline;
+	text-align: justify;
+	word-wrap: break-word;
+	text-justify: inter-ideograph;
+	color: #000000cc;
+}
+.navBody {
+	background: rgba(33, 33, 41, 1);
+	height: 36px;
+	color: #fff;
+}
+.globalNav a {
+	float: left;
+	height: 36px;
+	line-height: 36px;
+	padding: 0 10px;
+	color: #eee;
+	position: relative;
+	cursor: pointer;
+}
+.globalNav a:hover {
+	background: #666e70;
+	color: #fff;
+	text-decoration: none;
+}
+.globalNav a.now {
+	background: #008fff;
+	color: #fff;
+	font-weight: 600;
+}
+.globalNav .zhzd {
+	float: left;
+	height: 36px;
+	position: relative;
+	z-index: 999;
+}
+.globalNav .zhzd a b {
+	border-color: #ffddc9 transparent transparent;
+	border-right: 3px dashed transparent;
+	border-style: solid dashed dashed;
+	border-width: 3px 3px 0;
+	display: inline-block;
+	font-size: 0;
+	height: 0;
+	line-height: 0;
+	width: 0;
+	position: relative;
+	top: -1px;
+	left: 4px;
+}
+.globalNav .zhzd .zhzdMenu {
+	position: absolute;
+	left: 0;
+	top: 29px;
+	background: #fff;
+	border: 1px solid #ccc;
+	border-top: none;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	z-index: 0;
+	display: none;
+}
+.globalNav .zhzd .zhzdMenu a {
+	width: 100%;
 	padding: 0;
-  margin: 0;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 12px;
-  font-family:"微软雅黑","Tahoma";
-  vertical-align: baseline;
-  text-align:justify;
-  word-wrap:break-word;
-  text-justify:inter-ideograph;
-  color: #000000cc;
-}
-.navBody{
-  background: rgba(33, 33, 41, 1);
-  height: 36px;
-  color: #fff;
-}
-.globalNav a{
-  float:left;
-  height:36px;
-  line-height:36px;
-  padding:0 10px;
-  color:#eee;
-  position: relative;
-  cursor: pointer
-}
-.globalNav a:hover{
-  background:#666E70;
-  color:#fff;
-  text-decoration: none;
-}
-.globalNav a.now{
-  background:#008FFF;
-  color:#fff;
-  font-weight:600
-}
-.globalNav .zhzd{
-  float:left;
-  height:36px;
-  position: relative;
-  z-index:999
-}
-.globalNav .zhzd a b{
-  border-color: #FFDDC9 transparent transparent;
-  border-right: 3px dashed transparent;
-  border-style: solid dashed dashed;
-  border-width: 3px 3px 0;
-  display: inline-block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  width: 0;
-  position: relative;
-  top:-1px;
-  left:4px
-}
-.globalNav .zhzd .zhzdMenu{
-  position: absolute;
-  left:0;
-  top:29px;
-  background:#fff;
-  border:1px solid #ccc;
-  border-top:none;
-  box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 0;
-  display:none
-}
-.globalNav .zhzd .zhzdMenu a{
-  width:100%;
-  padding:0;
-  text-align:center;
-  color:#3366cc
-}
-.globalNav .zhzd .zhzdMenu a:hover{
-  background:#f2f2f2
-}
-.globalNav .zhzd a.now{
-  background:#fff;
-  border:1px solid #ccc;
-  border-bottom:none;
-  border-top:none;
-  color:#3366cc;
-  z-index:10
-}
-.width1200{
-  max-width: 1200px;
-  margin: 0 auto;
-}
-.logoCon{
+	text-align: center;
+	color: #3366cc;
+}
+.globalNav .zhzd .zhzdMenu a:hover {
+	background: #f2f2f2;
+}
+.globalNav .zhzd a.now {
+	background: #fff;
+	border: 1px solid #ccc;
+	border-bottom: none;
+	border-top: none;
+	color: #3366cc;
+	z-index: 10;
+}
+.width1200 {
+	max-width: 1200px;
+	margin: 0 auto;
+}
+.logoCon {
 	width: 100%;
 	height: 60px;
 	background: #fff;
 	box-shadow: 0px -1px #0000001a inset;
 }
-.logo,.buttonCon{
+.logo,
+.buttonCon {
 	height: 60px;
-	display:table;
-	text-align:center;
+	display: table;
+	text-align: center;
 }
-.btn-login{
+.btn-login {
 	background: rgba(47, 84, 235, 1);
 }
-.logoText{
+.logoText {
 	padding-left: 10px;
 	font-weight: 500;
 	font-size: 24px;
 }
-.table-cell{
+.table-cell {
 	display: table-cell;
 	vertical-align: middle;
 }
-.btnText{
+.btnText {
 	padding-right: 10px;
 	font-size: 16px;
 	font-weight: 500;
 }
-.bannerBox{
-	height: 900px;
+.bannerBox {
+	/* height: 900px; */
+	height: calc(100% - 96px);
 	background: rgba(245, 247, 253, 1);
 }
-.banner{
+.banner {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	max-height: 950px;
+	/* max-height: 950px; */
 	/*background: url(img/image_banner_01.png) no-repeat right -110px;*/
 }
-.banner .lottie{
-  position: relative;
-  z-index: 50;
-  width: 100%;
-  height: 100%;
+.banner .lottie {
+	position: relative;
+	z-index: 50;
+	width: 100%;
+	height: calc(100% - 83px);
 }
-.bannerTitleBox{
+.bannerTitleBox {
 	position: absolute;
 	top: 30%;
 	z-index: 60;
 }
-.bannerTitle{
+.bannerTitle {
 	font-size: 64px;
 	font-weight: 600;
 }
-.bannerTitle1{
+.bannerTitle1 {
 	color: rgba(47, 84, 235, 1);
 	/*transition: all 0.4s ease-in 0s;
   transform: translateX(-400px);*/
 }
-.bannerTitle2{
+.bannerTitle2 {
 	color: rgba(0, 0, 0, 0.8);
 	/*transition: all 0.8s ease-in 0s;
   transform: translateX(-600px);*/
 }
-.bannerTitle3{
+.bannerTitle3 {
 	color: rgba(0, 0, 0, 0.5);
 	font-size: 24px;
 	/*transition: all 1.2s ease-in 0s;
   transform: translateX(-600px);*/
 }
-.btnHand{
+.btnHand {
 	font-size: 24px;
 	font-weight: 500;
 	padding: 16px 32px;
@@ -166,235 +197,254 @@ body{
 	/*transition: all 1.6s ease-in 0s;
   transform: translateX(-400px);*/
 }
-.moreBox{
-	position: absolute;
+.moreBox {
+	height: 83px;
 }
-.moreBox h4{
+.moreBox h4 {
 	font-size: 14px;
 	color: rgba(47, 84, 235, 1);
 }
-.moreBox .iconMore{
+.moreBox .iconMore {
 	width: 32px;
 	height: 54px;
 	background: url(img/css_sprites.png) no-repeat -80px -1078px;
 }
-.slogan{
+.slogan {
 	height: 320px;
 	text-align: center;
 	background: #00000099 url(img/image_banner_02.png) no-repeat;
 	color: #fff;
 }
-.sloganSmall{
+.sloganSmall {
 	padding-top: 100px;
 	font-size: 18px;
 	color: #ffffffcc;
 }
-.sloganBig{
+.sloganBig {
 	padding-top: 30px;
 	font-size: 48px;
 }
-.sloganBig .blueBg{
+.sloganBig .blueBg {
 	background: #2f54eb;
 	border-radius: 8px;
 	margin: 0 8px;
 	padding: 3px 12px;
 }
-.videoListCon{
+.videoListCon {
 	padding: 120px 0;
 	background: #f5f7fd;
 }
-.videoLeft{
+.videoLeft {
 	max-width: 843px;
 	height: 474px;
 	/*background: #000 url(img/image_video_cover_07.png) no-repeat;*/
 }
-.videoRight{
+.videoRight {
 	max-width: 357px;
 	height: 474px;
 }
-.videoRight .vjs-playlist{
+.videoRight .vjs-playlist {
 	height: 474px;
 	overflow-y: auto;
 }
-.videoRight ul li{
+.videoRight ul li {
 	width: 280px;
 	list-style-type: none;
 	padding: 0;
 	margin: 0 0 20px 0;
 }
-.videoList img{
+.videoList img {
 	width: 130px;
 	height: 72px;
 }
-.videoList .videoImg{
+.videoList .videoImg {
 }
-.videoList .videoTitle{
+.videoList .videoTitle {
 	font-size: 14px;
 	font-weight: 500px;
 	line-height: 20px;
 }
-.videoList .textRrey{
+.videoList .textRrey {
 	color: #00000099;
 }
-.productCon{
+.productCon {
 	margin: 120px 0 0 0;
 }
-.bigtTitle h4{
+.bigtTitle h4 {
 	font-size: 48px;
 	font-weight: 500;
 }
-.bigtTitle span{
+.bigtTitle span {
 	font-size: 18px;
 }
-.productList{
+.productList {
 	padding: 48px 48px 0 48px;
 }
-.productLine{
+.productLine {
 	/*border-left: 2px solid rgba(0, 0, 0, 0.1);*/
 }
-.product{
-	position: relative;	
+.product {
+	position: relative;
 }
-.productOne{
+.productOne {
 	height: 800px !important;
 }
-.productOne,.productTwo{
+.productOne,
+.productTwo {
 	height: 730px;
 	border-left: 2px solid rgba(0, 0, 0, 0.1);
 }
-.productThree{
+.productThree {
 	height: 700px;
 }
-.productIco{
+.productIco {
 	position: absolute;
 	top: -5px;
 	left: -24px;
 	width: 48px;
 	height: 48px;
 }
-.productOneIco{
+.productOneIco {
 	background: url(img/css_sprites.png) no-repeat -113px -1068px;
 }
-.productTwoIco{
+.productTwoIco {
 	background: url(img/css_sprites.png) no-repeat -160px -1068px;
 }
-.productThreeIco{
+.productThreeIco {
 	background: url(img/css_sprites.png) no-repeat 0px -1148px;
 }
-.prodectLeftTitle{
+.prodectLeftTitle {
 	margin: 0 0 0 35px;
 }
-.prodectLeftTitle h3{
+.prodectLeftTitle h3 {
 	font-size: 36px;
 	line-height: 48px;
 }
-.prodectLeftTitle .productText{
+.prodectLeftTitle .productText {
 	font-size: 18px;
 	line-height: 35px;
 }
-.productImg{
+.productImg {
 	width: 224px;
 	height: 224px;
 }
-.show{
-  transform: translateY(0px) !important;
-  opacity:1 !important;
+.show {
+	transform: translateY(0px) !important;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
+	opacity: 1 !important;
 }
-.hiddenTranX1{
-	opacity:0;
-  transition: all 0.8s ease-in 0s;
-  transform: translateX(-200px);
+.hiddenTranX1 {
+	opacity: 0;
+	transition: all 0.8s ease-in 0s;
+	transform: translateX(-200px);
 }
-.hiddenTranX2{
-	opacity:0;
-  transition: all 0.8s ease-in 0s;
-  transform: translateX(200px);
+.hiddenTranX2 {
+	opacity: 0;
+	transition: all 0.8s ease-in 0s;
+	transform: translateX(200px);
 }
-.hiddenTranY1{
-	opacity:0;
-  transition: all 0.8s ease-in 0s;
-  transform: translateY(-200px);
+.hiddenTranY1 {
+	opacity: 0;
+	transition: all 0.8s ease-in 0s;
+	transform: translateY(-200px);
 }
-.hiddenTranY2{
-	opacity:0;
-  transition: all 0.8s ease-in 0s;
-  transform: translateX(200px);
+.hiddenTranY2 {
+	opacity: 0;
+	transition: all 0.8s ease-in 0s;
+	transform: translateX(200px);
 }
-.productOneImg{
+.productOneImg {
 	/*background: url(img/css_sprites.png) no-repeat 0 0;*/
-  /*transition-delay: 0.2s;*/
+	/*transition-delay: 0.2s;*/
 }
-#productOneImg,#productTwoImg,#productThreeImg{
+#productOneImg,
+#productTwoImg,
+#productThreeImg {
 	position: relative;
-  z-index: 50;
-  width: 100%;
-  height: 100%;
+	z-index: 50;
+	width: 100%;
+	height: 100%;
 }
-.productTwoImg{
+.productTwoImg {
 	/*background: url(img/css_sprites.png) no-repeat 0 -224px;
 	transition-delay: 0.2s;*/
 }
-.productThreeImg{
+.productThreeImg {
 	/*background: url(img/css_sprites.png) no-repeat 0 -448px;
 	transition-delay: 0.8s;*/
 }
-.productRImg{
+.productRImg {
 	position: absolute;
 	top: 0;
 	left: 0;
 }
-.productOneRImg{
+.productOneRImg {
 	width: 843px;
 	height: 600px;
 	background: url(img/image_cpgn_0103_bg.png) no-repeat;
-  transition-delay: 0.2s;
+	transition-delay: 0.2s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 }
-.productTwoRImg1{
+.productTwoRImg1 {
 	width: 790px;
 	height: 560px;
 	background: url(img/image_cpgn_02_01.png) no-repeat;
 	/*box-shadow: -20px -20px 40px -15px rgba(0, 0, 0, 0.24);*/
 	transition-delay: 0.2s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 	transform: translateX(200px);
 }
-.productTwoRImg2{
+.productTwoRImg2 {
 	top: 64px;
 	left: 95px;
 	width: 695px;
 	height: 496px;
 	background: url(img/image_cpgn_02_02.png) no-repeat;
 	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
-	transition-delay: 1.2s;
+	transition-delay: 0.4s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 	transform: translateX(600px);
 }
-.productTwoRImg3{
+.productTwoRImg3 {
 	top: 180px;
 	left: 190px;
 	width: 600px;
 	height: 380px;
 	background: url(img/image_cpgn_02_03.png) no-repeat;
 	box-shadow: -20px -20px 40px -10px rgba(0, 0, 0, 0.24);
-	transition-delay: 1.8s;
+	transition-delay: 0.6s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 	transform: translateX(600px);
 	/*box-shadow: 0px 13.3px 53.3px rgba(0, 0, 0, 0.24);*/
 }
-.productThreeRImg1{
+.productThreeRImg1 {
 	width: 843px;
 	height: 600px;
 	background: url(img/image_cpgn_0103_bg.png) no-repeat;
-	transition-delay: 0.4s;
+	transition-delay: 0.2s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 }
-.productThreeRImg2{
+.productThreeRImg2 {
 	top: 107px;
 	left: 171px;
 	width: 502px;
 	height: 386px;
 	background: url(img/iamge_cpgn_03.png) no-repeat;
 	box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.24);
-	transition-delay: 0.8s;
+	transition-delay: 0.4s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 }
-.productRT{
+.productRT {
 	transition-delay: 0.4s;
+	-webkit-transition-timing-function: ease-in-out;
+	transition-timing-function: ease-in-out;
 }
 /*.productOneR1{
   transition-delay: 0.4s;
@@ -414,7 +464,7 @@ body{
 .productOneR6{
   transition-delay: 1.4s;
 }*/
-.productRT{
+.productRT {
 	position: absolute;
 	top: 120px;
 	left: 180px;
@@ -423,15 +473,15 @@ body{
 	background: rgba(255, 255, 255, 1);
 	border-radius: 8px;
 }
-.productRT h4{
+.productRT h4 {
 	text-align: center;
 	font-size: 18px;
 }
-.productRT ul{
+.productRT ul {
 	padding-top: 2.5rem;
 	padding-left: 1.8rem;
 }
-.productRT ul li{
+.productRT ul li {
 	float: left;
 	list-style-type: none;
 	width: 140px;
@@ -439,143 +489,143 @@ body{
 	text-align: center;
 	padding: 20px 0;
 }
-.productRLImg{
+.productRLImg {
 	margin: 0 auto;
 }
-.productOneRLImg1{
+.productOneRLImg1 {
 	width: 48px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat -48px -1152px;
 }
-.productOneRLImg2{
+.productOneRLImg2 {
 	width: 48px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat -193px -1152px;
 }
-.productOneRLImg3{
+.productOneRLImg3 {
 	width: 48px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat -144px -1152px;
 }
-.productOneRLImg4{
+.productOneRLImg4 {
 	width: 48px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat -96px -1152px;
 }
-.productOneRLImg5{
+.productOneRLImg5 {
 	width: 48px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat 0px -1194px;
 }
-.productOneRLImg6{
+.productOneRLImg6 {
 	width: 140px;
 	height: 48px;
 	background: url(img/css_sprites.png) no-repeat -48px -1200px;
 }
-.productRight{
+.productRight {
 	width: 100%;
 	height: 730px;
 	overflow: hidden;
 }
-.classify{
+.classify {
 	padding: 120px 0 120px 0;
 	background: rgba(245, 247, 253, 1);
 }
-.classifyList ul li{
+.classifyList ul li {
 	float: left;
 	list-style-type: none;
 	width: 275px;
 	height: 275px;
 	border-radius: 24px;
 	text-align: center;
-	background: #fff;	
+	background: #fff;
 }
-.classifyImg{
-	margin:80px 0 0 0;
+.classifyImg {
+	margin: 80px 0 0 0;
 	width: 80px;
 	height: 80px;
 }
-.classifyImg1{
+.classifyImg1 {
 	background: url(img/css_sprites.png) no-repeat -80px -835px;
 }
-.classifyImg2{
+.classifyImg2 {
 	background: url(img/css_sprites.png) no-repeat -80px -672px;
 }
-.classifyImg3{
+.classifyImg3 {
 	background: url(img/css_sprites.png) no-repeat 0px -752px;
 }
-.classifyImg4{
+.classifyImg4 {
 	background: url(img/css_sprites.png) no-repeat -80px -990px;
 }
-.classifyImg5{
+.classifyImg5 {
 	background: url(img/css_sprites.png) no-repeat -160px -915px;
 }
-.classifyImg6{
+.classifyImg6 {
 	background: url(img/css_sprites.png) no-repeat 0px -1073px;
 }
-.classifyImg7{
+.classifyImg7 {
 	background: url(img/css_sprites.png) no-repeat 0px -915px;
 }
-.classifyImg8{
+.classifyImg8 {
 	background: url(img/css_sprites.png) no-repeat -160px -752px;
 }
-.classifyList ul li:hover h4{
+.classifyList ul li:hover h4 {
 	color: rgba(47, 84, 235, 1);
 }
-.classifyList ul li:hover .classifyImg1{
+.classifyList ul li:hover .classifyImg1 {
 	background: url(img/css_sprites.png) no-repeat 0px -835px;
 }
-.classifyList ul li:hover .classifyImg2{
+.classifyList ul li:hover .classifyImg2 {
 	background: url(img/css_sprites.png) no-repeat 0px -672px;
 }
-.classifyList ul li:hover .classifyImg3{
+.classifyList ul li:hover .classifyImg3 {
 	background: url(img/css_sprites.png) no-repeat -160px -672px;
 }
-.classifyList ul li:hover .classifyImg4{
+.classifyList ul li:hover .classifyImg4 {
 	background: url(img/css_sprites.png) no-repeat 0px -990px;
 }
-.classifyList ul li:hover .classifyImg5{
+.classifyList ul li:hover .classifyImg5 {
 	background: url(img/css_sprites.png) no-repeat -80px -915px;
 }
-.classifyList ul li:hover .classifyImg6{
+.classifyList ul li:hover .classifyImg6 {
 	background: url(img/css_sprites.png) no-repeat -160px -993px;
 }
-.classifyList ul li:hover .classifyImg7{
+.classifyList ul li:hover .classifyImg7 {
 	background: url(img/css_sprites.png) no-repeat -160px -835px;
 }
-.classifyList ul li:hover .classifyImg8{
+.classifyList ul li:hover .classifyImg8 {
 	background: url(img/css_sprites.png) no-repeat -80px -752px;
 }
-.classifyList h4{
+.classifyList h4 {
 	font-size: 24px;
 	color: rgba(155, 162, 204, 1);
 }
-.version{
-	margin:120px 0 120px 0;
+.version {
+	margin: 120px 0 120px 0;
 }
-.versionTable{
+.versionTable {
 	margin-top: 65px;
 }
-.versionTableItem{
+.versionTableItem {
 	height: 75px;
 	color: #fff;
-	border-radius: 24px 24px 0 0
+	border-radius: 24px 24px 0 0;
 }
-.versionBgYellow{
+.versionBgYellow {
 	background: rgba(250, 173, 20, 1);
 }
-.versionBgBlue{
+.versionBgBlue {
 	background: rgba(47, 84, 235, 1);
 }
-.versionBigtitle{
+.versionBigtitle {
 	padding-top: 7px;
 	font-size: 24px;
 	font-weight: 600;
 }
-.versionMeta{
+.versionMeta {
 	font-size: 16px;
 }
-.versionTableTd{
+.versionTableTd {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -585,60 +635,60 @@ body{
 /*.versionTableItemW, .versionTableBodyW{
 	width: 280px;
 }*/
-.versionTableTdBig{
+.versionTableTdBig {
 	font-size: 18px;
 	font-weight: 600;
 }
-.versionTableBodyBox{
+.versionTableBodyBox {
 	border-radius: 0 0 24px 24px;
 	padding: 0 0 30px 0;
 	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
 }
-.iconWidth{
+.iconWidth {
 	display: inline-block;
 	width: 24px;
 	height: 24px;
 }
-.iconVersion{
+.iconVersion {
 	background: url(img/css_sprites.png) no-repeat -200px -1126px;
 }
-.iconCorrect{
+.iconCorrect {
 	background: url(img/css_sprites.png) no-repeat -210px -1090px;
 }
-.iconWrong{
+.iconWrong {
 	background: url(img/css_sprites.png) no-repeat -83px -1125px;
 }
-.iconPhone{
+.iconPhone {
 	background: url(img/css_sprites.png) no-repeat -106px -1124px;
 }
-.iconQQ{
+.iconQQ {
 	background: url(img/css_sprites.png) no-repeat -153px -1124px;
 }
-.bottomBox{
+.bottomBox {
 	width: 100%;
 	text-align: center;
 	padding: 80px 0 20px 0;
 	background: rgba(5, 13, 22, 1);
 	color: #fff;
 }
-.bottomItem{
+.bottomItem {
 	text-align: left;
 }
-.bottomItem h4{
+.bottomItem h4 {
 	font-size: 18px;
 }
-.bottomList{
-	padding:0;
+.bottomList {
+	padding: 0;
 }
-.bottomList .phone{
+.bottomList .phone {
 	font-size: 16px;
 	color: rgba(255, 255, 255, 1);
 }
-.bottomList img{
+.bottomList img {
 	width: 160px;
 	height: 160px;
 }
-.bottomList li{
+.bottomList li {
 	font-size: 16px;
 	list-style-type: none;
 	display: flex;
@@ -648,13 +698,13 @@ body{
 	padding: 10px 0;
 	color: rgba(255, 255, 255, 0.6);
 }
-.bottomList li a{
+.bottomList li a {
 	color: rgba(255, 255, 255, 0.6);
 }
-.bottomList li a:hover{
+.bottomList li a:hover {
 	color: rgba(255, 255, 255, 1);
 }
-.backTop{
+.backTop {
 	display: none;
 	position: fixed;
 	bottom: 150px;
@@ -666,19 +716,19 @@ body{
 	height: 76px;
 	cursor: pointer;
 }
-.backTopBox{
+.backTopBox {
 	width: 76px;
 	height: 76px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
-.backTop:hover{
+.backTop:hover {
 	background: rgba(30, 67, 222, 1);
 }
-.iconImgBox{
+.iconImgBox {
 	text-align: center;
 }
-.iconTop{
+.iconTop {
 	background: url(img/css_sprites.png) no-repeat -208px -1072px;
-}
+}

index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -10,13 +11,14 @@
   <link rel="stylesheet" href="css/video.css">
   <link rel="shortcut icon" href="css/favicon.ico">
 </head>
+
 <body>
   <div class="navBody">
     <div class="width1200">
       <div class="globalNav">
         <a href="#">首页</a>
-        <a href="https://sso.smartcost.com.cn/" target="_blank">通行帐号</a>
-        <a href="http://jsjs.smartcost.com.cn/" target="_blank">计量支付</a>
+        <a href="#">通行帐号</a>
+        <a href="#">计量支付</a>
         <div class="zhzd">
           <a class="zhzdFir">纵横知道<b></b></a>
           <div class="zhzdMenu">
@@ -36,7 +38,7 @@
           <span class="table-cell logoText">大司空云计价</span>
         </div>
         <div class="buttonCon">
-          <span class="table-cell"><a href="/login" class="btn btn-primary btn-login">登录平台</a></span>
+          <span class="table-cell"><button type="button" class="btn btn-primary btn-login">登录平台</button></span>
           <!-- <span class="table-cell btnText">登录平台</span> -->
           <!-- <span class="table-cell"><button type="button" class="btn btn-primary">注册帐号</button></span> -->
         </div>
@@ -44,19 +46,17 @@
     </div>
   </div>
   <div class="bannerBox">
-    <div class="width1200">
-      <div class="banner">
-        <div class="lottie" id="lottie"></div>
-        <div class="bannerTitleBox">
-          <div class="bannerTitle bannerTitle1">云上协同</div>
-          <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
-          <div class="bannerTitle3 mt-4">市政建筑计价免费版 永久免费</div>
-          <div class="mt-4"><a href="/login" class="btn btn-primary btnHand">立即体验</a></div>
-        </div>
-        <div class="w-100 text-center moreBox">
-          <h4>查看更多</h4>
-          <div><i class="iconWidth iconMore"></i></div>
-        </div>
+    <div class="banner width1200">
+      <div class="lottie" id="lottie"></div>
+      <div class="bannerTitleBox">
+        <div class="bannerTitle bannerTitle1">云上协同</div>
+        <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
+        <div class="bannerTitle3 mt-4">市政建筑计价免费版 永久免费</div>
+        <div class="mt-4"><a href="" class="btn btn-primary btnHand">立即体验</a></div>
+      </div>
+      <div class="w-100 text-center moreBox">
+        <h4>查看更多</h4>
+        <div><i class="iconWidth iconMore"></i></div>
       </div>
     </div>
   </div>
@@ -70,7 +70,9 @@
     <div class="width1200">
       <div class="d-flex justify-content-center">
         <div class="videoLeft">
-          <video id="example" class="video-js vjs-default-skin vjs-big-play-centered vjs-v7 vjs-user-active" playsinline webkit-playsinline autoplay controls preload="auto" width="845px" height="475px" data-setup='{"techOrder": ["html5","flash"]}'></video>
+          <video id="example" class="video-js vjs-default-skin vjs-big-play-centered vjs-v7 vjs-user-active" playsinline
+            webkit-playsinline autoplay controls preload="auto" width="845px" height="475px"
+            data-setup='{"techOrder": ["html5","flash"]}'></video>
         </div>
         <div class="videoRight ml-4">
           <div class="vjs-playlist playlist-container"></div>
@@ -244,36 +246,68 @@
       <div class="classifyList mt-4">
         <ul class="clearfix">
           <li class="mr-3 mb-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg1"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">市政</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg1"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">市政</h4>
+            </div>
           </li>
           <li class="mr-3 mb-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg2"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">房建</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg2"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">房建</h4>
+            </div>
           </li>
           <li class="mr-3 mb-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg3"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">轨道</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg3"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">轨道</h4>
+            </div>
           </li>
           <li class="mb-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg4"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">综合管廊</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg4"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">综合管廊</h4>
+            </div>
           </li>
           <li class="mr-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg5"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">园林绿化</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg5"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">园林绿化</h4>
+            </div>
           </li>
           <li class="mr-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg6"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">装配式建筑</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg6"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">装配式建筑</h4>
+            </div>
           </li>
           <li class="mr-3">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg7"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">通用安装</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg7"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">通用安装</h4>
+            </div>
           </li>
           <li class="">
-            <div class="d-flex justify-content-center"><div class="classifyImg classifyImg8"></div></div>
-            <div class="d-flex justify-content-center"><h4 class="mt-3">构筑物</h4></div>
+            <div class="d-flex justify-content-center">
+              <div class="classifyImg classifyImg8"></div>
+            </div>
+            <div class="d-flex justify-content-center">
+              <h4 class="mt-3">构筑物</h4>
+            </div>
           </li>
         </ul>
       </div>
@@ -298,7 +332,7 @@
           </div>
           <div class="col-1 px-0"></div>
           <div class="col-3 px-0">
-             <div class="versionTableItem versionTableItemW versionBgBlue">
+            <div class="versionTableItem versionTableItemW versionBgBlue">
               <div class="d-flex justify-content-center versionBigtitle">企业版</div>
               <div class="d-flex justify-content-center versionMeta">企业专属</div>
             </div>
@@ -313,7 +347,8 @@
               <div class="versionTableTd"><i class="iconWidth"></i>造价分析</div>
               <div class="versionTableTd bg-light"><i class="iconWidth"></i>呈现选项</div>
               <div class="versionTableTd"><i class="iconWidth"></i>编制说明</div>
-              <div class="versionTableTd versionTableTdBig bg-light"><i class="iconWidth iconVersion mr-2"></i>工程信息</div>
+              <div class="versionTableTd versionTableTdBig bg-light"><i class="iconWidth iconVersion mr-2"></i>工程信息
+              </div>
               <div class="versionTableTd"><i class="iconWidth"></i>工程特征</div>
               <div class="versionTableTd bg-light"><i class="iconWidth"></i>造价分析</div>
               <div class="versionTableTd"><i class="iconWidth"></i>呈现选项</div>
@@ -376,7 +411,7 @@
               <li><a href="https://smartcost.com.cn/product/25" target="_blank">广东公路造价</a></li>
               <li><a href="https://smartcost.com.cn/product/19" target="_blank">计量支付结算决算</a></li>
               <!-- <li><a href="#">大司空市政建筑云计价</a></li> -->
-              <li><a href="https://smartcost.com.cn/product/23 target="_blank"">养护造价</a></li>
+              <li><a href="https://smartcost.com.cn/product/23 target=" _blank"">养护造价</a></li>
               <li><a href="https://yhyun.smartcost.com.cn" target="_blank">养护造价云版</a></li>
               <li><a href="https://smartcost.com.cn/product/20" target="_blank">固化清单</a></li>
               <li><a href="https://smartcost.com.cn/product/27" target="_blank">公路算量</a></li>
@@ -444,43 +479,43 @@
   <script src="js/global.js"></script>
   <script src="js/videojs/video.js"></script>
   <script src="js/videojs-playlist/videojs-playlist.js"></script>
-  <script src="js/videojs-playlist/videojs-playlist-ui.js" ></script>
-  <script src="js/videojs-flash/videojs-flash.js" ></script>
+  <script src="js/videojs-playlist/videojs-playlist-ui.js"></script>
+  <script src="js/videojs-flash/videojs-flash.js"></script>
   <!-- <script src="lang/zh-CN.js"></script> -->
   <script src="js/videoList.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.8.1/lottie.min.js"></script>
   <script type="text/javascript">
     var elem = document.getElementById('lottie');
     lottie.loadAnimation({
-      container:elem,
-      renderer:'svg',
-      loop:true,
-      autoplay:true,
-      path:'https://assets1.lottiefiles.com/packages/lf20_q8xfghcu.json',
+      container: elem,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'https://assets1.lottiefiles.com/packages/lf20_q8xfghcu.json',
     });
     var productOneImg = document.getElementById('productOneImg');
     lottie.loadAnimation({
-      container:productOneImg,
-      renderer:'svg',
-      loop:true,
-      autoplay:true,
-      path:'https://assets5.lottiefiles.com/packages/lf20_hc8k4ulx.json',
+      container: productOneImg,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'https://assets5.lottiefiles.com/packages/lf20_hc8k4ulx.json',
     });
     var productTwoImg = document.getElementById('productTwoImg');
     lottie.loadAnimation({
-      container:productTwoImg,
-      renderer:'svg',
-      loop:true,
-      autoplay:true,
-      path:'https://assets9.lottiefiles.com/packages/lf20_cmwdfuj4.json',
+      container: productTwoImg,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'https://assets9.lottiefiles.com/packages/lf20_cmwdfuj4.json',
     });
     var productThreeImg = document.getElementById('productThreeImg');
     lottie.loadAnimation({
-      container:productThreeImg,
-      renderer:'svg',
-      loop:true,
-      autoplay:true,
-      path:'https://assets3.lottiefiles.com/packages/lf20_e1rwkapo.json',
+      container: productThreeImg,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'https://assets3.lottiefiles.com/packages/lf20_e1rwkapo.json',
     });
     function topFunction() {
       document.body.scrollTop = 0;