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 0d8d00443e [IOTDB-3286] False Carousel Ratio on Desktop Version
Homepage (#6028)
0d8d00443e is described below
commit 0d8d00443e92c037f2042c5b4f09d43de7a8a16d
Author: Jack Tsai <[email protected]>
AuthorDate: Thu May 26 16:01:38 2022 +0800
[IOTDB-3286] False Carousel Ratio on Desktop Version Homepage (#6028)
Co-authored-by: tsunghanjacktsai <[email protected]>
---
.../.vuepress/theme/global-components/IoTDB.vue | 73 ++++++-------------
.../.vuepress/theme/global-components/IoTDBZH.vue | 82 +++++++---------------
2 files changed, 48 insertions(+), 107 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..c1990b6158 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-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>
+ <el-carousel trigger="click" height="100vh" indicator-position="none">
+ <el-carousel-item v-for="(item,index) in imgBlock" :key="index"
style="text-align:center;height: auto;">
+ <img :src="item.src" style="width: 80%; height: auto;">
+ <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>
@@ -235,64 +235,35 @@ export default {
background-color: #d3dce6;
}
-
-@media (min-width: 200px) {
- .carousel-inner {
- min-height: 530px;
- }
- .carousel-title {
- padding-top:0;
- }
- .carousel-text {
- padding:15px;
+@media only screen and (min-width:320px) {
+ .block {
+ margin-bottom: -200px;
}
}
-@media (min-width: 768px) {
- .feature-item {
- min-height: 220px;
- }
- .carousel-inner {
- min-height: 520px;
- }
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
+@media only screen and (min-width:481px) {
+ .block {
+ margin-bottom: -500px;
}
}
-@media (min-width: 992px) {
- .feature-item {
- min-height: 240px;
- }
- .carousel-inner {
- min-height: 580px;
- }
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
+@media only screen and (min-width:769px) {
+ .block {
+ margin-bottom: -500px;
}
}
-@media (min-width: 1200px) {
- .feature-item {
- min-height: 210px;
- }
- .carousel-inner {
- min-height: 650px;
- }
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
+@media only screen and (min-width:1025px) {
+ .block {
+ margin-bottom: 0;
}
}
+@media only screen and (min-width:1201px) {
+ .block {
+ margin-bottom: 0;
+ }
+}
.Scenarios {
padding: 5px 10px;
diff --git a/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue
b/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue
index 24ea280578..c4f8bb8cb7 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-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>
+ <el-carousel trigger="click" height="100vh" indicator-position="none">
+ <el-carousel-item v-for="(item,index) in imgBlock" :key="index"
style="text-align:center;height: auto;">
+ <img :src="item.src" style="width: 80%; height: auto;">
+ <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>
@@ -229,62 +226,35 @@ export default {
}
-@media (min-width: 200px) {
- .carousel-inner {
- min-height: 530px;
- }
- .carousel-title {
- padding-top:0;
- }
- .carousel-text {
- padding:15px;
+ @media only screen and (min-width:320px) {
+ .block {
+ margin-bottom: -300px;
+ }
}
-}
-@media (min-width: 768px) {
- .feature-item {
- min-height: 220px;
- }
- .carousel-inner {
- min-height: 520px;
- }
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
+ @media only screen and (min-width:481px) {
+ .block {
+ margin-bottom: -550px;
+ }
}
-}
-@media (min-width: 992px) {
- .feature-item {
- min-height: 240px;
- }
- .carousel-inner {
- min-height: 580px;
- }
- .carousel-title {
- padding-top:100px;
- }
- .carousel-text {
- padding:0 100px 0 100px;
+ @media only screen and (min-width:769px) {
+ .block {
+ margin-bottom: -500px;
+ }
}
-}
-@media (min-width: 1200px) {
- .feature-item {
- min-height: 210px;
- }
- .carousel-inner {
- min-height: 650px;
- }
- .carousel-title {
- padding-top:100px;
+ @media only screen and (min-width:1025px) {
+ .block {
+ margin-bottom: 0;
+ }
}
- .carousel-text {
- padding:0 100px 0 100px;
+
+ @media only screen and (min-width:1201px) {
+ .block {
+ margin-bottom: 0;
+ }
}
-}
.Scenarios {
