Skip to content

Commit 8eec5e1

Browse files
PeachScriptPeachScript
committed
Complete UI design and code
1 parent 7cacb5e commit 8eec5e1

File tree

4 files changed

+198
-9
lines changed

4 files changed

+198
-9
lines changed

‎app/images/logo.png

3.13 KB
Loading

‎app/images/[email protected]

19.2 KB
Loading

‎app/index.html

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="zh-CN">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>变量名词库 - 杭州抽象科技</title>
6-
<link rel="stylesheet" href="styles/main.min.css">
7-
<script src="bower_components/angularjs/angular.min.js"></script>
8-
<script src="scripts/app.js"></script>
9-
</head>
10-
<body ng-app="abstackVarLib">
11-
</body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Variables Library - Abstack Tech</title>
6+
<link rel="stylesheet" href="styles/main.min.css">
7+
<script src="bower_components/angularjs/angular.min.js"></script>
8+
<script src="scripts/app.js"></script>
9+
</head>
10+
<body ng-app="abstackVarLib">
11+
<header>
12+
Abstack Tech Variables Library
13+
<input type="text" class="search-box" placeholder="Type some keywords...">
14+
</header>
15+
<ul class="word-list">
16+
<li>
17+
<h3><button class="btn-copy">COPY</button><a href="javascript:;">Settings</a></h3>
18+
<span class="tag-box">
19+
<em>设置</em>
20+
<em>设置</em>
21+
<em>设置</em>
22+
<em>设置</em>
23+
</span>
24+
</li>
25+
</ul>
26+
</body>
1227
</html>

‎app/styles/main.less

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
@main-color: #56caf5;
2+
@deep-main-color: #46add3;
3+
@placeholder-color: #3a91b1;
4+
5+
6+
body{
7+
margin: 0;
8+
}
9+
header{
10+
padding-top: 140px;
11+
padding-bottom: 10px;
12+
font-family: "Georgia", "Tahoma", "Arial";
13+
font-size: 50px;
14+
text-align: center;
15+
color: #fff;
16+
background: url(../images/logo.png) center 30px no-repeat @main-color;
17+
text-shadow: 2px 3px 5px @deep-main-color;
18+
}
19+
/* for retina */
20+
@media only screen and (-webkit-min-device-pixel-ratio: 2),
21+
only screen and (min--moz-device-pixel-ratio: 2),
22+
only screen and (-o-min-device-pixel-ratio: 2/1),
23+
only screen and (min-device-pixel-ratio: 2){
24+
header{
25+
background-image: url(../images/[email protected]);
26+
background-size: 130px 80px;
27+
}
28+
}
29+
.search-box{
30+
display: block;
31+
margin: 32px auto;
32+
padding: 0 10px;
33+
width: 400px;
34+
height: 40px;
35+
font-size: 20px;
36+
color: #fff;
37+
*line-height: 40px;
38+
border: none;
39+
background-color: @deep-main-color;
40+
border-radius: 5px;
41+
outline: none;
42+
&::-webkit-input-placeholder{
43+
color: @placeholder-color;
44+
}
45+
&::-moz-placeholder{
46+
color: @placeholder-color;
47+
}
48+
}
49+
50+
.word-list{
51+
@gap: 20px;
52+
list-style: none;
53+
padding: 10px 40px;
54+
margin-left: -@gap;
55+
li{
56+
@height: 90px;
57+
float: left;
58+
margin-left: @gap;
59+
margin-bottom: 14px;
60+
width: 266px;
61+
padding: 6px 12px;
62+
height: @height;
63+
border: 1px solid @main-color;
64+
border-radius: 5px;
65+
overflow: hidden;
66+
&:hover{
67+
border-color: @deep-main-color;
68+
}
69+
h3{
70+
margin: -6px -12px 0;
71+
padding-left: 10px;
72+
font-family: "Georgia", "Tahoma", "Arial";
73+
font-size: 18px;
74+
letter-spacing: 2px;
75+
line-height: 36px;
76+
background-color: @main-color;
77+
text-shadow: 0 1px 3px @placeholder-color;
78+
a{
79+
position: relative;
80+
color: #fff;
81+
text-decoration: none;
82+
&:hover{
83+
text-decoration: underline;
84+
}
85+
&:hover:before{
86+
content: 'Click to go to dict.cn';
87+
position: absolute;
88+
z-index: 10;
89+
top: 24px;
90+
left: -5px;
91+
width: 140px;
92+
padding: 4px 10px;
93+
font-family: none;
94+
font-size: 13px;
95+
line-height: 20px;
96+
text-align: center;
97+
letter-spacing: 0;
98+
text-shadow: none;
99+
background-color: #000;
100+
opacity: 0.8;
101+
filter: alpha(opacity=80);
102+
border-radius: 5px;
103+
}
104+
}
105+
.btn-copy{
106+
float: right;
107+
padding: 0 8px;
108+
border: none;
109+
line-height: 36px;
110+
color: @placeholder-color;
111+
text-shadow: 0 1px 0 #68e4ff;
112+
background-color: #53c2eb;
113+
border-left: 1px solid #49b3d9;
114+
cursor: pointer;
115+
outline: none;
116+
&:hover{
117+
background-color: @main-color;
118+
}
119+
}
120+
}
121+
.tag-box{
122+
display: inline-block;
123+
margin-top: 10px;
124+
height: @height - 40;
125+
overflow: auto;
126+
&:before{
127+
content: 'Tags: ';
128+
font-size: 14px;
129+
margin-right: -2px;
130+
}
131+
em{
132+
@bgcolor: #eee;
133+
position: relative;
134+
display: inline-block;
135+
margin-left: 12px;
136+
margin-bottom: 6px;
137+
padding: 3px 6px;
138+
font-size: 13px;
139+
font-style: normal;
140+
color: #333;
141+
background-color: @bgcolor;
142+
border-top-right-radius: 3px;
143+
border-bottom-right-radius: 3px;
144+
cursor: pointer;
145+
&:hover{
146+
box-shadow: 0px 1px 3px #999;
147+
}
148+
&:before{
149+
content: '';
150+
position: absolute;
151+
top: 0;
152+
left: -20px;
153+
width: 0;
154+
height: 0;
155+
border: 10px solid transparent;
156+
border-right-color: @bgcolor;
157+
}
158+
&:after{
159+
@size: 4px;
160+
content: '';
161+
position: absolute;
162+
top: 50%;
163+
left: -2px;
164+
margin-top: -@size/2;
165+
width: @size;
166+
height: @size;
167+
background-color: #fff;
168+
border-radius: @size;
169+
box-shadow: 0 0 1px #aaa;
170+
}
171+
}
172+
}
173+
}
174+
}

0 commit comments

Comments
 (0)