diff --git a/src/assets/belt.png b/src/assets/belt.png new file mode 100644 index 0000000..e3267c8 Binary files /dev/null and b/src/assets/belt.png differ diff --git a/src/assets/belt_mini.png b/src/assets/belt_mini.png new file mode 100644 index 0000000..b21ae73 Binary files /dev/null and b/src/assets/belt_mini.png differ diff --git a/src/assets/logo_belt.png b/src/assets/logo_belt.png new file mode 100644 index 0000000..7b43417 Binary files /dev/null and b/src/assets/logo_belt.png differ diff --git a/src/assets/main.css b/src/assets/main.css index 29130ac..9fe9b3e 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -13,7 +13,7 @@ .input-custom { width: 100%; box-sizing: border-box; /* обязательно! */ - margin-bottom: 15px; + margin-right: 15px; } .button-custom { diff --git a/src/components/BeltBlock.vue b/src/components/BeltBlock.vue new file mode 100644 index 0000000..97dfd64 --- /dev/null +++ b/src/components/BeltBlock.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/src/components/BeltMiniBlock.vue b/src/components/BeltMiniBlock.vue new file mode 100644 index 0000000..ae955b4 --- /dev/null +++ b/src/components/BeltMiniBlock.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue index eddc839..f628908 100644 --- a/src/components/GameWindow.vue +++ b/src/components/GameWindow.vue @@ -3,6 +3,8 @@ 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'; const router = useRouter(); const route = useRoute(); @@ -207,27 +209,28 @@ onMounted(() => {
- -
- Вечерний детектив - {{ team.name }} +
+
+ + + + + +
-
+
-
+
-
-
-
{{ gameStateText }}
-
+
@@ -295,11 +298,6 @@ body { padding-left: 15px; } -.logo { - float: left; - margin: 10px; -} - .logo-right { float: right; margin: 12px; @@ -311,7 +309,6 @@ body { .form-custom { border: 1px solid #444444; - background-color: var(--main-back-color); position: fixed; bottom: 0; left: 0; @@ -352,10 +349,6 @@ body { color: var(--second-color); } -.form-block { - height: 140px; -} - .messages-block { height: calc(100dvh - 140px - 60px); overflow-y: auto; @@ -403,4 +396,49 @@ body { border-radius: 4px; font-size: medium; } + +.belt-mini-block { + height: 30px; + width: 100%; + position: absolute; + top: 0; +} + +.controller { + display: flex; +} + +.game-header-empty-block { + height: 5px; +} + +.game-header-belt-mini { + height: 30px; + position: relative; + z-index: 10; +} + +.game-header-belt { + height: 60px; + position: relative; + top: -5px; + z-index: 1; +} + +.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; +}