|
|
@@ -49,18 +49,80 @@
|
|
|
}
|
|
|
.jumbotron {
|
|
|
width: 890px;
|
|
|
+ height: 465px;
|
|
|
margin: 30px auto;
|
|
|
position: relative;
|
|
|
- img {
|
|
|
+
|
|
|
+ div {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
}
|
|
|
- .jumbotron-red {
|
|
|
- transition: height .1s;
|
|
|
- background: #FFF;
|
|
|
+
|
|
|
+ img {
|
|
|
position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-cloud-1 {
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-plant-2 {
|
|
|
+ left: 60px;
|
|
|
+ top: 200px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-web {
|
|
|
+ height: 385px;
|
|
|
+ top: 35px;
|
|
|
+ left: 110px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-cloud-2 {
|
|
|
left: 0;
|
|
|
- top:0;
|
|
|
- overflow: hidden;
|
|
|
+ top: 50px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-compo-1 {
|
|
|
+ left: 94px;
|
|
|
+ height: 90px;
|
|
|
+ top: 220px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-compo-2 {
|
|
|
+ right: 73px;
|
|
|
+ top: 60px;
|
|
|
+ height: 124px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-compo-3 {
|
|
|
+ right: 42px;
|
|
|
+ top: 200px;
|
|
|
+ height: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-plant-1 {
|
|
|
+ bottom: 0;
|
|
|
+ left: 30px;
|
|
|
+ height: 185px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-figure-1 {
|
|
|
+ bottom: 0;
|
|
|
+ right: 180px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jumbotron-figure-2 {
|
|
|
+ bottom: 0;
|
|
|
+ right: 10px;
|
|
|
+ height: 68px;
|
|
|
}
|
|
|
}
|
|
|
.cards {
|
|
|
@@ -82,7 +144,7 @@
|
|
|
|
|
|
|
|
|
li {
|
|
|
- width: 25%;
|
|
|
+ width: 33.33333%;
|
|
|
padding: 0 19px;
|
|
|
box-sizing: border-box;
|
|
|
float: left;
|
|
|
@@ -206,81 +268,6 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .theme-intro-b {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 200;
|
|
|
- .intro-banner {
|
|
|
- position: absolute
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 300px;
|
|
|
- }
|
|
|
- .title {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- color: #FFF;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 24px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- p {
|
|
|
- padding: 0;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .theme-intro-a {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 200;
|
|
|
- .mask{
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #000;
|
|
|
- opacity: .5;
|
|
|
- }
|
|
|
- .intro-banner {
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- position: fixed;
|
|
|
- -webkit-transform: translate(-50%, -50%);
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- z-index: 100;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .intro-text {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- p {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- font-size: 48px;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
|
|
<template>
|
|
|
<div>
|
|
|
@@ -290,12 +277,22 @@
|
|
|
<p><%= 2 ></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="jumbotron" ref="indexMainImg">
|
|
|
- <img src="~examples/assets/images/theme-index-blue.png" alt="">
|
|
|
- <div class="jumbotron-red" :style="{
|
|
|
- height: mainImgOffset + 'px'
|
|
|
- }">
|
|
|
- <img src="~examples/assets/images/theme-index-red.png" alt="">
|
|
|
+ <div class="jumbotron">
|
|
|
+ <div>
|
|
|
+ <img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
|
|
|
+ <img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
|
|
|
+ <img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
|
|
|
+ <img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
|
|
|
+ <img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div data-hover-layer="0">
|
|
|
+ <img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
|
|
|
+ <img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div data-hover-layer="1">
|
|
|
+ <img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
|
|
|
+ <img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
|
|
|
+ <img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sponsors">
|
|
|
@@ -340,18 +337,6 @@
|
|
|
</router-link>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li>
|
|
|
- <div class="card">
|
|
|
- <img src="~examples/assets/images/theme-index-icon.svg" alt="">
|
|
|
- <h3><%= 10 ></h3>
|
|
|
- <p><%= 11 ></p>
|
|
|
- <router-link
|
|
|
- active-class="active"
|
|
|
- to="/<%= lang >/theme"
|
|
|
- exact><%= 5 >
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
<li>
|
|
|
<div class="card">
|
|
|
<img src="~examples/assets/images/resource.png" alt="">
|
|
|
@@ -366,88 +351,30 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="theme-intro-a" v-if="showIntroA" @click="hideIntroA">
|
|
|
- <div class="intro-banner">
|
|
|
- <img src="~examples/assets/images/theme-intro.png" alt="">
|
|
|
- <div class="intro-text">
|
|
|
- <p><%= 12 ></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mask"></div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="theme-intro-b"
|
|
|
- @click="hideIntroB"
|
|
|
- v-if="showIntroB"
|
|
|
- >
|
|
|
- <div class="intro-banner"
|
|
|
- :style="{
|
|
|
- left: introBX + 'px',
|
|
|
- top: introBY + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="~examples/assets/images/intro-theme-b.png" alt="">
|
|
|
- <div class="title">
|
|
|
- <div>
|
|
|
- <p><%= 13 ></p>
|
|
|
- <p><%= 14 ></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import throttle from 'throttle-debounce/throttle';
|
|
|
- import { addClass, removeClass } from 'element-ui/src/utils/dom';
|
|
|
-
|
|
|
+ import { Hover } from 'perspective.js';
|
|
|
+
|
|
|
export default {
|
|
|
- created() {
|
|
|
- this.throttledHandleScroll = throttle(10, true, index => {
|
|
|
- this.handleScroll(index);
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleScroll(index) {
|
|
|
- const ele = this.$refs.indexMainImg;
|
|
|
- const rect = ele.getBoundingClientRect();
|
|
|
- const eleHeight = ele.clientHeight + 55;
|
|
|
- let calHeight = (180 - rect.top) * 2;
|
|
|
- if (calHeight < 0) calHeight = 0;
|
|
|
- if (calHeight > eleHeight) calHeight = eleHeight;
|
|
|
- this.mainImgOffset = calHeight;
|
|
|
- },
|
|
|
- hideIntroB() {
|
|
|
- removeClass(document.body, 'el-loading-parent--hidden');
|
|
|
- localStorage.setItem('KNOW_THEME', 'true');
|
|
|
- this.showIntroB = false;
|
|
|
- },
|
|
|
- hideIntroA() {
|
|
|
- this.showIntroA = false;
|
|
|
- this.showIntroB = true;
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
- lang: this.$route.meta.lang,
|
|
|
- mainImgOffset: 0,
|
|
|
- showIntroA: false,
|
|
|
- showIntroB: false,
|
|
|
- introBY: 0,
|
|
|
- introBX: 0
|
|
|
+ lang: this.$route.meta.lang
|
|
|
};
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- window.removeEventListener('scroll', this.throttledHandleScroll);
|
|
|
- },
|
|
|
mounted() {
|
|
|
- window.addEventListener('scroll', this.throttledHandleScroll);
|
|
|
- if (localStorage.getItem('KNOW_THEME')) return;
|
|
|
- const themeTab = document.querySelector('.nav-item-theme');
|
|
|
- this.introBX = themeTab.offsetLeft + (themeTab.clientWidth * 0.5) - (300 / 2);
|
|
|
- this.introBY = themeTab.offsetTop + 40;
|
|
|
- this.showIntroA = true;
|
|
|
- addClass(document.body, 'el-loading-parent--hidden');
|
|
|
+ new Hover('.jumbotron', { // eslint-disable-line
|
|
|
+ max: 3,
|
|
|
+ scale: 1,
|
|
|
+ perspective: 700,
|
|
|
+ layers: [{
|
|
|
+ multiple: 0.01,
|
|
|
+ reverseTranslate: true
|
|
|
+ }, {
|
|
|
+ multiple: 0.02,
|
|
|
+ reverseTranslate: true
|
|
|
+ }]
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
</script>
|
iamkun
