summaryrefslogtreecommitdiff
path: root/src/views/PowerSupplies/Specification/PowerSwitch.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/views/PowerSupplies/Specification/PowerSwitch.vue')
-rw-r--r--src/views/PowerSupplies/Specification/PowerSwitch.vue112
1 files changed, 0 insertions, 112 deletions
diff --git a/src/views/PowerSupplies/Specification/PowerSwitch.vue b/src/views/PowerSupplies/Specification/PowerSwitch.vue
deleted file mode 100644
index 824c2549..00000000
--- a/src/views/PowerSupplies/Specification/PowerSwitch.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: 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>