Skip to content

Commit feeb6c0

Browse files
13601512191360151219
1360151219
and
1360151219
authored
Feat homepage (#27)
* feat: use gasp * feat: scroll animation(bats&birds&mountains) * feat: 网页路由&主页滚动效果 * feat: 增加md样式 * feat: 优化边距 --------- Co-authored-by: 1360151219 <[email protected]>
1 parent 79b0bc4 commit feeb6c0

File tree

16 files changed

+418
-373
lines changed

16 files changed

+418
-373
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@
1717
"[typescript]": {
1818
"editor.defaultFormatter": "esbenp.prettier-vscode"
1919
},
20-
"svg.preview.background": "white" // required to format on save
20+
"svg.preview.background": "black" // required to format on save
2121
}

‎packages/demo/index.scss‎

Lines changed: 6 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
:root {
2-
--master-bg-color: rgb(252, 234, 220);
3-
--master-deep-bg-color: #c76591;
42
--master-text-color: #fff;
3+
--primary: #1677ff;
54
--link-color: #eabe9e;
65
}
76
* {
@@ -12,101 +11,19 @@ body,
1211
html,
1312
#root {
1413
height: 100%;
15-
font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
14+
font-family: system, -apple-system, BlinkMacSystemFont, PingFang SC, Segoe UI, Microsoft YaHei, wenquanyi micro hei,
15+
Hiragino Sans GB, Hiragino Sans GB W3, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
16+
Helvetica, Arial, sans-serif;
17+
font-weight: 400;
18+
color: var(--master-text-color);
1619
}
1720

18-
h1 {
19-
padding-bottom: 20px;
20-
}
21-
h2 {
22-
position: relative;
23-
margin: 16px 0;
24-
padding: 0 16px;
25-
&::before {
26-
content: '';
27-
position: absolute;
28-
left: 0;
29-
top: 0;
30-
width: 4px;
31-
height: 100%;
32-
background-color: #1677ff;
33-
}
34-
}
35-
h3 {
36-
position: relative;
37-
margin: 12px 0;
38-
padding: 0 12px;
39-
&::before {
40-
content: '';
41-
position: absolute;
42-
left: 0;
43-
top: 0;
44-
width: 3px;
45-
height: 100%;
46-
background-color: #1677ff;
47-
}
48-
}
4921
.display {
5022
height: auto;
5123
}
5224
.hidden {
5325
height: 0;
5426
}
55-
56-
.title {
57-
color: #000;
58-
font-size: 18px;
59-
}
60-
61-
62-
63-
.pivot-code-box {
64-
position: relative;
65-
display: inline-block;
66-
width: 100%;
67-
margin: 16px 0;
68-
overflow: hidden;
69-
border: 1px solid rgba(5, 5, 5, 0.06);
70-
border-radius: 6px;
71-
-webkit-transition: all 0.2s;
72-
transition: all 0.2s;
73-
&-actions {
74-
display: flex;
75-
flex-direction: row-reverse;
76-
padding: 4px 8px;
77-
.pivot-code-box-icon {
78-
width: 20px;
79-
height: 20px;
80-
cursor: pointer;
81-
img {
82-
width: 100%;
83-
height: 100%;
84-
}
85-
}
86-
}
87-
&-demo {
88-
padding: 24px 30px;
89-
display: flex;
90-
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
91-
flex-wrap: wrap;
92-
justify-content: center;
93-
align-items: center;
94-
> :not(.PIVOT-draggable-item) {
95-
margin: 0 24px;
96-
}
97-
}
98-
99-
.line-numbers {
100-
//width: 100%;
101-
.code-toolbar {
102-
.data-prismjs-copy {
103-
//width: 70vw;
104-
//width: 100%;
105-
overflow: auto;
106-
}
107-
}
108-
}
109-
}
11027
.demo-draggable-item {
11128
color: #fff;
11229
background-color: #3685f5;

‎packages/demo/src/components/_CodeBlock/codeBlock.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import Prism from 'prismjs';
2+
import CodeExpendIcon from '../../images/codeExpend';
3+
import CodeUnexpendIcon from '../../images/codeUnexpand';
4+
import './index.scss';
25
import React, { useRef, useState, useEffect, TransitionEventHandler, CSSProperties } from 'react';
36
interface ICodeProps {
47
children: React.ReactNode;
@@ -14,7 +17,7 @@ const CodeBlock: React.FC<ICodeProps> = (props) => {
1417
const [expand, setExpand] = useState(false);
1518
// 使用max-height实现不确定数值的transition
1619
const [codeDisplay, setCodeDisplay] = useState(false);
17-
const codeRef = useRef<HTMLElement>(null);
20+
const codeRef = useRef<HTMLElement>(null)
1821
useEffect(() => {
1922
if (!codeRef.current) {
2023
return;
@@ -41,7 +44,7 @@ const CodeBlock: React.FC<ICodeProps> = (props) => {
4144
setCodeDisplay(false);
4245
}}
4346
>
44-
<img src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" />
47+
<CodeUnexpendIcon />
4548
</div>
4649
) : (
4750
<div
@@ -51,7 +54,7 @@ const CodeBlock: React.FC<ICodeProps> = (props) => {
5154
setCodeDisplay(true);
5255
}}
5356
>
54-
<img src="https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg" />
57+
<CodeExpendIcon />
5558
</div>
5659
)}
5760
</div>

‎packages/demo/src/components/_CodeBlock/index.scss‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,23 @@
44
width: 100%;
55
margin: 16px 0;
66
overflow: hidden;
7-
border: 1px solid rgba(5, 5, 5, 0.06);
7+
border: 1px solid rgba(243, 242, 242, 0.1);
88
border-radius: 6px;
99
-webkit-transition: all 0.2s;
1010
transition: all 0.2s;
1111
&-actions {
1212
display: flex;
1313
flex-direction: row-reverse;
14+
align-items: center;
1415
padding: 4px 8px;
1516
.pivot-code-box-icon {
16-
width: 20px;
17-
height: 20px;
1817
cursor: pointer;
19-
img {
20-
width: 100%;
21-
height: 100%;
22-
}
2318
}
2419
}
2520
&-demo {
26-
padding: 24px 30px;
21+
padding: 60px 30px;
2722
display: flex;
28-
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
23+
border: 1px solid rgba(243, 242, 242, 0.1);
2924
flex-wrap: wrap;
3025
justify-content: center;
3126
align-items: center;
@@ -41,6 +36,7 @@
4136
//width: 70vw;
4237
//width: 100%;
4338
overflow: auto;
39+
margin: 0;
4440
}
4541
}
4642
}

