Commit 36e46e5a775f8c91fd6486b99f911f35ca7a3c8c
1 parent
0069c7b1
update Notice style
Showing
2 changed files
with
12 additions
and
36 deletions
Show diff stats
examples/routers/notice.vue
| @@ -2,7 +2,9 @@ | @@ -2,7 +2,9 @@ | ||
| 2 | <div> | 2 | <div> |
| 3 | <p>带描述信息</p> | 3 | <p>带描述信息</p> |
| 4 | <Button @click="normal(false)">普通</Button> | 4 | <Button @click="normal(false)">普通</Button> |
| 5 | + <Button @click="normal(true)">普通</Button> | ||
| 5 | <Button @click="info(false)">消息</Button> | 6 | <Button @click="info(false)">消息</Button> |
| 7 | + <Button @click="info(true)">消息</Button> | ||
| 6 | <Button @click="success(false)">成功</Button> | 8 | <Button @click="success(false)">成功</Button> |
| 7 | <Button @click="warning(false)">警告</Button> | 9 | <Button @click="warning(false)">警告</Button> |
| 8 | <Button @click="error(false)">错误</Button> | 10 | <Button @click="error(false)">错误</Button> |
| @@ -23,19 +25,19 @@ | @@ -23,19 +25,19 @@ | ||
| 23 | title: 'google', | 25 | title: 'google', |
| 24 | duration: 0, | 26 | duration: 0, |
| 25 | desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', | 27 | desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', |
| 26 | - render (h) { | ||
| 27 | - return h('span', {}, 'sdsdfsdf'); | ||
| 28 | - } | 28 | +// render (h) { |
| 29 | +// return h('span', {}, 'sdsdfsdf'); | ||
| 30 | +// } | ||
| 29 | }); | 31 | }); |
| 30 | }, | 32 | }, |
| 31 | info (nodesc) { | 33 | info (nodesc) { |
| 32 | this.$Notice.info({ | 34 | this.$Notice.info({ |
| 33 | - // title: '这是通知标题', | 35 | + title: '这是通知标题', |
| 34 | duration: 0, | 36 | duration: 0, |
| 35 | desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', | 37 | desc: nodesc ? '' : '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述', |
| 36 | - render (h) { | ||
| 37 | - return h('span', {}, 'sdsdfsdf'); | ||
| 38 | - } | 38 | +// render (h) { |
| 39 | +// return h('span', {}, 'sdsdfsdf'); | ||
| 40 | +// } | ||
| 39 | }); | 41 | }); |
| 40 | }, | 42 | }, |
| 41 | success () { | 43 | success () { |
src/styles/components/notice.less
| @@ -31,7 +31,7 @@ | @@ -31,7 +31,7 @@ | ||
| 31 | 31 | ||
| 32 | &-close { | 32 | &-close { |
| 33 | position: absolute; | 33 | position: absolute; |
| 34 | - right: 16px; | 34 | + right: 8px; |
| 35 | top: 15px; | 35 | top: 15px; |
| 36 | color: #999; | 36 | color: #999; |
| 37 | outline: none; | 37 | outline: none; |
| @@ -89,9 +89,8 @@ | @@ -89,9 +89,8 @@ | ||
| 89 | 89 | ||
| 90 | &-icon { | 90 | &-icon { |
| 91 | position: absolute; | 91 | position: absolute; |
| 92 | - left: 20px; | ||
| 93 | - margin-top: -1px; | ||
| 94 | - font-size: 16px; | 92 | + left: 16px; |
| 93 | + font-size: @font-size-large; | ||
| 95 | 94 | ||
| 96 | &-success { | 95 | &-success { |
| 97 | color: @success-color; | 96 | color: @success-color; |
| @@ -121,29 +120,4 @@ | @@ -121,29 +120,4 @@ | ||
| 121 | left: 0; | 120 | left: 0; |
| 122 | } | 121 | } |
| 123 | } | 122 | } |
| 124 | - &-with-normal{ | ||
| 125 | - &:after{ | ||
| 126 | - background: @primary-color; | ||
| 127 | - } | ||
| 128 | - } | ||
| 129 | - &-with-info{ | ||
| 130 | - &:after{ | ||
| 131 | - background: @primary-color; | ||
| 132 | - } | ||
| 133 | - } | ||
| 134 | - &-with-success{ | ||
| 135 | - &:after{ | ||
| 136 | - background: @success-color; | ||
| 137 | - } | ||
| 138 | - } | ||
| 139 | - &-with-warning{ | ||
| 140 | - &:after{ | ||
| 141 | - background: @warning-color; | ||
| 142 | - } | ||
| 143 | - } | ||
| 144 | - &-with-error{ | ||
| 145 | - &:after{ | ||
| 146 | - background: @error-color; | ||
| 147 | - } | ||
| 148 | - } | ||
| 149 | } | 123 | } |
| 150 | \ No newline at end of file | 124 | \ No newline at end of file |