The_evening_detective/evening_detective_client
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add header

Browse Source
This commit is contained in:
Владимир Фёдоров 2026-03-20 23:19:33 +07:00
parent 5ea37e155d
commit 5fee2035aa
3 changed files with 74 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/main.css
View File

@ -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;
}

61
src/components/GameHeader.vue Normal file
View File

@ -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>

77
src/components/GameWindow.vue
View File

@ -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">
<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>
<GameHeader></GameHeader>
<!-- Форма ввода -->
<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>