‎packages/demo/src/examples/Draggable/Draggable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ const Draggable = () => {
1212
const [parent, setParent] = useState('');
1313
const [items, setItems] = useState([1, 2, 3, 4, 5]);
1414
const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
15-
const onDragEnd = ({ delta, activeNode }: { delta: { x: number; y: number }; event: Event }) => {
15+
const onDragEnd = ({ delta, activeNode }: { delta: { x: number, y: number }, event: Event }) => {
1616
setCoordinates(({ x, y }) => {
1717
return {
1818
x: x + delta.x,
1919
y: y + delta.y,
2020
};
2121
});
2222
};
23-
const onDragEnd2 = ({ id, isDrop }: { id: string; isDrop: boolean }) => {
23+
const onDragEnd2 = ({ id, isDrop }: { id: string, isDrop: boolean }) => {
2424
setParent(isDrop ? id : '');
2525
};
2626
const reorderItems = (oldIndex: number, newIndex: number) =>

‎packages/demo/src/images/big-logo.tsx‎

Lines changed: 9 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,14 @@
11
function BigLogo() {
22
return (
3-
<svg viewBox="0 0 500 500" version="1.1" id="svg_null">
4-
<g id="root" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
5-
<rect id="background" fill="" x="0" y="0" width="500" height="500" />
6-
<g id="Group" transform="translate(40.000000, 309.000000)">
7-
<text
8-
id="headerText"
9-
fontFamily="Dosis"
10-
fontSize="14"
11-
fill="#634f47"
12-
data-text-alignment="C"
13-
fontStyle="normal"
14-
>
15-
<tspan x="00" y="0">
16-
Pivot Design是由Pivot Studio互联网团队前端组打造的一套用户级组件库。
17-
</tspan>
18-
{/* <tspan x="0" y="16">
19-
Pivot Design包含了一系列可重用的组件，用于构建你的前端应用程序。这些组件包括
20-
</tspan>
21-
<tspan x="0" y="32">
22-
但不限于市面上常见的组件，还拥有更多定制化组件，如拖拽、过渡、动画等组件。
23-
</tspan> */}
24-
</text>
25-
<text
26-
id="headerText"
27-
fontFamily="Dosis"
28-
fontSize="18"
29-
fill="#634f47"
30-
data-text-alignment="C"
31-
fontStyle="normal"
32-
>
33-
<tspan x="14" y="40">
34-
旨在轻松打造美观的用户界面，让您的用户爱不释手。
35-
</tspan>
36-
</text>
37-
</g>
38-
<g id="Group-2" transform="translate(40.000000, 362.000000)">
39-
<rect id="Rectangle" x="0" y="0" width="420" height="32" />
40-
<text
41-
id="captionText"
42-
fontFamily="Dosis"
43-
fontSize="25"
44-
fontWeight="500"
45-
letterSpacing="2.5"
46-
fill="#000"
47-
data-text-alignment="C"
48-
fontStyle="normal"
49-
>
50-
<tspan x="210" y="140" />
51-
</text>
52-
</g>
53-
<g id="shape" transform="translate(149.000000, 109.000000)">
54-
<polygon
55-
id="shape.secondary"
56-
fillOpacity=".02"
57-
fill="#feaa2b"
58-
points="85.089 99.343 85.089 79.769 94.916 89.557"
59-
/>
60-
<polygon
61-
id="shape.secondary"
62-
fillOpacity=".6"
63-
fill="#feaa2b"
64-
points="116.912 168 85.658 168 85.658 115.861 116.912 84.736"
65-
/>
66-
<polygon
67-
id="shape.secondary"
68-
fillOpacity=".8"
69-
fill="#feaa2b"
70-
points="159.455 168 128.201 168 128.201 80.341 159.455 49.217"
71-
/>
72-
<polygon id="shape.secondary" fill="#feaa2b" points="202 168 170.746 168 170.746 31.123 202 0" />
73-
<polygon id="shape.secondary" fillOpacity=".4" fill="#feaa2b" points="74.367 127.105 74.367 168 33.301 168" />
74-
<polygon id="shape.secondary" fillOpacity=".5" fill="#feaa2b" points="130.037 0 101 28.917 71.963 0" />
75-
<polygon id="shape.primary" fillOpacity=".5" fill="#ff5757" points="130.037 0 101 28.917 71.963 0" />
76-
<polygon
77-
id="shape.primary"
78-
fillOpacity=".8"
79-
fill="#ff5757"
80-
points="42.545 140.47 42.545 43.008 73.799 74.132 73.799 109.346"
81-
/>
82-
<polygon
83-
id="shape.primary"
84-
fillOpacity=".6"
85-
fill="#ff5757"
86-
points="85.089 99.343 85.089 79.769 94.916 89.557"
87-
/>
88-
<polygon id="shape.primary" fill="#ff5757" points="21.134 168 0 168 0 0 31.254 31.123 31.254 157.923" />
89-
<polygon id="shape.primary" fillOpacity=".6" fill="#ff5757" points="74.367 127.105 74.367 168 33.301 168" />
90-
</g>
91-
</g>
3+
<svg viewBox="0 0 500 500">
4+
<path
5+
fill="#feaa2b"
6+
d="M234.089 208.343v-19.574l9.827 9.788zM265.912 277h-31.254v-52.139l31.254-31.125zM308.455 277h-31.254v-87.659l31.254-31.124zM351 277h-31.254V140.123L351 109zM223.367 236.105V277h-41.066zM279.037 109L250 137.917 220.963 109z"
7+
/>
8+
<path
9+
fill="#ff5757"
10+
d="M279.037 109L250 137.917 220.963 109zM191.545 249.47v-97.462l31.254 31.124v35.214zM234.089 208.343v-19.574l9.827 9.788zM170.134 277H149V109l31.254 31.123v126.8zM223.367 236.105V277h-41.066z"
11+
/>
9212
</svg>
9313
);
9414
}

‎packages/demo/src/images/codeExpend.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default function CodeExpend(props) {
2+
return (
3+
<svg width="23" height="20" xmlns="http://www.w3.org/2000/svg" {...props}>
4+
<g>
5+
<path
6+
stroke="null"
7+
id="svg_1"
8+
opacity="0.78"
9+
fillRule="evenodd"
10+
d="m22.62682,10.58748c0.19199,-0.49263 0.1023,-1.09644 -0.25441,-1.47879l-4.56047,-4.88871c-0.43802,-0.46957 -1.11284,-0.42746 -1.50725,0.09402c-0.3944,0.52148 -0.35904,1.32491 0.079,1.79449l3.69715,3.96322l-3.71939,3.9871c-0.43802,0.46955 -0.4734,1.27295 -0.079,1.79445c0.39442,0.52149 1.06924,0.5636 1.50728,0.09406l4.56045,-4.88871a1.06292,1.26546 0 0 0 0.27664,-0.47114zm-19.9821,-0.52699l3.69715,-3.96324c0.43802,-0.46955 0.47337,-1.27295 0.07898,-1.79446c-0.3944,-0.52149 -1.06921,-0.5636 -1.50725,-0.09405l-4.56047,4.88873c-0.35669,0.3824 -0.44638,0.98616 -0.25441,1.47879a1.06292,1.26546 0 0 0 0.27664,0.47114l4.56047,4.8887c0.43802,0.46958 1.11284,0.42746 1.50728,-0.09402c0.3944,-0.52148 0.35902,-1.32491 -0.079,-1.79448l-3.71939,-3.9871zm11.77417,-9.98352c0.55388,0.23999 0.83946,0.96911 0.63786,1.62856l-5.38408,17.61136c-0.2016,0.65943 -0.81403,0.99942 -1.36791,0.75941c-0.55388,-0.23999 -0.83946,-0.96911 -0.63786,-1.62856l5.38408,-17.61136c0.2016,-0.65942 0.81403,-0.99942 1.36791,-0.75941l0,0z"
11+
fill="rgba(255,255,255,0.459)"
12+
/>
13+
</g>
14+
</svg>
15+
);
16+
}

‎packages/demo/src/images/codeUnexpand.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default function CodeUnexpend() {
2+
return (
3+
<svg width="23" height="13" xmlns="http://www.w3.org/2000/svg">
4+
<g>
5+
<title>Layer 1</title>
6+
<path
7+
stroke="null"
8+
id="svg_1"
9+
opacity="0.78"
10+
fill="rgba(255,255,255,0.459)"
11+
fillRule="evenodd"
12+
d="m22.93007,6.9502c0.19457,-0.51067 0.10367,-1.13648 -0.25782,-1.53282l-4.6216,-5.06746c-0.4439,-0.48671 -1.12775,-0.44305 -1.52745,0.09749c-0.39968,0.54048 -0.36386,1.3733 0.08005,1.86003l3.7467,4.10808l-3.76924,4.13289c-0.44388,0.48672 -0.47973,1.31943 -0.08005,1.86015c0.3997,0.54041 1.08357,0.5841 1.52748,0.0974l4.62157,-5.06737a1.07717,1.31172 0 0 0 0.28036,-0.48839zm-20.2499,-0.54624l3.74671,-4.10808c0.44388,-0.48673 0.4797,-1.31959 0.08003,-1.86013c-0.3997,-0.54056 -1.08355,-0.58412 -1.52746,-0.09742l-4.62158,5.06737c-0.36147,0.39645 -0.45237,1.02216 -0.25782,1.5328a1.07717,1.31172 0 0 0 0.28034,0.48839l4.6216,5.06746c0.44388,0.48673 1.12773,0.44304 1.52746,-0.09749c0.3997,-0.54061 0.36384,-1.37336 -0.08005,-1.86001l-3.76924,-4.13288z"
13+
/>
14+
</g>
15+
</svg>
16+
);
17+
}

‎packages/demo/src/images/logo.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
function Logo() {
22
return (
3-
<svg viewBox="0 0 1500 375" version="1.1" id="svg_null">
3+
<svg viewBox="0 0 1000 1000" version="1.1" id="svg_null">
44
<g id="root" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
55
<rect id="background" x="0" y="0" width="500" />
66
<g id="shape" transform="translate(120.000000, 70.000000)">
@@ -62,11 +62,21 @@ function Logo() {
6262
height="39.828"
6363
/>
6464
</g>
65+
<<<<<<< HEAD
66+
<g id="Group" transform="translate(40.000000, 364.000000)">
67+
<rect id="Rectangle-10" x="0" y="0" width="420" height="58" />
68+
<text
69+
id="headerText"
70+
fontFamily="Fira Mono"
71+
fontSize="100"
72+
fontWeight="700"
73+
=======
6574
<g id="Group" transform="translate(40.000000, 404.000000)">
6675
<text
6776
id="headerText"
6877
fontFamily="Fira Mono"
6978
fontSize="150"
79+
>>>>>>> develop
7080
fill="#fff"
7181
data-text-alignment="C"
7282
fontStyle="normal"

0 commit comments

Comments
 (0)