| /** |
| * @file index scss |
| * @author hariny |
| */ |
| |
| @import 'components.footer'; |
| |
| $index-logo-width: 1000px; |
| |
| html { |
| overflow-x: hidden; |
| } |
| |
| body { |
| width: 100%; |
| overflow-x: hidden; |
| background-color: #fff; |
| } |
| |
| #page-index { |
| top: 0; |
| } |
| |
| #main-content { |
| color: $clr-text-home; |
| font-weight: 300; |
| |
| h1, h2, h3, h4, h5, h6 { |
| color: $clr-primary-home; |
| font-weight: 400; |
| } |
| |
| p { |
| font-weight: 300; |
| } |
| |
| footer { |
| font-weight: 400 !important; |
| |
| h3 { |
| color: white; |
| } |
| } |
| |
| #home-section { |
| position: relative; |
| background-color: white; |
| |
| .btn { |
| letter-spacing: 10px; |
| box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2); |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); |
| |
| &:hover { |
| text-shadow: none; |
| } |
| } |
| } |
| |
| #video-index { |
| width: 100%; |
| } |
| |
| #home-logo { |
| width: $index-logo-width; |
| max-width: 95%; |
| } |
| |
| .video-btn { |
| width: 60px; |
| height: 60px; |
| position: absolute; |
| padding-top: 18px; |
| border-radius: 50%; |
| background-color: #fff; |
| text-align: center; |
| cursor: pointer; |
| z-index: 100; |
| } |
| |
| .video-index-btn { |
| bottom: 55px; |
| left: 70px; |
| } |
| |
| .video-play-btn { |
| padding-left: 4px; |
| } |
| |
| .video-pause-btn { |
| display: none; |
| } |
| |
| #video-index-play { |
| @keyframes fx-plyr-play-button{ |
| 0% { |
| transform: scale(.5); |
| } |
| to { |
| opacity:0; |
| } |
| } |
| |
| &:before { |
| animation: fx-plyr-play-button 1.5s ease-out infinite; |
| border: 4px solid #fff; |
| border-radius: 150%; |
| box-shadow: 0 0 5px #fff; |
| box-sizing: border-box; |
| content: ""; |
| height: 150%; |
| left: -25%; |
| position: absolute; |
| top: -25%; |
| width: 150%; |
| } |
| } |
| |
| .feature-play-btn { |
| transform: scale(0.7); |
| } |
| |
| #video-feature-4-play, #video-feature-4-pause { |
| left: 5%; |
| bottom: 6%; |
| } |
| |
| #video-feature-1-play, #video-feature-1-pause { |
| left: 15%; |
| bottom: 25%; |
| } |
| |
| .main-bg { |
| width: 100%; |
| position: absolute; |
| z-index: 10; |
| top: 0; |
| bottom: 5px; |
| } |
| |
| .banner-section { |
| position: relative; |
| margin-top: -5px; |
| |
| a { |
| display: block; |
| text-align: center; |
| } |
| } |
| |
| .banner-img { |
| width: 100%; |
| } |
| |
| h2 { |
| margin: 35px 0 5px 0; |
| } |
| |
| .feature-btn { |
| margin-top: 40px; |
| |
| a { |
| color: $clr-thirdary; |
| } |
| |
| .more-icon { |
| display: inline-block; |
| margin-left: 8px; |
| padding-top: 2px; |
| } |
| } |
| |
| .row { |
| margin: 40px 0; |
| } |
| |
| .right-column { |
| text-align: right; |
| } |
| |
| section.normal { |
| padding-top: 50px; |
| padding-bottom: 50px; |
| text-align: center; |
| } |
| |
| .btn-panel { |
| margin-top: 30px; |
| text-align: center; |
| |
| .btn { |
| width: 140px; |
| padding: 9px; |
| margin-left: 0; |
| margin-right: 36px; |
| border-radius: 25px; |
| text-indent: 10px; |
| } |
| } |
| } |
| |
| #efe-more { |
| margin-top: -10px; |
| } |
| |
| #reference { |
| font-size: 1.6rem; |
| font-weight: 400; |
| line-height: 2.4rem; |
| text-align: center; |
| background-image: url('../images/map.png'); |
| background-repeat: no-repeat; |
| background-position: center center; |
| background-size: contain; |
| color: #333; |
| |
| #recommends { |
| height: 160px; |
| position: relative; |
| max-width: 90%; |
| width: 600px; |
| margin: 0 auto; |
| text-align: center; |
| } |
| |
| .recommend { |
| display: none; |
| transition: 0.5s; |
| position: absolute; |
| bottom: 0; |
| width: 100%; |
| |
| &.active { |
| display: block; |
| } |
| |
| p { |
| margin: 10px auto; |
| font-size: 20px; |
| font-weight: 400; |
| color: #333; |
| |
| &:before { |
| display: inline-block; |
| content: ''; |
| width: 41px; |
| height: 37px; |
| background-image: url('../images/yinhao.png'); |
| background-size: 100%; |
| margin-right: 20px; |
| } |
| } |
| } |
| |
| .person { |
| margin: 10px 0 20px 0; |
| color: $clr-text-home; |
| |
| .name { |
| margin-top: -5px; |
| } |
| } |
| |
| .people { |
| height: 100px; |
| |
| img { |
| width: 70px; |
| border-radius: 50%; |
| transition: 0.5s; |
| border-color: white; |
| opacity: 0.5; |
| display: inline-block; |
| margin: 15px 10px; |
| |
| &.active { |
| width: 100px; |
| margin: 0; |
| box-shadow: 1px 4px 8px 0 rgba(46, 37, 37, 0.3); |
| border: 4px solid white; |
| opacity: 1; |
| } |
| } |
| } |
| } |
| |
| #main-content #reference { |
| margin-top: 100px; |
| } |
| |
| .companies { |
| overflow-x: hidden; |
| overflow-y: hidden; |
| width: 100%; |
| height: 80px; |
| white-space: nowrap; |
| background: white; |
| margin: 69px 0 90px 0; |
| transition: 0.5s; |
| |
| img { |
| padding: 15px; |
| height: 100%; |
| } |
| } |
| |
| #home-section { |
| position: relative; |
| overflow: hidden; |
| |
| .description { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: $index-logo-width; |
| height: 200px; |
| margin-top: -100px; |
| margin-left: -$index-logo-width / 2; |
| z-index: 20; |
| color: white; |
| |
| text-align: center; |
| |
| h1 { |
| font-size: 80px; |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); |
| } |
| |
| p { |
| font-size: 15px; |
| color: #eee; |
| text-shadow: 1px 1px 2px #333; |
| } |
| } |
| } |
| |
| #feature-section { |
| padding-top: 50px; |
| |
| .container { |
| max-width: 1000px; |
| } |
| |
| .features { |
| margin-top: 20px; |
| margin-bottom: 90px; |
| text-align: center; |
| |
| h3 { |
| font-size: 22px; |
| } |
| |
| p { |
| margin-top: 11px; |
| } |
| } |
| |
| .feature-detail { |
| margin-bottom: 20px; |
| position: relative; |
| transform: translateY(50%); |
| |
| & > .col { |
| position: relative; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
| |
| &::before, |
| &::after { |
| content: " "; |
| display: table; |
| } |
| |
| &::after { |
| clear: both; |
| } |
| |
| h2 { |
| font-size: 35px; |
| margin-bottom: 12px; |
| } |
| |
| h3 { |
| font-size: 18px; |
| font-weight: 300; |
| color: $clr-text-home; |
| margin-top: 30px; |
| |
| & ~ h3 { |
| margin-top: 18px; |
| } |
| } |
| |
| p { |
| font-weight: 300; |
| margin-top: 8px; |
| } |
| |
| #col-analysis h2 { |
| margin-top: -45px; |
| } |
| |
| #col-data h2 { |
| margin-top: 100px; |
| } |
| } |
| |
| } |
| |
| .feature-icon-panel { |
| width: 90px; |
| height: 90px; |
| margin: 0 auto; |
| margin-bottom: 22px; |
| padding: 27px; |
| border-radius: 50%; |
| border: 1px solid #F2F2F2; |
| } |
| |
| .feature-icon { |
| width: 36px; |
| } |
| |
| #video-feature-4 { |
| width: 100%; |
| box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.43); |
| border-radius: 10px; |
| border: 2px solid #000; |
| |
| h2 div { |
| margin-bottom: 10px; |
| } |
| } |
| |
| #feature-dimension { |
| top: 50px; |
| } |
| |
| #video-feature-1 { |
| position: absolute; |
| left: 13.8%; |
| width: 66%; |
| top: 7.5%; |
| } |
| |
| #publication { |
| margin-top: 50px; |
| padding: 50px 0; |
| background-color: #f5f7fd; |
| |
| h2 { |
| margin-top: 10px; |
| font-weight: normal; |
| font-size: 28px; |
| line-height: 36px; |
| } |
| .container { |
| max-width: 1000px; |
| } |
| p.note { |
| // font-size: 12px; |
| margin-top: 10px; |
| } |
| |
| p.link { |
| color: #555; |
| margin-top: 20px; |
| font-size: 18px; |
| |
| a { |
| margin-left: 10px; |
| } |
| } |
| |
| .img-container { |
| padding: 50px 10px; |
| background-color: #fff; |
| box-shadow: 3px 3px 11px #ccc; |
| } |
| } |
| |
| #about-section { |
| padding-top: 40px; |
| padding-bottom: 90px; |
| background-color: #fff; |
| |
| p { |
| margin-top: 12px; |
| } |
| |
| .btn-panel { |
| .btn { |
| margin: 0 25px; |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| |
| .btn-red { |
| padding-left: 10px; |
| } |
| } |
| |
| } |
| |
| #gongzhonghao { |
| margin: 40px 0; |
| |
| img { |
| width: 150px; |
| box-shadow: 0px 6px 12px 0 #eee; |
| } |
| } |
| |
| #about-section a { |
| color: #fff; |
| position: relative; |
| background-color: transparent; |
| width: 140px; |
| height: 40px; |
| display: inline-block; |
| margin: 0 15px; |
| |
| &:hover { |
| text-decoration: none; |
| } |
| } |
| |
| .btn-content { |
| border-radius: 25px; |
| width: 100%; |
| height: 100%; |
| padding: 10px; |
| padding-left: 8px; |
| text-indent: 10px; |
| position: relative; |
| z-index: 100; |
| transition: 0.3s; |
| |
| img { |
| margin-right: 10px; |
| position: relative; |
| top: -2px; |
| } |
| } |
| |
| .btn-shadow { |
| display: block; |
| width: 136px; |
| height: 37px; |
| border-radius: 19px; |
| position: absolute; |
| top: 2px; |
| left: 1px; |
| box-shadow: 1px 0 9px rgba(187, 37, 48, 0.6); |
| transition: 0.3s; |
| } |
| |
| #btn-github { |
| .btn-content { |
| background-color: #4D62F6; |
| |
| &:hover { |
| background-color: #7086FF; |
| box-shadow: none; |
| } |
| |
| &:active { |
| background-color: #4151CA; |
| box-shadow: none; |
| } |
| |
| img { |
| width: 20px; |
| top: -3px; |
| } |
| } |
| |
| .btn-shadow { |
| box-shadow: 1px 0 9px rgba(52, 57, 107, 0.6); |
| } |
| |
| &:hover .btn-shadow { |
| box-shadow: 1px 3px 9px rgba(52, 57, 107, 0.7); |
| } |
| } |
| |
| #btn-weibo { |
| .btn-content { |
| background-color: #FF414F; |
| |
| &:hover { |
| background-color: #FF6060; |
| box-shadow: none; |
| } |
| |
| &:active { |
| background-color: #D72D3A; |
| box-shadow: none; |
| } |
| |
| &.zh { |
| letter-spacing: 5px; |
| } |
| |
| img { |
| width: 22px; |
| } |
| } |
| |
| .btn-shadow { |
| box-shadow: 1px 2px 7px rgba(187, 37, 48, 0.5); |
| } |
| |
| &:hover .btn-shadow { |
| box-shadow: 1px 3px 9px rgba(187, 37, 48, 0.7); |
| } |
| } |
| |
| #btn-twitter { |
| .btn-content { |
| background-color: #00ACED; |
| |
| &:hover { |
| background-color: #67CFF6; |
| box-shadow: none; |
| } |
| |
| &:active { |
| background-color: #019CD6; |
| box-shadow: none; |
| } |
| |
| img { |
| width: 22px; |
| } |
| } |
| |
| .btn-shadow { |
| box-shadow: 1px 0 7px rgba(11, 126, 170, 0.4); |
| } |
| |
| &:hover .btn-shadow { |
| box-shadow: 1px 3px 9px rgba(11, 126, 170, 0.7); |
| } |
| } |
| |
| |
| |
| @media (max-width: 992px) { |
| #home-section { |
| .description { |
| width: 80%; |
| left: 0; |
| margin-left: 10%; |
| } |
| } |
| |
| #feature-section .feature-detail { |
| h2 { |
| font-size: 30px; |
| margin-top: -15px; |
| } |
| |
| h3 { |
| margin-top: 15px; |
| } |
| |
| p { |
| margin-top: 8px; |
| } |
| } |
| |
| #main-content { |
| .feature-btn { |
| margin-top: 15px; |
| } |
| } |
| |
| #col-desktop > * { |
| margin-left: 0; |
| } |
| |
| #col-data { |
| padding-top: 100px; |
| } |
| |
| #video-feature-1 { |
| width: 64%; |
| left: 15%; |
| } |
| } |
| |
| .mobile { |
| display: none; |
| } |
| |
| @media (max-width: 768px) { |
| #main-content { |
| h2 { |
| font-size: 24px; |
| } |
| |
| .feature-btn { |
| margin: 0 auto; |
| margin-top: 50px; |
| text-align: center; |
| } |
| } |
| |
| .features { |
| margin-bottom: 0; |
| |
| p { |
| margin-bottom: 70px; |
| } |
| } |
| |
| #feature-section { |
| .feature-detail { |
| transform: none; |
| |
| & > .col { |
| top: 0; |
| transform: none; |
| text-align: center; |
| } |
| |
| .col-sm-4 { |
| margin-bottom: 80px; |
| padding-top: 0; |
| } |
| } |
| } |
| |
| #reference { |
| background-size: cover; |
| |
| .people { |
| height: 180px; |
| } |
| } |
| |
| .pc { |
| display: none; |
| } |
| |
| .mobile { |
| display: block; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| #home-section { |
| .description { |
| text-align: center; |
| top: 40%; |
| |
| .btn { |
| display: block; |
| margin: 25px auto; |
| } |
| } |
| } |
| |
| #main-content { |
| #home-logo { |
| margin-bottom: 20px; |
| } |
| |
| #index-play-btn { |
| display: block; |
| width: 120px; |
| height: 120px; |
| margin: 0 auto; |
| } |
| |
| #home-section .btn { |
| background-color: white; |
| color: $clr-primary-home; |
| text-shadow: none; |
| } |
| |
| h2 { |
| margin-top: 20px; |
| } |
| |
| .video-index-btn { |
| left: 50%; |
| margin-left: -30px; |
| bottom: 40px; |
| } |
| |
| #video-index-play:before { |
| display: none; |
| } |
| |
| #video-feature-4-play, #video-feature-4-pause { |
| left: 9%; |
| bottom: 10%; |
| } |
| |
| #video-feature-1-play, #video-feature-1-pause { |
| left: 15%; |
| bottom: 20%; |
| } |
| |
| } |
| |
| #about-section .btn-panel { |
| a { |
| display: block; |
| margin: 20px auto; |
| } |
| } |
| } |