Conformance: layout done.(not time range)

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

@@ -0,0 +1,49 @@
+<template>
+<div class="mt-2">
+  <p class="h2">Time Range</p>
+  <div>
+    <Durationjs></Durationjs>
+
+  </div>
+</div>
+</template>
+<script>
+import Durationjs from '@/components/durationjs.vue';
+
+export default {
+  data() {
+    return {
+      selectTimeRange: [20, 80],
+      selectedStart: null,
+      selectedEnd: null,
+      timeStart: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
+      timeEnd: ['Sec(s)', 'Min(s)', 'Hour(s)', 'Day(s)', 'Week(s)', 'Mon(s)'],
+
+    }
+  },
+  components: {
+    Durationjs,
+  },
+  created() {
+    this.selectedStart = this.timeStart[1];
+    this.selectedEnd = this.timeEnd[5];
+  },
+
+}
+</script>
+<style>
+.time-preview {
+  border: 1px solid #eee;
+  max-width: 400px;
+  text-align: center;
+  margin: 0 auto;
+  margin-bottom: 20px;
+  padding: 15px;
+  background: rgb(70, 25, 173);
+  color: #fff;
+}
+
+.time-preview-time {
+  font-size: 30px;
+}
+</style>