|
@@ -1,82 +1,204 @@
|
|
|
-button{background:transparent;}
|
|
|
-html,body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- font-family: "Microsoft YaHei";
|
|
|
- margin:0px;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-body{ overflow-y:scroll; -webkit-overflow-scrolling:touch;}
|
|
|
-.wrapper{width: 64%;height: 100%;margin: 0 auto; padding-top: 100px;}
|
|
|
-.contioner{ overflow: hidden;}
|
|
|
-.wrap-img, .wrap-video, .wrap-model{ background: rgba(0,0,0,0.8); width: 100%; height: 100%; display: none; display: flex; justify-content: center; align-items: center;}
|
|
|
-.wrap-img img{ max-width: 100%; max-height: 100%; }
|
|
|
-.wrap-img > div, .wrap-video > video, .wrap-model > div{width: 100%; height: 100%;}
|
|
|
-.footer-title{ display: flex; justify-content: space-between; margin-top: 20px; }
|
|
|
-.footer-text{margin-top: 20px;}
|
|
|
-.footer-title h3 { font-size: 20px; color: #fff; font-weight: 600;}
|
|
|
-.wrap-iframe{ height: 100%; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
|
|
|
-.wrap-iframe iframe, .wrap-model iframe { width: 100%; height: 99%;}
|
|
|
-.footer-btn button{ font-size: 14px; color: #fff; width: 90px; height: 32px; line-height: 32px; cursor: pointer; border-radius: 10px; border: solid 1px #fff; margin-right: 10px; }
|
|
|
-.footer-btn button.active{background: #19bbed; border: none;}
|
|
|
-.footer-text{ color: #fff; line-height: 120%; position: relative; text-align: justify;}
|
|
|
-.img-icon{background: url("https://super.4dage.com/data/388/hot/images/img-icon.png")no-repeat left top;}
|
|
|
-.video-icon{background: url("https://super.4dage.com/data/388/hot/images/video-icon.png")no-repeat left top;}
|
|
|
-.model-icon{background: url("https://super.4dage.com/data/388/hot/images/model-icon.png")no-repeat left top;}
|
|
|
-.iframe-icon{background: url("https://super.4dage.com/data/388/hot/images/iframe-icon.png")no-repeat left top;}
|
|
|
-.footer-btn i{ display: inline-block; position: relative; top: 4px; background-size: 100%; width: 18px; position: relative; height: 18px; margin-right: 5px;}
|
|
|
- .footer-mask{position: absolute;/* background: linear-gradient(rgba(61,61,61,0) 0%, rgba(61,61,61,0.9) 40%, rgba(61,61,61,1) 60%,rgba(61,61,61,0) 100%);*/ z-index: 10;bottom: -16px;left: 0;width: 100%;height: 50%;}
|
|
|
+button {
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+html, body {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-family: "Microsoft YaHei";
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+body {
|
|
|
+ overflow-y: scroll;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+}
|
|
|
+.wrapper {
|
|
|
+ width: 64%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 100px;
|
|
|
+}
|
|
|
+.contioner {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.wrap-img, .wrap-video, .wrap-model {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.wrap-img img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+}
|
|
|
+.wrap-img > div, .wrap-video > video, .wrap-model > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.footer-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.footer-text {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.footer-title h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.wrap-iframe {
|
|
|
+ height: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+}
|
|
|
+.wrap-iframe iframe, .wrap-model iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 99%;
|
|
|
+}
|
|
|
+.footer-btn button {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: solid 1px #fff;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.footer-btn button.active {
|
|
|
+ background: #19bbed;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.footer-text {
|
|
|
+ color: #fff;
|
|
|
+ line-height: 120%;
|
|
|
+ position: relative;
|
|
|
+ text-align: justify;
|
|
|
+}
|
|
|
+.img-icon {
|
|
|
+ background: url("https://super.4dage.com/data/388/hot/images/img-icon.png")no-repeat left top;
|
|
|
+}
|
|
|
+.video-icon {
|
|
|
+ background: url("https://super.4dage.com/data/388/hot/images/video-icon.png")no-repeat left top;
|
|
|
+}
|
|
|
+.model-icon {
|
|
|
+ background: url("https://super.4dage.com/data/388/hot/images/model-icon.png")no-repeat left top;
|
|
|
+}
|
|
|
+.iframe-icon {
|
|
|
+ background: url("https://super.4dage.com/data/388/hot/images/iframe-icon.png")no-repeat left top;
|
|
|
+}
|
|
|
+.footer-btn i {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ background-size: 100%;
|
|
|
+ width: 18px;
|
|
|
+ position: relative;
|
|
|
+ height: 18px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.footer-mask {
|
|
|
+ position: absolute;
|
|
|
+ /* background: linear-gradient(rgba(61,61,61,0) 0%, rgba(61,61,61,0.9) 40%, rgba(61,61,61,1) 60%,rgba(61,61,61,0) 100%);*/
|
|
|
+ z-index: 10;
|
|
|
+ bottom: -16px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 50%;
|
|
|
+}
|
|
|
|
|
|
- .pinch-zoom-container{height: 100%;}
|
|
|
+.pinch-zoom-container {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1600px) {
|
|
|
+ .wrapper {
|
|
|
+ width: 76%;
|
|
|
+ padding-top: 70px;
|
|
|
+ }
|
|
|
|
|
|
- @media screen and (max-width: 1600px) {
|
|
|
- .wrapper{ width: 76%; padding-top: 70px;}
|
|
|
-
|
|
|
}
|
|
|
@media screen and (max-width: 1000px) {
|
|
|
- .wrapper{ width: 86%; padding-top: 50px;}
|
|
|
+ .wrapper {
|
|
|
+ width: 86%;
|
|
|
+ padding-top: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
@media screen and (max-width: 700px) {
|
|
|
- .footer-title h3{ font-size: 16px;}
|
|
|
- .footer-text{ font-size: 14px; margin-top: 10px; padding: 0 6px; line-height: 150%;}
|
|
|
- .footer-text p { text-indent: 28px;}
|
|
|
- .wrapper{ width: 94%; padding-top: 30px;}
|
|
|
- .footer-title{flex-direction:column-reverse; align-items:center; margin-top: 10px; }
|
|
|
- .footer-btn{margin-bottom: 10px;}
|
|
|
- .ui-icon-before:before{left: 4px;}
|
|
|
-
|
|
|
-}
|
|
|
-@media screen and (max-width: 600px) {
|
|
|
- .wrapper{ width: 100%; padding-top: 34px; }
|
|
|
- .o-slider--item{background: rgba(0,0,0,0.4);}
|
|
|
+ .footer-title h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .footer-text {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 0 6px;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
+ .footer-text p {
|
|
|
+ text-indent: 28px;
|
|
|
+ }
|
|
|
+ .wrapper {
|
|
|
+ width: 94%;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ .footer-title {
|
|
|
+ flex-direction: column-reverse;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .footer-btn {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .ui-icon-before:before {
|
|
|
+ left: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-@media screen and (max-width: 400px) {
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ .wrapper {
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 34px;
|
|
|
+ }
|
|
|
+ .o-slider--item {
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
}
|
|
|
+@media screen and (max-width: 400px) {}
|
|
|
|
|
|
|
|
|
-::-webkit-scrollbar/*整体部分*/
|
|
|
-{
|
|
|
- width: 10px;
|
|
|
- height:10px;
|
|
|
+::-webkit-scrollbar
|
|
|
+/*整体部分*/
|
|
|
+ {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-track/*滑动轨é“*/
|
|
|
-{
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
|
- border-radius: 0px;
|
|
|
- background: rgba(0,0,0,0.1);
|
|
|
+::-webkit-scrollbar-track
|
|
|
+/*滑动轨é“*/
|
|
|
+ {
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 0px;
|
|
|
+ background: rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-thumb/*滑å—*/
|
|
|
-{
|
|
|
- border-radius: 5px;
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(192,192,192,0.2);
|
|
|
- background: rgba(192,192,192,0.2);
|
|
|
+::-webkit-scrollbar-thumb
|
|
|
+/*滑å—*/
|
|
|
+ {
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(192, 192, 192, 0.2);
|
|
|
+ background: rgba(192, 192, 192, 0.2);
|
|
|
}
|
|
|
|
|
|
-::-webkit-scrollbar-thumb:hover/*æ»‘å—æ•ˆæžœ*/
|
|
|
-{
|
|
|
- border-radius: 5px;
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
|
|
- background: rgba(0,0,0,0.4);
|
|
|
-}
|
|
|
+::-webkit-scrollbar-thumb:hover
|
|
|
+/*æ»‘å—æ•ˆæžœ*/
|
|
|
+ {
|
|
|
+ border-radius: 5px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+}
|