Skip to content

Commit e44f4c1

Browse files
jaywcjlovejaywcjlove
committed
website: update team page style.
1 parent 1260129 commit e44f4c1

File tree

9 files changed

+220
-25
lines changed

9 files changed

+220
-25
lines changed

‎website/src/component/ButtonStyle/index.module.less‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.btn {
2+
line-height: 1;
3+
height: 40px;
4+
border-radius: 4px;
5+
border: 0;
6+
outline: none;
7+
padding: 0 16px;
8+
text-decoration: none;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: center;
12+
align-items: center;
13+
white-space: nowrap;
14+
overflow: hidden;
15+
background-color: #1b1f23;
16+
color: #fff;
17+
cursor: pointer;
18+
transition: 150ms;
19+
transform: translate3d(0, 0, 0);
20+
display: inline-flex;
21+
align-items: center;
22+
padding: 0 32px;
23+
height: 52px;
24+
font-size: 18px;
25+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.05);
26+
background: linear-gradient(#464d55, #25292e);
27+
border-radius: 8px;
28+
margin-top: 20px;
29+
& + a {
30+
margin-left: 20px;
31+
}
32+
&:hover {
33+
box-shadow: 0 2px 8px rgb(0 1 0 / 20%);
34+
opacity: 0.85;
35+
}
36+
}

‎website/src/component/ButtonStyle/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import styles from './index.module.less';
3+
4+
interface ButtonStyleProps extends React.HTMLAttributes<HTMLDivElement> { }
5+
6+
export default function ButtonStyle(props: ButtonStyleProps) {
7+
const { children, ...other } = props;
8+
if (React.isValidElement(children)) {
9+
return React.cloneElement(children, {
10+
className: styles.btn,
11+
...other
12+
})
13+
}
14+
return null;
15+
}

