<template>
|
<ul class="line-container">
|
<li class="line-item" v-for='(item,key) in items' :key="key" @click="clickTimerIteam(item,(key+1))">
|
<div class="item-circle" v-if='!item.type || item.type==="circle"'
|
:class="(key+1)<=indexVal?getColorClass(item.color):''"
|
:style="(key+1)<=indexVal?getStyle(item):''"></div>
|
<star class="item-star"
|
v-if='item.type==="star"'
|
:class="(key+1)<=indexVal?getColorClass(item.color):''"
|
:path-style="(key+1)<=indexVal?getStyle(item):{}"></star>
|
<div class="item-tag">{{item.tag}}</div>
|
<div class="item-content" :class='item.type'>{{item.content}}</div>
|
</li>
|
</ul>
|
</template>
|
<script>
|
import Star from './star.vue'
|
export default {
|
name: 'light-timeline',
|
components: { Star },
|
props: {
|
items: {
|
type: Array
|
},
|
activeColor: {
|
type: String,
|
default: '#26B4FF'
|
},
|
indexVal: {
|
default: 0
|
}
|
},
|
data() {
|
return {
|
presetReg: /defaultColor|orange|yellow/
|
// indexVal: 0
|
}
|
},
|
methods: {
|
getColorClass(color) {
|
return this.presetReg.test(color) ? color : ''
|
},
|
getStyle(item) {
|
const color =
|
item.color && item.color !== '' ? item.color : this.activeColor
|
if (!this.presetReg.test(color)) {
|
return item.type === 'star'
|
? this.makeStarColor(color)
|
: this.makeCircleColor(color)
|
}
|
return {}
|
},
|
makeCircleColor(color) {
|
return { border: `2px solid ${color}` }
|
},
|
makeStarColor(color) {
|
return { stroke: color }
|
},
|
clickTimerIteam(json, key) {
|
// this.indexVal = key
|
this.$emit('clickBackfn', json, key)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
$font-family-no-number: 'Chinese Quote', -apple-system, BlinkMacSystemFont,
|
'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
$font-family: 'Helvetica Neue For Number', $font-family-no-number;
|
$tag-family: Consolas, Menlo, Courier, monospace;
|
|
$defaultColor: #ccc;
|
$orange: #ed9153;
|
$yellow: #fbd157;
|
$font-color: #606c76;
|
$font-size: 14px;
|
$left-pad: 5rem;
|
$item-pad: 1rem;
|
$icon-size: 16px;
|
$sm-icon-size: 10px;
|
$lg-icon-size: 24px;
|
|
$colors: (
|
defaultColor: $defaultColor,
|
orange: $orange,
|
yellow: $yellow
|
);
|
|
@mixin square($val) {
|
width: $val;
|
height: $val;
|
}
|
|
@mixin circle($diameter, $color) {
|
@include square($diameter);
|
border-radius: $diameter/2 + 2px;
|
background: white;
|
border: 2px solid $color;
|
}
|
|
@mixin line-point($val) {
|
box-sizing: border-box;
|
position: absolute;
|
left: -$item-pad;
|
margin-left: -($val/2) + 1px;
|
z-index: 1;
|
}
|
|
@mixin make-circle($diameter, $color) {
|
@include line-point($diameter);
|
@include circle($diameter, $color);
|
}
|
|
@mixin make-star($val, $color) {
|
@include line-point($val);
|
@include square($val);
|
margin-top: -($val/6);
|
path {
|
stroke: $color;
|
stroke-width: 4px;
|
fill: white;
|
}
|
}
|
|
:root {
|
--defaultColor: $defaultColor;
|
--orange: $orange;
|
--yellow: $yellow;
|
}
|
|
.line-container {
|
color: $font-color;
|
font-size: $font-size;
|
font-family: $font-family;
|
box-sizing: border-box;
|
position: relative;
|
list-style: none;
|
margin: 0.5rem;
|
padding-left: $left-pad + 1rem;
|
&::after {
|
position: absolute;
|
content: '';
|
left: $left-pad;
|
top: 0;
|
width: 2px;
|
height: 100%;
|
background-color: $defaultColor; //lighten($defaultColor, 90%);
|
}
|
|
.line-item {
|
padding: $item-pad;
|
position: relative;
|
}
|
.item-circle {
|
cursor: pointer;
|
transition: 0.5s all;
|
@include make-circle($icon-size, $defaultColor);
|
@each $key, $val in $colors {
|
&.#{$key} {
|
border: 2px solid $val;
|
}
|
}
|
}
|
.item-star {
|
cursor: pointer;
|
@include make-star($lg-icon-size, $defaultColor);
|
@each $key, $val in $colors {
|
&.#{$key} {
|
path {
|
stroke: $val;
|
}
|
}
|
}
|
}
|
.item-tag {
|
position: absolute;
|
left: -($left-pad + 1rem);
|
width: 65px;
|
text-align: center;
|
color: lighten($font-color, 20%);
|
font-size: $font-size/1.2;
|
cursor: pointer;
|
}
|
.item-content {
|
white-space: pre-line;
|
&.star {
|
font-weight: bold;
|
font-size: $font-size * 1.1;
|
}
|
cursor: pointer;
|
}
|
}
|
</style>
|
