| @import "variable.scss"; |
| |
| .scene-container { |
| max-width: 1680px; |
| height: 100%; |
| margin: 0 auto; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .scene { |
| position: relative; |
| height: 100%; |
| height: calc(100% - 72px); |
| |
| // &:nth-child(even) { |
| // background: $bg-blue; |
| // color: $text-white; |
| // } |
| |
| // &:nth-child(odd) { |
| |
| |
| // background: $bg-gray; |
| // color: $text-blue; |
| // } |
| |
| h2 { |
| font-family: "Gill Sans"; |
| font-weight: 400; |
| font-size: 2.64em; |
| margin: .7em 0; |
| text-align: center; |
| } |
| |
| ul, li , ol { |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| } |
| } |
| |
| .horizon .scene-container, .edge .scene-container { |
| max-width: $content-max-width; |
| padding-bottom: 2em; |
| display: flex; |
| flex-direction: column; |
| align-content: space-around; |
| } |
| |
| .horizon{ |
| .textbox { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| padding: 0 1em; |
| } |
| |
| .textbox p { |
| width: 70%; |
| margin: 0 auto; |
| text-align: center; |
| } |
| |
| .sketch-content { |
| padding: 0 7em; |
| display: flex; |
| flex: 3; |
| align-items: stretch; |
| } |
| |
| .inner-box { |
| flex: 1; |
| padding: 0 2em; |
| } |
| } |
| |
| .header { |
| height: 100%; |
| position: relative; |
| background: $bg-blue; |
| color: $text-white; |
| |
| #slider { |
| margin-top: 73px; |
| height: 100%; |
| height: calc(100% - 72px); |
| } |
| |
| .swiper-container { |
| max-width: $content-max-width; |
| height: 100%; |
| } |
| |
| .swiper-controller { |
| max-width: $content-max-width; |
| height: 100%; |
| margin: auto; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| .swiper-button-next, .swiper-button-prev { |
| background: transparent !important; |
| color: $text-white; |
| line-height: 44px; |
| } |
| |
| .swiper-button-next { |
| transform: rotate(180deg); |
| } |
| |
| .slide-content { |
| max-width: $content-max-width; |
| margin: auto; |
| height: 100%; |
| |
| .page-title { |
| font-size: 2.3em; |
| font-family: "Gill Sans"; |
| width: 500px; |
| text-align: center; |
| position: absolute; |
| top: 70px; |
| left: 50%; |
| margin-left: -250px; |
| line-height: 120%; |
| } |
| |
| .btn-group { |
| position: absolute; |
| bottom: 30%; |
| left: 50%; |
| margin-left: -11.222em; |
| |
| & > .button:nth-child(2) { |
| margin-left: 20px; |
| } |
| } |
| } |
| |
| .galaxy { |
| height: 560px; |
| width: 560px; |
| position: absolute; |
| top: 45%; |
| margin-top: -230px; |
| } |
| |
| .left { |
| left: -40px; |
| } |
| |
| .right { |
| top: 55%; |
| right: -110px; |
| } |
| } |
| |
| .edge { |
| |
| background: $bg-gray; |
| color: $text-blue; |
| |
| .scene-container { |
| .textbox { |
| flex: 3; |
| display: flex; |
| flex-direction: row; |
| align-items: flex-end; |
| justify-content: center; |
| } |
| |
| .sketch-content { |
| padding: 2em 7em; |
| display: flex; |
| flex: 5; |
| flex-direction: row; |
| align-items: flex-start; |
| } |
| } |
| |
| .inner-box { |
| flex: 1; |
| text-align: center; |
| padding: 0 1em; |
| |
| img { |
| width: 78px; |
| height: 78px; |
| color: $text-light-black; |
| } |
| |
| h3 { |
| margin: .4em; |
| font-size: 1.5em; |
| color: $text-light-black; |
| } |
| |
| .underline { |
| display: inline-block; |
| background: $bg-blue; |
| width: 80px; |
| height: 3px; |
| margin: 0 0 20px; |
| } |
| |
| p { |
| font-size: 1em; |
| color: $text-light-black; |
| } |
| } |
| } |
| |
| .feature { |
| background: $bg-blue; |
| color: $text-white; |
| .feature-content { |
| height: 100%; |
| max-width: $content-max-width; |
| margin: 0 auto; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .left-text { |
| position: relative; |
| padding: 15px 20px; |
| z-index: 99; |
| } |
| |
| .left-text h2 { |
| width: 300px; |
| text-align: left; |
| line-height: 120%; |
| } |
| |
| .left-text p { |
| width: 220px; |
| line-height: 1.7; |
| text-align: left; |
| } |
| |
| .right-box { |
| width: 660px; |
| height: 405px; |
| position: absolute; |
| top: 30%; |
| right: 0px; |
| // right: -100%; |
| z-index: 1; |
| .imgbox { |
| position: absolute; |
| // transform: translateX(1000px); |
| } |
| .level1 { |
| width: 660px; |
| height: 405px; |
| background: url("../images/level1.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| z-index: 9; |
| top: 0; |
| left: 660px; |
| } |
| .level2 { |
| width: 660px; |
| height: 405px; |
| background: url("../images/level2.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| z-index: 99; |
| top: -30px; |
| left: 660px; |
| } |
| .level3 { |
| width: 660px; |
| height: 405px; |
| background: url("../images/level3.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| z-index: 99; |
| top: -60px; |
| left: 660px; |
| } |
| .level4 { |
| width: 660px; |
| height: 405px; |
| background: url("../images/level4.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| z-index: 999; |
| top: -85px; |
| // left: -15px; |
| left: 660px; |
| } |
| } |
| .right-img { |
| width: 70%; |
| position: absolute; |
| top: 40px; |
| right: 0; |
| } |
| } |
| |
| .cross-platform { |
| |
| background: $bg-gray; |
| color: $text-blue; |
| |
| .sketch-content { |
| flex: 5; |
| } |
| .imgbox{ |
| height: auto; |
| &.ios { |
| padding: 0 30px; |
| background: url("../images/ios.png") 50% 50% / contain no-repeat; |
| background-size: contain; |
| background-position: left 50% bottom 0px; |
| background-origin: content-box; |
| } |
| |
| &.android { |
| background: url("../images/android.png") 50% 50% / contain no-repeat; |
| background-size: contain; |
| background-position: left 50% bottom 0px; |
| background-origin: content-box; |
| } |
| |
| &.h5 { |
| flex: 1.16; |
| background: url("../images/web.png") 50% 50% / contain no-repeat; |
| background-position: left 50% bottom 0px; |
| background-size: contain; |
| background-origin: content-box; |
| } |
| } |
| |
| .textbox p { |
| color: $text-light-black; |
| } |
| } |
| |
| .supporting-vue { |
| background: $bg-blue; |
| color: $text-white; |
| |
| .sketch-content.imgbox { |
| background: url("../images/vue.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| position: relative; |
| |
| .imgbox { |
| width: 100%; |
| height: 104px; |
| background: url("../images/vue-logo.png") 50% 50% / contain no-repeat; |
| position: absolute; |
| top: -50px; |
| left: 0; |
| right: 0; |
| } |
| } |
| } |
| |
| .schematic { |
| |
| background: $bg-gray; |
| color: $text-blue; |
| |
| .textbox p { |
| color: $text-light-black; |
| } |
| |
| .sketch-content.imgbox { |
| background: url("../images/flow.png") 50% 50% / contain no-repeat; |
| background-origin: content-box; |
| } |
| } |
| |
| .users { |
| $color: rgb(88, 87, 87); |
| li { |
| position: relative; |
| } |
| .download-btn { |
| width: 90px; |
| height: 40px; |
| position: absolute; |
| border-radius: 0 0 15px 15px; |
| bottom: 30px; |
| left: 20px; |
| opacity: 0; |
| transition: all .2s ease; |
| background: rgba(0,0,0,.5); |
| a { |
| display: block; |
| width: 50%; |
| height: 100%; |
| float:left; |
| } |
| .android { |
| background: url(../images/android-icon.png) center center no-repeat; |
| background-size: 28px 28px; |
| } |
| .ios { |
| background: url(../images/ios-icon.png) center center no-repeat; |
| background-size: 28px 28px; |
| } |
| } |
| .addmore { |
| padding: 15px 15px; |
| font-size: 26px; |
| text-align: center; |
| margin-top: 50px; |
| position:relative; |
| cursor: pointer; |
| color: $color; |
| .bottom { |
| transition: all ease .2s; |
| position: absolute; |
| bottom: -10px; |
| left: 0; |
| width: 0; |
| height: 1px; |
| background: $color; |
| } |
| &:hover { |
| .bottom { |
| width: 100%; |
| } |
| } |
| &:before { |
| content: '+'; |
| font-size: 28px; |
| margin-right:10px; |
| } |
| } |
| .title { |
| font-size: 28px; |
| text-align: center; |
| line-height: 80px; |
| width: 100%; |
| } |
| .sketch-content { |
| padding-top: 100px; |
| display: flex; |
| flex-flow: row wrap; |
| justify-content: center; |
| align-content: flex-start; |
| max-width: 1200px; |
| margin: 0 auto; |
| .app-listing { |
| margin-top: 50px; |
| display: flex; |
| justify-content: center; |
| flex-wrap: wrap; |
| align-items: center; |
| li { |
| padding: 20px; |
| position: relative; |
| padding-bottom:0; |
| &:hover { |
| .img{ |
| transform: translateY(-2px); |
| box-shadow: 0 8px 16px rgba(0,0,0,.16); |
| } |
| .download-btn{ |
| opacity: 1; |
| transform: translateY(-2px); |
| z-index: 999; |
| } |
| } |
| } |
| .tooltip{ |
| text-align: center; |
| text-align: center; |
| line-height: 30px; |
| font-size: 14px; |
| width: 90px; |
| font-size:14px; |
| color: #333; |
| transition: all .2s ease,transform .2s ease; |
| } |
| .img { |
| width: 90px; |
| height: 90px; |
| transition: box-shadow .2s ease,transform .2s ease; |
| vertical-align: middle; |
| border-radius: 15px; |
| background-color: transparent; |
| background-size: 90px 90px; |
| background-position: center center; |
| cursor: pointer; |
| } |
| |
| } |
| } |
| .user-info { |
| opacity: 0; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| padding: 1em; |
| background: $bg-light-blue; |
| text-align: center; |
| color: $text-light-black; |
| transition-duration: .4s; |
| transition-property: opacity; |
| |
| h4 { |
| font-size: 1em; |
| margin-bottom: .98em; |
| } |
| |
| p { |
| @include lines(6); |
| font-size: .8em; |
| } |
| } |
| |
| .more { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| a { |
| margin-top: 1em; |
| color: $text-white; |
| text-decoration: underline; |
| font-weight: lighter; |
| } |
| } |
| } |
| |
| .feedback { |
| background: $bg-gray; |
| color: $text-blue; |
| .sketch-content { |
| display: flex; |
| flex-flow: row wrap; |
| justify-content: center; |
| align-content: space-around; |
| } |
| |
| .user-feedback { |
| flex: 1 0 200px; |
| margin: 0; |
| text-align: center; |
| color: $text-light-black; |
| padding: 10px; |
| |
| .avatar { |
| width: 66px; |
| height: 66px; |
| border-radius: 100%; |
| } |
| |
| .user-name { |
| font-weight: bold; |
| font-size: 1em; |
| margin: 10px 0 0; |
| } |
| |
| .user-title { |
| font-size: .8em; |
| margin: 5px 0 10px; |
| color: #999; |
| } |
| |
| .user-say { |
| margin: 1em 0; |
| } |
| } |
| |
| .scene-container .go-2-doc { |
| flex: 1; |
| display: flex; |
| justify-content: center; |
| align-items: flex-start; |
| margin-top: -30px; |
| } |
| } |
| |
| .back2top { |
| display: none; |
| width: 68px; |
| height: 68px; |
| border-radius: 100%; |
| background: #F3C3C1; |
| position: fixed; |
| bottom: 180px; |
| right: 10px; |
| text-align: center; |
| line-height: 68px; |
| transform: rotate(90deg); |
| color: #fff; |
| z-index: 99; |
| &:hover { |
| background: #FF3E33; |
| color: #fff; |
| } |
| } |