This is an automated email from the ASF dual-hosted git repository.
dockerzhang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/inlong-website.git
The following commit(s) were added to refs/heads/master by this push:
new 14342e1b43 [INLONG-632] Home page style file optimization (#635)
14342e1b43 is described below
commit 14342e1b435be8f61824d0d1268c5627cb9a58d5
Author: Lizhen <88174078+bluew...@users.noreply.github.com>
AuthorDate: Mon Dec 5 17:55:19 2022 +0800
[INLONG-632] Home page style file optimization (#635)
---
src/pages/Home/home.module.less | 225 ++++++++++++++++++++++++++++++++++++++++
src/pages/Home/index.jsx | 58 +++++------
src/pages/Home/index.less | 215 --------------------------------------
3 files changed, 254 insertions(+), 244 deletions(-)
diff --git a/src/pages/Home/home.module.less b/src/pages/Home/home.module.less
new file mode 100644
index 0000000000..c5acff5170
--- /dev/null
+++ b/src/pages/Home/home.module.less
@@ -0,0 +1,225 @@
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translate3d(0,50%,0);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateZ(0);
+ }
+}
+
+.fadeInAnimation {
+ animation-name: fadeIn;
+ animation-delay: 0s;
+ animation-duration: 1s;
+ animation-fill-mode: both;
+}
+
+.homePage {
+ .topSection {
+ position: relative;
+ height: 100vh;
+ min-height: 800px;
+ background-size: cover;
+ background-position: bottom;
+ }
+
+ .verticalMiddle {
+ position: absolute;
+ left: 15%;
+ top: 13%;
+ box-sizing: border-box;
+ padding: 0 20px;
+ }
+
+
+ .productName {
+ position: relative;
+ display: inline-block;
+ max-width: 500px;
+
+ img {
+ position: absolute;
+ right: -7rem;
+ bottom: 9rem;
+ }
+
+ .brandName {
+ font-family: PingFangSC-Thin;
+ font-size: 7.5rem;
+ width: 25rem;
+ color: #C4C4C4;
+ letter-spacing: 2px;
+ white-space: nowrap;
+ }
+ .projectName {
+ font-family: HelveticaNeue-Bold;
+ width: 25rem;
+ height: 10rem;
+ background-size: contain;
+ position: relative;
+ background-repeat: no-repeat;
+ }
+ }
+
+ .productDesc {
+ .fadeInAnimation;
+ width: 550px;
+ font-family: HelveticaNeue-Medium;
+ color: rgba(255, 255, 255, 0.6);
+ margin-top: 1rem;
+ font-size: 18px;
+ line-height: 27px;
+ }
+
+ .buttonArea {
+ margin-top: 40px;
+ }
+
+ .productDesc2 {
+ .fadeInAnimation;
+ font-family: Helvetica;
+ font-size: 1.5rem;
+ color: var(--ifm-color-primary);
+ text-align: justify;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .split {
+ width: 1px;
+ background: var(--ifm-color-primary);
+ height: 20px;
+ margin: 0 5px;
+ }
+ }
+
+ .featureSection {
+ box-sizing: border-box;
+ position: relative;
+ padding: 80px 15%;
+ background-size: cover;
+ }
+
+ .index {
+ letter-spacing: 0;
+ text-align: center;
+ line-height: 36px;
+ width: 60%;
+ margin: 0 20%;
+ font-family: Helvetica;
+ font-size: 30px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+
+ span {
+ display: inline-block;
+ margin-bottom: 24px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #ccc;
+ }
+ }
+
+ .pageTitleWrap {
+ display: inline-block;
+ padding-left: 1.5rem;
+ border-left: 2px solid #4982E0;
+
+ .page1TitleL1 {
+ font-family: PingFangSC-Regular;
+ font-size: 30px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ }
+
+ .page1TitleL2 {
+ opacity: 0.5;
+ font-family: PingFangSC-Regular;
+ font-size: 16px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ }
+ }
+
+ .titleIndex {
+ font-family: Helvetica;
+ font-size: 5rem;
+ color: var(--ifm-color-primary);
+ letter-spacing: 0;
+ line-height: 5rem;
+ display: inline;
+ padding-right: 1.5rem;
+ }
+
+ h3 {
+ margin: 0 0 40px 0;
+ font-family: Helvetica;
+ font-size: 2.5rem;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ display: inline;
+ }
+
+ ul {
+ margin-top: 2rem;
+ list-style: none;
+ padding: 0;
+ background: #000;
+
+ li {
+ vertical-align: top;
+ display: inline-block;
+ margin-bottom: 40px;
+ width: 20%;
+ text-align: center;
+ min-height: 26rem;
+ padding-top: 4rem;
+ position: relative;
+
+ .featureIcon {
+ width: 56px;
+ height: 56px;
+ background-size: contain!important;
+ }
+
+ div {
+ margin: auto;
+ width: 80%;
+
+ h4 {
+ font-family: Helvetica;
+ font-size: 1.5rem;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ margin-top: 2rem;
+ min-height: 4rem;
+ }
+ p {
+ margin-top: 2rem;
+ text-align: left;
+ font-family: Helvetica;
+ font-size: 14px;
+ color: #FFFFFF;
+ letter-spacing: 0;
+ line-height: 21px;
+ }
+ }
+ }
+ @media screen and (max-width: 768px){
+ li {
+ width: 100%;
+ }
+ }
+ }
+
+ .architectureImgWrap {
+ width: 100%;
+ }
+
+ .architectureImg {
+ .fadeInAnimation;
+ width: 100%;
+ }
+
+}
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 654464cf2a..313562e925 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -4,7 +4,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import IndexArch from '../../../static/img/index-arch.svg';
import Button from '../../components/Button';
import config from './config';
-import './index.less';
+import styles from './home.module.less';
export default function() {
const isBrowser = useIsBrowser();
@@ -13,24 +13,24 @@ export default function() {
const dataSource = config?.[language];
return (
- <div className="home-page">
- <section className="top-section" style={{backgroundImage:
`url("${useBaseUrl('/img/first-page-bg.png')}"`}}>
- <div className="vertical-middle">
- <div className="product-name">
- <div className="brandname">{dataSource.brand.brandName}</div>
- <div className="projectname" style={{backgroundImage:
`url("${useBaseUrl('/img/inlong-en.svg')}"`}}>
+ <div className={styles.homePage}>
+ <section className={styles.topSection} style={{backgroundImage:
`url("${useBaseUrl('/img/first-page-bg.png')}"`}}>
+ <div className={styles.verticalMiddle}>
+ <div className={styles.productName}>
+ <div
className={styles.brandName}>{dataSource.brand.brandName}</div>
+ <div className={styles.projectName} style={{backgroundImage:
`url("${useBaseUrl('/img/inlong-en.svg')}"`}}>
</div>
</div>
- <div className="product-desc2">
+ <div className={styles.productDesc2}>
{
dataSource.brand.features.map((item, index, arr) => [
<div key={`text-${index}`}>{item}</div>,
- index !== arr.length - 1 && <div key={`split-${index}`}
className="split"></div>
+ index !== arr.length - 1 && <div key={`split-${index}`}
className={styles.split}></div>
])
}
</div>
- <p className="product-desc">{dataSource.brand.briefIntroduction}</p>
- <div className="button-area">
+ <p
className={styles.productDesc}>{dataSource.brand.briefIntroduction}</p>
+ <div className={styles.buttonArea}>
{
dataSource.brand.buttons.map((b, index, arr) => (
<Button
@@ -47,25 +47,25 @@ export default function() {
</div>
</div>
</section>
- <section className="feature-section" style={{backgroundImage:
`url("${useBaseUrl('/img/sec-page-bg.png')}")`}}>
- <div className="title-index">01</div>
+ <section className={styles.featureSection} style={{backgroundImage:
`url("${useBaseUrl('/img/sec-page-bg.png')}")`}}>
+ <div className={styles.titleIndex}>01</div>
{
- language === 'zh-CN' && <div className="page-title-wrap">
- <div className="page1-title-l1">{dataSource.features.title}</div>
- <div className="page1-title-l2">PRODUCT ADVANTAGES</div>
+ language === 'zh-CN' && <div className={styles.pageTitleWrap}>
+ <div
className={styles.page1TitleL1}>{dataSource.features.title}</div>
+ <div className={styles.page1TitleL2}>PRODUCT ADVANTAGES</div>
</div>
}
{
- language === 'en' && <div className="page-title-wrap">
- <div className="page1-title-l2">PRODUCT</div>
- <div className="page1-title-l1">ADVANTAGES</div>
+ language === 'en' && <div className={styles.pageTitleWrap}>
+ <div className={styles.page1TitleL2}>PRODUCT</div>
+ <div className={styles.page1TitleL1}>ADVANTAGES</div>
</div>
}
<ul>
{
dataSource.features.list.map((feature, i) => (
<li key={i} index={i}>
- <div className="feature-icon" style={{backgroundImage:
`url("${useBaseUrl(feature.img)}")`}} />
+ <div className={styles.featureIcon} style={{backgroundImage:
`url("${useBaseUrl(feature.img)}")`}} />
<div>
<h4>{feature.title}</h4>
<p>{feature.content}</p>
@@ -75,21 +75,21 @@ export default function() {
}
</ul>
</section>
- <section className="feature-section" style={{backgroundColor: '#000'}}>
- <div className="title-index">02</div>
+ <section className={styles.featureSection} style={{backgroundColor:
'#000'}}>
+ <div className={styles.titleIndex}>02</div>
{
- language === 'zh-CN' && <div className="page-title-wrap">
- <div
className="page1-title-l1">{dataSource.architecture.title}</div>
- <div className="page1-title-l2">PRODUCT STRUCTURE</div>
+ language === 'zh-CN' && <div className={styles.pageTitleWrap}>
+ <div
className={styles.page1TitleL1}>{dataSource.architecture.title}</div>
+ <div className={styles.page1TitleL2}>PRODUCT STRUCTURE</div>
</div>
}
{
- language === 'en' && <div className="page-title-wrap">
- <div className="page1-title-l2">PRODUCT</div>
- <div className="page1-title-l1">STRUCTURE</div>
+ language === 'en' && <div className={styles.pageTitleWrap}>
+ <div className={styles.page1TitleL2}>PRODUCT</div>
+ <div className={styles.page1TitleL1}>STRUCTURE</div>
</div>
}
- <div className="architecture-img-wrap">
+ <div className={styles.architectureImgWrap}>
<IndexArch style={{ width: '100%' }} />
</div>
</section>
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
deleted file mode 100644
index 013495c1af..0000000000
--- a/src/pages/Home/index.less
+++ /dev/null
@@ -1,215 +0,0 @@
-@keyframes fadeIn {
- 0% {
- opacity: 0;
- transform: translate3d(0,50%,0);
- }
- 100% {
- opacity: 1;
- transform: translateZ(0);
- }
-}
-
-.fadeInAnimation {
- animation-name: fadeIn;
- animation-delay: 0s;
- animation-duration: 1s;
- animation-fill-mode: both;
-}
-
-.home-page {
- .top-section {
- position: relative;
- height: 100vh;
- min-height: 800px;
- background-size: cover;
- background-position: bottom;
- .vertical-middle {
- position: absolute;
- left: 15%;
- top: 13%;
- box-sizing: border-box;
- padding: 0 20px;
- }
- .product-name {
- position: relative;
- display: inline-block;
- max-width: 500px;
-
- img {
- position: absolute;
- right: -7rem;
- bottom: 9rem;
- }
-
- .brandname {
- font-family: PingFangSC-Thin;
- font-size: 7.5rem;
- width: 25rem;
- color: #C4C4C4;
- letter-spacing: 2px;
- white-space: nowrap;
- }
- .projectname {
- font-family: HelveticaNeue-Bold;
- width: 25rem;
- height: 10rem;
- background-size: contain;
- position: relative;
- background-repeat: no-repeat;
- }
- }
- .product-desc2 {
- .fadeInAnimation;
- font-family: Helvetica;
- font-size: 1.5rem;
- color: var(--ifm-color-primary);
- text-align: justify;
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .split {
- width: 1px;
- background: var(--ifm-color-primary);
- height: 20px;
- margin: 0 5px;
- }
- }
- .product-desc {
- .fadeInAnimation;
- width: 550px;
- font-family: HelveticaNeue-Medium;
- color: rgba(255, 255, 255, 0.6);
- margin-top: 1rem;
- font-size: 18px;
- line-height: 27px;
- }
- .button-area {
- margin-top: 40px;
- }
- }
-
- .feature-section {
- box-sizing: border-box;
- position: relative;
- padding: 80px 15%;
- background-size: cover;
-
- .index {
- letter-spacing: 0;
- text-align: center;
- line-height: 36px;
- width: 60%;
- margin: 0 20%;
- font-family: Helvetica;
- font-size: 30px;
- color: #FFFFFF;
- letter-spacing: 0;
-
- span {
- display: inline-block;
- margin-bottom: 24px;
- padding-bottom: 8px;
- border-bottom: 1px solid #ccc;
- }
- }
-
- .page-title-wrap {
- display: inline-block;
- padding-left: 1.5rem;
- border-left: 2px solid #4982E0;
-
- .page1-title-l1 {
- font-family: PingFangSC-Regular;
- font-size: 30px;
- color: #FFFFFF;
- letter-spacing: 0;
- }
-
- .page1-title-l2 {
- opacity: 0.5;
- font-family: PingFangSC-Regular;
- font-size: 16px;
- color: #FFFFFF;
- letter-spacing: 0;
- }
- }
-
- .title-index {
- font-family: Helvetica;
- font-size: 5rem;
- color: var(--ifm-color-primary);
- letter-spacing: 0;
- line-height: 5rem;
- display: inline;
- padding-right: 1.5rem;
- }
- h3 {
- margin: 0 0 40px 0;
- font-family: Helvetica;
- font-size: 2.5rem;
- color: #FFFFFF;
- letter-spacing: 0;
- display: inline;
- }
- ul {
- margin-top: 2rem;
- list-style: none;
- padding: 0;
- background: #000;
-
- li {
- vertical-align: top;
- display: inline-block;
- margin-bottom: 40px;
- width: 20%;
- text-align: center;
- min-height: 26rem;
- padding-top: 4rem;
- position: relative;
-
- .feature-icon {
- width: 56px;
- height: 56px;
- background-size: contain!important;
- }
-
- div {
- margin: auto;
- width: 80%;
-
- h4 {
- font-family: Helvetica;
- font-size: 1.5rem;
- color: #FFFFFF;
- letter-spacing: 0;
- margin-top: 2rem;
- min-height: 4rem;
- }
- p {
- margin-top: 2rem;
- text-align: left;
- font-family: Helvetica;
- font-size: 14px;
- color: #FFFFFF;
- letter-spacing: 0;
- line-height: 21px;
- }
- }
- }
- @media screen and (max-width: 768px){
- li {
- width: 100%;
- }
- }
- }
- }
-
- .architecture-img-wrap {
- width: 100%;
- }
- .architecture-img {
- .fadeInAnimation;
- width: 100%;
- }
-}
