optimize Timeline style
optimize Timeline style
This commit is contained in:
parent
05b5dd7b8d
commit
c9433dcce5
2 changed files with 56 additions and 57 deletions
|
@ -14,9 +14,9 @@
|
|||
|
||||
&-tail {
|
||||
height: 100%;
|
||||
border-left: 2px solid @timeline-color;
|
||||
border-left: 1px solid @timeline-color;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
left: 6px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
@ -25,11 +25,11 @@
|
|||
}
|
||||
|
||||
&-head {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
|
||||
&-blue {
|
||||
|
@ -57,7 +57,7 @@
|
|||
border-radius: 0;
|
||||
font-size: @font-size-base;
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
left: -13px;
|
||||
.transform(translateY(-50%));
|
||||
}
|
||||
|
||||
|
@ -78,7 +78,7 @@
|
|||
&&-pending &-item:nth-last-of-type(2) {
|
||||
|
||||
.@{timeline-prefix-cls}-item-tail {
|
||||
border-left: 2px dotted @timeline-color;
|
||||
border-left: 1px dotted @timeline-color;
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
min-height: 48px;
|
||||
|
|
|
@ -1,63 +1,62 @@
|
|||
<template>
|
||||
<div style="margin: 50px;width:300px">
|
||||
{{ value | json }}
|
||||
<Cascader size="large" :data="data" @on-change="change" trigger="hover" :render-format="format"></Cascader>
|
||||
<div style="width: 150px;margin:100px">
|
||||
<Cascader :data="data" :value.sync="value1"></Cascader>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { Cascader } from 'iview';
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: ['jiangsu', 'hhh', 'ddd'],
|
||||
// value: [],
|
||||
value1: [],
|
||||
data: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou'
|
||||
}],
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [
|
||||
{
|
||||
value: 'gugong',
|
||||
label: '故宫'
|
||||
},
|
||||
{
|
||||
value: 'tiantan',
|
||||
label: '天坛'
|
||||
},
|
||||
{
|
||||
value: 'wangfujing',
|
||||
label: '王府井'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
// disabled: true,
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
children: [{
|
||||
value: 'abc',
|
||||
label: 'ABC'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
value: 'hhh',
|
||||
label: 'HHH',
|
||||
children: [{
|
||||
value: 'ddd',
|
||||
label: 'DDD'
|
||||
}]
|
||||
}]
|
||||
label: '江苏',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京',
|
||||
children: [
|
||||
{
|
||||
value: 'fuzimiao',
|
||||
label: '夫子庙',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'suzhou',
|
||||
label: '苏州',
|
||||
children: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园',
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
change (data, opts) {
|
||||
console.log(data);
|
||||
console.log(opts)
|
||||
},
|
||||
format (label, data) {
|
||||
return label[label.length - 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
Loading…
Add table
Reference in a new issue