frontend / zui

Download as
Browse Code »

Commit b288b114ba3cd637d0bb50f23af263f90ad1711a

Authored by 刘汉宸
1 parent 7c798701
Exists in master

[新增] 加载

Showing 12 changed files with 338 additions and 76 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @b288b11
@@ -87,6 +87,12 @@ const _components = [ @@ -87,6 +87,12 @@ const _components = [
87 meta: { title: 'Popup 弹出框' }, 87 meta: { title: 'Popup 弹出框' },
88 component: () => import('@/views/docs/component/popup.md'), 88 component: () => import('@/views/docs/component/popup.md'),
89 }, 89 },
  90 + {
  91 + path: 'loading',
  92 + name: 'loading',
  93 + meta: { title: 'Loading 加载' },
  94 + component: () => import('@/views/docs/component/loading.md'),
  95 + },
90 ] 96 ]
91 }, 97 },
92 { 98 {
examples/views/docs/component/loading.md 0 → 100644
  Diff comments   View file @b288b11
@@ -0,0 +1,33 @@ @@ -0,0 +1,33 @@
  1 +# Loading 加载
  2 +
  3 +说明
  4 +
  5 +## 基础用法
  6 +
  7 +说明
  8 +
  9 +::: snippet 示例
  10 +
  11 +```html
  12 +<template>
  13 + <div>
  14 + <zui-loading></zui-loading>
  15 + <zui-loading color="red"></zui-loading>
  16 + <zui-loading color="deepskyblue" type="loading"></zui-loading>
  17 + <zui-loading>加载中...</zui-loading>
  18 + <zui-loading vertical>加载中...</zui-loading>
  19 + <zui-loading vertical size="3rem" text-size="1rem">加载中...</zui-loading>
  20 + </div>
  21 +</template>
  22 +
  23 +<script>
  24 +export default {
  25 + data() {
  26 + return {
  27 + }
  28 + },
  29 +}
  30 +</script>
  31 +```
  32 +
  33 +:::
0 \ No newline at end of file 34 \ No newline at end of file
packages/button/index.css
  Diff comments   View file @b288b11
@@ -2,8 +2,8 @@ @@ -2,8 +2,8 @@
2 color: #323233; 2 color: #323233;
3 background-color: #fff; 3 background-color: #fff;
4 border: 1px solid #ebedf0; 4 border: 1px solid #ebedf0;
5 - padding: 5px 15px;  
6 - font-size: 14px; 5 + padding: 0.25rem 1rem;
  6 + font-size: 0.875rem;
7 cursor: pointer; 7 cursor: pointer;
8 transition: background-color 300ms; 8 transition: background-color 300ms;
9 display: flex; 9 display: flex;
@@ -12,13 +12,13 @@ @@ -12,13 +12,13 @@
12 } 12 }
13 13
14 .zui-button.sm { 14 .zui-button.sm {
15 - padding: 2px 4px;  
16 - font-size: 10px; 15 + padding: 0.125rem 0.25rem;
  16 + font-size: 0.625rem;
17 } 17 }
18 18
19 .zui-button.lg { 19 .zui-button.lg {
20 - padding: 10px 20px;  
21 - font-size: 18px; 20 + padding: 0.625rem 1.25rem;
  21 + font-size: 1.125rem;
22 } 22 }
23 23
24 .zui-button:active { 24 .zui-button:active {
@@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
49 } 49 }
50 50
51 .zui-button.link { 51 .zui-button.link {
52 - padding: 5px 15px; 52 + padding: 0.25rem 1rem;
53 background: inherit; 53 background: inherit;
54 border: inherit; 54 border: inherit;
55 color: #FCD404; 55 color: #FCD404;
packages/button/index.vue
  Diff comments   View file @b288b11
@@ -30,11 +30,11 @@ export default { @@ -30,11 +30,11 @@ export default {
30 }, 30 },
31 borderRadius: function() { 31 borderRadius: function() {
32 if (this.round) { 32 if (this.round) {
33 - return '20px'; 33 + return '1.25rem';
34 } else if (this.square) { 34 } else if (this.square) {
35 return '0'; 35 return '0';
36 } else { 36 } else {
37 - return '4px'; 37 + return '0.25rem';
38 } 38 }
39 }, 39 },
40 classRender: function() { 40 classRender: function() {
packages/cell/index.css
  Diff comments   View file @b288b11
@@ -5,10 +5,10 @@ @@ -5,10 +5,10 @@
5 display: flex; 5 display: flex;
6 box-sizing: border-box; 6 box-sizing: border-box;
7 width: 100%; 7 width: 100%;
8 - padding: 10px 16px; 8 + padding: 0.625rem 1rem;
9 overflow: hidden; 9 overflow: hidden;
10 color: #323233; 10 color: #323233;
11 - font-size: 14px; 11 + font-size: 0.875rem;
12 background-color: #fff; 12 background-color: #fff;
13 } 13 }
14 14
@@ -23,18 +23,18 @@ @@ -23,18 +23,18 @@
23 .zui-cell__left-icon { 23 .zui-cell__left-icon {
24 display: flex; 24 display: flex;
25 align-items: center; 25 align-items: center;
26 - margin-right: 5px; 26 + margin-right: 0.375rem;
27 } 27 }
28 28
29 .zui-cell__right-icon { 29 .zui-cell__right-icon {
30 display: flex; 30 display: flex;
31 align-items: center; 31 align-items: center;
32 - margin-left: 5px; 32 + margin-left: 0.375rem;
33 } 33 }
34 34
35 .zui-cell__left-icon, .zui-cell__right-icon { 35 .zui-cell__left-icon, .zui-cell__right-icon {
36 min-width: 1em; 36 min-width: 1em;
37 - font-size: 16px; 37 + font-size: 1rem;
38 } 38 }
39 39
40 .zui-cell:not(:last-child)::after { 40 .zui-cell:not(:last-child)::after {
@@ -44,7 +44,7 @@ @@ -44,7 +44,7 @@
44 pointer-events: none; 44 pointer-events: none;
45 right: 0; 45 right: 0;
46 bottom: 0; 46 bottom: 0;
47 - left: 16px; 47 + left: 1rem;
48 border-bottom: 1px solid #ebedf0; 48 border-bottom: 1px solid #ebedf0;
49 -webkit-transform: scaleY(0.5); 49 -webkit-transform: scaleY(0.5);
50 transform: scaleY(0.5); 50 transform: scaleY(0.5);
@@ -78,8 +78,7 @@ @@ -78,8 +78,7 @@
78 } 78 }
79 79
80 .zui-cell__label { 80 .zui-cell__label {
81 - margin-top: 3px; 81 + padding-top: 0.25rem;
82 color: #969799; 82 color: #969799;
83 - font-size: 12px;  
84 - line-height: 18px; 83 + font-size: 0.75rem;
85 } 84 }
packages/checkbox/index.css
  Diff comments   View file @b288b11
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 } 9 }
10 10
11 .zui-checkbox .zui-checkbox__icon .zui-icon { 11 .zui-checkbox .zui-checkbox__icon .zui-icon {
12 - font-size: 24px; 12 + font-size: 1.5rem;
13 color: #a6a6a6; 13 color: #a6a6a6;
14 transition: color 300ms; 14 transition: color 300ms;
15 cursor: pointer; 15 cursor: pointer;
@@ -20,5 +20,5 @@ @@ -20,5 +20,5 @@
20 } 20 }
21 21
22 .zui-checkbox .zui-checkbox-label { 22 .zui-checkbox .zui-checkbox-label {
23 - padding-left: 10px; 23 + padding-left: 0.625rem;
24 } 24 }
25 \ No newline at end of file 25 \ No newline at end of file
packages/icon/index.css
  Diff comments   View file @b288b11
