1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <template>
| <li class="relative m-0 list-none">
| <div class="start">
| <slot name="start" :item="data"></slot>
| </div>
| <div class="head"></div>
| <div class="tail"></div>
| <div class="end">
| <slot name="end" :item="data"></slot>
| </div>
| </li>
| </template>
|
| <script>
| export default {
| name: "TimeLineItem",
| props: {
| data: {
| type: Object,
| default() {
| return {};
| },
| },
| },
| };
| </script>
|
| <style lang="scss" scoped>
| $nodeSize: 1.5rem;
| $lineSize: 1px;
| $gap: 0.5rem;
| .start {
| position: absolute;
| width: calc(50% - $nodeSize/2 - $gap);
| width: 30px;
| max-height: calc(100% - $nodeSize/2);
| inset-inline-end: calc(50% + $gap + $nodeSize/2);
| text-align: end;
| word-break: break-all;
| // overflow-y: auto;
| // overflow-x: hidden;
| }
| .head {
| position: absolute;
| width: $nodeSize;
| height: $nodeSize;
| inset-inline-start: calc(50% - $nodeSize/2);
| border-radius: 50%;
| background: radial-gradient(circle calc($nodeSize / 3) at 50% 50%, #fff, #fff 50%, hsla(240, 5%, 40%, 0.2) calc(50% + 1px), hsla(240, 5%, 40%, 0.2) 100%)
| no-repeat center/cover border-box;
| }
| .tail {
| position: absolute;
| height: calc(100% - $nodeSize);
| inset-block-start: $nodeSize;
| inset-inline-start: calc(50% - $lineSize/2);
| border-inline-start: $lineSize solid hsla(0, 0%, 100%, 0.2);
| }
| .end {
| position: relative;
| // width: calc(50% - ($nodeSize/2) - $gap);
| width: calc(100%);
| inset-inline-start: calc(50% + ($nodeSize/2) + $gap);
| text-align: start;
| word-break: break-all;
| }
| </style>
|
|
