12 changed files with 297 additions and 5 deletions
Unified View
Diff Options
-
2colorui/main.wxss
-
58components/col/index.js
-
3components/col/index.json
-
3components/col/index.wxml
-
161components/col/index.wxss
-
53components/row/index.js
-
3components/row/index.json
-
3components/row/index.wxml
-
8components/row/index.wxss
-
2pages/mall/order-info/index.wxml
-
4pages/mall/search-list/index.wxml
-
2pages/mall/shops/index.wxml
@ -0,0 +1,58 @@ |
|||||
|
import baseComponent from '../helpers/baseComponent' |
||||
|
import classNames from '../helpers/classNames' |
||||
|
|
||||
|
baseComponent({ |
||||
|
relations: { |
||||
|
'../row/index': { |
||||
|
type: 'parent', |
||||
|
}, |
||||
|
}, |
||||
|
properties: { |
||||
|
prefixCls: { |
||||
|
type: String, |
||||
|
value: 'wux-col', |
||||
|
}, |
||||
|
span: { |
||||
|
value: 0, |
||||
|
type: Number, |
||||
|
}, |
||||
|
offset: { |
||||
|
value: 0, |
||||
|
type: Number, |
||||
|
}, |
||||
|
pull: { |
||||
|
value: 0, |
||||
|
type: Number, |
||||
|
}, |
||||
|
push: { |
||||
|
value: 0, |
||||
|
type: Number, |
||||
|
}, |
||||
|
}, |
||||
|
data: { |
||||
|
colStyle: '', |
||||
|
}, |
||||
|
computed: { |
||||
|
classes: ['prefixCls, span, offset, pull, push', function(prefixCls, span, offset, pull, push) { |
||||
|
const wrap = classNames(prefixCls, { |
||||
|
[`${prefixCls}--span-${span}`]: span, |
||||
|
[`${prefixCls}--offset-${offset}`]: offset, |
||||
|
[`${prefixCls}--pull-${pull}`]: pull, |
||||
|
[`${prefixCls}--push-${push}`]: push, |
||||
|
}) |
||||
|
|
||||
|
return { |
||||
|
wrap, |
||||
|
} |
||||
|
}], |
||||
|
}, |
||||
|
methods: { |
||||
|
updateStyle(colStyle) { |
||||
|
if (this.data.colStyle !== colStyle) { |
||||
|
this.setData({ |
||||
|
colStyle, |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
<view class="wux-class {{ classes.wrap }}" style="{{ colStyle }}"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
@ -0,0 +1,161 @@ |
|||||
|
.wux-col { |
||||
|
position: relative; |
||||
|
min-height: 2rpx; |
||||
|
box-sizing: border-box |
||||
|
} |
||||
|
.wux-col--span-12 { |
||||
|
float: left; |
||||
|
width: 100% |
||||
|
} |
||||
|
.wux-col--pull-12 { |
||||
|
right: 100% |
||||
|
} |
||||
|
.wux-col--push-12 { |
||||
|
left: 100% |
||||
|
} |
||||
|
.wux-col--offset-12 { |
||||
|
margin-left: 100% |
||||
|
} |
||||
|
.wux-col--span-11 { |
||||
|
float: left; |
||||
|
width: 91.66666667% |
||||
|
} |
||||
|
.wux-col--pull-11 { |
||||
|
right: 91.66666667% |
||||
|
} |
||||
|
.wux-col--push-11 { |
||||
|
left: 91.66666667% |
||||
|
} |
||||
|
.wux-col--offset-11 { |
||||
|
margin-left: 91.66666667% |
||||
|
} |
||||
|
.wux-col--span-10 { |
||||
|
float: left; |
||||
|
width: 83.33333333% |
||||
|
} |
||||
|
.wux-col--pull-10 { |
||||
|
right: 83.33333333% |
||||
|
} |
||||
|
.wux-col--push-10 { |
||||
|
left: 83.33333333% |
||||
|
} |
||||
|
.wux-col--offset-10 { |
||||
|
margin-left: 83.33333333% |
||||
|
} |
||||
|
.wux-col--span-9 { |
||||
|
float: left; |
||||
|
width: 75% |
||||
|
} |
||||
|
.wux-col--pull-9 { |
||||
|
right: 75% |
||||
|
} |
||||
|
.wux-col--push-9 { |
||||
|
left: 75% |
||||
|
} |
||||
|
.wux-col--offset-9 { |
||||
|
margin-left: 75% |
||||
|
} |
||||
|
.wux-col--span-8 { |
||||
|
float: left; |
||||
|
width: 66.66666667% |
||||
|
} |
||||
|
.wux-col--pull-8 { |
||||
|
right: 66.66666667% |
||||
|
} |
||||
|
.wux-col--push-8 { |
||||
|
left: 66.66666667% |
||||
|
} |
||||
|
.wux-col--offset-8 { |
||||
|
margin-left: 66.66666667% |
||||
|
} |
||||
|
.wux-col--span-7 { |
||||
|
float: left; |
||||
|
width: 58.33333333% |
||||
|
} |
||||
|
.wux-col--pull-7 { |
||||
|
right: 58.33333333% |
||||
|
} |
||||
|
.wux-col--push-7 { |
||||
|
left: 58.33333333% |
||||
|
} |
||||
|
.wux-col--offset-7 { |
||||
|
margin-left: 58.33333333% |
||||
|
} |
||||
|
.wux-col--span-6 { |
||||
|
float: left; |
||||
|
width: 50% |
||||
|
} |
||||
|
.wux-col--pull-6 { |
||||
|
right: 50% |
||||
|
} |
||||
|
.wux-col--push-6 { |
||||
|
left: 50% |
||||
|
} |
||||
|
.wux-col--offset-6 { |
||||
|
margin-left: 50% |
||||
|
} |
||||
|
.wux-col--span-5 { |
||||
|
float: left; |
||||
|
width: 41.66666667% |
||||
|
} |
||||
|
.wux-col--pull-5 { |
||||
|
right: 41.66666667% |
||||
|
} |
||||
|
.wux-col--push-5 { |
||||
|
left: 41.66666667% |
||||
|
} |
||||
|
.wux-col--offset-5 { |
||||
|
margin-left: 41.66666667% |
||||
|
} |
||||
|
.wux-col--span-4 { |
||||
|
float: left; |
||||
|
width: 33.33333333% |
||||
|
} |
||||
|
.wux-col--pull-4 { |
||||
|
right: 33.33333333% |
||||
|
} |
||||
|
.wux-col--push-4 { |
||||
|
left: 33.33333333% |
||||
|
} |
||||
|
.wux-col--offset-4 { |
||||
|
margin-left: 33.33333333% |
||||
|
} |
||||
|
.wux-col--span-3 { |
||||
|
float: left; |
||||
|
width: 25% |
||||
|
} |
||||
|
.wux-col--pull-3 { |
||||
|
right: 25% |
||||
|
} |
||||
|
.wux-col--push-3 { |
||||
|
left: 25% |
||||
|
} |
||||
|
.wux-col--offset-3 { |
||||
|
margin-left: 25% |
||||
|
} |
||||
|
.wux-col--span-2 { |
||||
|
float: left; |
||||
|
width: 16.66666667% |
||||
|
} |
||||
|
.wux-col--pull-2 { |
||||
|
right: 16.66666667% |
||||
|
} |
||||
|
.wux-col--push-2 { |
||||
|
left: 16.66666667% |
||||
|
} |
||||
|
.wux-col--offset-2 { |
||||
|
margin-left: 16.66666667% |
||||
|
} |
||||
|
.wux-col--span-1 { |
||||
|
float: left; |
||||
|
width: 8.33333333% |
||||
|
} |
||||
|
.wux-col--pull-1 { |
||||
|
right: 8.33333333% |
||||
|
} |
||||
|
.wux-col--push-1 { |
||||
|
left: 8.33333333% |
||||
|
} |
||||
|
.wux-col--offset-1 { |
||||
|
margin-left: 8.33333333% |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
import baseComponent from '../helpers/baseComponent' |
||||
|
import classNames from '../helpers/classNames' |
||||
|
|
||||
|
baseComponent({ |
||||
|
relations: { |
||||
|
'../col/index': { |
||||
|
type: 'child', |
||||
|
observer() { |
||||
|
this.updateStyle() |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
properties: { |
||||
|
prefixCls: { |
||||
|
type: String, |
||||
|
value: 'wux-row', |
||||
|
}, |
||||
|
gutter: { |
||||
|
value: 0, |
||||
|
type: Number, |
||||
|
observer: 'updateStyle', |
||||
|
}, |
||||
|
}, |
||||
|
data: { |
||||
|
rowStyle: '', |
||||
|
}, |
||||
|
computed: { |
||||
|
classes: ['prefixCls', function(prefixCls) { |
||||
|
const wrap = classNames(prefixCls) |
||||
|
|
||||
|
return { |
||||
|
wrap, |
||||
|
} |
||||
|
}], |
||||
|
}, |
||||
|
methods: { |
||||
|
updateStyle(gutter = this.data.gutter) { |
||||
|
const elements = this.getRelationNodes('../col/index') |
||||
|
const rowStyle = gutter > 0 ? `margin-left: ${gutter / -2}px; margin-right: ${gutter / -2}px` : '' |
||||
|
const colStyle = gutter > 0 ? `padding-left: ${gutter / 2}px; padding-right: ${gutter / 2}px` : '' |
||||
|
|
||||
|
if (elements.length > 0) { |
||||
|
elements.forEach((element) => { |
||||
|
element.updateStyle(colStyle) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
rowStyle, |
||||
|
}) |
||||
|
}, |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"component": true |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
<view class="wux-class {{ classes.wrap }}" style="{{ rowStyle }}"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
@ -0,0 +1,8 @@ |
|||||
|
.wux-row:after, |
||||
|
.wux-row:before { |
||||
|
display: table; |
||||
|
content: " " |
||||
|
} |
||||
|
.wux-row:after { |
||||
|
clear: both |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save