fix Timeline custom head bug
fix Timeline custom head bug
This commit is contained in:
parent
385cfebab6
commit
c649968a4a
5 changed files with 10 additions and 53 deletions
|
@ -1,9 +1,7 @@
|
|||
<template>
|
||||
<li :class="itemClasses">
|
||||
<div :class="tailClasses"></div>
|
||||
<div :class="headClasses" :style="customColor">
|
||||
<slot name="dot"></slot>
|
||||
</div>
|
||||
<div :class="headClasses" :style="customColor" v-el:dot><slot name="dot"></slot></div>
|
||||
<div :class="contentClasses">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
@ -25,7 +23,7 @@
|
|||
}
|
||||
},
|
||||
ready () {
|
||||
this.dot = this.$children.length ? true : false;
|
||||
this.dot = this.$els.dot.innerHTML.length ? true : false;
|
||||
},
|
||||
computed: {
|
||||
itemClasses () {
|
||||
|
|
2
dist/styles/iview.all.css
vendored
2
dist/styles/iview.all.css
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
@ -8,6 +8,7 @@
|
|||
<br><br>
|
||||
<Timeline>
|
||||
<Timeline-item>
|
||||
<Icon type="close-circled" slot="dot"></Icon>
|
||||
<p class="time">1976年</p>
|
||||
<p class="content">Apple I 问世</p>
|
||||
</Timeline-item>
|
||||
|
@ -15,49 +16,7 @@
|
|||
<p class="time">1984年</p>
|
||||
<p class="content">发布 Macintosh</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2007年</p>
|
||||
<p class="content">发布 iPhone</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2010年</p>
|
||||
<p class="content">发布 iPad</p>
|
||||
</Timeline-item>
|
||||
<Timeline-item>
|
||||
<p class="time">2011年10月5日</p>
|
||||
<p class="content">史蒂夫·乔布斯去世</p>
|
||||
</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br><br>
|
||||
<Timeline>
|
||||
<Timeline-item color="green">发布1.0版本</Timeline-item>
|
||||
<Timeline-item color="green">发布2.0版本</Timeline-item>
|
||||
<Timeline-item color="red">严重故障</Timeline-item>
|
||||
<Timeline-item color="blue">发布3.0版本</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br><br>
|
||||
<Timeline pending>
|
||||
<Timeline-item>发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布2.0版本</Timeline-item>
|
||||
<Timeline-item>发布3.0版本</Timeline-item>
|
||||
<Timeline-item><a href="#">查看更多</a></Timeline-item>
|
||||
</Timeline>
|
||||
<br><br><br>
|
||||
<Timeline>
|
||||
<Timeline-item color="green">
|
||||
<Icon type="trophy" slot="dot"></Icon>
|
||||
<span>发布里程碑版本</span>
|
||||
</Timeline-item>
|
||||
<Timeline-item>发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布2.0版本</Timeline-item>
|
||||
<Timeline-item>发布3.0版本</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br><br>
|
||||
<Timeline pending>
|
||||
<Timeline-item>发布1.0版本</Timeline-item>
|
||||
<Timeline-item>发布2.0版本</Timeline-item>
|
||||
</Timeline>
|
||||
<br><br><br>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
@ -70,9 +29,9 @@
|
|||
Button,
|
||||
Progress,
|
||||
ButtonGroup,
|
||||
Icon,
|
||||
Timeline,
|
||||
TimelineItem
|
||||
TimelineItem,
|
||||
Icon
|
||||
},
|
||||
props: {
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
padding: 0;
|
||||
|
||||
&-item {
|
||||
margin: 0;
|
||||
margin: 0 !important;
|
||||
padding: 0 0 12px 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
@ -62,10 +62,10 @@
|
|||
}
|
||||
|
||||
&-content {
|
||||
padding: 0 0 10px 24px;
|
||||
padding: 1px 1px 10px 24px;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
Loading…
Add table
Reference in a new issue