Skip to content

Commit 5b5dffa

Browse files
closertbclosertb
committed
v1.0
1 parent 47d762b commit 5b5dffa

20 files changed

+26206
-172
lines changed

‎Klotski/dist/bundle.js

+25,433
Large diffs are not rendered by default.

‎Klotski/dist/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width = device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
6+
<meta name="format-detection" content="telephone=no">
7+
<meta name="format-detection" content="email=no">
8+
<title>Klotski</title>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="text/javascript" src="bundle.js"></script></body>
13+
</html>

‎Klotski/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,19 @@
2424
"babel-preset-react": "^6.24.1",
2525
"clean-webpack-plugin": "^0.1.18",
2626
"css-loader": "^0.28.9",
27+
"extract-text-webpack-plugin": "^3.0.2",
2728
"html-webpack-plugin": "^2.30.1",
2829
"node-sass": "^4.7.2",
2930
"sass-loader": "^6.0.6",
3031
"style-loader": "^0.20.1",
32+
"url-loader": "^0.6.2",
3133
"webpack": "^3.8.1",
3234
"webpack-dev-server": "^2.9.5"
3335
},
3436
"dependencies": {
3537
"react": "^16.2.0",
36-
"react-dom": "^16.2.0"
38+
"react-dom": "^16.2.0",
39+
"react-router": "^4.2.0",
40+
"react-router-dom": "^4.2.2"
3741
}
3842
}

‎Klotski/src/css/index.scss

