diff options
Diffstat (limited to 'src/views/MemoryModules/Specification/MemorySwitch.vue')
-rw-r--r-- | src/views/MemoryModules/Specification/MemorySwitch.vue | 112 |
1 files changed, 0 insertions, 112 deletions
diff --git a/src/views/MemoryModules/Specification/MemorySwitch.vue b/src/views/MemoryModules/Specification/MemorySwitch.vue deleted file mode 100644 index 27101daa..00000000 --- a/src/views/MemoryModules/Specification/MemorySwitch.vue +++ /dev/null @@ -1,112 +0,0 @@ -<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> |