Skip to content

Commit d7e8448

Browse files
wen-gangwen-gang
committed
Colorui-UniApp
1 parent 6ed1c05 commit d7e8448

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+10470
-0
lines changed

‎Colorui-UniApp/App.vue‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<script>
2+
import Vue from 'vue'
3+
export default {
4+
onLaunch: function() {
5+
uni.getSystemInfo({
6+
success: function(e) {
7+
8+
// #ifdef H5
9+
Vue.prototype.StatusBar = e.statusbarHeight;
10+
if (e.platform == 'android') {
11+
Vue.prototype.CustomBar = e.statusbarHeight + 50;
12+
} else {
13+
Vue.prototype.CustomBar = e.statusbarHeight + 45;
14+
};
15+
// #endif
16+
17+
// #ifdef MP-WEIXIN
18+
Vue.prototype.StatusBar = e.statusBarHeight;
19+
let custom = wx.getMenuButtonBoundingClientRect();
20+
Vue.prototype.Custom = custom;
21+
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
22+
// #endif
23+
24+
Vue.prototype.ColorList = [{
25+
title: '嫣红',
26+
name: 'red',
27+
color: '#e54d42'
28+
},
29+
{
30+
title: '桔橙',
31+
name: 'orange',
32+
color: '#f37b1d'
33+
},
34+
{
35+
title: '明黄',
36+
name: 'yellow',
37+
color: '#fbbd08'
38+
},
39+
{
40+
title: '橄榄',
41+
name: 'olive',
42+
color: '#8dc63f'
43+
},
44+
{
45+
title: '森绿',
46+
name: 'green',
47+
color: '#39b54a'
48+
},
49+
{
50+
title: '天青',
51+
name: 'cyan',
52+
color: '#1cbbb4'
53+
},
54+
{
55+
title: '海蓝',
56+
name: 'blue',
57+
color: '#0081ff'
58+
},
59+
{
60+
title: '姹紫',
61+
name: 'purple',
62+
color: '#6739b6'
63+
},
64+
{
65+
title: '木槿',
66+
name: 'mauve',
67+
color: '#9c26b0'
68+
},
69+
{
70+
title: '桃粉',
71+
name: 'pink',
72+
color: '#e03997'
73+
},
74+
{
75+
title: '棕褐',
76+
name: 'brown',
77+
color: '#a5673f'
78+
},
79+
{
80+
title: '玄灰',
81+
name: 'grey',
82+
color: '#8799a3'
83+
},
84+
{
85+
title: '草灰',
86+
name: 'gray',
87+
color: '#aaaaaa'
88+
},
89+
{
90+
title: '墨黑',
91+
name: 'black',
92+
color: '#333333'
93+
},
94+
{
95+
title: '雅白',
96+
name: 'white',
97+
color: '#ffffff'
98+
},
99+
]
100+
}
101+
})
102+
},
103+
onShow: function() {
104+
console.log('App Show')
105+
},
106+
onHide: function() {
107+
console.log('App Hide')
108+
}
109+
110+
}
111+
</script>
112+
113+
<style>
114+
@import "icon.css";
115+
@import "colorui.css";
116+
117+
.nav-list {
118+
display: flex;
119+
flex-wrap: wrap;
120+
padding: 0px 40upx 0px;
121+
justify-content: space-between;
122+
}
123+
124+
.nav-li {
125+
padding: 30upx;
126+
border-radius: 12upx;
127+
width: 45%;
128+
margin: 0 2.5% 40upx;
129+
background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
130+
background-size: cover;
131+
background-position: center;
132+
position: relative;
133+
z-index: 1;
134+
}
135+
136+
.nav-li::after {
137+
content: "";
138+
position: absolute;
139+
z-index: -1;
140+
background-color: inherit;
141+
width: 100%;
142+
height: 100%;
143+
left: 0;
144+
bottom: -10%;
145+
border-radius: 10upx;
146+
opacity: 0.2;
147+
transform: scale(0.9, 0.9);
148+
}
149+
150+
.nav-li.cur {
151+
color: #fff;
152+
background: rgb(94, 185, 94);
153+
box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
154+
}
155+
156+
.nav-title {
157+
font-size: 32upx;
158+
font-weight: 300;
159+
}
160+
161+
.nav-title::first-letter {
162+
font-size: 40upx;
163+
margin-right: 4upx;
164+
}
165+
166+
.nav-name {
167+
font-size: 28upx;
168+
text-transform: Capitalize;
169+
margin-top: 20upx;
170+
position: relative;
171+
}
172+
173+
.nav-name::before {
174+
content: "";
175+
position: absolute;
176+
display: block;
177+
width: 40upx;
178+
height: 6upx;
179+
background: #fff;
180+
bottom: 0;
181+
right: 0;
182+
opacity: 0.5;
183+
}
184+
185+
.nav-name::after {
186+
content: "";
187+
position: absolute;
188+
display: block;
189+
width: 100upx;
190+
height: 1px;
191+
background: #fff;
192+
bottom: 0;
193+
right: 40upx;
194+
opacity: 0.3;
195+
}
196+
197+
.nav-name::first-letter {
198+
font-weight: bold;
199+
font-size: 36upx;
200+
margin-right: 1px;
201+
}
202+
203+
.nav-li text {
204+
position: absolute;
205+
right: 30upx;
206+
top: 30upx;
207+
font-size: 52upx;
208+
width: 60upx;
209+
height: 60upx;
210+
text-align: center;
211+
line-height: 60upx;
212+
}
213+
214+
.text-light {
215+
font-weight: 300;
216+
}
217+
218+
@keyframes show {
219+
0% {
220+
transform: translateY(-50px);
221+
}
222+
223+
60% {
224+
transform: translateY(40upx);
225+
}
226+
227+
100% {
228+
transform: translateY(0px);
229+
}
230+
}
231+
232+
@-webkit-keyframes show {
233+
0% {
234+
transform: translateY(-50px);
235+
}
236+
237+
60% {
238+
transform: translateY(40upx);
239+
}
240+
241+
100% {
242+
transform: translateY(0px);
243+
}
244+
}
245+
</style>

0 commit comments

Comments
 (0)