diff options
Diffstat (limited to 'src/views/MemoryModules/Specification/MemorySwitch.vue')
-rw-r--r-- | src/views/MemoryModules/Specification/MemorySwitch.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue new file mode 100644 index 00000000..27101daa --- /dev/null +++ b/src/views/MemoryModules/Specification/MemorySwitch.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: 98px; left: ${ + ((currentMemory ? currentMemory : 1) - 1) * 120 + 32 + }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(93vw - 320px); + height: 50px; + padding: 0 16px 0 32px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 120px; + 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: 120px; + margin-right: 6px; + cursor: pointer; +} + +.date-picker { + display: flex; + align-items: center; + gap: 9px; +} + +.date-clear { + margin-left: auto; + cursor: pointer; +} +</style> |