@@ -14,17 +14,17 @@ @@ -14,17 +14,17 @@
14 top: 0; 14 top: 0;
15 right: 0; 15 right: 0;
16 box-sizing: border-box; 16 box-sizing: border-box;
17 - min-width: 16px;  
18 - padding: 0 3px; 17 + min-width: 1rem;
  18 + padding: 0 0.125rem;
19 color: #fff; 19 color: #fff;
20 font-weight: 500; 20 font-weight: 500;
21 - font-size: 12px; 21 + font-size: 0.75rem;
22 font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; 22 font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
23 - line-height: 14px; 23 + line-height: 0.875rem;
24 text-align: center; 24 text-align: center;
25 background-color: #ee0a24; 25 background-color: #ee0a24;
26 border: 1px solid #fff; 26 border: 1px solid #fff;
27 - border-radius: 16px; 27 + border-radius: 1rem;
28 -webkit-transform: translate(50%, -50%); 28 -webkit-transform: translate(50%, -50%);
29 transform: translate(50%, -50%); 29 transform: translate(50%, -50%);
30 -webkit-transform-origin: 100%; 30 -webkit-transform-origin: 100%;
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 } 32 }
33 33
34 .zui-info.dot { 34 .zui-info.dot {
35 - height: 14px;  
36 - width: 14px;  
37 - min-width: 14px !important; 35 + height: 0.875rem;
  36 + width: 0.875rem;
  37 + min-width: 0.875rem !important;
38 } 38 }
39 \ No newline at end of file 39 \ No newline at end of file
packages/loading/index.css 0 → 100644
  Diff comments   View file @b288b11
