Skip to content

Commit cc98371

Browse files
author
FlyGues2889
committed
新增显示模式修改项，更改标题样式和布局
1 parent d0b3925 commit cc98371

File tree

6 files changed

+957
-12
lines changed

6 files changed

+957
-12
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
node_modules/
22
app/random-number-win32-x64/
33
app/out/
4-
app/output/
4+
app/output/
5+
node_modules.7z

‎app/css/global.css‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ mdui-layout {
66
width: 100vw;
77
height: 100vh;
88

9-
background-color: rgb(var(--mdui-color-surface-container));
9+
/* background-color: rgb(var(--mdui-color-surface-container)); */
1010
font-family: 'HarmonyOS Sans SC', sans-serif;
1111

1212
user-select: none;
@@ -62,7 +62,7 @@ mdui-top-app-bar {
6262
mdui-top-app-bar-title {
6363
opacity: 0.8;
6464
margin-left: -0.2rem;
65-
font-size: small;
65+
font-size: 0.9rem;
6666
-webkit-app-region: drag;
6767
user-select: none;
6868

@@ -94,13 +94,11 @@ div#topWindowBar {
9494
}
9595

9696
mdui-navigation-rail {
97-
background-color: rgb(var(--mdui-color-surface-container));
97+
/* background-color: rgb(var(--mdui-color-surface-container)); */
9898

9999
font-family: 'Harmony Sans SC M';
100100
z-index: 990;
101101

102-
margin: 1rem 0;
103-
104102
div[slot="bottom"] {
105103
display: flex;
106104
flex-direction: column;

‎app/css/web.css‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
/*总体样式 */
2+
3+
html,
4+
body,
5+
mdui-layout {
6+
width: 100vw;
7+
height: 100vh;
8+
9+
background-color: rgb(var(--mdui-color-surface-container));
10+
font-family: 'HarmonyOS Sans SC', sans-serif;
11+
12+
user-select: none;
13+
}
14+
15+
:root {
16+
::-webkit-scrollbar {
17+
width: 0.4rem;
18+
height: 0.4rem;
19+
}
20+
21+
::-webkit-scrollbar-track {
22+
background: none;
23+
}
24+
25+
::-webkit-scrollbar-thumb {
26+
background: rgb(var(--mdui-color-primary), 0.15);
27+
border-radius: 1rem;
28+
/* 滑块圆角 */
29+
}
30+
}
31+
32+
div#settingPage {
33+
34+
mdui-select,
35+
mdui-text-field {
36+
line-height: 1.375rem;
37+
font-family: 'Product Sans';
38+
max-width: 16em;
39+
}
40+
}
41+
42+
mdui-tabs::part(container) {
43+
margin-bottom: 0.5rem;
44+
background-color: unset;
45+
}
46+
47+
span[slot="description"] {
48+
opacity: 0.6;
49+
font-size: small;
50+
}
51+
52+
53+
/* 主窗口控件 */
54+
mdui-top-app-bar {
55+
height: 3rem;
56+
align-items: center;
57+
/* background-color: rgb(var(--mdui-color-primary-container)); */
58+
background-color: rgb(var(--mdui-color-surface-container));
59+
color: rgb(var(--mdui-color-primary));
60+
61+
62+
mdui-top-app-bar-title {
63+
opacity: 0.8;
64+
margin-left: -0.2rem;
65+
font-size: 0.9rem;
66+
-webkit-app-region: drag;
67+
user-select: none;
68+
69+
font-family: 'Product Sans';
70+
}
71+
72+
mdui-button-icon {
73+
transform: scale(0.8);
74+
color: rgb(var(--mdui-color-primary));
75+
}
76+
}
77+
78+
div#topWindowBar {
79+
position: fixed;
80+
top: 0;
81+
left: 0;
82+
width: 100%;
83+
height: 4rem;
84+
padding-left: 1rem;
85+
margin-left: 5rem;
86+
87+
font-family: 'Harmony Sans SC';
88+
89+
display: flex;
90+
align-items: center;
91+
justify-content: left;
92+
93+
94+
}
95+
96+
mdui-navigation-rail {
97+
background-color: rgb(var(--mdui-color-surface-container));
98+
99+
font-family: 'Harmony Sans SC M';
100+
z-index: 990;
101+
102+
margin: 1rem 0;
103+
104+
div[slot="bottom"] {
105+
display: flex;
106+
flex-direction: column;
107+
justify-content: center;
108+
align-items: center;
109+
}
110+
}
111+
112+
div.page {
113+
width: 100%;
114+
display: flex;
115+
flex-direction: column;
116+
border-radius: 2rem;
117+
margin: 4rem 1rem 1rem 5rem;
118+
background-color: rgb(var(--mdui-color-surface));
119+
120+
overflow: auto;
121+
min-height: 600px;
122+
123+
font-family: 'Harmony Sans SC';
124+
125+
div.page-container {
126+
margin: 1rem 4rem;
127+
}
128+
}
129+
130+
h1 {
131+
user-select: none;
132+
font-weight: normal;
133+
134+
font-family: 'Harmony Sans SC M';
135+
}
136+
137+
mdui-snackbar {
138+
margin-left: 6rem;
139+
margin-bottom: 1.6rem;
140+
border-radius: var(--mdui-shape-corner-medium);
141+
142+
div {
143+
display: flex;
144+
align-items: center;
145+
}
146+
}
147+
148+
149+
/* 主页 */
150+
151+
div#out {
152+
font-family: 'Product Sans';
153+
margin-left: 2rem;
154+
color: rgb(var(--mdui-color-secondary-dark));
155+
position: absolute;
156+
top: 50%;
157+
left: 50%;
158+
transform: translate(-50%, -50%);
159+
font-size: 20vw;
160+
161+
display: flex;
162+
align-items: center;
163+
justify-content: center;
164+
flex-direction: column;
165+
166+
mdui-button {
167+
font-family: 'Harmony Sans SC M';
168+
transform: scale(0.8);
169+
}
170+
}
171+
172+
div.dragBar {
173+
width: 8rem;
174+
height: 4rem;
175+
padding: 1rem;
176+
padding-top: 2rem;
177+
padding-bottom: 0.2rem;
178+
z-index: 900;
179+
180+
position: fixed;
181+
right: 2rem;
182+
bottom: 2rem;
183+
184+
border-radius: 1.5rem;
185+
color: rgb(var(--mdui-color-outline),0.7);
186+
background-color: rgb(var(--mdui-color-surface-container));
187+
188+
.dragArea {
189+
margin: 0;
190+
width: 100%;
191+
192+
position: absolute;
193+
top: 0;
194+
left: 0;
195+
display: flex;
196+
align-items: center;
197+
justify-content: center;
198+
flex-direction: column;
199+
200+
background-color: rgb(var(--mdui-color-surface-dim));
201+
border-radius: 1.5rem 1.5rem 0 0;
202+
203+
cursor: move;
204+
205+
mdui-divider {
206+
width: 100%;
207+
height: 2px;
208+
background-color: rgb(var(--mdui-color-surface));
209+
}
210+
}
211+
212+
.controlArea {
213+
display: flex;
214+
align-items: center;
215+
justify-content: center;
216+
217+
mdui-fab {
218+
background-color: rgb(var(--mdui-color-primary));
219+
color: rgb(var(--mdui-color-surface-container));
220+
}
221+
}
222+
}
223+
224+
225+
/* 记录页 */
226+
227+
mdui-chip {
228+
box-shadow: none;
229+
font-family: 'Product Sans';
230+
background-color: unset;
231+
}
232+
233+
div#exclude-list,
234+
div#history-list {
235+
font-size: small;
236+
}
237+
238+
/* 设置页 */
239+
240+
mdui-card.container {
241+
margin: 0rem;
242+
margin-left: 0;
243+
padding: 1rem;
244+
245+
width: 100%;
246+
border-radius: 2rem;
247+
background-color: rgb(var(--mdui-color-secondary-container), 0.3);
248+
}
249+
250+
251+
.tips-content {
252+
padding: 0.2rem;
253+
}
254+
255+
mdui-list-subheader {
256+
font-size: medium;
257+
color: rgb(var(--mdui-color-primary));
258+
font-family: 'Harmony Sans SC M';
259+
}

