|
|
@@ -49,80 +49,18 @@
|
|
|
}
|
|
|
.jumbotron {
|
|
|
width: 890px;
|
|
|
- height: 465px;
|
|
|
margin: 30px auto;
|
|
|
position: relative;
|
|
|
-
|
|
|
- div {
|
|
|
+ img {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: transparent;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
}
|
|
|
-
|
|
|
- img {
|
|
|
+ .jumbotron-red {
|
|
|
+ transition: height .1s;
|
|
|
+ background: #FFF;
|
|
|
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: 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;
|
|
|
+ top:0;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
.cards {
|
|
|
@@ -144,7 +82,7 @@
|
|
|
|
|
|
|
|
|
li {
|
|
|
- width: 33.33333%;
|
|
|
+ width: 25%;
|
|
|
padding: 0 19px;
|
|
|
box-sizing: border-box;
|
|
|
float: left;
|
|
|
@@ -268,6 +206,81 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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>
|
|
|
@@ -277,22 +290,12 @@
|
|
|
<p><%= 2 ></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <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 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>
|
|
|
</div>
|
|
|
<div class="sponsors">
|
|
|
@@ -337,6 +340,18 @@
|
|
|
</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="">
|
|
|
@@ -351,30 +366,88 @@
|
|
|
</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 { Hover } from 'perspective.js';
|
|
|
-
|
|
|
+ import throttle from 'throttle-debounce/throttle';
|
|
|
+ import { addClass, removeClass } from 'element-ui/src/utils/dom';
|
|
|
+
|
|
|
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
|
|
|
+ lang: this.$route.meta.lang,
|
|
|
+ mainImgOffset: 0,
|
|
|
+ showIntroA: false,
|
|
|
+ showIntroB: false,
|
|
|
+ introBY: 0,
|
|
|
+ introBX: 0
|
|
|
};
|
|
|
},
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('scroll', this.throttledHandleScroll);
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- new Hover('.jumbotron', { // eslint-disable-line
|
|
|
- max: 3,
|
|
|
- scale: 1,
|
|
|
- perspective: 700,
|
|
|
- layers: [{
|
|
|
- multiple: 0.01,
|
|
|
- reverseTranslate: true
|
|
|
- }, {
|
|
|
- multiple: 0.02,
|
|
|
- reverseTranslate: true
|
|
|
- }]
|
|
|
- });
|
|
|
+ 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');
|
|
|
}
|
|
|
};
|
|
|
</script>
|
iamkun
