From b288b114ba3cd637d0bb50f23af263f90ad1711a Mon Sep 17 00:00:00 2001 From: 刘汉宸 Date: Fri, 20 Mar 2020 17:14:37 +0800 Subject: [PATCH] [新增] 加载 --- examples/router/routes.js | 6 ++++++ examples/views/docs/component/loading.md | 33 +++++++++++++++++++++++++++++++++ packages/button/index.css | 14 +++++++------- packages/button/index.vue | 4 ++-- packages/cell/index.css | 17 ++++++++--------- packages/checkbox/index.css | 4 ++-- packages/icon/index.css | 16 ++++++++-------- packages/loading/index.css | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packages/loading/index.vue | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ packages/popup/index.css | 20 ++++++++++---------- packages/tabBar/index.css | 10 +++++----- packages/tag/index.css | 66 +++++++++++++++++++++++++++++++++--------------------------------- 12 files changed, 338 insertions(+), 76 deletions(-) create mode 100644 examples/views/docs/component/loading.md create mode 100644 packages/loading/index.css create mode 100644 packages/loading/index.vue diff --git a/examples/router/routes.js b/examples/router/routes.js index 861e52a..d65456d 100644 --- a/examples/router/routes.js +++ b/examples/router/routes.js @@ -87,6 +87,12 @@ const _components = [ meta: { title: 'Popup 弹出框' }, component: () => import('@/views/docs/component/popup.md'), }, + { + path: 'loading', + name: 'loading', + meta: { title: 'Loading 加载' }, + component: () => import('@/views/docs/component/loading.md'), + }, ] }, { diff --git a/examples/views/docs/component/loading.md b/examples/views/docs/component/loading.md new file mode 100644 index 0000000..8e440a6 --- /dev/null +++ b/examples/views/docs/component/loading.md @@ -0,0 +1,33 @@ +# Loading 加载 + +说明 + +## 基础用法 + +说明 + +::: snippet 示例 + +```html + + + +``` + +::: \ No newline at end of file diff --git a/packages/button/index.css b/packages/button/index.css index 4f9bdc6..13cf523 100644 --- a/packages/button/index.css +++ b/packages/button/index.css @@ -2,8 +2,8 @@ color: #323233; background-color: #fff; border: 1px solid #ebedf0; - padding: 5px 15px; - font-size: 14px; + padding: 0.25rem 1rem; + font-size: 0.875rem; cursor: pointer; transition: background-color 300ms; display: flex; @@ -12,13 +12,13 @@ } .zui-button.sm { - padding: 2px 4px; - font-size: 10px; + padding: 0.125rem 0.25rem; + font-size: 0.625rem; } .zui-button.lg { - padding: 10px 20px; - font-size: 18px; + padding: 0.625rem 1.25rem; + font-size: 1.125rem; } .zui-button:active { @@ -49,7 +49,7 @@ } .zui-button.link { - padding: 5px 15px; + padding: 0.25rem 1rem; background: inherit; border: inherit; color: #FCD404; diff --git a/packages/button/index.vue b/packages/button/index.vue index bd4cd76..b840d0e 100644 --- a/packages/button/index.vue +++ b/packages/button/index.vue @@ -30,11 +30,11 @@ export default { }, borderRadius: function() { if (this.round) { - return '20px'; + return '1.25rem'; } else if (this.square) { return '0'; } else { - return '4px'; + return '0.25rem'; } }, classRender: function() { diff --git a/packages/cell/index.css b/packages/cell/index.css index 85db941..565b8b6 100644 --- a/packages/cell/index.css +++ b/packages/cell/index.css @@ -5,10 +5,10 @@ display: flex; box-sizing: border-box; width: 100%; - padding: 10px 16px; + padding: 0.625rem 1rem; overflow: hidden; color: #323233; - font-size: 14px; + font-size: 0.875rem; background-color: #fff; } @@ -23,18 +23,18 @@ .zui-cell__left-icon { display: flex; align-items: center; - margin-right: 5px; + margin-right: 0.375rem; } .zui-cell__right-icon { display: flex; align-items: center; - margin-left: 5px; + margin-left: 0.375rem; } .zui-cell__left-icon, .zui-cell__right-icon { min-width: 1em; - font-size: 16px; + font-size: 1rem; } .zui-cell:not(:last-child)::after { @@ -44,7 +44,7 @@ pointer-events: none; right: 0; bottom: 0; - left: 16px; + left: 1rem; border-bottom: 1px solid #ebedf0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); @@ -78,8 +78,7 @@ } .zui-cell__label { - margin-top: 3px; + padding-top: 0.25rem; color: #969799; - font-size: 12px; - line-height: 18px; + font-size: 0.75rem; } diff --git a/packages/checkbox/index.css b/packages/checkbox/index.css index 8b1075f..6863106 100644 --- a/packages/checkbox/index.css +++ b/packages/checkbox/index.css @@ -9,7 +9,7 @@ } .zui-checkbox .zui-checkbox__icon .zui-icon { - font-size: 24px; + font-size: 1.5rem; color: #a6a6a6; transition: color 300ms; cursor: pointer; @@ -20,5 +20,5 @@ } .zui-checkbox .zui-checkbox-label { - padding-left: 10px; + padding-left: 0.625rem; } \ No newline at end of file diff --git a/packages/icon/index.css b/packages/icon/index.css index 742a8ce..c8dd050 100644 --- a/packages/icon/index.css +++ b/packages/icon/index.css @@ -14,17 +14,17 @@ top: 0; right: 0; box-sizing: border-box; - min-width: 16px; - padding: 0 3px; + min-width: 1rem; + padding: 0 0.125rem; color: #fff; font-weight: 500; - font-size: 12px; + font-size: 0.75rem; font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; - line-height: 14px; + line-height: 0.875rem; text-align: center; background-color: #ee0a24; border: 1px solid #fff; - border-radius: 16px; + border-radius: 1rem; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100%; @@ -32,7 +32,7 @@ } .zui-info.dot { - height: 14px; - width: 14px; - min-width: 14px !important; + height: 0.875rem; + width: 0.875rem; + min-width: 0.875rem !important; } \ No newline at end of file diff --git a/packages/loading/index.css b/packages/loading/index.css new file mode 100644 index 0000000..ce3512a --- /dev/null +++ b/packages/loading/index.css @@ -0,0 +1,151 @@ +.zui-loading { + position: relative; + color: #c8c9cc; + font-size: 0; + vertical-align: middle; +} +.zui-loading__spinner { + position: relative; + display: inline-block; + width: 30px; + max-width: 100%; + height: 30px; + max-height: 100%; + vertical-align: middle; + animation: zui-rotate 0.8s linear infinite; +} +.zui-loading__spinner--spinner { + animation-timing-function: steps(12); +} +.zui-loading__spinner--spinner i { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.zui-loading__spinner--spinner i::before { + display: block; + width: 2px; + height: 25%; + margin: 0 auto; + background-color: currentColor; + border-radius: 40%; + content: ' '; +} +.zui-loading__spinner--circular { + animation-duration: 2s; +} +.zui-loading__circular { + display: block; + width: 100%; + height: 100%; +} +.zui-loading__circular circle { + animation: zui-circular 1.5s ease-in-out infinite; + stroke: currentColor; + stroke-width: 3; + stroke-linecap: round; +} +.zui-loading__text { + display: inline-block; + margin-left: 8px; + color: #969799; + font-size: 14px; + vertical-align: middle; +} +.zui-loading--vertical { + display: flex; + flex-direction: column; + align-items: center; +} +.zui-loading--vertical .zui-loading__text { + margin: 8px 0 0; +} + +@keyframes zui-circular { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40; + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120; + } +} + +@keyframes zui-rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.zui-loading__spinner--spinner i:nth-of-type(1) { + transform: rotate(30deg); + opacity: 1; +} + +.zui-loading__spinner--spinner i:nth-of-type(2) { + transform: rotate(60deg); + opacity: 0.9375; +} + +.zui-loading__spinner--spinner i:nth-of-type(3) { + transform: rotate(90deg); + opacity: 0.875; +} + +.zui-loading__spinner--spinner i:nth-of-type(4) { + transform: rotate(120deg); + opacity: 0.8125; +} + +.zui-loading__spinner--spinner i:nth-of-type(5) { + transform: rotate(150deg); + opacity: 0.75; +} + +.zui-loading__spinner--spinner i:nth-of-type(6) { + transform: rotate(180deg); + opacity: 0.6875; +} + +.zui-loading__spinner--spinner i:nth-of-type(7) { + transform: rotate(210deg); + opacity: 0.625; +} + +.zui-loading__spinner--spinner i:nth-of-type(8) { + transform: rotate(240deg); + opacity: 0.5625; +} + +.zui-loading__spinner--spinner i:nth-of-type(9) { + transform: rotate(270deg); + opacity: 0.5; +} + +.zui-loading__spinner--spinner i:nth-of-type(10) { + transform: rotate(300deg); + opacity: 0.4375; +} + +.zui-loading__spinner--spinner i:nth-of-type(11) { + transform: rotate(330deg); + opacity: 0.375; +} + +.zui-loading__spinner--spinner i:nth-of-type(12) { + transform: rotate(360deg); + opacity: 0.3125; +} \ No newline at end of file diff --git a/packages/loading/index.vue b/packages/loading/index.vue new file mode 100644 index 0000000..b8a0e0d --- /dev/null +++ b/packages/loading/index.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/packages/popup/index.css b/packages/popup/index.css index 25d6a36..04d59d1 100644 --- a/packages/popup/index.css +++ b/packages/popup/index.css @@ -40,10 +40,10 @@ } .zui-popup.inner-popup .zui-popup-box { background-color: #fff; - border-radius: 4px 4px 0 0; + border-radius: 0.25rem 0.25rem 0 0; } .zui-popup.large-radius.inner-popup .zui-popup-box { - border-radius: 20px 20px 0 0; + border-radius: 1.25rem 1.25rem 0 0; } .zui-popup-mask { width: 100%; @@ -202,11 +202,11 @@ @-moz-keyframes fly-in { 0% { opacity: 0.5; - transform: scale(0.5) translate3d(0, 50px, 0); + transform: scale(0.5) translate3d(0, 3.125rem, 0); } 45% { opacity: 1; - transform: scale(1.05) translate3d(0, -50px, 0); + transform: scale(1.05) translate3d(0, -3.125rem, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); @@ -215,11 +215,11 @@ @-webkit-keyframes fly-in { 0% { opacity: 0.5; - transform: scale(0.5) translate3d(0, 50px, 0); + transform: scale(0.5) translate3d(0, 3.125rem, 0); } 45% { opacity: 1; - transform: scale(1.05) translate3d(0, -50px, 0); + transform: scale(1.05) translate3d(0, -3.125rem, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); @@ -228,11 +228,11 @@ @-o-keyframes fly-in { 0% { opacity: 0.5; - transform: scale(0.5) translate3d(0, 50px, 0); + transform: scale(0.5) translate3d(0, 3.125rem, 0); } 45% { opacity: 1; - transform: scale(1.05) translate3d(0, -50px, 0); + transform: scale(1.05) translate3d(0, -3.125rem, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); @@ -241,11 +241,11 @@ @keyframes fly-in { 0% { opacity: 0.5; - transform: scale(0.5) translate3d(0, 50px, 0); + transform: scale(0.5) translate3d(0, 3.125rem, 0); } 45% { opacity: 1; - transform: scale(1.05) translate3d(0, -50px, 0); + transform: scale(1.05) translate3d(0, -3.125rem, 0); } 100% { transform: scale(1) translate3d(0, 0, 0); diff --git a/packages/tabBar/index.css b/packages/tabBar/index.css index d6a9896..8cc6937 100644 --- a/packages/tabBar/index.css +++ b/packages/tabBar/index.css @@ -1,7 +1,7 @@ .zui-tab-bar { position: relative; - padding-left: 16px; - padding-right: 16px; + padding-left: 1rem; + padding-right: 1rem; background-color: #fff; } .zui-tab-bar-inner { @@ -21,10 +21,10 @@ align-items: center; justify-content: center; color: #aaa; - font-size: 14px; + font-size: 0.875rem; font-weight: 600; - min-height: 50px; - padding: 0 16px; + min-height: 3.125rem; + padding: 0 1rem; margin: 0 auto; box-sizing: border-box; -webkit-user-select: none; diff --git a/packages/tag/index.css b/packages/tag/index.css index b85adeb..b8afe9f 100644 --- a/packages/tag/index.css +++ b/packages/tag/index.css @@ -1,5 +1,5 @@ .zui-tag { - font-size: 14px; + font-size: 0.875rem; text-align: center; display: inline-block; -webkit-user-select: none; @@ -11,30 +11,30 @@ } .zui-tag .shape-dot { border-radius: 50%; - height: 16px; - width: 16px; + height: 1rem; + width: 1rem; } .zui-tag .shape-dot.size-tiny { - height: 8px; - width: 8px; + height: 0.5rem; + width: 0.5rem; } .zui-tag .shape-square { - padding: 0 6px; + padding: 0 0.375rem; border-radius: 50%; } .zui-tag .shape-square { - padding: 0 6px; + padding: 0 0.375rem; border-radius: 0; } .zui-tag .shape-fillet { - padding: 1px 4px; - border-radius: 1px; + padding: 0.0625rem 0.25rem; + border-radius: 0.0625rem; } .zui-tag .shape-quarter { position: relative; display: flex; - width: 28px; - height: 28px; + width: 1.75rem; + height: 1.75rem; background: transparent; overflow: hidden; } @@ -58,34 +58,34 @@ } .zui-tag .shape-quarter .quarter-wrap { display: inline-block; - padding: 8px 6px 5px 13px; + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem; } .zui-tag .shape-quarter .quarter-wrap-hidden { visibility: hidden; display: inline-block; - padding: 8px 6px 5px 13px; + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem; } .zui-tag .shape-quarter.size-small { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; } .zui-tag .shape-quarter.size-tiny { - width: 12px; - height: 12px; + width: 0.75rem; + height: 0.75rem; } .zui-tag .shape-coupon { position: relative; - padding: 0 5px; + padding: 0 0.3125rem; background: transparent !important; } .zui-tag .shape-coupon .coupon-container { - padding: 1px 0; + padding: 0.0625rem 0; } .zui-tag .shape-coupon .left-coupon, .zui-tag .shape-coupon .right-coupon { position: absolute; top: 0; - width: 5px; + width: 0.3125rem; height: 100%; } .zui-tag .shape-coupon .left-coupon { @@ -95,42 +95,42 @@ right: 0; } .zui-tag .shape-coupon.size-small { - padding: 0 4px; + padding: 0 0.25rem; } .zui-tag .shape-coupon.size-small .left-coupon, .zui-tag .shape-coupon.size-small .right-coupon { - width: 4px; + width: 0.25rem; } .zui-tag .shape-coupon.size-tiny { - padding: 0 2.5px; + padding: 0 0.15625rem; } .zui-tag .shape-coupon.size-tiny .left-coupon, .zui-tag .shape-coupon.size-tiny .right-coupon { - width: 2.5px; + width: 0.15625rem; } .zui-tag .shape-bubble { - width: 25px; - padding: 3px 0; + width: 1.5625rem; + padding: 0.1875rem 0; border-radius: 50%; border-bottom-left-radius: 0; box-sizing: border-box; } .zui-tag .shape-bubble.size-small { - width: 19px; - padding: 1.5px 0; + width: 1.1875rem; + padding: 0.09375rem 0; } .zui-tag .shape-bubble.size-tiny { - width: 12px; - padding: 1px 0; + width: 0.75rem; + padding: 0.0625rem 0; } .zui-tag .size-large { - font-size: 13px; + font-size: 0.8125rem; } .zui-tag .size-small { - font-size: 10px; + font-size: 0.625rem; } .zui-tag .size-tiny { - font-size: 6px; + font-size: 0.375rem; } .zui-tag .type-fill { color: #fff; -- libgit2 0.21.0