main.css
6.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
@charset "utf-8";
/*
* 常用记录
* 主色调 ：
*
* z-index: topImg(10),wrap(20)
* 多行省略 ： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
* 单行省略 ： white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
*/
*{ outline:none;}
body{ font-size:12px; background:#fff; font-family:KaiTi;}
.body-viewFrame{ padding:0; background:url(../images/loading.gif) no-repeat center center; height:100%; overflow-y:hidden;}
body.body-gray{ background:#f1f1f1;}
body.body-white{ background:#fff;}
.main-width{ width:100%; max-width:1400px; margin:0 auto; position:relative;}
input[type="checkbox"],input[type="radio"]{ display:inline-block; vertical-align:middle; width:17px; height:17px; outline:none; margin:-3px 5px 0;}
.fa{ font-size:16px;}
.border-h{ width:100%; height:0; padding-top:1px; background:#ddd; margin:20px 0;}
img{ display:block;}
/*总布局*/
.topImg{ width:100%; position:relative; z-index:10;}
.wrap-bg{ position:absolute; width:100%; left:0; top:450px; z-index:5;}
.wrap{ position:relative; z-index:20; width:650px; margin:-50px auto 0; background:url(../../images/wrapbg.png) repeat-y center center; background-size:100%; padding:0 60px;}
/**
*nav
*组
**/
.wrap .nav{text-align:center;}
.wrap .nav a{ display:block;float:left; width:130px; height:83px; line-height:112px; color:#fff; font-size:22px; background:url(../../images/nav-green.png) no-repeat center center; background-size:100%;}
.wrap .nav a:hover{ background-image:url(../../images/nav-green-hover.png); -webkit-transform:translateY(-10px);}
.wrap .nav a.active{ background-image:url(../../images/nav-yellow.png);color:#ff6102; font-weight:bold; }
@-webkit-keyframes navA{
0%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
/**
*button-wrap
*开始抽奖，中奖名单
**/
.button-wrap{ padding:40px 0 0 0; text-align:center;}
.button-wrap a{ display:inline-block; margin:0 15px; width:170px; height:67px; line-height:70px; font-size:22px; color:#fff; background: no-repeat center center; background-size:100%; cursor:pointer;}
.button-wrap a.start{background-image:url(../../images/btn-red.jpg);}
.button-wrap a img{ vertical-align:middle; display:inline-block;}
.button-wrap a.active{background-image:url(../../images/btn-red-active.png);}
.button-wrap a.result{display:none;background-image:url(../../images/btn-green.jpg);}
/**
*ul-progress
*进度条
**/
.ul-progress{ list-style:none;padding:10px 0 0 0; width:560px; margin:0 auto;}
.ul-progress li{ margin:30px 0 0 0; position:relative;}
.ul-progress li .bg{ width:80%; margin:0 auto; display:block;}
.ul-progress li .title{ position:absolute; line-height:85px; text-align:center; font-size:30px; color:#fff; z-index:10; left:50%; top:60px; width:90px; margin-left:-45px;}
.ul-progress li .progress{ position:absolute; top:110px; left:50%; height:47px; width:350px; margin-left:-175px; background:#741404; border-radius:47px; overflow:hidden;}
.ul-progress li .progress img{ width:100%; position:relative; z-index:10;}
.ul-progress li .progress .in{ position:absolute; left:0; top:0; width:0; height:100%; background:#fcda3a; z-index:9;}
.ul-progress li .progress .num{ position:absolute; left:0; top:0; width:100%; height:100%; line-height:47px; text-align:center; color:#fff; z-index:20; font-size:24px; font-weight:bold;}
/*footer*/
.footer{ position:relative; margin:40px 0 0 0; background:#4557ab; color:#fff; line-height:35px; font-size:20px; text-align:center; z-index:20;}
.footer img{ max-width:100%;}
.footer .content{width:700px; margin:0 auto; padding:50px 0 100px;}
.footer .copyright{ padding:40px 0; border-top:1px dashed #fff; font-size:18px; line-height:30px; margin:0 20px;}
/*中奖名单*/
.nameList{ display:none; position:absolute; top:0; left:0; right:0;z-index:1000; font-family:microsoft yahei;}
.cover{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:url(../../images/bg-50.png); z-index:999;}
.nameList .nameListWrap{ position:absolute; top:150px; width:470px; max-wdith:100%; left:50%; margin-left:-260px; background:#fcf0b3; border-radius:20px; border:2px solid #ff9000; padding:35px 20px 20px;}
.nameListWrap .close{ position:absolute; width:50px; right:-20px; top:-20px; cursor:pointer;}
.nameListWrap .close:hover{ opacity:.8;}
.nameListWrap .t{ position:absolute; width:180px; top:0; left:50%; margin:-24px 0 0 -90px;}
.nameListWrap .b{ font-size:14px; color:#333; padding:20px 0 15px; border-bottom:1px solid #ff9100; line-height:22px;}
.nameListWrap .b h3{ color:#ff9100; font-size:24px; padding-bottom:15px;}
.nameListWrap .b ul{ list-style:none;}
.nameListWrap .b ul li{ width:50%; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 0;}
.nameListWrap .b ul li span{ color:#777;}
.nameListWrap .b .page{ margin:10px 0 0; font-size:14px; color:#ff9100; text-align:right; cursor:pointer;}
.nameListWrap .b .page a{ padding:0 5px;}
.nameListWrap .b .page .current{ color:#999;}
.nameListWrap .b .page a:hover{ text-decoration:underline;}
.nameListWrap .nameList-bottom{ padding:20px 0 0; text-align:center;}
.nameListWrap .nameList-bottom .print{ -webkit-appearance:none; border:0;display:inline-block; width:150px; height:60px; line-height:65px; font-weight:bold; font-size:20px; cursor:pointer; background:url(../../images/btn-yellow.png) no-repeat center center; background-size:100%; color:#ff6102;}
/**/
.complete .ul-progress li .progress .in{ width:100%!important;}
.complete .start{display:none;}
.complete .button-wrap a.result{ display:inline-block;}
/*移动端适配*/
@media screen and (max-width:500px){
.wrap{ width:95%; margin-top:-20px;}
.wrap .nav a{ width:25%; font-size:1.2em; background-position:center center; line-height:100px;}
.wrap-bg .topleft{ width:50px; right:auto; left:0; margin:0;}
.wrap-bg .topright{ width:50px; left:auto; right:0; margin:0;}
.button-wrap{ padding:0;}
.button-wrap a{ width:120px; font-size:1.5em;}
.ul-progress{ padding:0;}
.ul-progress li h3{ line-height:45px; font-size:1.5em}
.ul-progress li .progress{ width:70%; left:15%; margin:0; bottom:20px; top:auto; height:30px;}
.ul-progress li .progress img{ display:none;}
.ul-progress li .progress .num{ line-height:30px; font-size:1.2em}
.nameList .nameListWrap{ width:80%; margin:0 10%; left:auto; right:auto; box-sizing:border-box;}
.nameListWrap .t{ width:140px; margin-left:-70px;}
.nameListWrap .close{ width:40px;}
.nameListWrap .b{ padding-top:10px;}
.nameListWrap .b h3{ font-size:1.2em;}
.nameListWrap .b ul li{ width:100%;}
.nameListWrap .nameList-bottom a{width:120px; font-size:1.5em;}
}