You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.3 KiB
90 lines
2.3 KiB
<template>
|
|
<v-timeline class="LTR">
|
|
<v-timeline-item v-for="(event, key) in events" :key="key" :color="(event.user_id==12) ? 'red' : 'cyan'"
|
|
:class="(event.user_id==12) ? 'Red Right' : 'Cyan Left'" small fill-dot>
|
|
<template v-slot:opposite>
|
|
<span> {{ event.user_name }} </span>
|
|
<div class="Time"><v-icon>WMi-clock</v-icon> {{ event.date }} </div>
|
|
</template>
|
|
<v-card class="elevation-3 RTL" >
|
|
<v-card-title> {{ event.title }} </v-card-title>
|
|
<v-card-text class="text-lg-right Desc">
|
|
{{ event.desc }}
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-timeline-item>
|
|
</v-timeline>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
events: { default: [] },
|
|
},
|
|
data () {
|
|
return {
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
// .v-timeline-item--left .v-timeline-item__opposite, .v-timeline-item:nth-child(odd):not(.v-timeline-item--right) .v-timeline-item__opposite {
|
|
// margin-right: 96px;
|
|
// text-align: right;
|
|
// }
|
|
.v-card__title {
|
|
padding-bottom: 5px;
|
|
font-size: 22px;
|
|
}
|
|
.v-timeline .Desc {
|
|
padding-top: 5px;
|
|
}
|
|
.v-timeline .Time {
|
|
color: #9e9e9e;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.v-timeline-item .v-card:after, .v-timeline-item .v-card:before {
|
|
border-bottom: 0px;
|
|
border-right: 0px;
|
|
}
|
|
|
|
.v-timeline-item.Right {
|
|
flex-direction: row !important;
|
|
}
|
|
.v-timeline-item.Left {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.v-timeline-item.Left .v-timeline-item__opposite {
|
|
margin-right: 96px;
|
|
text-align: right !important;
|
|
}
|
|
.v-timeline-item.Right .v-timeline-item__opposite {
|
|
margin-left: 96px;
|
|
text-align: left !important;
|
|
}
|
|
|
|
|
|
|
|
.v-timeline-item.Right .v-card {
|
|
border-right: 4px solid;
|
|
}
|
|
.v-timeline-item.Left .v-card {
|
|
border-left: 4px solid;
|
|
}
|
|
.v-timeline-item.Red .v-card {
|
|
box-shadow: none !important;
|
|
border-color: #ee3552;
|
|
background-color: rgba(238, 53, 82, 0.05);
|
|
}
|
|
.v-timeline-item.Cyan .v-card {
|
|
box-shadow: none !important;
|
|
background-color: rgba(50, 197, 210, 0.05);
|
|
border-color: #32c5d2;
|
|
}
|
|
</style>
|
|
|