diff --git a/app.wxss b/app.wxss index 9b1356f..1988019 100644 --- a/app.wxss +++ b/app.wxss @@ -1,6 +1,7 @@ @import "colorui/main.wxss"; @import "colorui/icon.wxss"; @import "colorui/animation.wxss"; +@import 'assets/styles/skyvow.wxss'; /**app.wxss**/ .scrollPage { diff --git a/assets/styles/skyvow.wxss b/assets/styles/skyvow.wxss new file mode 100644 index 0000000..36d9ba4 --- /dev/null +++ b/assets/styles/skyvow.wxss @@ -0,0 +1,118 @@ +page{ + width: 100%; + height: 100%; + position: relative; + color: #333; + background-color: #f8f8f8; + font-size: 16px; + /*font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;*/ + font-family: PingFang SC,Helvetica Neue,Hiragino Sans GB,Helvetica,Microsoft YaHei,Arial; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; +} + +.page__hd { + padding: 40px; +} + +.page__bd { + padding-bottom: 40px; +} + +.page__bd_spacing { + padding-left: 15px; + padding-right: 15px; +} + +.page__ft{ + padding-bottom: 10px; + text-align: center; +} + +.page__title { + text-align: left; + font-size: 20px; + font-weight: 400; +} + +.page__desc { + margin-top: 5px; + color: #888888; + text-align: left; + font-size: 14px; +} + +.placeholder { + background-color: #ebebef; + color: #bbb; + text-align: center; + height: 30px; + line-height: 30px; + width: 100%; + box-sizing: border-box; +} + +.sub-title { + padding: 30rpx 30rpx 18rpx; + font-size: 28rpx; + color: #888; + width: 100%; + box-sizing: border-box; +} + +.button-sp-area { + margin: 20px auto 0; + width: 80%; + text-align: center; +} + +.btn-area { + margin: 1.17647059em 15px 0.3em; +} + +.btn-area button { + margin-bottom: 10px; +} + +.btn-area button:last-child { + margin-bottom: 0; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.btn-group { + position: relative; + z-index: 1010; + margin-bottom: 50px; +} + +.logo { + padding: 30rpx; + text-align: center; +} + +.logo image { + width: 200rpx; + height: 200rpx; +} + +.logo__text { + font-size: 48rpx; + font-weight: bold; + font-style: italic; + background: -webkit-linear-gradient(left, #04BE02 , #2d8cf0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; +} diff --git a/components/skeleton-avatar/index.js b/components/skeleton-avatar/index.js new file mode 100644 index 0000000..9e3cdc8 --- /dev/null +++ b/components/skeleton-avatar/index.js @@ -0,0 +1,49 @@ +import baseComponent from '../helpers/baseComponent' +import classNames from '../helpers/classNames' + +baseComponent({ + relations: { + '../skeleton/index': { + type: 'ancestor', + }, + }, + properties: { + prefixCls: { + type: String, + value: 'wux-skeleton-avatar', + }, + size: { + type: String, + value: 'default', + }, + shape: { + type: String, + value: 'circle', + }, + }, + data: { + active: false, + }, + computed: { + classes: ['prefixCls, active, size, shape', function(prefixCls, active, size, shape) { + const wrap = classNames(prefixCls, { + [`${prefixCls}--active`]: active, + [`${prefixCls}--${size}`]: size, + [`${prefixCls}--${shape}`]: shape, + }) + + return { + wrap, + } + }], + }, + methods: { + updated(active) { + if (this.data.active !== active) { + this.setData({ + active, + }) + } + }, + }, +}) diff --git a/components/skeleton-avatar/index.json b/components/skeleton-avatar/index.json new file mode 100644 index 0000000..fba482a --- /dev/null +++ b/components/skeleton-avatar/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/skeleton-avatar/index.wxml b/components/skeleton-avatar/index.wxml new file mode 100644 index 0000000..eae9f02 --- /dev/null +++ b/components/skeleton-avatar/index.wxml @@ -0,0 +1 @@ + diff --git a/components/skeleton-avatar/index.wxss b/components/skeleton-avatar/index.wxss new file mode 100644 index 0000000..6e39d0b --- /dev/null +++ b/components/skeleton-avatar/index.wxss @@ -0,0 +1,58 @@ +.wux-skeleton-avatar { + display: inline-block; + vertical-align: top; + background: #f2f2f2; + width: 80rpx; + height: 80rpx; + line-height: 80rpx +} +.wux-skeleton-avatar--small { + width: 64rpx; + height: 64rpx; + line-height: 64rpx +} +.wux-skeleton-avatar--large { + width: 96rpx; + height: 96rpx; + line-height: 96rpx +} +.wux-skeleton-avatar--page { + width: 220rpx; + height: 220rpx; + line-height: 220rpx +} + +.wux-skeleton-avatar--title { + width: 100%; + height: 120rpx; + line-height: 120rpx +} + +.wux-skeleton-avatar--full { + width: 100%; + height: 240rpx; + line-height: 240rpx +} + +.wux-skeleton-avatar--circle { + border-radius: 50% +} +.wux-skeleton-avatar--rounded { + border-radius: 8rpx +} +.wux-skeleton-avatar--square { + border-radius: 0 +} +.wux-skeleton-avatar--active { + background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100% +} +@keyframes loading { + 0% { + background-position: 100% 50% + } + 100% { + background-position: 0 50% + } +} \ No newline at end of file diff --git a/components/skeleton-paragraph/index.js b/components/skeleton-paragraph/index.js new file mode 100644 index 0000000..b63df7f --- /dev/null +++ b/components/skeleton-paragraph/index.js @@ -0,0 +1,59 @@ +import baseComponent from '../helpers/baseComponent' +import classNames from '../helpers/classNames' + +baseComponent({ + relations: { + '../skeleton/index': { + type: 'ancestor', + }, + }, + properties: { + prefixCls: { + type: String, + value: 'wux-skeleton-paragraph', + }, + rows: { + type: Number, + value: 3, + }, + rounded: { + type: Boolean, + value: false, + }, + }, + data: { + active: false, + rowList: [], + }, + computed: { + classes: ['prefixCls, active, rounded', function(prefixCls, active, rounded) { + const wrap = classNames(prefixCls, { + [`${prefixCls}--active`]: active, + [`${prefixCls}--rounded`]: rounded, + }) + const row = `${prefixCls}__row` + + return { + wrap, + row, + } + }], + }, + methods: { + updated(active) { + if (this.data.active !== active) { + this.setData({ + active, + }) + } + }, + updateRows(rows = this.data.rows) { + this.setData({ + rowList: [...Array(rows)].map((_, index) => index), + }) + }, + }, + attached() { + this.updateRows() + }, +}) diff --git a/components/skeleton-paragraph/index.json b/components/skeleton-paragraph/index.json new file mode 100644 index 0000000..fba482a --- /dev/null +++ b/components/skeleton-paragraph/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/skeleton-paragraph/index.wxml b/components/skeleton-paragraph/index.wxml new file mode 100644 index 0000000..227c273 --- /dev/null +++ b/components/skeleton-paragraph/index.wxml @@ -0,0 +1,5 @@ + + + + + diff --git a/components/skeleton-paragraph/index.wxss b/components/skeleton-paragraph/index.wxss new file mode 100644 index 0000000..5702cd7 --- /dev/null +++ b/components/skeleton-paragraph/index.wxss @@ -0,0 +1,41 @@ +.wux-skeleton-paragraph { + position: relative; + overflow: hidden +} +.wux-skeleton-paragraph__row { + height: 32rpx; + background: #f2f2f2; + width: 100%; + margin-top: 32rpx +} +.wux-skeleton-paragraph__row:first-child { + margin-top: 0 +} +.wux-skeleton-paragraph__row:nth-child(4n+1) { + width: 80% +} +.wux-skeleton-paragraph__row:nth-child(4n+2) { + width: 100% +} +.wux-skeleton-paragraph__row:nth-child(4n+3) { + width: 70% +} +.wux-skeleton-paragraph__row:nth-child(4n+4) { + width: 85% +} +.wux-skeleton-paragraph--rounded .wux-skeleton-paragraph__row { + border-radius: 8rpx +} +.wux-skeleton-paragraph--active .wux-skeleton-paragraph__row { + background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%); + animation: loading 1.4s ease infinite; + background-size: 400% 100% +} +@keyframes loading { + 0% { + background-position: 100% 50% + } + 100% { + background-position: 0 50% + } +} \ No newline at end of file diff --git a/components/skeleton/index.js b/components/skeleton/index.js new file mode 100644 index 0000000..dca98cb --- /dev/null +++ b/components/skeleton/index.js @@ -0,0 +1,59 @@ +import baseComponent from '../helpers/baseComponent' +import classNames from '../helpers/classNames' + +baseComponent({ + relations: { + '../skeleton-avatar/index': { + type: 'descendant', + observer() { + this.debounce(this.updated) + }, + }, + '../skeleton-paragraph/index': { + type: 'descendant', + observer() { + this.debounce(this.updated) + }, + }, + }, + properties: { + prefixCls: { + type: String, + value: 'wux-skeleton', + }, + active: { + type: Boolean, + value: false, + observer: 'updated', + }, + }, + computed: { + classes: ['prefixCls, active', function(prefixCls, active) { + const wrap = classNames(prefixCls, { + [`${prefixCls}--active`]: active, + }) + + return { + wrap, + } + }], + }, + methods: { + updated(active = this.data.active) { + const avatar = this.getRelationNodes('../skeleton-avatar/index') + const paragraph = this.getRelationNodes('../skeleton-paragraph/index') + + if (avatar.length > 0) { + avatar.forEach((element) => { + element.updated(active) + }) + } + + if (paragraph.length > 0) { + paragraph.forEach((element) => { + element.updated(active) + }) + } + }, + }, +}) diff --git a/components/skeleton/index.json b/components/skeleton/index.json new file mode 100644 index 0000000..fba482a --- /dev/null +++ b/components/skeleton/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/components/skeleton/index.wxml b/components/skeleton/index.wxml new file mode 100644 index 0000000..2cf2c40 --- /dev/null +++ b/components/skeleton/index.wxml @@ -0,0 +1,3 @@ + + + diff --git a/components/skeleton/index.wxss b/components/skeleton/index.wxss new file mode 100644 index 0000000..1498f39 --- /dev/null +++ b/components/skeleton/index.wxss @@ -0,0 +1,4 @@ +.wux-skeleton { + position: relative; + width: 100% +} \ No newline at end of file diff --git a/pages/mall/shops/index.json b/pages/mall/shops/index.json index 9a47422..d3ed8b0 100644 --- a/pages/mall/shops/index.json +++ b/pages/mall/shops/index.json @@ -1,5 +1,10 @@ { "usingComponents": { + "wux-skeleton": "/components/skeleton/index", + "wux-skeleton-avatar": "/components/skeleton-avatar/index", + "wux-skeleton-paragraph": "/components/skeleton-paragraph/index", + "wux-row": "/components/row/index", + "wux-col": "/components/col/index", "refresh-view": "/components/refresh-view/index", "wux-button": "/components/button/index", "wux-tab": "/components/tab/index", diff --git a/pages/mall/shops/index.wxml b/pages/mall/shops/index.wxml index 50cc7f2..96f8c28 100644 --- a/pages/mall/shops/index.wxml +++ b/pages/mall/shops/index.wxml @@ -4,10 +4,77 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 暂无数据