+208-18
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ body {
55
background-color: $titleBgColor;
66
}
77
$bottonBg: $auxiliaryColor07;
8-
div,p,ul,li{
8+
div,p,ul,li,h2,h3{
99
margin:0;padding:0;
1010
}
1111
ol, ul ,li{
@@ -54,6 +54,7 @@ ol, ul ,li{
5454
}
5555
.show-status{
5656
display: inline-block;
57+
position: relative;
5758
font:bold 1rem/1.8rem "Microsoft Yahei";
5859
padding:0 30px;
5960
margin:10px 0 30px;
@@ -63,18 +64,18 @@ ol, ul ,li{
6364
&.success-status{
6465
color:$auxiliaryColor06;
6566
}
66-
}
67-
.simple-box{
68-
position: relative;
69-
.filter-box{
67+
.total-step{
68+
display: inline-block;
7069
position: absolute;
71-
z-index: 99;
70+
box-sizing: border-box;
71+
WIDTH:48px;
72+
right:-70px;
7273
top:0;
73-
left:2px;
74-
right:2px;
75-
bottom:0;
76-
border-radius: 2px;
77-
background-color: rgba(255,255,255,.6);
74+
padding:0 10px;
75+
border:2px solid $auxiliaryColor03;
76+
background-color: $auxiliaryColor07;
77+
border-radius: 5px;
78+
color:white;
7879
}
7980
}
8081
.widget-block{
@@ -120,23 +121,27 @@ ol, ul ,li{
120121
border-radius: 40px;
121122
&:before{
122123
content: '';
123-
top:20px;
124-
left:28px;
124+
top:14px;
125+
left:21px;
125126
position: absolute;
126127
width:0;
127128
height:0;
128129
border-color: transparent greenyellow transparent greenyellow ;
129-
border-width: 20px 0 20px 36px;
130+
border-width: 16px 0 16px 30px;
130131
border-style: solid;
131132
}
132133
&.be-center{
133134
background-color: white;
134135
position: relative;
135136
margin:50px auto 0;
137+
&:before{
138+
top:25px;
139+
left:30px;
140+
}
136141
}
137142
}
138143
.shadow-box{
139-
position: absolute;
144+
position: fixed;
140145
display: flex;
141146
flex-direction: column;
142147
justify-content: center;
@@ -151,6 +156,11 @@ ol, ul ,li{
151156
}
152157

153158
.widget-block{
159+
&.add-filter{
160+
li{
161+
filter:blur(1px);
162+
}
163+
}
154164
li{
155165
position: absolute;
156166
top:0;
@@ -188,17 +198,48 @@ ol, ul ,li{
188198
}
189199
}
190200
.shadow-box{
201+
&.show-success{
202+
background-color: white;
203+
.vertical-box{
204+
border: 2px solid $darkBluefontColor;
205+
border-radius: 15px;
206+
background-color: $primaryFontColor;
207+
}
208+
.shadow-info{
209+
color:$auxiliaryColor07;
210+
}
211+
}
212+
.middle-left{
213+
text-align: left;
214+
line-height: 42px;
215+
display: inline-block;
216+
}
217+
.vertical-box{
218+
margin:25px 35px;
219+
padding:15px 0;
220+
box-sizing: border-box;
221+
}
191222
.shadow-info{
192223
width:100%;
193-
font:bold 1.5rem/1.8rem "Microsoft Yahei";
224+
font:bold 1.3rem/1.8rem "Microsoft Yahei";
225+
padding:0 0 10px;
194226
color:white;
195227
}
228+
.show-level{
229+
font:bold 1.6rem/2.5rem "Microsoft Yahei";
230+
padding:20px 0 0;
231+
color:$auxiliaryColor07;
232+
}
233+
.show-time{
234+
font:bold 1.3rem/1.8rem "Microsoft Yahei";
235+
color:$auxiliaryColor07;
236+
}
196237
.shadow-event{
197238
width:100%;
198239
display: flex;
199240
justify-content: space-around;
200241
align-items: center;
201-
margin:20px 0 0;
242+
margin:20px 0 10px;
202243
span{
203244
display: inline-block;
204245
position: relative;
@@ -207,6 +248,27 @@ ol, ul ,li{
207248
border-radius: 30px;
208249
background-color: $bottonBg;
209250
}
251+
.more-button{
252+
color:white;
253+
background-image: url('../images/refresh.svg');
254+
background-repeat:no-repeat ;
255+
background-position: center center;
256+
background-size: 45px 45px;
257+
}
258+
.share-button{
259+
color:white;
260+
background-image: url('../images/share.svg');
261+
background-repeat:no-repeat ;
262+
background-position: center center;
263+
background-size: 35px 35px;
264+
}
265+
.home-button{
266+
color:white;
267+
background-image: url('../images/home.svg');
268+
background-repeat:no-repeat ;
269+
background-position: center center;
270+
background-size: 40px 40px;
271+
}
210272
.reset-button{
211273
&:before{
212274
content: '';
@@ -218,7 +280,7 @@ ol, ul ,li{
218280
background-color: $fiv-level;
219281
}
220282
}
221-
.home-button{
283+
.homed-button{
222284
&:before{
223285
content: '';
224286
top:12px;
@@ -241,4 +303,132 @@ ol, ul ,li{
241303
}
242304
}
243305
}
306+
}
307+
.home-page{
308+
margin-top:50px;
309+
text-align: center;
310+
color:$primaryFontColor;
311+
h2{
312+
line-height: 1.5em;
313+
}
314+
h3{
315+
line-height: 2em;
316+
}
317+
.level-items{
318+
margin-top:30px;
319+
line-height: 3rem;
320+
color:$e05;
321+
li{
322+
font-weight: bold;
323+
margin:20px auto 0;
324+
width:150px;
325+
font-size: 1.5rem;
326+
background-color: white;
327+
border-radius: 1.5rem;
328+
letter-spacing: 0.5rem;
329+
a{
330+
color:$e05;
331+
text-decoration: none;
332+
&:hover{
333+
color:$e09;
334+
cursor: pointer;
335+
}
336+
}
337+
&:last-child{
338+
letter-spacing: 0.5rem;
339+
span{
340+
letter-spacing: .1rem;
341+
}
342+
}
343+
}
344+
}
345+
}
346+
347+
.picker-module{
348+
position: fixed;
349+
bottom:0;
350+
left:0;
351+
right:0;
352+
z-index:5;
353+
&.none{
354+
display: none;
355+
}
356+
.picker-content{
357+
position: relative;
358+
z-index:7;
359+
background-color: white;
360+
overflow: hidden;
361+
}
362+
li{
363+
height:35px;
364+
line-height: 35px;
365+
text-align: center;
366+
}
367+
.opacity-layer{
368+
position: relative;
369+
z-index: 8;
370+
li{
371+
background-color: rgba(225,225,225,0.6);
372+
&.curry{
373+
border: 1px solid rgba(225,225,225,0.7);
374+
background-color:rgba(225,225,225,0.2);
375+
}
376+
}
377+
378+
}
379+
.select-list{
380+
position: absolute;
381+
top:0;
382+
width:100%;
383+
z-index: 6;
384+
font-size: 1rem;
385+
transition: font 0.3s,transform 0.5s ease-out;
386+
color:$darkBluefontColor;
387+
.curry{
388+
font-size: 1.2rem;
389+
}
390+
}
391+
392+
}
393+
.button-bar{
394+
position: relative;
395+
z-index:8;
396+
line-height: 35px;
397+
background-color: $sec-level;
398+
font-size: 16px;
399+
color:$primaryFontColor;
400+
span{
401+
display: inline-block;
402+
box-sizing: border-box;
403+
text-align: center;
404+
width:33.3%;
405+
}
406+
.select-name{
407+
font-size: 18px;
408+
}
409+
.btn-cancel{
410+
text-align: left;
411+
padding-left: 20px;
412+
&:hover{
413+
cursor: pointer;
414+
color:white;
415+
}
416+
}
417+
.btn-sure{
418+
text-align: right;
419+
padding-right: 20px;
420+
&:hover{
421+
cursor: pointer;
422+
color:white;
423+
}
424+
}
425+
}
426+
.piker-shadow{
427+
position: fixed;
428+
bottom:0;
429+
left:0;
430+
right:0;
431+
top:0;
432+
z-index:4;
433+
background-color: rgba(0,0,0,.68);
244434
}

‎Klotski/src/css/theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ $z13: #ed1f24;
6969
$z14: #6e2077;
7070
$z15: #b51d23;
7171

72-
//图表颜色
72+
7373
$e01:#5b67ff;
7474
$e02:#2678ff;
7575
$e03:#0e8cf6;

‎Klotski/src/images/home.svg

+1
Loading

‎Klotski/src/images/refresh.svg

+1
Loading

‎Klotski/src/images/share.svg

+1
Loading

0 commit comments

Comments
 (0)