add header

src/assets/main.css

@@ -55,3 +55,12 @@
   height: calc(100dvh - 100px);
   text-align: center;     /* центрирование текста */
 }
+
+.text-with-font {
+  font-family: a_OldTyper;
+  color: #bfa07d;
+  font-weight: 600;
+  letter-spacing: 2px;
+  line-height: 20px;
+  font-size: 22px;
+}

src/components/GameHeader.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import BeltMiniBlock from './BeltMiniBlock.vue';
+import BeltBlock from './BeltBlock.vue';
+</script>
+
+<template>
+  <div class="game-header">
+    <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
+    <BeltMiniBlock class="belt-mini"></BeltMiniBlock>
+    <BeltBlock class="belt">
+      <div class="position-right-center-block">
+        <span class="text-with-font">Вечерний детектив</span>
+        <!-- <MetalPlate class="team-name-block">
+            <div class="text-middle-wrapper text-truncate">
+              <p>...</p>
+            </div>
+          </MetalPlate> -->
+      </div>
+    </BeltBlock>
+  </div>
+</template>
+
+<style scoped>
+.game-header {
+  height: 100px;
+  position: fixed;
+  top: 5px;
+  left: 0;
+  width: 100%;
+  z-index: 2000;
+}
+
+.logo {
+  width: 90px;
+  height: 88px;
+  float: left;
+  margin: 0 10px;
+  position: relative;
+  z-index: 20;
+  top: 10px;
+}
+
+.belt-mini {
+  height: 30px;
+  position: relative;
+  z-index: 10;
+}
+
+.belt {
+  height: 60px;
+  position: relative;
+  top: -5px;
+}
+
+.position-right-center-block {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+</style>

src/components/GameWindow.vue

@@ -3,9 +3,9 @@ import { ref, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 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';
+import GameHeader from './GameHeader.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -210,21 +210,7 @@ onMounted(() => {
 
   <div class="body-custom">
 
-    <div class="game-header">
+    <GameHeader></GameHeader>
-      <img alt="Вечерний детектив" class="logo" src="@/assets/logo_belt.png" />
-      <BeltMiniBlock class="game-header-belt-mini">
-      </BeltMiniBlock>
-      <BeltBlock class="game-header-belt center-bold-text">
-        <div class="position-right-center">
-          <span class="text-with-font">Вечерний детектив</span>
-          <!-- <MetalPlate class="team-name-block">
-            <div class="text-middle-wrapper text-truncate">
-              <p>...</p>
-            </div>
-          </MetalPlate> -->
-        </div>
-      </BeltBlock>
-    </div>
 
     <!-- Форма ввода -->
     <div class="form-custom">
@@ -240,7 +226,8 @@ onMounted(() => {
                   :disabled="gameState !== 'RUN'">
               </div>
               <div class="game-button-run-shadow"></div>
-              <button class="game-button-run text-with-font" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
+              <button class="game-button-run text-with-font" type="submit"
+                :disabled="gameState !== 'RUN'">Поехали</button>
             </div>
           </form>
         </div>
@@ -437,57 +424,10 @@ body {
   display: flex;
 }
 
-.game-header {
-  height: 100px;
-  position: fixed;
-  top: 5px;
-  left: 0;
-  width: 100%;
-  color: white;
-  z-index: 2000;
-}
-
-.game-header-belt-mini {
-  height: 30px;
-  position: relative;
-  z-index: 10;
-}
-
-.game-header-belt {
-  height: 60px;
-  position: relative;
-  top: -5px;
-}
-
-.position-right-center {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-}
-
-.logo {
-  width: 90px;
-  height: 88px;
-  float: left;
-  margin: 0 10px;
-  position: relative;
-  z-index: 20;
-  top: 10px;
-}
-
-.center-bold-text {
-  font-size: large;
-  color: white;
-  vertical-align: middle;
-  font-weight: 700;
-}
-
 .game-button-run {
   background-image: url("@/assets/button.png");
   background-size: cover;
   font-size: 1.5em;
-  color: white;
   position: absolute;
   right: 10px;
   top: -5px;
@@ -568,13 +508,4 @@ body {
 .controller-metal-right {
   right: -15px;
 }
-
-.text-with-font {
-  font-family: a_OldTyper;
-  color: #bfa07d;
-  font-weight: 600;
-  letter-spacing: 2px;
-  line-height: 20px;
-  font-size: 22px;
-}
 </style>