blob: 4df70ba44d8a6a777c8902cff92c9d8fba8ef06b (
plain)
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<template>
<div class="fans-date-switch">
<span
class="medium-12px scale-item"
:class="{ 'switch-active': timeScale === 'hour' }"
@click="switchTimeScale('hour')"
>{{ $t('global.date.lastHour') }}</span
>
<span
class="medium-12px scale-item"
:class="{ 'switch-active': timeScale === 'day' }"
@click="switchTimeScale('day')"
>{{ $t('global.date.lastDay') }}</span
>
<span
class="medium-12px scale-item"
:class="{ 'switch-active': timeScale === 'week' }"
@click="switchTimeScale('week')"
>{{ $t('global.date.lastWeek') }}</span
>
<span
class="medium-12px scale-item"
:class="{ 'switch-active': timeScale === 'mounth' }"
@click="switchTimeScale('mounth')"
>{{ $t('global.date.lastMounth') }}</span
>
<span
class="medium-12px scale-item"
:class="{ 'switch-active': timeScale === 'year' }"
@click="switchTimeScale('year')"
>{{ $t('global.date.lastYear') }}</span
>
<div class="slider" />
<div class="date-picker">
<img src="@/assets/images/calendar-icon.svg" />
<span class="medium-12px scale-item">{{
$t('global.date.selectDate')
}}</span>
</div>
<img class="date-clear" src="@/assets/images/icon-clear-red.svg" />
</div>
</template>
<script>
export default {
props: {
timeScale: {
type: String,
default: 'hour',
},
switchTimeScale: {
type: Function,
required: true,
},
},
};
</script>
<style lang="scss" scoped>
.fans-date-switch {
position: relative;
height: 48px;
padding: 0 16px 0 32px;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 24px;
border-bottom: 1px solid $faint-secondary-primary-10;
}
.switch-active {
color: $red-brand-primary;
transition: ease-in 0.15s;
}
.slider {
position: absolute;
height: 0px;
border-bottom: 4px solid $red-brand-primary;
transition: ease-in 0.2s;
bottom: 0px;
}
.scale-item {
cursor: pointer;
}
.scale-item:nth-child(1).switch-active ~ .slider {
width: 92px;
left: 31px;
}
.scale-item:nth-child(2).switch-active ~ .slider {
left: 135px;
width: 105px;
}
.scale-item:nth-child(3).switch-active ~ .slider {
left: 255px;
width: 112px;
}
.scale-item:nth-child(4).switch-active ~ .slider {
left: 383px;
width: 107px;
}
.scale-item:nth-child(5).switch-active ~ .slider {
left: 508px;
width: 90px;
}
.date-picker {
display: flex;
align-items: center;
gap: 9px;
}
.date-clear {
margin-left: auto;
cursor: pointer;
}
</style>
|
