This is an automated email from the ASF dual-hosted git repository. haonan pushed a commit to branch revert-6012-fix_iotdb_site in repository https://gitbox.apache.org/repos/asf/iotdb.git
commit 890c622284913f5e70b459a11ff73aa7ed770b3a Author: Haonan <[email protected]> AuthorDate: Thu May 26 10:35:15 2022 +0800 Revert "[IOTDB-3286] False Carousel Ratio on Desktop Version Homepage (#6012)" This reverts commit 20cf75b8cda5c245789b65bf2259fb2fc034eda4. --- .../.vuepress/theme/global-components/IoTDB.vue | 43 ++++++++++--------- .../.vuepress/theme/global-components/IoTDBZH.vue | 49 +++++++++++++--------- 2 files changed, 54 insertions(+), 38 deletions(-) diff --git a/site/src/main/.vuepress/theme/global-components/IoTDB.vue b/site/src/main/.vuepress/theme/global-components/IoTDB.vue index 0ae0e03bc2..e83ba5625f 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="autoHeight" indicator-position="outside"> + <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 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> + <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-item> </el-carousel> </div> @@ -171,22 +171,6 @@ 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/"); @@ -259,6 +243,9 @@ export default { .carousel-title { padding-top:0; } + .carousel-text { + padding:15px; + } } @media (min-width: 768px) { @@ -268,6 +255,12 @@ export default { .carousel-inner { min-height: 520px; } + .carousel-title { + padding-top:100px; + } + .carousel-text { + padding:0 100px 0 100px; + } } @media (min-width: 992px) { @@ -277,6 +270,12 @@ export default { .carousel-inner { min-height: 580px; } + .carousel-title { + padding-top:100px; + } + .carousel-text { + padding:0 100px 0 100px; + } } @media (min-width: 1200px) { @@ -286,6 +285,12 @@ 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 d79d8fdc07..24ea280578 100644 --- a/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue +++ b/site/src/main/.vuepress/theme/global-components/IoTDBZH.vue @@ -18,6 +18,8 @@ <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; @@ -44,16 +46,17 @@ 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="autoHeight" indicator-position="outside"> + <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 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> + <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-item> </el-carousel> </div> @@ -172,22 +175,6 @@ 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/"); @@ -246,6 +233,12 @@ export default { .carousel-inner { min-height: 530px; } + .carousel-title { + padding-top:0; + } + .carousel-text { + padding:15px; + } } @media (min-width: 768px) { @@ -255,6 +248,12 @@ export default { .carousel-inner { min-height: 520px; } + .carousel-title { + padding-top:100px; + } + .carousel-text { + padding:0 100px 0 100px; + } } @media (min-width: 992px) { @@ -264,6 +263,12 @@ export default { .carousel-inner { min-height: 580px; } + .carousel-title { + padding-top:100px; + } + .carousel-text { + padding:0 100px 0 100px; + } } @media (min-width: 1200px) { @@ -273,6 +278,12 @@ export default { .carousel-inner { min-height: 650px; } + .carousel-title { + padding-top:100px; + } + .carousel-text { + padding:0 100px 0 100px; + } }
