Skip to content

Commit 10a90f3

Browse files
hulinNeilhulinNeil
committed
集成uni-ui进入hello uniapp
1 parent 29c8cfb commit 10a90f3

File tree

73 files changed

+8054
-2387
lines changed

Some content is hidden

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

73 files changed

+8054
-2387
lines changed

‎common/uni.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -879,17 +879,6 @@ radio-group label, checkbox-group label{
879879
padding:20upx 0;
880880
}
881881

882-
/* steps */
883-
.uni-steps{padding:20upx 30upx; flex-grow: 1; display:flex; flex-wrap:wrap;}
884-
.uni-steps view{display:flex; flex-wrap:wrap; float:none;}
885-
.uni-steps .step{width:31.3%; margin:0 1%; flex-wrap:nowrap;}
886-
.uni-steps .step-circle{width:50upx; height:50upx; border-radius:50upx; background:#F1F1F3; justify-content:center; line-height:50upx; flex-shrink:0; margin-right:15upx; color:#666; font-size:28upx;}
887-
.uni-steps .step-content{width:100%; height:22upx; border-bottom:1px solid #F1F2F3;}
888-
.uni-steps .step-title{line-height:50upx; height:50upx; background:#FFFFFF; width:auto; overflow:hidden; padding-right:8upx;}
889-
.uni-steps .current .step-circle{background:#00B26A; color:#FFFFFF;}
890-
.uni-steps .current .step-content{border-color:#00B26A;}
891-
.uni-steps .current .step-title{color:#00B26A;}
892-
893882
/* comment */
894883
.uni-comment{padding:5rpx 0; display: flex; flex-grow:1; flex-direction: column;}
895884
.uni-comment-list{flex-wrap:nowrap; padding:10rpx 0; margin:10rpx 0; width:100%; display: flex;}

components/uni-badge.vue renamed to components/uni-badge/uni-badge.vue

Lines changed: 108 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,108 @@
1-
<template>
2-
<text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
3-
</template>
4-
5-
<script>
6-
export default {
7-
props: {
8-
type: {
9-
type: String,
10-
default: 'default'
11-
},
12-
inverted: {
13-
type: Boolean,
14-
default: false
15-
},
16-
text: {
17-
type: String,
18-
default: ''
19-
},
20-
size: {
21-
type: String,
22-
default: 'normal'
23-
}
24-
},
25-
computed: {
26-
setClass() {
27-
let classList = ['uni-badge-' + this.type, 'uni-badge-size-' + this.size];
28-
if (this.inverted === true) {
29-
classList.push('uni-badge-inverted')
30-
}
31-
return classList.join(" ")
32-
}
33-
},
34-
methods: {
35-
onClick() {
36-
this.$emit('click')
37-
}
38-
}
39-
}
40-
</script>
41-
42-
<style>
43-
.uni-badge,
44-
.uni-badge-default {
45-
font-family: 'Helvetica Neue', Helvetica, sans-serif;
46-
box-sizing: border-box;
47-
font-size: 12px;
48-
line-height: 1;
49-
display: inline-block;
50-
padding: 3px 6px;
51-
color: #333;
52-
border-radius: 100px;
53-
}
54-
55-
.uni-badge.uni-badge-size-small,
56-
.uni-badge-default.uni-badge-size-small {
57-
height: 10px;
58-
line-height: 11px;
59-
padding: 0px 3px;
60-
font-size: 8px !important;
61-
}
62-
63-
.uni-badge.uni-badge-inverted {
64-
padding: 0 5px 0 0;
65-
color: #929292;
66-
background-color: transparent
67-
}
68-
69-
.uni-badge-primary {
70-
color: #fff;
71-
background-color: #007aff
72-
}
73-
74-
.uni-badge-blue.uni-badge-inverted,
75-
.uni-badge-primary.uni-badge-inverted {
76-
color: #007aff;
77-
background-color: transparent
78-
}
79-
80-
.uni-badge-green,
81-
.uni-badge-success {
82-
color: #fff;
83-
background-color: #4cd964;
84-
}
85-
86-
.uni-badge-green.uni-badge-inverted,
87-
.uni-badge-success.uni-badge-inverted {
88-
color: #4cd964;
89-
background-color: transparent
90-
}
91-
92-
.uni-badge-warning,
93-
.uni-badge-yellow {
94-
color: #fff;
95-
background-color: #f0ad4e
96-
}
97-
98-
.uni-badge-warning.uni-badge-inverted,
99-
.uni-badge-yellow.uni-badge-inverted {
100-
color: #f0ad4e;
101-
background-color: transparent
102-
}
103-
104-
.uni-badge-danger,
105-
.uni-badge-red {
106-
color: #fff;
107-
background-color: #dd524d
108-
}
109-
110-
.uni-badge-danger.uni-badge-inverted,
111-
.uni-badge-red.uni-badge-inverted {
112-
color: #dd524d;
113-
background-color: transparent
114-
}
115-
116-
.uni-badge-purple,
117-
.uni-badge-royal {
118-
color: #fff;
119-
background-color: #8a6de9
120-
}
121-
122-
.uni-badge-purple.uni-badge-inverted,
123-
.uni-badge-royal.uni-badge-inverted {
124-
color: #8a6de9;
125-
background-color: transparent
126-
}
127-
</style>
1+
<template>
2+
<text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: 'uni-badge',
8+
props: {
9+
type: {
10+
type: String,
11+
default: 'default'
12+
},
13+
inverted: {
14+
type: Boolean,
15+
default: false
16+
},
17+
text: {
18+
type: String,
19+
default: ''
20+
},
21+
size: { //small.normal
22+
type: String,
23+
default: 'normal'
24+
}
25+
},
26+
computed: {
27+
setClass() {
28+
let classList = ['uni-badge-' + this.type, 'uni-badge--' + this.size];
29+
if (this.inverted === true) {
30+
classList.push('uni-badge-inverted')
31+
}
32+
return classList.join(" ")
33+
}
34+
},
35+
methods: {
36+
onClick() {
37+
this.$emit('click')
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style>
44+
@charset "UTF-8";
45+
46+
.uni-badge {
47+
font-family: 'Helvetica Neue', Helvetica, sans-serif;
48+
box-sizing: border-box;
49+
font-size: 12px;
50+
line-height: 1;
51+
display: inline-block;
52+
padding: 3px 6px;
53+
color: #333;
54+
border-radius: 100px;
55+
background-color: #f1f1f1
56+
}
57+
58+
.uni-badge.uni-badge-inverted {
59+
padding: 0 5px 0 0;
60+
color: #999;
61+
background-color: transparent
62+
}
63+
64+
.uni-badge-primary {
65+
color: #fff;
66+
background-color: #007aff
67+
}
68+
69+
.uni-badge-primary.uni-badge-inverted {
70+
color: #007aff;
71+
background-color: transparent
72+
}
73+
74+
.uni-badge-success {
75+
color: #fff;
76+
background-color: #4cd964
77+
}
78+
79+
.uni-badge-success.uni-badge-inverted {
80+
color: #4cd964;
81+
background-color: transparent
82+
}
83+
84+
.uni-badge-warning {
85+
color: #fff;
86+
background-color: #f0ad4e
87+
}
88+
89+
.uni-badge-warning.uni-badge-inverted {
90+
color: #f0ad4e;
91+
background-color: transparent
92+
}
93+
94+
.uni-badge-error {
95+
color: #fff;
96+
background-color: #dd524d
97+
}
98+
99+
.uni-badge-error.uni-badge-inverted {
100+
color: #dd524d;
101+
background-color: transparent
102+
}
103+
104+
.uni-badge--small {
105+
transform: scale(.8);
106+
transform-origin: center center
107+
}
108+
</style>

0 commit comments

Comments
 (0)