Skip to content

Commit 6fb4b90

Browse files
NelsonYongNelsonYong
committed
docs: style
1 parent 2412ecc commit 6fb4b90

File tree

4 files changed

+353
-394
lines changed

4 files changed

+353
-394
lines changed

‎packages/hooks/docs/.vitepress/theme/home/DemoEditor.vue‎

Lines changed: 105 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -10,137 +10,130 @@
1010
</template>
1111

1212
<script setup lang="ts">
13-
import TypeIt from 'typeit'
14-
import { El } from 'typeit/dist/types'
15-
import { ref, onMounted, watch } from 'vue'
16-
import { useInViewport } from 'vue-hooks-plus'
13+
import TypeIt from 'typeit'
14+
import { El } from 'typeit/dist/types'
15+
import { ref, onMounted, watch } from 'vue'
16+
import { useInViewport } from 'vue-hooks-plus'
1717
18-
const domRef = ref(null)
19-
const isMount = ref(false)
20-
const isFirst = ref(true)
21-
const [inViewport] = useInViewport(domRef)
18+
const domRef = ref(null)
19+
const isMount = ref(false)
20+
const isFirst = ref(true)
21+
const [inViewport] = useInViewport(domRef)
2222
23-
const block = ref<El>()
23+
const block = ref<El>()
2424
25-
watch([inViewport, isMount], curr => {
26-
if (curr?.[0] && curr?.[1] && isFirst.value === true) {
27-
isFirst.value = false
28-
if (block.value)
29-
// @ts-ignore
30-
new TypeIt(block.value, {
31-
speed: 50,
32-
startDelay: 900,
25+
watch([inViewport, isMount], (curr) => {
26+
if (curr?.[0] && curr?.[1] && isFirst.value === true) {
27+
isFirst.value = false
28+
if (block.value)
29+
// @ts-ignore
30+
new TypeIt(block.value, {
31+
speed: 50,
32+
startDelay: 900,
33+
})
34+
.type('<br><h1 style="opacity: 0.5;">Welcome use VueHooks Plus!</h1><br /><br />', {
35+
delay: 100,
3336
})
34-
.type('<br><h1 style="opacity: 0.5;">Welcome use VueHooks Plus!</h1><br /><br />', {
37+
.type(
38+
`<span class="label-code">&lt;script</span> setup lang="ts" <span class="label-code">&gt</span> <br /><br /><br />`,
39+
)
40+
.type(
41+
'&nbsp<span class="import-code">import</span> { <span class="module-code">useRequest</span> } from "<span class="export-code">vue-hooks-plus</span>" <br /> <br />',
42+
{
3543
delay: 100,
36-
})
37-
.type(
38-
`<span class="label-code">&lt;script</span> setup lang="ts" <span class="label-code">&gt</span> <br /><br /><br />`,
39-
)
40-
.type(
41-
'&nbsp<span class="import-code">import</span> { <span class="module-code">useRequest</span> } from "<span class="export-code">vue-hooks-plus</span>" <br /> <br />',
42-
{
43-
delay: 100,
44-
},
45-
)
46-
.type(
47-
`&nbspconst { <span class="variable-code">data</span> } = <span class="module-code">useRequest</span>(()=><span class="module-code">getData</span>(),{
44+
},
45+
)
46+
.type(
47+
`&nbspconst { <span class="variable-code">data</span> } = <span class="module-code">useRequest</span>(()=><span class="module-code">getData</span>(),{
4848
<span class="variable-code">...options</span>
4949
})`,
50-
)
51-
.type(`<br /><br /><br /><span class="label-code">&lt;script /&gt;</span>`)
52-
.type(
53-
`<br /><br /><span class="label-code">&lt;template&gt;</span><br /><br />&nbsp<span class="label-code">&lt;div&gt; <br /></span>&nbsp&nbsp&nbspdata：{{<span class="variable-code"> undefined </span>}} <br />&nbsp<span class="label-code">&lt;div /&gt; </span><br />`,
54-
)
55-
.type(`<br /><span class="label-code">&lt;template /&gt;</span>`)
56-
.move(-27)
57-
.delete(11, {
58-
delay: 400,
59-
})
60-
.type(`<span class="variable-code"> fetch API data update! </span>`, {
61-
delay: 400,
62-
})
63-
.go()
64-
}
65-
})
50+
)
51+
.type(`<br /><br /><br /><span class="label-code">&lt;script /&gt;</span>`)
52+
.type(
53+
`<br /><br /><span class="label-code">&lt;template&gt;</span><br /><br />&nbsp<span class="label-code">&lt;div&gt; <br /></span>&nbsp&nbsp&nbspdata：{{<span class="variable-code"> undefined </span>}} <br />&nbsp<span class="label-code">&lt;div /&gt; </span><br />`,
54+
)
55+
.type(`<br /><span class="label-code">&lt;template /&gt;</span>`)
56+
.move(-27)
57+
.delete(11, {
58+
delay: 400,
59+
})
60+
.type(`<span class="variable-code"> fetch API data update! </span>`, {
61+
delay: 400,
62+
})
63+
.go()
64+
}
65+
})
6666
67-
onMounted(() => {
68-
isMount.value = true
69-
})
67+
onMounted(() => {
68+
isMount.value = true
69+
})
7070
</script>
7171

7272
<style lang="less">
73-
h2 {
74-
text-align: center;
75-
font-weight: 600;
76-
color: var(--vp-font-color);
77-
padding-bottom: 1rem;
78-
}
73+
#demo-editor {
74+
display: flex;
75+
justify-content: center;
76+
overflow: hidden;
77+
}
7978
80-
#demo-editor {
81-
display: flex;
82-
justify-content: center;
83-
overflow: hidden;
84-
}
79+
.import-code {
80+
color: rgb(230, 71, 164);
81+
}
8582
86-
.import-code {
87-
color: rgb(230, 71, 164);
88-
}
83+
.export-code {
84+
color: rgb(70, 166, 240);
85+
}
8986
90-
.export-code {
91-
color: rgb(70, 166, 240);
92-
}
87+
.module-code {
88+
color: #fabe3b;
89+
}
9390
94-
.module-code {
95-
color: #fabe3b;
96-
}
91+
.variable-code {
92+
color: #38cd46;
93+
}
9794
98-
.variable-code {
99-
color: #38cd46;
100-
}
95+
.label-code {
96+
color: rgb(240, 60, 69);
97+
}
10198
102-
.label-code {
103-
color: rgb(240, 60, 69);
104-
}
99+
.terminal {
100+
line-height: 16px;
101+
min-height: 480px;
102+
margin-top: 25px;
103+
padding: 30px;
104+
margin-left: 12px;
105+
margin-right: 12px;
106+
padding-left: 10px;
107+
border-radius: 7px;
108+
position: relative;
109+
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 30px 1px rgba(0, 0, 0, 0.15);
110+
width: 888px;
111+
max-width: 888px;
112+
margin-bottom: 32px;
113+
}
114+
.terminal::after {
115+
content: '';
116+
position: absolute;
117+
top: 12px;
118+
left: 10px;
119+
width: 12px;
120+
height: 12px;
121+
background: #f95c5b;
122+
border-radius: 100%;
123+
box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46,
124+
44px 0 0 1px #2eae32;
125+
}
105126
127+
@media (max-width: 768px) {
106128
.terminal {
107-
line-height: 16px;
108-
min-height: 480px;
109-
margin-top: 25px;
110-
padding: 30px;
111-
margin-left: 12px;
112-
margin-right: 12px;
113-
padding-left: 10px;
114-
border-radius: 7px;
115-
position: relative;
116-
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 30px 1px rgba(0, 0, 0, 0.15);
117-
width: 888px;
118-
max-width: 888px;
119-
margin-bottom: 32px;
120-
}
121-
.terminal::after {
122-
content: '';
123-
position: absolute;
124-
top: 12px;
125-
left: 10px;
126-
width: 12px;
127-
height: 12px;
128-
background: #f95c5b;
129-
border-radius: 100%;
130-
box-shadow: 0 0 0 1px #da3d42, 22px 0 0 0 #fabe3b, 22px 0 0 1px #ecb03e, 44px 0 0 0 #38cd46,
131-
44px 0 0 1px #2eae32;
129+
font-size: 12px;
130+
margin: 12px 12px;
132131
}
133-
134-
@media (max-width: 768px) {
135-
.terminal {
136-
font-size: 12px;
137-
margin: 12px 12px;
138-
}
139-
}
140-
@media (max-width: 370px) {
141-
.terminal {
142-
font-size: 12px;
143-
margin: 12px 12px;
144-
}
132+
}
133+
@media (max-width: 370px) {
134+
.terminal {
135+
font-size: 12px;
136+
margin: 12px 12px;
145137
}
138+
}
146139
</style>

0 commit comments

Comments
 (0)