add mechanical button
This commit is contained in:
parent
d7ca474e39
commit
4980b84da6
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 1600 1600">
|
||||
<def>
|
||||
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur" />
|
||||
<feColorMatrix result="bluralpha" type="matrix" :values="colorMatrix" />
|
||||
<feOffset in="bluralpha" dx="20" dy="20" result="offsetBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="offsetBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</def>
|
||||
<g>
|
||||
<rect width="800" height="800" x="400" y="400" fill="#464646" rx="20" />
|
||||
<rect width="700" height="700" x="450" y="450" fill="#eaeaea" rx="20" />
|
||||
<circle r="20" cx="1075" cy="1075" fill="#171717" />
|
||||
<circle r="20" cx="1075" cy="525" fill="#171717" />
|
||||
<circle r="20" cx="525" cy="525" fill="#171717" />
|
||||
<circle r="20" cx="525" cy="1075" fill="#171717" />
|
||||
</g>
|
||||
<g>
|
||||
<linearGradient id="normal" gradientTransform="rotate(45 0 0)">
|
||||
<stop stop-color="#4b4b4b" offset="0" />
|
||||
<stop stop-color="#171717" offset="1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="pressed" gradientTransform="rotate(45 0 0)">
|
||||
<stop stop-color="#171717" offset="0" />
|
||||
<stop stop-color="#4b4b4b" offset="1" />
|
||||
</linearGradient>
|
||||
<circle class="shadow" r="220" cx="800" cy="800" fill="black" />
|
||||
<circle class="light" @mousedown="btnPressed" @mouseup="btnReleased" :r="btnHeight" cx="800" cy="800"
|
||||
fill-opacity="1" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: 160,
|
||||
height: 160,
|
||||
})
|
||||
|
||||
const btnHeight = ref(200)
|
||||
|
||||
const colorMatrix = ref("1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0")
|
||||
|
||||
function btnPressed() {
|
||||
btnHeight.value = 210;
|
||||
colorMatrix.value = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0"
|
||||
}
|
||||
|
||||
function btnReleased() {
|
||||
btnHeight.value = 200;
|
||||
colorMatrix.value = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
circle {
|
||||
transition: all 20ms ease-in-out;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
filter: url(#shadow);
|
||||
}
|
||||
|
||||
.light:active {
|
||||
fill: url(#pressed);
|
||||
}
|
||||
|
||||
.light {
|
||||
fill: url(#normal);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" :width="props.width" :height="props.height" viewBox="0 0 16 16">
|
||||
<def>
|
||||
<filter id="glow">
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feFlood result="flood" flood-color="#f08a5d" flood-opacity="1"></feFlood>
|
||||
<feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
|
||||
<feMorphology in="mask" result="dilated" operator="dilate" radius="0.02"></feMorphology>
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
<rect width="8" height="4" x="4" y="6" fill="#c01401" rx="0.1" />
|
||||
<text fill="white" font-size="0.7" x="4.25" y="6.75">ON</text>
|
||||
<g>
|
||||
<rect @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
|
||||
<rect @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
|
||||
<rect @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
|
||||
<rect @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
|
||||
<rect @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
|
||||
<rect @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(0)" width="0.7" height="2" fill="#68716f" x="5.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(1)" width="0.7" height="2" fill="#68716f" x="6.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(2)" width="0.7" height="2" fill="#68716f" x="7.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(3)" width="0.7" height="2" fill="#68716f" x="8.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(4)" width="0.7" height="2" fill="#68716f" x="9.15" y="7" rx="0.1" />
|
||||
<rect class="glow" @click="toggleBtnStatus(5)" width="0.7" height="2" fill="#68716f" x="10.15" y="7" rx="0.1" />
|
||||
</g>
|
||||
<g>
|
||||
<rect @click="toggleBtnStatus(0)" width="0.65" height="0.65" fill="white" x="5.175" :y="btnLocation[0]" rx="0.1"
|
||||
|
|
@ -73,9 +73,11 @@ function toggleBtnStatus(btnNum: number): void {
|
|||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
@import "@/assets/main.css";
|
||||
|
||||
rect {
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
|
||||
.glow:hover {
|
||||
filter: url(#glow);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="w-screen h-screen">
|
||||
<Switch width="720" height="720" />
|
||||
<!-- <Switch width="720" height="720" /> -->
|
||||
<MechanicalButton width="720" height="720" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MechanicalButton from '@/components/equipments/MechanicalButton.vue';
|
||||
import Switch from '@/components/equipments/Switch.vue';
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue