Skip to content

Commit e600b6e

Browse files
author
hooray
committed
更新dock栏样式和login界面样式
1 parent 2031b78 commit e600b6e

File tree

10 files changed

+215
-35
lines changed

10 files changed

+215
-35
lines changed

‎index.php

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
<body>
6363
<div class="loading"></div>
6464
<!-- 登录&注册 -->
65-
<div id="lrbox" <?php if($setting['isforcedlogin'] == 1 && !checkLogin()){ ?>style="top:0"<?php } ?> data-isforcedlogin="<?php echo $setting['isforcedlogin']; ?>">
65+
<div id="lrbox" <?php if($setting['isforcedlogin'] == 1 && !checkLogin()){ ?>class="disn"<?php } ?> data-isforcedlogin="<?php echo $setting['isforcedlogin']; ?>">
6666
<div class="lrbox">
6767
<?php if($setting['isforcedlogin'] == 0){ ?><a href="javascript:;" class="back">取消登录</a><?php } ?>
6868
<div class="title"><?php echo $setting['title']; ?></div>
@@ -359,6 +359,16 @@
359359
<script>
360360
var childWindow, interval;
361361
$(function(){
362+
if($('#lrbox').data('isforcedlogin') == 0){
363+
$('#lrbox').css({
364+
scale: 0.9
365+
});
366+
$('#lrbox .lrbox').css({
367+
y: -300,
368+
perspective: '1000px',
369+
rotateX: '60deg'
370+
});
371+
}
362372
var loginboxHeight = $('#lrbox .loginbox').outerHeight();
363373
var registerboxHeight = $('#lrbox .registerbox').outerHeight();
364374
$('#lrbox .loginbox').css('marginTop', (loginboxHeight / 2) * -1);
@@ -369,9 +379,15 @@
369379
marginTop: (loginboxHeight / 2) * -1
370380
});
371381
$('#lrbox .back').on('click', function(){
372-
$('#lrbox').animate({
373-
top: '-200%'
374-
}, 1000);
382+
$('#lrbox').transition({
383+
scale: 0.9,
384+
opacity: 0,
385+
visibility: 'hidden'
386+
}, 200);
387+
$('#lrbox .lrbox').transition({
388+
y: -300,
389+
rotateX: '60deg'
390+
}, 500);
375391
});
376392
changeTabindex();
377393
$('#lrbox .loginbox .mask').click(function(){
@@ -623,12 +639,14 @@ function changeTabindex(mode){
623639
marginLeft: loginboxMarginLeftOnShow
624640
});
625641
loginbox.children('.mask').css('opacity', 0).hide();
642+
loginbox.children('form').css('opacity', 1);
626643
registerbox.css({
627644
zIndex: 1,
628645
scale: onHideScale,
629646
marginRight: registerboxMarginRightOnHide
630647
});
631-
registerbox.children('.form').css('opacity', 0);
648+
registerbox.children('.mask').css('opacity', 1).show();
649+
registerbox.children('form').css('opacity', 0);
632650
}
633651
}
634652
function checkUserLogin(){

‎static/css/index.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/img/desktop-s5e6596a777.png

33 KB
Loading

‎static/img/desktop-sa4a13b6e65.png

-41.7 KB
Binary file not shown.

‎static/img/desktop/dock-bg-left.png

-2.15 KB
Binary file not shown.

‎static/img/desktop/dock-bg-right.png

-2.15 KB
Binary file not shown.

‎static/img/desktop/dock-bg-top.png

-1.78 KB
Binary file not shown.

‎static/js/hros.base.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,16 @@ HROS.base = (function(){
8484
});
8585
},
8686
login: function(){
87-
$('#lrbox').animate({
88-
top: 0
89-
}, 500, function(){
90-
changeTabindex();
91-
});
87+
changeTabindex();
88+
$('#lrbox').transition({
89+
scale: 1,
90+
opacity: 1,
91+
visibility: 'visible'
92+
}, 200);
93+
$('#lrbox .lrbox').transition({
94+
y: 0,
95+
rotateX: '0deg'
96+
}, 500);
9297
},
9398
logout: function(){
9499
$.ajax({

‎static/sass/hoorayos/_dock.scss

Lines changed: 178 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,30 @@
1+
$dock-bg: rgba(0, 0, 0, 0.4);
2+
$dock-line-bg: rgba(0, 0, 0, 0.2);
3+
$dock-top-width: 620px;
4+
$dock-top-height: 80px;
5+
$dock-left-widht: 80px;
6+
$dock-left-height: 620px;
7+
$dock-right-widht: 80px;
8+
$dock-right-height: 620px;
9+
110
/* 应用码头 */
211
#dock-bar{
3-
position: absolute;
412
display: none;
13+
position: absolute;
514
&.top-bar{
615
width: 100%;
7-
height: 80px;
16+
height: $dock-top-height;
817
left: 0;
918
top: 0;
1019
}
1120
&.left-bar{
12-
width: 80px;
21+
width: $dock-left-widht;
1322
height: 100%;
1423
left: 0;
1524
top: 0;
1625
}
1726
&.right-bar{
18-
width: 80px;
27+
width: $dock-right-widht;
1928
height: 100%;
2029
right: 0;
2130
top: 0;
@@ -28,6 +37,8 @@
2837
z-index: 100000;
2938
}
3039
.dock-middle{
40+
position: relative;
41+
background-color: $dock-bg;
3142
.dock-applist{
3243
position: relative;
3344
.appbtn{
@@ -46,8 +57,8 @@
4657
.dock-tools{
4758
a{
4859
@include text-shadow(1px 1px 1px #000);
49-
float: left;
5060
display: block;
61+
float: left;
5162
width: 20px;
5263
height: 20px;
5364
line-height: 20px;
@@ -162,30 +173,78 @@
162173
}
163174
}
164175
&.dock-top{
165-
width: desktop-sprite-width(dock-bg-top);
166-
height: desktop-sprite-height(dock-bg-top);
176+
width: $dock-top-width;
177+
height: $dock-top-height;
167178
top: 0;
168179
left: 50%;
169180
margin: 0 0 0 -310px;
170181
.dock-middle{
171-
@include desktop-sprite(dock-bg-top);
172-
width: desktop-sprite-width(dock-bg-top);
173-
height: desktop-sprite-height(dock-bg-top);
182+
@include border-bottom-radius(5px);
183+
width: $dock-top-width;
184+
height: $dock-top-height;
185+
//背景辅助线
186+
&::after{
187+
@include border-bottom-radius(5px);
188+
content: '';
189+
position: absolute;
190+
z-index: -1;
191+
left: 0;
192+
top: 0;
193+
width: $dock-top-width - 2;
194+
height: $dock-top-height - 1;
195+
border: 1px solid $dock-line-bg;
196+
border-top: 0;
197+
}
174198
.dock-applist{
199+
position: relative;
175200
width: 476px;
176201
height: 58px;
177202
margin: 11px 14px;
178203
float: left;
204+
//背景辅助线
205+
&::after{
206+
content: '';
207+
position: absolute;
208+
z-index: -1;
209+
left: 490px;
210+
top: -11px;
211+
width: 0;
212+
height: 80px;
213+
border-left: 1px solid $dock-line-bg;
214+
}
179215
}
180216
.dock-tools-container{
217+
position: relative;
181218
height: 56px;
182219
float: left;
220+
//背景辅助线
221+
&::after{
222+
content: '';
223+
position: absolute;
224+
z-index: -1;
225+
left: 0;
226+
top: 55px;
227+
width: 115px;
228+
height: 0;
229+
border-top: 1px solid $dock-line-bg;
230+
}
183231
.dock-tools{
232+
position: relative;
184233
width: 20px;
185234
height: 46px;
186235
padding: 5px;
187236
float: left;
188-
overflow: hidden;
237+
//背景辅助线
238+
&::after{
239+
content: '';
240+
position: absolute;
241+
z-index: -1;
242+
left: 30px;
243+
top: 0;
244+
width: 0;
245+
height: 56px;
246+
border-left: 1px solid $dock-line-bg;
247+
}
189248
.dock-tool-setting, .dock-tool-appmanage{
190249
margin-bottom: 3px;
191250
}
@@ -206,30 +265,78 @@
206265
}
207266
}
208267
&.dock-left{
209-
width: desktop-sprite-width(dock-bg-left);
210-
height: desktop-sprite-height(dock-bg-left);
268+
width: $dock-left-widht;
269+
height: $dock-left-height;
211270
top: 50%;
212271
left: 0;
213272
margin: -310px 0 0 0;
214273
.dock-middle{
215-
@include desktop-sprite(dock-bg-left);
216-
width: desktop-sprite-width(dock-bg-left);
217-
height: desktop-sprite-height(dock-bg-left);
274+
@include border-right-radius(5px);
275+
width: $dock-left-widht;
276+
height: $dock-left-height;
277+
//背景辅助线
278+
&::after{
279+
@include border-right-radius(5px);
280+
content: '';
281+
position: absolute;
282+
z-index: -1;
283+
left: 0;
284+
top: 0;
285+
width: $dock-left-widht - 1;
286+
height: $dock-left-height - 2;
287+
border: 1px solid $dock-line-bg;
288+
border-left: 0;
289+
}
218290
.dock-applist{
291+
position: relative;
219292
width: 58px;
220293
height: 476px;
221294
margin: 14px 11px;
222295
float: left;
296+
//背景辅助线
297+
&::after{
298+
content: '';
299+
position: absolute;
300+
z-index: -1;
301+
left: -11px;
302+
top: 490px;
303+
width: 80px;
304+
height: 0;
305+
border-top: 1px solid $dock-line-bg;
306+
}
223307
}
224308
.dock-tools-container{
309+
position: relative;
225310
width: 56px;
226311
float: left;
312+
//背景辅助线
313+
&::after{
314+
content: '';
315+
position: absolute;
316+
z-index: -1;
317+
left: 55px;
318+
top: 0;
319+
width: 0;
320+
height: 115px;
321+
border-left: 1px solid $dock-line-bg;
322+
}
227323
.dock-tools{
324+
position: relative;
228325
width: 46px;
229326
height: 20px;
230327
padding: 5px;
231328
float: left;
232-
overflow: hidden;
329+
//背景辅助线
330+
&::after{
331+
content: '';
332+
position: absolute;
333+
z-index: -1;
334+
left: 0;
335+
top: 30px;
336+
width: 56px;
337+
height: 0;
338+
border-top: 1px solid $dock-line-bg;
339+
}
233340
.dock-tool-setting, .dock-tool-appmanage{
234341
margin-right: 3px;
235342
}
@@ -250,30 +357,78 @@
250357
}
251358
}
252359
&.dock-right{
253-
width: desktop-sprite-width(dock-bg-right);
254-
height: desktop-sprite-height(dock-bg-right);
360+
width: $dock-right-widht;
361+
height: $dock-right-height;
255362
top: 50%;
256363
left: 0;
257364
margin: -310px 0 0 0;
258365
.dock-middle{
259-
@include desktop-sprite(dock-bg-right);
260-
width: desktop-sprite-width(dock-bg-right);
261-
height: desktop-sprite-height(dock-bg-right);
366+
@include border-left-radius(5px);
367+
width: $dock-right-widht;
368+
height: $dock-right-height;
369+
//背景辅助线
370+
&::after{
371+
@include border-left-radius(5px);
372+
content: '';
373+
position: absolute;
374+
z-index: -1;
375+
left: 0;
376+
top: 0;
377+
width: $dock-right-widht - 1;
378+
height: $dock-right-height - 2;
379+
border: 1px solid $dock-line-bg;
380+
border-right: 0;
381+
}
262382
.dock-applist{
383+
position: relative;
263384
width: 58px;
264385
height: 476px;
265386
margin: 14px 11px;
266387
float: right;
388+
//背景辅助线
389+
&::after{
390+
content: '';
391+
position: absolute;
392+
z-index: -1;
393+
left: -11px;
394+
top: 490px;
395+
width: 80px;
396+
height: 0;
397+
border-top: 1px solid $dock-line-bg;
398+
}
267399
}
268400
.dock-tools-container{
401+
position: relative;
269402
width: 56px;
270403
float: right;
404+
//背景辅助线
405+
&::after{
406+
content: '';
407+
position: absolute;
408+
z-index: -1;
409+
right: 55px;
410+
top: 0;
411+
width: 0;
412+
height: 115px;
413+
border-left: 1px solid $dock-line-bg;
414+
}
271415
.dock-tools{
416+
position: relative;
272417
width: 46px;
273418
height: 20px;
274419
padding: 5px;
275420
float: right;
276-
overflow: hidden;
421+
//背景辅助线
422+
&::after{
423+
content: '';
424+
position: absolute;
425+
z-index: -1;
426+
left: 0;
427+
top: 30px;
428+
width: 56px;
429+
height: 0;
430+
border-top: 1px solid $dock-line-bg;
431+
}
277432
.dock-tool-setting, .dock-tool-appmanage{
278433
margin-right: 3px;
279434
}

0 commit comments

Comments
 (0)