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,137 @@
+<script setup lang="ts">
+import BeltBlock from './BeltBlock.vue';
+import MetalPlate from './MetalPlate.vue';
+import HeaderText from './HeaderText.vue';
+import { ref, type PropType } from 'vue';
+
+const code = ref('')
+
+const props = defineProps({
+  addAction: {
+    type: Function as PropType<(param: string) => void>,
+    required: true,
+  }
+})
+
+async function addClickButton() {
+  await props.addAction(code.value)
+  code.value = ''
+}
+
+</script>
+
+<template>
+  <div class="form-custom">
+    <BeltBlock class="input-form">
+      <MetalPlate class="controller-metal controller-metal-left"></MetalPlate>
+      <MetalPlate class="controller-metal controller-metal-right"></MetalPlate>
+      <div class="center-block-custom">
+        <div class="controller">
+          <div class="game-input">
+            <input id="run" class="game-input-run" v-model="code" type="text" placeholder="Место назначения">
+          </div>
+          <div class="game-button-run-shadow"></div>
+          <button class="game-button-run" type="submit" :disabled="code.length == 0" v-on:click="addClickButton">
+            <HeaderText>Поехали</HeaderText>
+          </button>
+        </div>
+      </div>
+    </BeltBlock>
+  </div>
+</template>
+
+<style scoped>
+.form-custom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: white;
+  z-index: 1000;
+}
+
+.input-form {
+  height: 76px;
+  position: relative;
+  z-index: 1000;
+  margin: 0 auto;
+  max-width: 1920px;
+}
+
+.controller-metal {
+  width: 30px;
+  height: calc(100% + 2px);
+  position: absolute;
+  top: -1px;
+}
+
+.controller-metal-left {
+  left: -30px;
+}
+
+.controller-metal-right {
+  right: -30px;
+}
+
+.controller {
+  display: flex;
+  position: relative;
+}
+
+.game-input {
+  position: relative;
+  top: 14px;
+  left: 15px;
+  height: 50px;
+  width: calc(100% - 150px - 25px);
+}
+
+.game-input-run {
+  height: 100%;
+  width: 100%;
+  padding-left: 27px;
+  background-image: url("@/assets/images/input_center.png");
+  background-size: cover;
+  border: 0;
+  font-size: 18px;
+  font-family: a_OldTyper;
+  background-color: transparent;
+}
+
+.game-input-run::placeholder {
+  color: #333333;
+}
+
+.game-input-run:focus {
+  border: 0;
+  outline: none;
+}
+
+.game-button-run-shadow {
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 150px;
+  box-shadow: -5px 5px 10px black;
+}
+
+.game-button-run {
+  background-image: url("@/assets/images/button.png");
+  background-size: cover;
+  font-size: 1.5em;
+  position: absolute;
+  right: 10px;
+  top: -5px;
+  height: 80px;
+  width: 155px;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+.game-button-run {
+  cursor: pointer;
+}
+</style>