1 files changed, 13 insertions, 86 deletions
diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue
index c2b693ab..0eef0f8c 100644
--- a/src/components/_sila/Global/TableDatePicker.vue
+++ b/src/components/_sila/Global/TableDatePicker.vue
@@ -1,44 +1,16 @@
 <template>
-  <div class="fans-date-switch">
+  <b-col class="d-flex align-items-center date-picker">
     <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>
+  </b-col>
 </template>
 
 <script>
@@ -56,68 +28,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.fans-date-switch {
-  position: relative;
-
+.date-picker {
   height: 48px;
-  padding: 0 16px 0 32px;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 24px;
+  max-width: 150%;
+  width: auto;
+  margin: -2rem -1.95rem 0px -2rem;
+  padding-left: 2rem;
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
   border-bottom: 1px solid $gray-10;
+  gap: 24px;
 }
 
 .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>