‎website/src/component/Footer/index.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const data = [
2020
title: 'React Native Alipay'
2121
},
2222
{
23-
href : 'https://github.com/uiwjs/uiw',
24-
title: 'UIW on GitHub'
23+
href : 'https://github.com/uiwjs/react-native-amap-geolocation',
24+
title: 'React Native AMap Geolocation'
2525
},
2626
{
2727
href : 'https://gitee.com/uiw/react-native-uiw',
@@ -44,6 +44,10 @@ const data = [
4444
href : 'https://github.com/jondot/awesome-react-native',
4545
title: 'Awesome React Native'
4646
},
47+
{
48+
href : 'https://github.com/uiwjs/uiw',
49+
title: 'UIW on GitHub'
50+
},
4751
]
4852
},
4953
{
@@ -57,14 +61,6 @@ const data = [
5761
href : 'https://github.com/rematch/rematch',
5862
title: 'Rematch.js'
5963
},
60-
{
61-
href : 'https://github.com/uiwjs/react-native-alipay',
62-
title: 'React Native Alipay'
63-
},
64-
{
65-
href : 'https://github.com/uiwjs/react-native-amap-geolocation',
66-
title: 'React Native AMap Geolocation'
67-
},
6864
]
6965
},
7066
{

‎website/src/pages/docs/development/components/README.md‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33

44
当前 [`react-native-uiw`](https://github.com/uiwjs/react-native-uiw) 项目工程，使用 [Yarn](https://classic.yarnpkg.com/lang/en/) & [lerna](https://github.com/lerna/lerna) 构建 `monorepo`，整个里面包含 `example` 示例、`packages` 组件包、`website` 文档网站。
55

6+
> `⚠️注意事项:示例依赖不可随意更新`<!--rehype:style=background: #da0000; color: #fff;-->
7+
> 1. 🪲 添加新依赖包，需要配置 [nohoist](https://github.com/uiwjs/react-native-uiw/blob/46f73cf7ca5404184df7fa996a33f821d45cf0e7/package.json#L62-L80)，以解决子包依赖不存在的问题。
8+
> 2. 📦 如果依赖本地包，React Native 示例需要更改 [metro](https://github.com/facebook/metro) 配置 [metro.config.js](https://github.com/uiwjs/react-native-uiw/blob/9a300184608c71615167c517433bb9aed606f0ec/example/examples/metro.config.js#L12)
9+
> 3. 🐛Pod 版本请根据项目安装，可以在 `ios/Podfile`<!--rehype:style=color: #e00000;--> 中确定使用那个版本的 `pod`
10+
> 4. ✅ 组件仅支持 `react-native@0.60+`<!--rehype:style=color: #e00000;--> 以上的版本。
11+
> 5. ⛳️ [React Navigation 6](https://github.com/react-navigation/react-navigation) 至少需要 [react-native@0.63.0](https://github.com/facebook/react-native)。 如果您使用的是 Expo，则您的 SDK 版本需要至少为 41。
12+
<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
13+
614
## 目录结构
715

816
```bash
@@ -75,14 +83,14 @@ npm run watch
7583

7684
```bash
7785
├── example
78-
│ ├── base ⚛️
79-
│ │ └── lib # ◀┈┈┤ 🔄 生成组件源码
80-
│ └── examples # ┆
81-
│ └── lib # ◀┈┈┤ 🔄 生成组件源码
82-
└── packages # ┆
83-
└── core # ┆ 📦
84-
├── lib # ◀┈┈┤ 🔄 剔除 TS 类型的源码输出目录
85-
└── src #┈┈┈┈┈╯ ✅ 组件源码
86+
│ ├── base
87+
│ │ └── lib # ◀┈┈┤ 🔄 生成组件源码
88+
│ └── examples # ┆
89+
│ └── lib # ◀┈┈┤ 🔄 生成组件源码
90+
└── packages # ┆
91+
└── core # ┆ 📦
92+
├── lib # ◀┈┈┤ 🔄 剔除 TS 类型的源码输出目录
93+
└── src #→▶┈▶▷┈╯ ✅ 组件源码
8694
```
8795

8896
### `第 3 步：启动 APP 应用`
@@ -132,7 +140,7 @@ yarn run ios
132140

133141
我们有很多方法修正这种问题，例如多个根目录，自定义模块映射方案等等。
134142

135-
通过配置 `nohoist` 使 `workspaces` 能够使用与其提升方案不兼容的第 3 方库。 这个想法是禁用选定的模块被提升到项目根目录。 它们被放置在实际的（子）项目中，就像在一个独立的、非工作区的项目中一样。
143+
通过配置 [`nohoist`](https://github.com/uiwjs/react-native-uiw/blob/46f73cf7ca5404184df7fa996a33f821d45cf0e7/package.json#L62-L80) 使 `workspaces` 能够使用与其提升方案不兼容的第 3 方库。 这个想法是禁用选定的模块被提升到项目根目录。 它们被放置在实际的（子）项目中，就像在一个独立的、非工作区的项目中一样。
136144

137145
在私有项目根目录下，使用 nohoist：
138146

@@ -164,7 +172,7 @@ yarn run ios
164172

165173
#### `自定义模块映射方案`
166174

167-
[`react-native-uiw`](https://github.com/uiwjs/react-native-uiw) 提供了一种通过 [`metro.config.js`](https://facebook.github.io/metro) 配置多根的方法。 通过 `metro.config.js` 中配置 [`extraNodeModules`](https://facebook.github.io/metro/docs/configuration#extranodemodules) 需要映射的模块
175+
[`react-native-uiw`](https://github.com/uiwjs/react-native-uiw) 提供了一种通过 [metro.config.js](https://github.com/uiwjs/react-native-uiw/blob/9a300184608c71615167c517433bb9aed606f0ec/example/examples/metro.config.js#L12) 配置多根的方法。 通过 `metro.config.js` 中配置 [`extraNodeModules`](https://facebook.github.io/metro/docs/configuration#extranodemodules) 需要映射的模块
168176

169177
```js
170178
const path = require('path');

‎website/src/pages/home/index.module.less‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.header {
2+
position: relative;
3+
text-align: center;
4+
background: linear-gradient(60deg, #393e48c4 0%, #dfe2e5 100%);
5+
color: white;
6+
}
7+
8+
.headerContent {
9+
padding-top: 140px;
10+
padding-bottom: 120px;
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
14+
font-family: PingFangSC-Regular;
15+
font-size: 18px;
16+
text-align: center;
17+
h2 {
18+
font-family: 'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial',
19+
sans-serif;
20+
font-size: 74px;
21+
line-height: 1.07143;
22+
font-weight: 800;
23+
letter-spacing: -0.005em;
24+
display: block;
25+
}
26+
p {
27+
padding-top: 52px;
28+
}
29+
}
30+
.innerHeader {
31+
height: 65vh;
32+
width: 100%;
33+
margin: 0;
34+
padding: 0;
35+
}
36+
37+
.waves {
38+
position: relative;
39+
width: 100%;
40+
height: 15vh;
41+
margin-bottom: -7px;
42+
min-height: 100px;
43+
max-height: 150px;
44+
:global(.parallax) {
45+
& > use {
46+
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
47+
}
48+
& > use:nth-child(1) {
49+
animation-delay: -2s;
50+
animation-duration: 7s;
51+
}
52+
& > use:nth-child(2) {
53+
animation-delay: -3s;
54+
animation-duration: 10s;
55+
}
56+
& > use:nth-child(3) {
57+
animation-delay: -4s;
58+
animation-duration: 13s;
59+
}
60+
& > use:nth-child(4) {
61+
animation-delay: -5s;
62+
animation-duration: 20s;
63+
}
64+
}
65+
}
66+
67+
@keyframes move-forever {
68+
0% {
69+
transform: translate3d(-90px, 0, 0);
70+
}
71+
100% {
72+
transform: translate3d(85px, 0, 0);
73+
}
74+
}

‎website/src/pages/home/index.tsx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
1-
import Header from '../../component/HeaderTop';
1+
import { Fragment } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import ButtonStyle from '../../component/ButtonStyle';
24
import Footer from '../../component/Footer';
35
import { DefaultProps } from '../../';
6+
import styles from './index.module.less';
7+
import { ReactComponent as Waves } from './waves.svg';
8+
49
export default function Home(props: DefaultProps) {
510
return (
6-
<div>
7-
<Header />
11+
<Fragment>
12+
<div className={styles.header}>
13+
<div className={styles.innerHeader}>
14+
<header className={styles.headerContent}>
15+
<div>
16+
<h2>UIW Mobile RN</h2>
17+
<p>
18+
一个基于 React Native 的 UI 组件库
19+
</p>
20+
</div>
21+
<ButtonStyle>
22+
<Link to="/docs/getting-started">开始使用</Link>
23+
</ButtonStyle>
24+
<ButtonStyle>
25+
<Link to="/components/about">组件文档</Link>
26+
</ButtonStyle>
27+
</header>
28+
</div>
29+
<div>
30+
<Waves className={styles.waves} />
31+
</div>
32+
</div>
833
<Footer />
9-
</div>
34+
</Fragment>
1035
);
1136
}

‎website/src/pages/home/waves.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎website/src/pages/team/index.module.less‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,23 @@
55
text-align: center;
66
background: #f7f7f7;
77
}
8+
9+
.article {
10+
min-height: 60vh;
11+
padding-top: 26px;
12+
padding-bottom: 36px;
13+
display: flex;
14+
flex-direction: column;
15+
align-content: center;
16+
align-items: center;
17+
justify-content: center;
18+
h3 {
19+
font-size: 42px;
20+
color: #a0a0a0;
21+
padding-bottom: 24px;
22+
}
23+
}
24+
825
.header {
926
font-size: 56px;
1027
line-height: 65px;
@@ -19,7 +36,7 @@
1936
}
2037

2138
.team {
22-
max-width: 840px;
39+
max-width: 1024px;
2340
padding-top: 80px;
2441
padding-bottom: 80px;
2542
margin: 0 auto;

‎website/src/pages/team/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Fragment } from 'react';
2+
import { Link } from 'react-router-dom';
23
import { DefaultProps } from '../../';
4+
import ButtonStyle from '../../component/ButtonStyle';
35
import styles from './index.module.less';
46
import FooterTitle from '../../component/Footer';
57

@@ -34,6 +36,17 @@ export default function Team(props: DefaultProps) {
3436
))}
3537
</ul>
3638
</section>
39+
<article className={styles.article}>
40+
<h3>欢迎参与文档编辑 & 组件开发</h3>
41+
<div>
42+
<ButtonStyle>
43+
<Link to="/docs/development/components">参与组件开发</Link>
44+
</ButtonStyle>
45+
<ButtonStyle>
46+
<Link to="/docs/development/document">参与文档编辑</Link>
47+
</ButtonStyle>
48+
</div>
49+
</article>
3750
< FooterTitle />
3851
</Fragment>
3952
);

0 commit comments

Comments
 (0)