Commit c9433dcce539a7c50cf74bbdd4b7a41dca85878b
1 parent
05b5dd7b
optimize Timeline style
optimize Timeline style
Showing
2 changed files
with
56 additions
and
57 deletions
Show diff stats
src/styles/components/timeline.less
| @@ -14,9 +14,9 @@ | @@ -14,9 +14,9 @@ | ||
| 14 | 14 | ||
| 15 | &-tail { | 15 | &-tail { |
| 16 | height: 100%; | 16 | height: 100%; |
| 17 | - border-left: 2px solid @timeline-color; | 17 | + border-left: 1px solid @timeline-color; |
| 18 | position: absolute; | 18 | position: absolute; |
| 19 | - left: 5px; | 19 | + left: 6px; |
| 20 | top: 0; | 20 | top: 0; |
| 21 | } | 21 | } |
| 22 | 22 | ||
| @@ -25,11 +25,11 @@ | @@ -25,11 +25,11 @@ | ||
| 25 | } | 25 | } |
| 26 | 26 | ||
| 27 | &-head { | 27 | &-head { |
| 28 | - width: 12px; | ||
| 29 | - height: 12px; | 28 | + width: 13px; |
| 29 | + height: 13px; | ||
| 30 | background-color: #fff; | 30 | background-color: #fff; |
| 31 | - border-radius: 100px; | ||
| 32 | - border: 2px solid transparent; | 31 | + border-radius: 50%; |
| 32 | + border: 1px solid transparent; | ||
| 33 | position: absolute; | 33 | position: absolute; |
| 34 | 34 | ||
| 35 | &-blue { | 35 | &-blue { |
| @@ -57,7 +57,7 @@ | @@ -57,7 +57,7 @@ | ||
| 57 | border-radius: 0; | 57 | border-radius: 0; |
| 58 | font-size: @font-size-base; | 58 | font-size: @font-size-base; |
| 59 | position: absolute; | 59 | position: absolute; |
| 60 | - left: -14px; | 60 | + left: -13px; |
| 61 | .transform(translateY(-50%)); | 61 | .transform(translateY(-50%)); |
| 62 | } | 62 | } |
| 63 | 63 | ||
| @@ -78,7 +78,7 @@ | @@ -78,7 +78,7 @@ | ||
| 78 | &&-pending &-item:nth-last-of-type(2) { | 78 | &&-pending &-item:nth-last-of-type(2) { |
| 79 | 79 | ||
| 80 | .@{timeline-prefix-cls}-item-tail { | 80 | .@{timeline-prefix-cls}-item-tail { |
| 81 | - border-left: 2px dotted @timeline-color; | 81 | + border-left: 1px dotted @timeline-color; |
| 82 | } | 82 | } |
| 83 | .@{timeline-prefix-cls}-item-content { | 83 | .@{timeline-prefix-cls}-item-content { |
| 84 | min-height: 48px; | 84 | min-height: 48px; |
test/routers/cascader.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div style="margin: 50px;width:300px"> | ||
| 3 | - {{ value | json }} | ||
| 4 | - <Cascader size="large" :data="data" @on-change="change" trigger="hover" :render-format="format"></Cascader> | 2 | + <div style="width: 150px;margin:100px"> |
| 3 | + <Cascader :data="data" :value.sync="value1"></Cascader> | ||
| 5 | </div> | 4 | </div> |
| 5 | + | ||
| 6 | </template> | 6 | </template> |
| 7 | <script> | 7 | <script> |
| 8 | - import { Cascader } from 'iview'; | ||
| 9 | export default { | 8 | export default { |
| 10 | - props: { | ||
| 11 | - | ||
| 12 | - }, | ||
| 13 | data () { | 9 | data () { |
| 14 | return { | 10 | return { |
| 15 | - value: ['jiangsu', 'hhh', 'ddd'], | ||
| 16 | -// value: [], | 11 | + value1: [], |
| 17 | data: [{ | 12 | data: [{ |
| 18 | - value: 'zhejiang', | ||
| 19 | - label: 'Zhejiang', | ||
| 20 | - children: [{ | ||
| 21 | - value: 'hangzhou', | ||
| 22 | - label: 'Hangzhou' | ||
| 23 | - }], | 13 | + value: 'beijing', |
| 14 | + label: '北京', | ||
| 15 | + children: [ | ||
| 16 | + { | ||
| 17 | + value: 'gugong', | ||
| 18 | + label: '故宫' | ||
| 19 | + }, | ||
| 20 | + { | ||
| 21 | + value: 'tiantan', | ||
| 22 | + label: '天坛' | ||
| 23 | + }, | ||
| 24 | + { | ||
| 25 | + value: 'wangfujing', | ||
| 26 | + label: '王府井' | ||
| 27 | + } | ||
| 28 | + ] | ||
| 24 | }, { | 29 | }, { |
| 25 | value: 'jiangsu', | 30 | value: 'jiangsu', |
| 26 | - label: 'Jiangsu', | ||
| 27 | - children: [{ | ||
| 28 | - value: 'nanjing', | ||
| 29 | - label: 'Nanjing', | ||
| 30 | -// disabled: true, | ||
| 31 | - children: [{ | ||
| 32 | - value: 'zhonghuamen', | ||
| 33 | - label: 'Zhong Hua Men', | ||
| 34 | - children: [{ | ||
| 35 | - value: 'abc', | ||
| 36 | - label: 'ABC' | ||
| 37 | - }] | ||
| 38 | - }] | ||
| 39 | - }, { | ||
| 40 | - value: 'hhh', | ||
| 41 | - label: 'HHH', | ||
| 42 | - children: [{ | ||
| 43 | - value: 'ddd', | ||
| 44 | - label: 'DDD' | ||
| 45 | - }] | ||
| 46 | - }] | 31 | + label: '江苏', |
| 32 | + children: [ | ||
| 33 | + { | ||
| 34 | + value: 'nanjing', | ||
| 35 | + label: '南京', | ||
| 36 | + children: [ | ||
| 37 | + { | ||
| 38 | + value: 'fuzimiao', | ||
| 39 | + label: '夫子庙', | ||
| 40 | + } | ||
| 41 | + ] | ||
| 42 | + }, | ||
| 43 | + { | ||
| 44 | + value: 'suzhou', | ||
| 45 | + label: '苏州', | ||
| 46 | + children: [ | ||
| 47 | + { | ||
| 48 | + value: 'zhuozhengyuan', | ||
| 49 | + label: '拙政园', | ||
| 50 | + }, | ||
| 51 | + { | ||
| 52 | + value: 'shizilin', | ||
| 53 | + label: '狮子林', | ||
| 54 | + } | ||
| 55 | + ] | ||
| 56 | + } | ||
| 57 | + ], | ||
| 47 | }] | 58 | }] |
| 48 | } | 59 | } |
| 49 | - }, | ||
| 50 | - computed: { | ||
| 51 | - | ||
| 52 | - }, | ||
| 53 | - methods: { | ||
| 54 | - change (data, opts) { | ||
| 55 | - console.log(data); | ||
| 56 | - console.log(opts) | ||
| 57 | - }, | ||
| 58 | - format (label, data) { | ||
| 59 | - return label[label.length - 1]; | ||
| 60 | - } | ||
| 61 | } | 60 | } |
| 62 | } | 61 | } |
| 63 | -</script> | ||
| 64 | \ No newline at end of file | 62 | \ No newline at end of file |
| 63 | +</script> |