| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <template> |
| <main |
| class="home" |
| aria-labelledby="main-title" |
| > |
| <header class="hero"> |
| <div id="scene-bg"> |
| <img |
| :src="$withBase(data.heroBgImage)" |
| data-hover-only="true" |
| data-depth="-0.2" |
| data-relative-input="true" |
| > |
| </div> |
| <div class="intro"> |
| <div class="text"> |
| <div |
| v-for="item in data.heroText" |
| :key="item" |
| class="title" |
| > |
| {{ item || $title }} |
| </div> |
| <div |
| v-if="data.tagline !== null" |
| class="description" |
| > |
| {{ data.tagline || $description }} |
| </div> |
| <p |
| v-if="data.actionText && data.actionLink" |
| class="action" |
| > |
| <NavLink |
| class="action-button" |
| :item="actionLink" |
| /> |
| </p> |
| </div> |
| <div |
| id="scene" |
| class="image" |
| > |
| <img |
| :src="$withBase(data.heroImage)" |
| data-hover-only="true" |
| data-depth="0.3" |
| data-relative-input="true" |
| > |
| </div> |
| </div> |
| </header> |
| |
| <div class="structure wrapper"> |
| <div class="image"> |
| <img |
| v-if="data.structure.image" |
| :src="$withBase(data.structure.image)" |
| alt="structure" |
| > |
| </div> |
| <div class="text"> |
| <div class="title"> |
| {{ data.structure.title }} |
| </div> |
| <div class="sub-title"> |
| {{ data.structure.subTitle }} |
| </div> |
| <div |
| v-for="item in data.structure.descriptions" |
| :key="item" |
| class="description" |
| > |
| {{ item }} |
| </div> |
| <NavLink |
| class="action-button" |
| :item="moreActionLink" |
| /> |
| </div> |
| </div> |
| <div |
| v-if="data.features" |
| class="features" |
| > |
| <div class="wrapper"> |
| <div class="title"> |
| {{ data.features.title }} |
| </div> |
| <div class="sub-title"> |
| {{ data.features.subTitle }} |
| </div> |
| <div class="list"> |
| <div |
| v-for="(feature, index) in data.features.list" |
| :key="index" |
| class="feature" |
| > |
| <div class="icon-card"> |
| <img |
| v-if="feature.icon" |
| :src="$withBase(feature.icon)" |
| alt="feature" |
| > |
| </div> |
| <div class="label"> |
| {{ feature.title }} |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div |
| v-if="data.cases" |
| class="wrapper cases" |
| > |
| <div class="title"> |
| {{ data.cases.title }} |
| </div> |
| <div class="sub-title"> |
| {{ data.cases.subTitle }} |
| </div> |
| <div class="list"> |
| <div |
| v-for="(cese, index) in data.cases.list" |
| :key="index" |
| class="case" |
| > |
| <img |
| v-if="cese.logo" |
| :src="$withBase(cese.logo)" |
| :alt="cese.alt" |
| > |
| </div> |
| </div> |
| </div> |
| |
| <footer class="footer"> |
| <CustomFooter /> |
| </footer> |
| </main> |
| </template> |
| |
| <script> |
| import NavLink from '@parent-theme/components/NavLink.vue' |
| import CustomFooter from '@theme/components/Footer.vue' |
| import Parallax from 'parallax-js' |
| |
| export default { |
| name: 'Home', |
| components: { NavLink, CustomFooter }, |
| mounted() { |
| ['scene', 'scene-bg'].forEach(id => new Parallax(document.getElementById(id))) |
| }, |
| computed: { |
| data() { |
| return this.$page.frontmatter |
| }, |
| actionLink() { |
| return { |
| link: this.data.actionLink, |
| text: this.data.actionText |
| } |
| }, |
| moreActionLink() { |
| return { |
| link: this.data.structure.actionLink, |
| text: this.data.structure.actionText |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style lang="stylus"> |
| .home |
| overflow-x hidden |
| padding 0 0 |
| width 100% |
| margin 0 auto |
| display block |
| font-family PingFangSC-Regular |
| .hero |
| background-color #5A77F3 |
| width 100% |
| height 760px |
| display flex |
| flex-direction row |
| justify-content center |
| position relative |
| #scene-bg |
| height 100% |
| position absolute |
| img |
| height 100% |
| .intro |
| display flex |
| flex-direction row |
| align-items center |
| justify-content space-between |
| width 1280px |
| z-index 1 |
| .text |
| padding-left 1.6rem |
| .title |
| font-family PingFangSC-Semibold |
| font-size 3.1rem |
| color white |
| letter-spacing 0 |
| .description |
| font-size 1.3rem |
| font-family PingFangSC-Light |
| padding 1.5rem 0rem 3rem |
| opacity 0.85 |
| color #FFFFFF |
| letter-spacing 0.33px |
| .action-button |
| display inline-block |
| font-size 1.2rem |
| color white |
| border 1px solid #FFFFFF |
| padding 0.4rem 2.6rem |
| transition background-color .1s ease |
| &:hover |
| color #5A77F3 |
| background-color white |
| .image |
| position relative |
| flex-basis 50% |
| img |
| width 530px |
| .wrapper |
| box-sizing border-box |
| max-width 1280px |
| padding 2em 2em 2em 2em |
| margin-left auto |
| margin-right auto |
| width 100% |
| .title |
| font-size 1.9rem |
| text-align center |
| color #595959 |
| font-family PingFangSC-Medium |
| .sub-title |
| text-align center |
| font-family PingFangSC-Light |
| font-size 1.3rem |
| color #999999 |
| padding-top 1rem |
| .structure |
| padding 8rem 0rem 5rem |
| display flex |
| flex-direction row |
| align-items flex-start |
| justify-content center |
| .text |
| padding 3rem 4rem 0rem |
| flex-basis 32% |
| .title |
| color #595959 |
| text-align left |
| font-size 1.9rem |
| font-family PingFangSC-Medium |
| .sub-title |
| text-align left |
| font-family PingFangSC-Light |
| font-size 1.3rem |
| color #999999 |
| padding 0rem |
| line-height 1.8rem |
| .description |
| padding 1.3rem 0rem 0rem 0rem |
| font-size 0.9rem |
| line-height 1.6rem |
| color #595959 |
| .action-button |
| margin-top 2rem |
| display inline-block |
| font-size 1rem |
| color #5169AC |
| border 1px solid #5169AC |
| padding 0.4rem 2.8rem |
| transition background-color .1s ease |
| box-sizing border-box |
| &:hover |
| color white |
| background-color #5169AC |
| .image |
| flex-basis 68% |
| img |
| width 100% |
| .features |
| padding 5rem 0rem |
| background-color #F9FCFE |
| .list |
| padding-top 0.5rem |
| margin-top 2.5rem |
| display flex |
| flex-wrap wrap |
| align-items flex-end |
| align-content stretch |
| justify-content space-between |
| .feature |
| flex-grow 1 |
| flex-basis 18% |
| max-width 18% |
| padding 1rem |
| .icon-card |
| width 8rem |
| height 8rem |
| margin 0 auto |
| img |
| height 4rem |
| padding 2rem |
| .label |
| font-size 1rem |
| color #595959 |
| height 4rem |
| margin 0 auto |
| text-align center |
| color #595959 |
| .cases |
| padding 5rem 0rem |
| .list |
| padding 0.5rem 0 |
| margin-top 2.5rem |
| display flex |
| flex-wrap wrap |
| justify-content flex-start |
| .case |
| flex-grow 1 |
| flex-basis 25% |
| max-width 25% |
| padding: 1rem 0rem |
| text-align center |
| img |
| width 80% |
| margin 0 auto |
| .footer |
| background #F9F9F9 |
| text-align center |
| color lighten($textColor, 25%) |
| padding 1rem 0rem 1rem |
| @media (max-width: $MQMobile) |
| .home |
| .hero |
| height 960px |
| .intro |
| display flex |
| flex-direction column |
| align-items center |
| justify-content flex-start |
| .text |
| padding 7rem 0rem 0rem |
| text-align center |
| .title |
| font-size 2rem |
| .description |
| width 90% |
| margin 0 auto |
| font-size 1.4rem |
| color white |
| opacity 0.6 |
| .image |
| position relative |
| flex-basis 100% |
| width 100% |
| .wrapper |
| title |
| font-size 1.6rem |
| .sub-title |
| font-size 1.6rem |
| .structure |
| flex-direction column |
| align-items center |
| justify-content flex-start |
| .text |
| order 1 |
| flex-basis 100% |
| text-align center |
| .title |
| text-align center |
| .sub-title |
| text-align center |
| .description |
| padding 1.3rem 0rem 0rem 0rem |
| .image |
| order 0 |
| flex-basis 100% |
| .features |
| .list |
| .feature |
| flex-basis 40% |
| max-width 40% |
| .cases |
| .list |
| justify-content space-between |
| .case |
| flex-basis 50% |
| max-width 50% |
| </style> |