@@ -0,0 +1,151 @@ @@ -0,0 +1,151 @@
  1 +.zui-loading {
  2 + position: relative;
  3 + color: #c8c9cc;
  4 + font-size: 0;
  5 + vertical-align: middle;
  6 +}
  7 +.zui-loading__spinner {
  8 + position: relative;
  9 + display: inline-block;
  10 + width: 30px;
  11 + max-width: 100%;
  12 + height: 30px;
  13 + max-height: 100%;
  14 + vertical-align: middle;
  15 + animation: zui-rotate 0.8s linear infinite;
  16 +}
  17 +.zui-loading__spinner--spinner {
  18 + animation-timing-function: steps(12);
  19 +}
  20 +.zui-loading__spinner--spinner i {
  21 + position: absolute;
  22 + top: 0;
  23 + left: 0;
  24 + width: 100%;
  25 + height: 100%;
  26 +}
  27 +.zui-loading__spinner--spinner i::before {
  28 + display: block;
  29 + width: 2px;
  30 + height: 25%;
  31 + margin: 0 auto;
  32 + background-color: currentColor;
  33 + border-radius: 40%;
  34 + content: ' ';
  35 +}
  36 +.zui-loading__spinner--circular {
  37 + animation-duration: 2s;
  38 +}
  39 +.zui-loading__circular {
  40 + display: block;
  41 + width: 100%;
  42 + height: 100%;
  43 +}
  44 +.zui-loading__circular circle {
  45 + animation: zui-circular 1.5s ease-in-out infinite;
  46 + stroke: currentColor;
  47 + stroke-width: 3;
  48 + stroke-linecap: round;
  49 +}
  50 +.zui-loading__text {
  51 + display: inline-block;
  52 + margin-left: 8px;
  53 + color: #969799;
  54 + font-size: 14px;
  55 + vertical-align: middle;
  56 +}
  57 +.zui-loading--vertical {
  58 + display: flex;
  59 + flex-direction: column;
  60 + align-items: center;
  61 +}
  62 +.zui-loading--vertical .zui-loading__text {
  63 + margin: 8px 0 0;
  64 +}
  65 +
  66 +@keyframes zui-circular {
  67 + 0% {
  68 + stroke-dasharray: 1, 200;
  69 + stroke-dashoffset: 0;
  70 + }
  71 +
  72 + 50% {
  73 + stroke-dasharray: 90, 150;
  74 + stroke-dashoffset: -40;
  75 + }
  76 +
  77 + 100% {
  78 + stroke-dasharray: 90, 150;
  79 + stroke-dashoffset: -120;
  80 + }
  81 +}
  82 +
  83 +@keyframes zui-rotate {
  84 + from {
  85 + transform: rotate(0deg);
  86 + }
  87 +
  88 + to {
  89 + transform: rotate(360deg);
  90 + }
  91 +}
  92 +
  93 +.zui-loading__spinner--spinner i:nth-of-type(1) {
  94 + transform: rotate(30deg);
  95 + opacity: 1;
  96 +}
  97 +
  98 +.zui-loading__spinner--spinner i:nth-of-type(2) {
  99 + transform: rotate(60deg);
  100 + opacity: 0.9375;
  101 +}
  102 +
  103 +.zui-loading__spinner--spinner i:nth-of-type(3) {
  104 + transform: rotate(90deg);
  105 + opacity: 0.875;
  106 +}
  107 +
  108 +.zui-loading__spinner--spinner i:nth-of-type(4) {
  109 + transform: rotate(120deg);
  110 + opacity: 0.8125;
  111 +}
  112 +
  113 +.zui-loading__spinner--spinner i:nth-of-type(5) {
  114 + transform: rotate(150deg);
  115 + opacity: 0.75;
  116 +}
  117 +
  118 +.zui-loading__spinner--spinner i:nth-of-type(6) {
  119 + transform: rotate(180deg);
  120 + opacity: 0.6875;
  121 +}
  122 +
  123 +.zui-loading__spinner--spinner i:nth-of-type(7) {
  124 + transform: rotate(210deg);
  125 + opacity: 0.625;
  126 +}
  127 +
  128 +.zui-loading__spinner--spinner i:nth-of-type(8) {
  129 + transform: rotate(240deg);
  130 + opacity: 0.5625;
  131 +}
  132 +
  133 +.zui-loading__spinner--spinner i:nth-of-type(9) {
  134 + transform: rotate(270deg);
  135 + opacity: 0.5;
  136 +}
  137 +
  138 +.zui-loading__spinner--spinner i:nth-of-type(10) {
  139 + transform: rotate(300deg);
  140 + opacity: 0.4375;
  141 +}
  142 +
  143 +.zui-loading__spinner--spinner i:nth-of-type(11) {
  144 + transform: rotate(330deg);
  145 + opacity: 0.375;
  146 +}
  147 +
  148 +.zui-loading__spinner--spinner i:nth-of-type(12) {
  149 + transform: rotate(360deg);
  150 + opacity: 0.3125;
  151 +}
