From 0c31798188ff795e1a84a3e5696f5163c8a9dc51 Mon Sep 17 00:00:00 2001 From: Qi Zhang Date: Sat, 8 Oct 2022 19:10:15 +0800 Subject: [PATCH 1/3] feature: modify homepage Signed-off-by: Qi Zhang --- package.json | 1 + src/components/HomePage/Feature/index.tsx | 33 +++++++++++++++---- src/components/HomePage/Primary/index.tsx | 2 +- src/components/HomePage/Users/index.tsx | 19 +++++++++++ .../HomePage/Users/styles.module.css | 31 +++++++++++++++++ src/components/NavBar/index.module.scss | 2 +- static/img/homepage/svg/case.svg | 1 + yarn.lock | 5 +++ 8 files changed, 86 insertions(+), 8 deletions(-) create mode 100644 static/img/homepage/svg/case.svg diff --git a/package.json b/package.json index 01f087554d..5ee9acb434 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react": "^17.0.1", "react-bootstrap": "^2.5.0", "react-dom": "^17.0.1", + "react-photo-view": "^1.2.2", "react-popper": "^2.3.0", "react-spring": "^9.5.2", "sass": "^1.49.9", diff --git a/src/components/HomePage/Feature/index.tsx b/src/components/HomePage/Feature/index.tsx index d1e5422a95..e5cfa5fa9c 100644 --- a/src/components/HomePage/Feature/index.tsx +++ b/src/components/HomePage/Feature/index.tsx @@ -11,12 +11,13 @@ import { animated, useTrail } from "react-spring"; import styles from "./styles.module.css"; import clsx from "clsx"; import Link from "@docusaurus/Link"; -import { Image } from '@douyinfe/semi-ui'; import Devops from '/img/homepage/svg/devops.svg'; import K8s from '/img/homepage/svg/k8sblue.svg'; import Servicemesh from '/img/homepage/svg/servicemesh.svg'; import Store from '/img/homepage/svg/store.svg'; import Model from '/img/homepage/svg/model.svg'; +import { PhotoProvider, PhotoView } from 'react-photo-view'; +import 'react-photo-view/dist/react-photo-view.css'; export default function Feature() { @@ -39,7 +40,11 @@ export default function Feature() {
- + + + + +
@@ -88,7 +93,11 @@ export default function Feature() {
- + + + + +
@@ -96,7 +105,11 @@ export default function Feature() {
- + + + + +
@@ -146,7 +159,11 @@ export default function Feature() {
- + + + + +
@@ -154,7 +171,11 @@ export default function Feature() {
- + + + + +
diff --git a/src/components/HomePage/Primary/index.tsx b/src/components/HomePage/Primary/index.tsx index 1d691e58fb..d1eec54c2b 100644 --- a/src/components/HomePage/Primary/index.tsx +++ b/src/components/HomePage/Primary/index.tsx @@ -52,7 +52,7 @@ export default function Primary() { diff --git a/src/components/HomePage/Users/index.tsx b/src/components/HomePage/Users/index.tsx index 4f05fc9c69..76e1cd1b6c 100644 --- a/src/components/HomePage/Users/index.tsx +++ b/src/components/HomePage/Users/index.tsx @@ -5,13 +5,18 @@ * LICENSE file in the root directory of this source tree. */ +import Link from "@docusaurus/Link"; import clsx from "clsx"; import React, { useState } from "react"; import { animated, useTrail } from "react-spring"; import styles from "./styles.module.css"; +import { Button } from '@douyinfe/semi-ui'; +import Case from '/img/homepage/svg/case.svg'; +import { Typography } from '@douyinfe/semi-ui'; export default function Users() { + const { Text } = Typography; const animatedTexts = useTrail(5, { from: { opacity: 0, transform: 'translateY(3em)' }, to: { opacity: 1, transform: 'translateY(0)' }, @@ -130,6 +135,20 @@ export default function Users() {
))}
+
+
+ + + +
+
+ + 如果你想贡献使用案例并在 Rainbond 官网上展示你的 Logo，请在 Github 上登记或联系我们。 + +
+
); } \ No newline at end of file diff --git a/src/components/HomePage/Users/styles.module.css b/src/components/HomePage/Users/styles.module.css index 6114690ced..9a7b3fce39 100644 --- a/src/components/HomePage/Users/styles.module.css +++ b/src/components/HomePage/Users/styles.module.css @@ -40,4 +40,35 @@ vertical-align: middle; display: inline-block; /* line-height: 100px; */ +} + +.case { + padding-top: 50px; + text-align: center; +} + +.case_col { + padding-top: 15px; +} + +.button { + margin-right: 10px; + border-radius: 30px; + background-color: #19AABD; + height: 55px; + width: 210px; + font-size: 16px; +} +.button:hover { + background-color: #19AABD !important; + box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); +} + +.text > a { + color: var(--ifm-color-primary-black) !important; + border-bottom: 1px solid; +} +.text > a > span:hover { + color: #19AABD !important; + border-bottom: 1px solid #19AABD !important; } \ No newline at end of file diff --git a/src/components/NavBar/index.module.scss b/src/components/NavBar/index.module.scss index db3e2883a7..e19d4c9354 100644 --- a/src/components/NavBar/index.module.scss +++ b/src/components/NavBar/index.module.scss @@ -57,7 +57,7 @@ width: 100%; position: fixed; top: 0; - z-index: 9999; + z-index: 10; background-color: #fff; border-bottom: solid; border-color: var(--background-color-light); diff --git a/static/img/homepage/svg/case.svg b/static/img/homepage/svg/case.svg new file mode 100644 index 0000000000..1ad1f0cf05 --- /dev/null +++ b/static/img/homepage/svg/case.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7d53e45669..1a6adbb9d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9243,6 +9243,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1: dependencies: "@babel/runtime" "^7.10.3" +react-photo-view@^1.2.2: + version "1.2.2" + resolved "https://registry.npmmirror.com/react-photo-view/-/react-photo-view-1.2.2.tgz#deaed9af83ec5ccc1f240c58a62bffeb0a6c0187" + integrity sha512-/xsOiDuiR23hKxpmF73EDKPvsBvcWogolXvnBhMZV4CUhd9tnXF91amjKnuQe9BmLaR9CbNxXDOI9SNKeXT5ew== + react-popper@^2.3.0: version "2.3.0" resolved "https://registry.npmmirror.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" From 8e6be0cf680e9c7e7f8fa6e21018295307b88906 Mon Sep 17 00:00:00 2001 From: Qi Zhang Date: Sat, 8 Oct 2022 23:51:17 +0800 Subject: [PATCH 2/3] feature: Mobile Adaptation Signed-off-by: Qi Zhang --- src/components/HomePage/Command/index.tsx | 8 ++- src/components/HomePage/Feature/index.tsx | 18 +++--- .../HomePage/Feature/styles.module.css | 63 +++++++++++++++++++ .../HomePage/JoinCommunity/styles.module.css | 10 +++ src/components/HomePage/Primary/index.tsx | 11 ++-- .../HomePage/Primary/styles.module.css | 15 +++++ .../HomePage/Users/styles.module.css | 6 ++ 7 files changed, 112 insertions(+), 19 deletions(-) diff --git a/src/components/HomePage/Command/index.tsx b/src/components/HomePage/Command/index.tsx index df1394dc78..4849f2bc5d 100644 --- a/src/components/HomePage/Command/index.tsx +++ b/src/components/HomePage/Command/index.tsx @@ -8,8 +8,7 @@ import React from "react"; import { animated, useTrail } from "react-spring"; import CodeBlock from '@theme/CodeBlock'; -import { Tabs, TabPane, RadioGroup, Radio } from '@douyinfe/semi-ui'; -import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons'; +import { Tabs, TabPane } from '@douyinfe/semi-ui'; export default function Command() { @@ -22,10 +21,13 @@ export default function Command() { tension: 460, }, }) + + const ScreenWidth = window.screen.width; + const tabPosition = ScreenWidth < 1000 ? "top" : "left"; return ( - +

在 Linux 上快速安装体验 Rainbond

diff --git a/src/components/HomePage/Feature/index.tsx b/src/components/HomePage/Feature/index.tsx index e5cfa5fa9c..60d2125302 100644 --- a/src/components/HomePage/Feature/index.tsx +++ b/src/components/HomePage/Feature/index.tsx @@ -49,7 +49,7 @@ export default function Feature() {
-
+
@@ -58,7 +58,7 @@ export default function Feature() {
-

+

Rainbond使用“以应用为中心”的设计理念,对开发人员友好,不用学习容器和Kubernetes等底层技术,开发人员对应用开发和应用运维过程自主可控,已有项目和代码不需要改变 复杂的系统管理和平台管理由平台管理员负责,兼容各种Kubernetes版本和Kubernetes工具,实现各司其职

@@ -82,7 +82,7 @@ export default function Feature() {
-

+

Rainbond控制台支持对接管理多种Kubernetes集群，支持应用级开发和管理体验，不需要写Yaml，通过应用级抽象，应用跨集群部署、安装、迁移、备份

@@ -114,7 +114,7 @@ export default function Feature() {
-
+
@@ -123,7 +123,7 @@ export default function Feature() {
-

+

传统应用部署到Rainbond，开启应用级插件就可以支持Service Mesh，并可按需更换Service Mesh框架 通过组件级的插件扩展日志管理、性能分析、监控等服务治理工具，并支持Spring Cloud 、Dubbo等常见微服务框架

@@ -147,7 +147,7 @@ export default function Feature() {
-

+

支持应用市场全流程管理（应用构建和拼装、应用发布应用市场、应用市场展示和管理、应用导出和导入、应用一键安装和升级） 通过应用模版可以将任何类型的应用发布到应用市场，并实现复杂应用一键交付客户环境

@@ -170,7 +170,7 @@ export default function Feature() { {/* Application model */}
-
+
@@ -180,7 +180,7 @@ export default function Feature() {
-
+
@@ -189,7 +189,7 @@ export default function Feature() {
-

+

通过应用模型抽象，让开发人员可以更多的关心业务本身，而不是底层复杂工具的使用问题。最终的效果是降低操作成本和理解难度，让Kubernetes更加容易落地

diff --git a/src/components/HomePage/Feature/styles.module.css b/src/components/HomePage/Feature/styles.module.css index d87904e375..3f5a092d1f 100644 --- a/src/components/HomePage/Feature/styles.module.css +++ b/src/components/HomePage/Feature/styles.module.css @@ -5,6 +5,35 @@ * LICENSE file in the root directory of this source tree. **/ +@media screen and (max-width: 996px) { + .desc_svg { + padding-top: 2rem; + } + .app_model_image { + width: 100% !important; + } +} +@media screen and (max-width: 396px) { + .devops_content { + width: 100% !important; + } + + .k8s_content { + width: 100% !important; + } + + .mesh_content { + width: 100% !important; + } + + .store_content { + width: 100% !important; + } + + .model_content { + width: 100% !important; + } +} .global { text-align: center; line-height: 32px; @@ -29,4 +58,38 @@ .card { box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1); +} + +.app_model_image { + width: 500px; +} + +.devops_content { + float: right; + width: 455px; + text-align: left; +} + +.k8s_content { + float: left; + width: 455px; + text-align: left; +} + +.mesh_content { + float: right; + width: 460px; + text-align: left; +} + +.store_content { + float: left; + width: 460px; + text-align: left; +} + +.model_content { + float: right; + width: 330px; + text-align: left; } \ No newline at end of file diff --git a/src/components/HomePage/JoinCommunity/styles.module.css b/src/components/HomePage/JoinCommunity/styles.module.css index 8d53ccfb76..1ed7b2aaef 100644 --- a/src/components/HomePage/JoinCommunity/styles.module.css +++ b/src/components/HomePage/JoinCommunity/styles.module.css @@ -6,6 +6,16 @@ **/ + @media screen and (max-width: 996px) { + .card { + height: auto !important; + } + .cardRight { + margin-top: 1.5rem; + height: auto !important; + } +} + .container { padding-top: 100px; padding-bottom: 100px; diff --git a/src/components/HomePage/Primary/index.tsx b/src/components/HomePage/Primary/index.tsx index d1eec54c2b..113a27fa94 100644 --- a/src/components/HomePage/Primary/index.tsx +++ b/src/components/HomePage/Primary/index.tsx @@ -34,7 +34,7 @@ export default function Primary() { return (
-
+
- +
{ setMask_config(true); }} > - +
diff --git a/src/components/HomePage/Primary/styles.module.css b/src/components/HomePage/Primary/styles.module.css index defb858b1d..eec01bb619 100644 --- a/src/components/HomePage/Primary/styles.module.css +++ b/src/components/HomePage/Primary/styles.module.css @@ -5,6 +5,21 @@ * LICENSE file in the root directory of this source tree. **/ +@media screen and (max-width: 996px) { + .rainbond { + text-align: center; + padding-bottom: 5rem; + } + .rainbond_description { + width: 100% !important; + } +} +@media screen and (max-width: 496px) { + .buttonLeft { + margin-bottom: 0.5rem; + } +} + /* Rainbond title */ .rainbond_title { font-size: 48px; diff --git a/src/components/HomePage/Users/styles.module.css b/src/components/HomePage/Users/styles.module.css index 9a7b3fce39..2556dc03e3 100644 --- a/src/components/HomePage/Users/styles.module.css +++ b/src/components/HomePage/Users/styles.module.css @@ -5,6 +5,12 @@ * LICENSE file in the root directory of this source tree. **/ +@media screen and (max-width: 996px) { + .col { + --ifm-col-width: 200px !important; + } +} + .row { padding-top: 30px; } From f87aae431610bbef7286fa34d7ff6c60cdff916a Mon Sep 17 00:00:00 2001 From: Qi Zhang Date: Sun, 9 Oct 2022 01:31:35 +0800 Subject: [PATCH 3/3] feature: Mobile Adaptation Signed-off-by: Qi Zhang --- src/components/HomePage/Command/index.tsx | 8 ++++---- src/components/HomePage/HowRainbond/index.tsx | 2 +- src/components/HomePage/JoinCommunity/index.tsx | 4 ++-- src/components/HomePage/Users/index.tsx | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/HomePage/Command/index.tsx b/src/components/HomePage/Command/index.tsx index 4849f2bc5d..a429c9c322 100644 --- a/src/components/HomePage/Command/index.tsx +++ b/src/components/HomePage/Command/index.tsx @@ -5,10 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import React from "react"; +import React, { useState } from "react"; import { animated, useTrail } from "react-spring"; import CodeBlock from '@theme/CodeBlock'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; +import {useWindowSize} from '@docusaurus/theme-common'; export default function Command() { @@ -21,10 +22,9 @@ export default function Command() { tension: 460, }, }) + const windowSize = useWindowSize(); + const tabPosition = windowSize === 'desktop' ? "left" : "top"; - const ScreenWidth = window.screen.width; - const tabPosition = ScreenWidth < 1000 ? "top" : "left"; - return ( diff --git a/src/components/HomePage/HowRainbond/index.tsx b/src/components/HomePage/HowRainbond/index.tsx index 3b044f5587..ef3d87f661 100644 --- a/src/components/HomePage/HowRainbond/index.tsx +++ b/src/components/HomePage/HowRainbond/index.tsx @@ -75,7 +75,7 @@ export default function HowRainbond() {
{Cards().map(({header, content, link},index) => ( -
+
diff --git a/src/components/HomePage/JoinCommunity/index.tsx b/src/components/HomePage/JoinCommunity/index.tsx index 891d5bc7ab..d56db6bd24 100644 --- a/src/components/HomePage/JoinCommunity/index.tsx +++ b/src/components/HomePage/JoinCommunity/index.tsx @@ -50,7 +50,7 @@ export default function JoinCommunity() { -
@@ -61,7 +61,7 @@ export default function JoinCommunity() { -
搜索钉钉群号 31096419 加入 Rainbond 钉钉技术交流群 diff --git a/src/components/HomePage/Users/index.tsx b/src/components/HomePage/Users/index.tsx index 76e1cd1b6c..321002f93a 100644 --- a/src/components/HomePage/Users/index.tsx +++ b/src/components/HomePage/Users/index.tsx @@ -125,8 +125,8 @@ export default function Users() {

我们的用户

- {Cards().map(({image}) => ( -
+ {Cards().map(({image},index) => ( +