update

src/components/BeltBlock.vue

@@ -1,14 +1,38 @@
 <script setup lang="ts"></script>
 
 <template>
+  <div>
+    <div class="shadow shadow-top"></div>
+    <div class="shadow shadow-bottom"></div>
     <div class="belt-block">
       <slot></slot>
     </div>
+  </div>
 </template>
 
 <style scoped>
 .belt-block {
+  height: 100%;
   background-image: url("@/assets/belt.png");
   background-size: cover;
+  position: relative;
+}
+
+.shadow {
+  height: 10px;
+  width: 120%;
+  position: absolute;
+  left: -10%;
+  background-color: black;
+}
+
+.shadow-top {
+  top: 0px;
+  box-shadow: 0px -5px 10px black;
+}
+
+.shadow-bottom {
+  bottom: 0px;
+  box-shadow: 0px 5px 10px black;
 }
 </style>

src/components/BeltMiniBlock.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts"></script>
 
 <template>
+  <div>
+    <div class="shadow"></div>
     <div class="belt-block">
     <slot></slot>
   </div>
+  </div>
 </template>
 
 <style scoped>
 .belt-block {
+  height: 100%;
   background-image: url("@/assets/belt_mini.png");
   background-size: cover;
+  position: relative;
+}
+
+.shadow {
+  height: 10px;
+  width: 120%;
+  left: -10%;
+  position: absolute;
+  bottom: 5px;
+  background-color: black;
+  box-shadow: 0px 5px 10px black;
 }
 </style>

src/components/GameWindow.vue

@@ -5,6 +5,7 @@ import { encodeUTF8ToBase64, getApiUrl } from './utils';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
 import BeltMiniBlock from './BeltMiniBlock.vue';
 import BeltBlock from './BeltBlock.vue';
+import MetalPlate from './MetalPlate.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -212,19 +213,18 @@ onMounted(() => {
     <div class="game-header">
       <div class="game-header-empty-block"></div>
       <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
-      <div class="game-header-belt-mini-shadow"></div>
       <BeltMiniBlock class="game-header-belt-mini">
       </BeltMiniBlock>
-      <div class="game-header-belt-shadow"></div>
       <BeltBlock class="game-header-belt center-bold-text">
+        <div class="position-right-center">
           <!-- Вечерний детектив -->
-        <!-- <span class="team-name-block text-truncate">{{ team.name }}</span> -->
+          <MetalPlate class="team-name-block text-truncate">{{ team.name }}</MetalPlate>
+        </div>
       </BeltBlock>
     </div>
 
     <!-- Форма ввода -->
     <div class="form-custom">
-      <div class="game-input-form-shadow"></div>
       <BeltBlock class="game-input-form">
         <div class="center-block-custom">
           <form @submit.prevent="addAction">
@@ -304,19 +304,6 @@ body {
   height: 100vh;
 }
 
-.info-custom {
-  padding-left: 15px;
-}
-
-.logo-right {
-  float: right;
-  margin: 12px;
-}
-
-.second-color {
-  color: var(--second-color);
-}
-
 .form-custom {
   position: fixed;
   bottom: 0;
@@ -328,7 +315,6 @@ body {
 
 .game-input-form {
   height: 76px;
-  padding: 13px;
   position: relative;
   z-index: 1000;
 }
@@ -407,12 +393,12 @@ body {
 }
 
 .team-name-block {
-  float: right;
-  padding: 0 20px;
+  margin-right: 10px;
+  width: 150px;
+  height: 40px;
 }
 
 .text-truncate {
-  width: 100px;
   text-align: center;
   white-space: nowrap;
   /* Запрещаем перенос текста */
@@ -420,20 +406,9 @@ body {
   /* Обрезаем все, что не помещается */
   text-overflow: ellipsis;
   /* Добавляем троеточие */
-  padding: 2px 7px;
-  margin: 0 20px;
-  background: rgb(40, 69, 87);
-  border-radius: 4px;
   font-size: medium;
 }
 
-.belt-mini-block {
-  height: 30px;
-  width: 100%;
-  position: absolute;
-  top: 0;
-}
-
 .controller {
   display: flex;
 }
@@ -458,32 +433,17 @@ body {
   z-index: 10;
 }
 
-.game-header-belt-mini-shadow {
-  height: 20px;
-  width: 120%;
-  left: -10%;
-  position: absolute;
-  top: 10px;
-  box-shadow: 0px 5px 10px black;
-  z-index: 9;
-  background-color: black;
-}
-
 .game-header-belt {
   height: 60px;
   position: relative;
   top: -5px;
-  z-index: 1;
 }
 
-.game-header-belt-shadow {
-  width: 120%;
-  left: -10%;
-  height: 60px;
-  top: 30px;
-  position: absolute;
-  background-color: black;
-  box-shadow: 0px 5px 10px black;
+.position-right-center {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: right;
 }
 
 .logo {

src/components/MetalPlate.vue

@@ -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 {
+  border-radius: 4px;
+  position: relative;
+  box-shadow: 0px 0px 10px black;
+}
+
+.metal-plate-block {
+  height: 100%;
+  background-image: url("@/assets/metal.png");
+  background-size: cover;
+  position: relative;
+}
+
+.pin {
+  width: 5px;
+  height: 5px;
+  position: absolute;
+  background-image: url("@/assets/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>