diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/_sila/Global/Collapse.vue | 4 | ||||
-rw-r--r-- | src/components/_sila/Global/TableDatePicker.vue | 123 |
2 files changed, 125 insertions, 2 deletions
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue index 141da639..4a3694bd 100644 --- a/src/components/_sila/Global/Collapse.vue +++ b/src/components/_sila/Global/Collapse.vue @@ -1,5 +1,5 @@ <template> - <div class="custom-collapse"> + <div class="custom-divider"> <b-button v-b-toggle="id" variant="collapse" @@ -9,7 +9,7 @@ {{ title }} <component :is="iconChevronUp" class="icon-expand" /> </b-button> - <b-collapse :id="id" class="nav-item__nav"> + <b-collapse :id="id"> <slot></slot> </b-collapse> </div> diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue new file mode 100644 index 00000000..c2b693ab --- /dev/null +++ b/src/components/_sila/Global/TableDatePicker.vue @@ -0,0 +1,123 @@ +<template> + <div class="fans-date-switch"> + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'hour' }" + @click="switchTimeScale('hour')" + >{{ $t('global.datePicker.lastHour') }}</span + > + <span + class="medium-12px scale-item" + :class="{ 'switch-active': timeScale === 'day' }" + @click="switchTimeScale('day')" + >{{ $t('global.datePicker.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 $gray-10; +} + +.switch-active { + color: $primary; + transition: ease-in 0.15s; +} + +.slider { + position: absolute; + height: 0px; + border-bottom: 4px solid $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> |