You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by ha...@apache.org on 2022/05/25 07:02:37 UTC
[iotdb] branch master updated: [IOTDB-3286] False Carousel Ratio on Desktop Version Homepage (#6012)
This is an automated email from the ASF dual-hosted git repository.
haonan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/iotdb.git
The following commit(s) were added to refs/heads/master by this push:
new 20cf75b8cd [IOTDB-3286] False Carousel Ratio on Desktop Version Homepage (#6012)
20cf75b8cd is described below
commit 20cf75b8cda5c245789b65bf2259fb2fc034eda4
Author: Jack Tsai <ja...@outlook.com>
AuthorDate: Wed May 25 15:02:32 2022 +0800
[IOTDB-3286] False Carousel Ratio on Desktop Version Homepage (#6012)
Co-authored-by: tsunghanjacktsai <ts...@apache.com>
---
.../.vuepress/theme/global-components/IoTDB.vue | 43 +++++++++----------
.../.vuepress/theme/global-components/IoTDBZH.vue | 49 +++++++++-------------
2 files changed, 38 insertions(+), 54 deletions(-)
diff --git a/site/src/main/.vuepress/theme/global-components/IoTDB.vue b/site/src/main/.vuepress/theme/global-components/IoTDB.vue
index e83ba5625f..0ae0e03bc2 100644
--- a/site/src/main/.vuepress/theme/global-components/IoTDB.vue
+++ b/site/src/main/.vuepress/theme/global-components/IoTDB.vue
@@ -48,11 +48,11 @@
<p class="home-title" style="font-size: 50px;">Scenarios</p>
<div class="block">
- <el-carousel trigger="click" height="1000px" indicator-position="outside">
+ <el-carousel trigger="click" :height="autoHeight" indicator-position="outside">
<el-carousel-item v-for="(item,index) in imgBlock" :key="index" style="text-align:center;">
<img :src="item.src" height="500px">
- <h3 class="carousel-title" style="font-size: 30px;color: #fcac45;text-align: center;line-height: normal;">{{item.des}}</h3>
- <p class="carousel-text" style="font-size: 18px;line-height: 22px;text-align:justify!important;font-weight:bold;">{{item.detail}}</p>
+ <h3 style="font-size: 30px;color: #fcac45;text-align: center;line-height: normal;">{{item.des}}</h3>
+ <p style="font-size: 18px;line-height: 22px;padding:15px;text-align:justify!important;font-weight:bold;">{{item.detail}}</p>
</el-carousel-item>
</el-carousel>
</div>
@@ -171,6 +171,22 @@ export default {
isHover: false
};
},
+ computed: {
+ autoHeight() {
+ let _w = document.documentElement.clientWidth || document.body.clientWidth;
+ let _h = 0;
+ if (_w >= 200 && _w < 768) {
+ _h = 925;
+ } else if (_w >= 768 && _w < 992) {
+ _h = 825;
+ } else if (_w >= 992 && _w < 1200) {
+ _h = 825;
+ } else if (_w >= 1200) {
+ _h = 750;
+ }
+ return _h + "px";
+ }
+ },
methods: {
addRoutes1() {
this.$router.push("/Download/");
@@ -243,9 +259,6 @@ export default {
.carousel-title {
padding-top:0;
}
- .carousel-text {
- padding:15px;
- }
}
@media (min-width: 768px) {
@@ -255,12 +268,6 @@ export default {
.carousel-inner {
min-height: 520px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}
@media (min-width: 992px) {
@@ -270,12 +277,6 @@ export default {
.carousel-inner {
min-height: 580px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}
@media (min-width: 1200px) {
@@ -285,12 +286,6 @@ export default {
.carousel-inner {
min-height: 650px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}
diff --git a/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue b/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue
index 24ea280578..d79d8fdc07 100644
--- a/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue
+++ b/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue
@@ -18,8 +18,6 @@
<template >
<div style="background:linear-gradient(top,#A2A2A2,#fff);">
-
- <div style="width:100%;margin: 0 auto;position: relative;height:480px;text-align:center;">
<h2 class="h2" style="font-size:80px;">Apache IoTDB</h2>
<p
style="font-size: 20px;line-height:23px;margin: 10px 0 20px 0;font-family: 'Arimo', sans-serif;
@@ -46,17 +44,16 @@ Apache IoTDB 采用轻量式架构，具有高性能和丰富的功能，并与A
style="font-size: 18px;letter-spacing: 0.03em;font-family: 'Arimo', sans-serif;"
@click="addRoutes2"
>快速开始</el-button>
- </el-row>
</div>
<p class="home-title" style="font-size: 50px;">应用场景</p>
<div class="block">
- <el-carousel trigger="click" height="1000px" indicator-position="outside">
+ <el-carousel trigger="click" height="autoHeight" indicator-position="outside">
<el-carousel-item v-for="(item,index) in imgBlock" :key="index" style="text-align:center;">
<img :src="item.src" height="500px">
- <h3 class="carousel-title" style="font-size: 30px;color: #fcac45;text-align: center;line-height: normal;">{{item.des}}</h3>
- <p class="carousel-text" style="font-size: 18px;line-height: 22px;text-align:justify!important;font-weight:bold;">{{item.detail}}</p>
+ <h3 style="font-size: 30px;color: #fcac45;text-align: center;line-height: normal;">{{item.des}}</h3>
+ <p style="font-size: 18px;padding:15px;line-height: 22px;text-align:justify!important;font-weight:bold;">{{item.detail}}</p>
</el-carousel-item>
</el-carousel>
</div>
@@ -175,6 +172,22 @@ export default {
isHover: false
};
},
+ computed: {
+ autoHeight() {
+ let _w = document.documentElement.clientWidth || document.body.clientWidth;
+ let _h = 0;
+ if (_w >= 200 && _w < 768) {
+ _h = 925;
+ } else if (_w >= 768 && _w < 992) {
+ _h = 825;
+ } else if (_w >= 992 && _w < 1200) {
+ _h = 825;
+ } else if (_w >= 1200) {
+ _h = 750;
+ }
+ return _h + "px";
+ }
+ },
methods: {
addRoutes1() {
this.$router.push("/zh/Download/");
@@ -233,12 +246,6 @@ export default {
.carousel-inner {
min-height: 530px;
}
- .carousel-title {
- padding-top:0;
- }
- .carousel-text {
- padding:15px;
- }
}
@media (min-width: 768px) {
@@ -248,12 +255,6 @@ export default {
.carousel-inner {
min-height: 520px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}
@media (min-width: 992px) {
@@ -263,12 +264,6 @@ export default {
.carousel-inner {
min-height: 580px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}
@media (min-width: 1200px) {
@@ -278,12 +273,6 @@ export default {
.carousel-inner {
min-height: 650px;
}
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
- }
}