featurn: time duration layout done.

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -1,14 +1,14 @@
 <template>
-<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10" :class="isShowBar?'w-full':'w-[300px]'">
+<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10" :class="isShowBar?'w-full':'w-[312px]'">
   <!-- header -->
   <div class="bg-neutral-200 px-4">
     <p class="h2">Rule Settings</p>
   </div>
   <!-- contanier -->
   <div class="p-4 h-[calc(100%_-_40px)] flex">
-    <div class="h-full flex flex-col justify-between w-[268px]">
+    <div class="h-full flex flex-col justify-between w-[280px]">
       <!-- select -->
-      <div class="h-full overflow-y-auto scrollbar w-[268px]">
+      <div class="h-full overflow-y-auto scrollbar w-[280px]">
         <!-- radio group -->
         <ConformanceRadioGroup></ConformanceRadioGroup>
         <!-- show and hidden button -->

src/components/Discover/Conformance/ConformanceSidebar/ConformanceTimeRange.vue

@@ -1,10 +1,15 @@
 <template>
 <div class="mt-2">
   <p class="h2">Time Range</p>
-  <div>
+  <div class=" text-sm leading-normal">
     <p>min: {{ timeData.min }}</p>
     <p>max: {{ timeData.max }}</p>
+    <div class="flex justify-between items-center">
       <Durationjs></Durationjs>
+      <span>~</span>
+      <Durationjs></Durationjs>
+    </div>
+    <!-- <Durationjs></Durationjs> -->
 
   </div>
 </div>

src/components/durationjs.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="duration-container">
+  <div class=" relative">
+  <div class="flex justify-center items-center gap-1 px-1 w-32 border border-neutral-500 cursor-pointer" @click="openTiemSelect = !openTiemSelect">
+    <p>{{ days }}d</p>
+    <p>{{ hours }}h</p>
+    <p>{{ minutes }}m</p>
+    <p>{{ seconds }}s</p>
+  </div>
+  <div class="duration-container absolute left-1/2 top-1/2 -translate-x-1/2" v-show="openTiemSelect">
     <div class="duration-box" v-for="(unit, index) in inputTypes" :key="unit">
       <input
         type="text"
@@ -17,6 +24,7 @@
       <label class="duration">{{ tUnits[unit].dsp }}</label>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -35,6 +43,7 @@ export default {
       minTotal: 6666666,
       inputTypes: [],
       lastInput: null,
+      openTiemSelect: false,
     };
   },
   computed: {
@@ -58,6 +67,23 @@ export default {
         }
       },
     },
+  },
+  directives: {
+  'click-outside': {
+    bind(el, { value }) {
+      handleOutsideClick = e => {
+        const isClickOutside = e.target !== el && !el.contains(e.target)
+        if (isClickOutside) value(e)
+        e.stopPropagation()
+      }
+      document.addEventListener('click', handleOutsideClick)
+      document.addEventListener('touchstart', handleOutsideClick)
+    },
+    unbind() {
+      document.removeEventListener('click', handleOutsideClick)
+      document.removeEventListener('touchstart', handleOutsideClick)
+    }
+  }
 },
   methods: {
     onFocus(event) {
@@ -78,7 +104,22 @@ export default {
       else if(inputValue < min) event.target.value= min.toString().padStart(2, '0');
 
       // 數值更新, tUnits 也更新, 並計算 totalSeconds
-      this.tUnits[event.target.dataset.tunit].val = event.target.value;
+      const dsp = event.target.dataset.tunit;
+      this.tUnits[dsp].val = event.target.value;
+      switch (dsp) {
+        case 'd':
+          this.days = event.target.value;
+          break;
+        case 'h':
+          this.hours = event.target.value;
+          break;
+        case 'm':
+          this.minutes = event.target.value;
+          break;
+        case 's':
+          this.seconds = event.target.value;
+          break;
+      };
       this.calculateTotalSeconds();
     },
     onKeyUp(event) {
@@ -144,7 +185,6 @@ export default {
         const val = parseInt(this.tUnits[unit].val, 10);
         if (!isNaN(val)) totalSeconds += val * this.tUnits[unit].rate;
       }
-      console.log(totalSeconds);
 
       // 大於最大值時要等於最大值
       if(totalSeconds >= this.maxTotal){
@@ -163,8 +203,17 @@ export default {
   },
   mounted() {
     this.inputTypes = this.display.split('');
+
+    let size ='min';
+    if(size === 'max') {
+      this.secondToDate(this.minTotal, 'min');
       this.secondToDate(this.maxTotal, 'max');
       this.totalSeconds = this.maxTotal;
+    }else if(size === 'min') {
+      this.secondToDate(this.maxTotal, 'max');
+      this.secondToDate(this.minTotal, 'min');
+      this.totalSeconds = this.minTotal;
+    }
   },
 };
 </script>