1 files changed, 112 insertions, 0 deletions
diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue
new file mode 100644
index 00000000..824c2549
--- /dev/null
+++ b/src/views/PowerSupplies/Specification/PowerSwitch.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    ref="content"
+    class="memory-switch"
+    @wheel.prevent="wheelItBetter($event)"
+  >
+    <span
+      v-for="item in slots"
+      :key="item.id"
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': currentMemory === item.id }"
+      @click="switchMemory(item.id)"
+      >{{ $t(item.name) }}</span
+    >
+    <div
+      class="slider"
+      :style="`width: 68px; left: ${
+        ((currentMemory ? currentMemory : 1) - 1) * 100 + 30
+      }px`"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    slots: {
+      type: Array,
+      default: null,
+    },
+    currentMemory: {
+      type: Number,
+      default: 1,
+    },
+    switchMemory: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      upHere: false,
+      container: this.$refs.content,
+    };
+  },
+  methods: {
+    wheelItBetter(event) {
+      if (event.deltaY < 0) {
+        this.$refs.content.scrollLeft -= 25;
+      } else {
+        this.$refs.content.scrollLeft += 25;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.memory-switch {
+  position: relative;
+  width: calc(100vw - 320px);
+  height: 50px;
+  padding: 0 16px 0 32px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 100px;
+  grid-template-rows: 32px;
+  align-items: end;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  overflow-x: auto;
+  white-space: nowrap;
+  &::-webkit-scrollbar {
+    height: 2px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(26, 62, 91, 0.2);
+    border-radius: 16px;
+    background-clip: content-box;
+    height: 10px;
+  }
+}
+
+.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 {
+  display: inline-block;
+  width: 100px;
+  margin-right: 6px;
+  cursor: pointer;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>