0 \ No newline at end of file 152 \ No newline at end of file
packages/loading/index.vue 0 → 100644
  Diff comments   View file @b288b11
@@ -0,0 +1,73 @@ @@ -0,0 +1,73 @@
  1 +<template>
  2 + <div :class="classRender">
  3 + <span :class="spanClassRender" :style="spanStyleRender">
  4 + <template v-if="showSpinner">
  5 + <i v-for="i in 12" :key="i"></i>
  6 + </template>
  7 + <svg v-else class="zui-loading__circular" viewBox="25 25 50 50" :style="spanStyleRender">
  8 + <circle cx="50" cy="50" r="20" fill="none" />
  9 + </svg>
  10 + </span>
  11 + <template v-if="$slots.default">
  12 + <span class="zui-loading__text" :style="textStyleRender">
  13 + <slot></slot>
  14 + </span>
  15 + </template>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 +export default {
  21 + name: 'Loading',
  22 + props: {
  23 + color: String,
  24 + size: {
  25 + type: [Number, String],
  26 + default: '2rem'
  27 + },
  28 + vertical: Boolean,
  29 + textSize: [Number, String],
  30 + type: {
  31 + type: String,
  32 + default: 'circular',
  33 + },
  34 + },
  35 + computed: {
  36 + classRender: function() {
  37 + return {
  38 + 'zui-loading': true,
  39 + ['zui-loading--' + this.type]: this.type,
  40 + 'zui-loading--vertical': this.vertical,
  41 + };
  42 + },
  43 + spanClassRender: function() {
  44 + return {
  45 + 'zui-loading__spinner': true,
  46 + ['zui-loading__spinner--' + this.type]: this.type,
  47 + };
  48 + },
  49 + spanStyleRender: function() {
  50 + var style = { color: this.color };
  51 + if (this.size) {
  52 + var iconSize = typeof this.size == 'number' ? this.size + 'px' : this.size;
  53 + style.width = iconSize;
  54 + style.height = iconSize;
  55 + }
  56 + return style;
  57 + },
  58 + textStyleRender: function() {
  59 + var textSize = typeof this.textSize == 'number' ? this.textSize + 'px' : this.textSize;
  60 + return {
  61 + fontSize: textSize
  62 + };
  63 + },
  64 + showSpinner: function() {
  65 + return this.type == 'spinner';
  66 + }
  67 + }
  68 +};
  69 +</script>
  70 +
  71 +<style>
  72 +@import "./index.css";
  73 +</style>
