Skip to content

Commit 27cddfa

Browse files
FasttianFasttian
committed
update(uni-ui): demo page
1 parent 8c89130 commit 27cddfa

File tree

255 files changed

+12670
-17076
lines changed

Some content is hidden

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

255 files changed

+12670
-17076
lines changed

‎common/uni.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,7 @@ radio-group label, checkbox-group label{
192192
padding-bottom:30rpx;
193193
}
194194
/*数字角标*/
195-
.uni-badge,
195+
/* .uni-badge,
196196
.uni-badge-default {
197197
font-family: 'Helvetica Neue', Helvetica, sans-serif;
198198
font-size: 12px;
@@ -202,7 +202,7 @@ radio-group label, checkbox-group label{
202202
color: #333;
203203
border-radius: 100px;
204204
background-color: rgba(0, 0, 0, .15);
205-
}
205+
} */
206206
.uni-badge.uni-badge-inverted {
207207
padding: 0 5px 0 0;
208208
color: #929292;

‎components/uni-section/uni-section.vue‎

Lines changed: 140 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,140 @@
1-
<template>
2-
<view class="uni-section" nvue>
3-
<view v-if="type" class="uni-section__head">
4-
<view :class="type" class="uni-section__head-tag" />
5-
</view>
6-
<view class="uni-section__content">
7-
<text :class="{'distraction':!subTitle}" class="uni-section__content-title">{{ title }}</text>
8-
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
9-
</view>
10-
<slot />
11-
</view>
12-
</template>
13-
14-
<script>
15-
/**
16-
* Section 标题栏
17-
* @description 标题栏
18-
* @property {String} type = [line|circle] 标题装饰类型
19-
* @value line 竖线
20-
* @value circle 圆形
21-
* @property {String} title 主标题
22-
* @property {String} subTitle 副标题
23-
*/
24-
25-
export default {
26-
name: 'UniSection',
27-
emits: ['click'],
28-
props: {
29-
type: {
30-
type: String,
31-
default: ''
32-
},
33-
title: {
34-
type: String,
35-
default: ''
36-
},
37-
subTitle: {
38-
type: String,
39-
default: ''
40-
}
41-
},
42-
data() {
43-
return {}
44-
},
45-
watch: {
46-
title(newVal) {
47-
if (uni.report && newVal !== '') {
48-
uni.report('title', newVal)
49-
}
50-
}
51-
},
52-
methods: {
53-
onClick() {
54-
this.$emit('click')
55-
}
56-
}
57-
}
58-
</script>
59-
<style scoped>
60-
.uni-section {
61-
position: relative;
62-
/* #ifndef APP-NVUE */
63-
display: flex;
64-
/* #endif */
65-
margin-top: 10px;
66-
flex-direction: row;
67-
align-items: center;
68-
padding: 0 10px;
69-
height: 50px;
70-
background-color: #f8f8f8;
71-
/* #ifdef APP-NVUE */
72-
/* #endif */
73-
font-weight: normal;
74-
}
75-
76-
/* #ifndef APP-NVUE */
77-
/* #endif */
78-
.uni-section__head {
79-
flex-direction: row;
80-
justify-content: center;
81-
align-items: center;
82-
margin-right: 10px;
83-
}
84-
85-
.line {
86-
height: 15px;
87-
background-color: #c0c0c0;
88-
border-radius: 5px;
89-
width: 3px;
90-
}
91-
92-
.circle {
93-
width: 8px;
94-
height: 8px;
95-
border-top-right-radius: 50px;
96-
border-top-left-radius: 50px;
97-
border-bottom-left-radius: 50px;
98-
border-bottom-right-radius: 50px;
99-
background-color: #c0c0c0;
100-
}
101-
102-
.uni-section__content {
103-
/* #ifndef APP-NVUE */
104-
display: flex;
105-
/* #endif */
106-
flex-direction: column;
107-
flex: 1;
108-
color: #333;
109-
}
110-
111-
.uni-section__content-title {
112-
font-size: 14px;
113-
color: #333;
114-
}
115-
116-
.distraction {
117-
flex-direction: row;
118-
align-items: center;
119-
}
120-
121-
.uni-section__content-sub {
122-
font-size: 12px;
123-
color: #999;
124-
}
125-
</style>
1+
<template>
2+
<view class="uni-section">
3+
<view class="uni-section-header" nvue>
4+
<view v-if="type" class="uni-section__head">
5+
<view :class="type" class="uni-section__head-tag"/>
6+
</view>
7+
<view class="uni-section__content">
8+
<text :class="{'distraction':!subTitle}" :style="{color:color}" class="uni-section__content-title">{{ title }}</text>
9+
<text v-if="subTitle" class="uni-section__content-sub">{{ subTitle }}</text>
10+
</view>
11+
</view>
12+
<view :style="{padding: padding ? '10px' : ''}">
13+
<slot/>
14+
</view>
15+
</view>
16+
</template>
17+
18+
<script>
19+
20+
/**
21+
* Section 标题栏
22+
* @description 标题栏
23+
* @property {String} type = [line|circle] 标题装饰类型
24+
* @value line 竖线
25+
* @value circle 圆形
26+
* @property {String} title 主标题
27+
* @property {String} subTitle 副标题
28+
*/
29+
30+
export default {
31+
name: 'UniSection',
32+
emits:['click'],
33+
props: {
34+
type: {
35+
type: String,
36+
default: ''
37+
},
38+
title: {
39+
type: String,
40+
default: ''
41+
},
42+
color:{
43+
type: String,
44+
default: '#333'
45+
},
46+
subTitle: {
47+
type: String,
48+
default: ''
49+
},
50+
padding: {
51+
type: Boolean,
52+
default: false
53+
}
54+
},
55+
data() {
56+
return {}
57+
},
58+
watch: {
59+
title(newVal) {
60+
if (uni.report && newVal !== '') {
61+
uni.report('title', newVal)
62+
}
63+
}
64+
},
65+
methods: {
66+
onClick() {
67+
this.$emit('click')
68+
}
69+
}
70+
}
71+
</script>
72+
<style lang="scss" scoped>
73+
$uni-primary: #2979ff !default;
74+
75+
.uni-section {
76+
background-color: #fff;
77+
// overflow: hidden;
78+
margin-top: 10px;
79+
}
80+
.uni-section-header {
81+
position: relative;
82+
/* #ifndef APP-NVUE */
83+
display: flex;
84+
/* #endif */
85+
flex-direction: row;
86+
align-items: center;
87+
padding: 12px 10px;
88+
// height: 50px;
89+
font-weight: normal;
90+
}
91+
.uni-section__head {
92+
flex-direction: row;
93+
justify-content: center;
94+
align-items: center;
95+
margin-right: 10px;
96+
}
97+
98+
.line {
99+
height: 12px;
100+
background-color: $uni-primary;
101+
border-radius: 10px;
102+
width: 4px;
103+
}
104+
105+
.circle {
106+
width: 8px;
107+
height: 8px;
108+
border-top-right-radius: 50px;
109+
border-top-left-radius: 50px;
110+
border-bottom-left-radius: 50px;
111+
border-bottom-right-radius: 50px;
112+
background-color: $uni-primary;
113+
}
114+
115+
.uni-section__content {
116+
/* #ifndef APP-NVUE */
117+
display: flex;
118+
/* #endif */
119+
flex-direction: column;
120+
flex: 1;
121+
color: #333;
122+
}
123+
124+
.uni-section__content-title {
125+
font-size: 14px;
126+
color: $uni-primary;
127+
}
128+
129+
.distraction {
130+
flex-direction: row;
131+
align-items: center;
132+
}
133+
134+
.uni-section__content-sub {
135+
font-size: 12px;
136+
color: #999;
137+
line-height: 16px;
138+
margin-top: 2px;
139+
}
140+
</style>

0 commit comments

Comments
 (0)