add input form

2026-07-29 20:41:25 +07:00
parent a392d1a928
commit d1aac40b7f
9 changed files with 255 additions and 6 deletions
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="plate-block">
+    <div class="metal-plate-block">
+      <slot></slot>
+    </div>
+    <div class="pin pin-top-left"></div>
+    <div class="pin pin-top-right"></div>
+    <div class="pin pin-bottom-right"></div>
+    <div class="pin pin-bottom-left"></div>
+  </div>
+</template>
+
+<style scoped>
+.plate-block {
+  position: relative;
+  box-shadow: 0px 0px 10px black;
+}
+
+.metal-plate-block {
+  height: 100%;
+  background-image: url("@/assets/images/metal.png");
+  background-size: cover;
+  position: relative;
+  border-radius: 4px;
+}
+
+.pin {
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-image: url("@/assets/images/pin.png");
+  background-size: cover;
+}
+
+.pin-top-left {
+  top: 3px;
+  left: 3px;
+}
+
+.pin-top-right {
+  top: 3px;
+  right: 3px;
+}
+
+.pin-bottom-right {
+  bottom: 3px;
+  right: 3px;
+}
+
+.pin-bottom-left {
+  bottom: 3px;
+  left: 3px;
+}
+</style>