0 \ No newline at end of file 74 \ No newline at end of file
packages/popup/index.css
  Diff comments   View file @b288b11
@@ -40,10 +40,10 @@ @@ -40,10 +40,10 @@
40 } 40 }
41 .zui-popup.inner-popup .zui-popup-box { 41 .zui-popup.inner-popup .zui-popup-box {
42 background-color: #fff; 42 background-color: #fff;
43 - border-radius: 4px 4px 0 0; 43 + border-radius: 0.25rem 0.25rem 0 0;
44 } 44 }
45 .zui-popup.large-radius.inner-popup .zui-popup-box { 45 .zui-popup.large-radius.inner-popup .zui-popup-box {
46 - border-radius: 20px 20px 0 0; 46 + border-radius: 1.25rem 1.25rem 0 0;
47 } 47 }
48 .zui-popup-mask { 48 .zui-popup-mask {
49 width: 100%; 49 width: 100%;
@@ -202,11 +202,11 @@ @@ -202,11 +202,11 @@
202 @-moz-keyframes fly-in { 202 @-moz-keyframes fly-in {
203 0% { 203 0% {
204 opacity: 0.5; 204 opacity: 0.5;
205 - transform: scale(0.5) translate3d(0, 50px, 0); 205 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
206 } 206 }
207 45% { 207 45% {
208 opacity: 1; 208 opacity: 1;
209 - transform: scale(1.05) translate3d(0, -50px, 0); 209 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
210 } 210 }
211 100% { 211 100% {
212 transform: scale(1) translate3d(0, 0, 0); 212 transform: scale(1) translate3d(0, 0, 0);
@@ -215,11 +215,11 @@ @@ -215,11 +215,11 @@
215 @-webkit-keyframes fly-in { 215 @-webkit-keyframes fly-in {
216 0% { 216 0% {
217 opacity: 0.5; 217 opacity: 0.5;
218 - transform: scale(0.5) translate3d(0, 50px, 0); 218 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
219 } 219 }
220 45% { 220 45% {
221 opacity: 1; 221 opacity: 1;
222 - transform: scale(1.05) translate3d(0, -50px, 0); 222 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
223 } 223 }
224 100% { 224 100% {
225 transform: scale(1) translate3d(0, 0, 0); 225 transform: scale(1) translate3d(0, 0, 0);
@@ -228,11 +228,11 @@ @@ -228,11 +228,11 @@
228 @-o-keyframes fly-in { 228 @-o-keyframes fly-in {
229 0% { 229 0% {
230 opacity: 0.5; 230 opacity: 0.5;
231 - transform: scale(0.5) translate3d(0, 50px, 0); 231 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
232 } 232 }
233 45% { 233 45% {
234 opacity: 1; 234 opacity: 1;
235 - transform: scale(1.05) translate3d(0, -50px, 0); 235 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
236 } 236 }
237 100% { 237 100% {
238 transform: scale(1) translate3d(0, 0, 0); 238 transform: scale(1) translate3d(0, 0, 0);
@@ -241,11 +241,11 @@ @@ -241,11 +241,11 @@
241 @keyframes fly-in { 241 @keyframes fly-in {
242 0% { 242 0% {
243 opacity: 0.5; 243 opacity: 0.5;
244 - transform: scale(0.5) translate3d(0, 50px, 0); 244 + transform: scale(0.5) translate3d(0, 3.125rem, 0);
245 } 245 }
246 45% { 246 45% {
247 opacity: 1; 247 opacity: 1;
248 - transform: scale(1.05) translate3d(0, -50px, 0); 248 + transform: scale(1.05) translate3d(0, -3.125rem, 0);
249 } 249 }
250 100% { 250 100% {
251 transform: scale(1) translate3d(0, 0, 0); 251 transform: scale(1) translate3d(0, 0, 0);
packages/tabBar/index.css
  Diff comments   View file @b288b11
1 .zui-tab-bar { 1 .zui-tab-bar {
2 position: relative; 2 position: relative;
3 - padding-left: 16px;  
4 - padding-right: 16px; 3 + padding-left: 1rem;
  4 + padding-right: 1rem;
5 background-color: #fff; 5 background-color: #fff;
6 } 6 }
7 .zui-tab-bar-inner { 7 .zui-tab-bar-inner {
@@ -21,10 +21,10 @@ @@ -21,10 +21,10 @@
21 align-items: center; 21 align-items: center;
22 justify-content: center; 22 justify-content: center;
23 color: #aaa; 23 color: #aaa;
24 - font-size: 14px; 24 + font-size: 0.875rem;
25 font-weight: 600; 25 font-weight: 600;
26 - min-height: 50px;  
27 - padding: 0 16px; 26 + min-height: 3.125rem;
  27 + padding: 0 1rem;
28 margin: 0 auto; 28 margin: 0 auto;
29 box-sizing: border-box; 29 box-sizing: border-box;
30 -webkit-user-select: none; 30 -webkit-user-select: none;
packages/tag/index.css
  Diff comments   View file @b288b11
1 .zui-tag { 1 .zui-tag {
2 - font-size: 14px; 2 + font-size: 0.875rem;
3 text-align: center; 3 text-align: center;
4 display: inline-block; 4 display: inline-block;
5 -webkit-user-select: none; 5 -webkit-user-select: none;
@@ -11,30 +11,30 @@ @@ -11,30 +11,30 @@
11 } 11 }
12 .zui-tag .shape-dot { 12 .zui-tag .shape-dot {
13 border-radius: 50%; 13 border-radius: 50%;
14 - height: 16px;  
15 - width: 16px; 14 + height: 1rem;
  15 + width: 1rem;
16 } 16 }
17 .zui-tag .shape-dot.size-tiny { 17 .zui-tag .shape-dot.size-tiny {
18 - height: 8px;  
19 - width: 8px; 18 + height: 0.5rem;
  19 + width: 0.5rem;
20 } 20 }
21 .zui-tag .shape-square { 21 .zui-tag .shape-square {
22 - padding: 0 6px; 22 + padding: 0 0.375rem;
23 border-radius: 50%; 23 border-radius: 50%;
24 } 24 }
25 .zui-tag .shape-square { 25 .zui-tag .shape-square {
26 - padding: 0 6px; 26 + padding: 0 0.375rem;
27 border-radius: 0; 27 border-radius: 0;
28 } 28 }
29 .zui-tag .shape-fillet { 29 .zui-tag .shape-fillet {
30 - padding: 1px 4px;  
31 - border-radius: 1px; 30 + padding: 0.0625rem 0.25rem;
  31 + border-radius: 0.0625rem;
32 } 32 }
33 .zui-tag .shape-quarter { 33 .zui-tag .shape-quarter {
34 position: relative; 34 position: relative;
35 display: flex; 35 display: flex;
36 - width: 28px;  
37 - height: 28px; 36 + width: 1.75rem;
  37 + height: 1.75rem;
38 background: transparent; 38 background: transparent;
39 overflow: hidden; 39 overflow: hidden;
40 } 40 }
@@ -58,34 +58,34 @@ @@ -58,34 +58,34 @@
58 } 58 }
59 .zui-tag .shape-quarter .quarter-wrap { 59 .zui-tag .shape-quarter .quarter-wrap {
60 display: inline-block; 60 display: inline-block;
61 - padding: 8px 6px 5px 13px; 61 + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
62 } 62 }
63 .zui-tag .shape-quarter .quarter-wrap-hidden { 63 .zui-tag .shape-quarter .quarter-wrap-hidden {
64 visibility: hidden; 64 visibility: hidden;
65 display: inline-block; 65 display: inline-block;
66 - padding: 8px 6px 5px 13px; 66 + padding: 0.5rem 0.375rem 0.3125rem 0.8125rem;
67 } 67 }
68 .zui-tag .shape-quarter.size-small { 68 .zui-tag .shape-quarter.size-small {
69 - width: 20px;  
70 - height: 20px; 69 + width: 1.25rem;
  70 + height: 1.25rem;
71 } 71 }
72 .zui-tag .shape-quarter.size-tiny { 72 .zui-tag .shape-quarter.size-tiny {
73 - width: 12px;  
74 - height: 12px; 73 + width: 0.75rem;
  74 + height: 0.75rem;
75 } 75 }
76 .zui-tag .shape-coupon { 76 .zui-tag .shape-coupon {
77 position: relative; 77 position: relative;
78 - padding: 0 5px; 78 + padding: 0 0.3125rem;
79 background: transparent !important; 79 background: transparent !important;
80 } 80 }
81 .zui-tag .shape-coupon .coupon-container { 81 .zui-tag .shape-coupon .coupon-container {
82 - padding: 1px 0; 82 + padding: 0.0625rem 0;
83 } 83 }
84 .zui-tag .shape-coupon .left-coupon, 84 .zui-tag .shape-coupon .left-coupon,
85 .zui-tag .shape-coupon .right-coupon { 85 .zui-tag .shape-coupon .right-coupon {
86 position: absolute; 86 position: absolute;
87 top: 0; 87 top: 0;
88 - width: 5px; 88 + width: 0.3125rem;
89 height: 100%; 89 height: 100%;
90 } 90 }
91 .zui-tag .shape-coupon .left-coupon { 91 .zui-tag .shape-coupon .left-coupon {
@@ -95,42 +95,42 @@ @@ -95,42 +95,42 @@
95 right: 0; 95 right: 0;
96 } 96 }
97 .zui-tag .shape-coupon.size-small { 97 .zui-tag .shape-coupon.size-small {
98 - padding: 0 4px; 98 + padding: 0 0.25rem;
99 } 99 }
100 .zui-tag .shape-coupon.size-small .left-coupon, 100 .zui-tag .shape-coupon.size-small .left-coupon,
101 .zui-tag .shape-coupon.size-small .right-coupon { 101 .zui-tag .shape-coupon.size-small .right-coupon {
102 - width: 4px; 102 + width: 0.25rem;
103 } 103 }
104 .zui-tag .shape-coupon.size-tiny { 104 .zui-tag .shape-coupon.size-tiny {
105 - padding: 0 2.5px; 105 + padding: 0 0.15625rem;
106 } 106 }
107 .zui-tag .shape-coupon.size-tiny .left-coupon, 107 .zui-tag .shape-coupon.size-tiny .left-coupon,
108 .zui-tag .shape-coupon.size-tiny .right-coupon { 108 .zui-tag .shape-coupon.size-tiny .right-coupon {
109 - width: 2.5px; 109 + width: 0.15625rem;
110 } 110 }
111 .zui-tag .shape-bubble { 111 .zui-tag .shape-bubble {
112 - width: 25px;  
113 - padding: 3px 0; 112 + width: 1.5625rem;
  113 + padding: 0.1875rem 0;
114 border-radius: 50%; 114 border-radius: 50%;
115 border-bottom-left-radius: 0; 115 border-bottom-left-radius: 0;
116 box-sizing: border-box; 116 box-sizing: border-box;
117 } 117 }
118 .zui-tag .shape-bubble.size-small { 118 .zui-tag .shape-bubble.size-small {
119 - width: 19px;  
120 - padding: 1.5px 0; 119 + width: 1.1875rem;
  120 + padding: 0.09375rem 0;
121 } 121 }
122 .zui-tag .shape-bubble.size-tiny { 122 .zui-tag .shape-bubble.size-tiny {
123 - width: 12px;  
124 - padding: 1px 0; 123 + width: 0.75rem;
  124 + padding: 0.0625rem 0;
125 } 125 }
126 .zui-tag .size-large { 126 .zui-tag .size-large {
127 - font-size: 13px; 127 + font-size: 0.8125rem;
128 } 128 }
129 .zui-tag .size-small { 129 .zui-tag .size-small {
130 - font-size: 10px; 130 + font-size: 0.625rem;
131 } 131 }
132 .zui-tag .size-tiny { 132 .zui-tag .size-tiny {
133 - font-size: 6px; 133 + font-size: 0.375rem;
134 } 134 }
135 .zui-tag .type-fill { 135 .zui-tag .type-fill {
136 color: #fff; 136 color: #fff;