‎app/index.html‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<mdui-layout style="height: 100vh;">
2222

2323
<mdui-top-app-bar>
24-
<mdui-button-icon disabled>
24+
<mdui-button-icon style="color: rgb(var(--mdui-color-on-background));opacity: 0.8;">
2525
<svg width="24" viewBox="0 0 2497 2496" xmlns="http://www.w3.org/2000/svg"
2626
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
2727
<g transform="translate(-951 11)">
@@ -39,7 +39,7 @@
3939
<div style="flex-grow: 1"></div>
4040
</mdui-top-app-bar>
4141

42-
<mdui-navigation-rail value="mainPage">
42+
<mdui-navigation-rail value="mainPage" alignment="center" divider>
4343

4444
<mdui-navigation-rail-item id="toMain" value="mainPage" href="javascript:void(0);"
4545
onclick="navigate('mainPage')">
@@ -278,7 +278,7 @@ <h1>设置</h1>
278278
</mdui-list-item>
279279
</mdui-card>
280280
<mdui-list-subheader>个性化</mdui-list-subheader>
281-
<mdui-card class="container" variant="filled">
281+
<mdui-card class="container" variant="filled" style="border-radius: 2rem 2rem 0 0;">
282282
<mdui-list-item nonclickable>
283283
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
284284
<path fill="currentColor"
@@ -352,6 +352,38 @@ <h1>设置</h1>
352352
</mdui-list-item>
353353
</div>
354354
</mdui-card>
355+
<mdui-card class="container" variant="filled" style="border-radius: 0 0 2rem 2rem;">
356+
<mdui-list-item nonclickable>
357+
<svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
358+
<path fill="currentColor"
359+
d="M12 4a3.5 3.5 0 0 0-3.5 3.5h2A1.5 1.5 0 0 1 12 6a1.5 1.5 0 0 1 1.5 1.5A1.5 1.5 0 0 1 12 9c-.55 0-1 .45-1 1v1.75L2.4 18.2A1 1 0 0 0 3 20h18a1 1 0 0 0 .6-1.8L13 11.75v-.9a3.5 3.5 0 0 0 2.5-3.35A3.5 3.5 0 0 0 12 4m0 9.5l6 4.5H6Z" />
360+
</svg>
361+
更换显示样式
362+
<span slot="description">切换后所有抽取记录将清除</span>
363+
<mdui-select value="normal" slot="end-icon" variant="outlined">
364+
<svg slot="end-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
365+
viewBox="0 0 24 24">
366+
<path fill="currentColor" d="m7 10l5 5l5-5z" />
367+
</svg>
368+
<mdui-menu-item value="normal">
369+
<svg style="opacity: 0.6;" slot="end-icon" xmlns="http://www.w3.org/2000/svg" width="24"
370+
height="24" viewBox="0 0 24 24">
371+
<path fill="currentColor"
372+
d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H3V4h18z" />
373+
</svg>
374+
桌面应用
375+
</mdui-menu-item>
376+
<mdui-menu-item value="web" href="web.html">
377+
<svg style="opacity: 0.6;" slot="end-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
378+
<path fill="currentColor"
379+
d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95a15.7 15.7 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A8 8 0 0 1 5.08 16m2.95-8H5.08a8 8 0 0 1 4.33-3.56A15.7 15.7 0 0 0 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z" />
380+
</svg>
381+
Web
382+
</mdui-menu-item>
383+
</mdui-select>
384+
</mdui-list-item>
385+
</mdui-card>
386+
355387
<mdui-list-subheader>关于</mdui-list-subheader>
356388
<mdui-card class="container" variant="filled">
357389
<mdui-collapse>
@@ -367,7 +399,7 @@ <h1>设置</h1>
367399
<path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z" />
368400
</svg>
369401
关于 RandomNum You
370-
<span slot="description">版本 0.4.5</span>
402+
<span slot="description">版本 0.5.0</span>
371403
</mdui-list-item>
372404

373405
<div>
@@ -379,7 +411,8 @@ <h1>设置</h1>
379411
</mdui-list-item>
380412
<mdui-list-item rounded>
381413
许可证
382-
<span slot="description">我们使用 <a href="../LICENSE">AGPL 3.0</a> 协议</span>
414+
<span slot="description">我们使用 <a href="../LICENSE">AGPL 3.0</a>
415+
协议</span>
383416
</mdui-list-item>
384417
</mdui-list-item>
385418
</div>

‎app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "random-num-you",
3-
"version": "0.4.5",
3+
"version": "0.5.0",
44
"description": "A random number generator",
55
"main": "main.js",
66
"icon": "app/assets/appIcon.ico",

0 commit comments

Comments
 (0)