diff --git a/src/assets/metal.png b/src/assets/metal.png new file mode 100644 index 0000000..c4d303e Binary files /dev/null and b/src/assets/metal.png differ diff --git a/src/assets/pin.png b/src/assets/pin.png new file mode 100644 index 0000000..753ddf8 Binary files /dev/null and b/src/assets/pin.png differ diff --git a/src/components/BeltBlock.vue b/src/components/BeltBlock.vue index 97dfd64..e202133 100644 --- a/src/components/BeltBlock.vue +++ b/src/components/BeltBlock.vue @@ -1,14 +1,38 @@ diff --git a/src/components/BeltMiniBlock.vue b/src/components/BeltMiniBlock.vue index ae955b4..4bf6a5f 100644 --- a/src/components/BeltMiniBlock.vue +++ b/src/components/BeltMiniBlock.vue @@ -1,14 +1,29 @@ diff --git a/src/components/GameWindow.vue b/src/components/GameWindow.vue index e972a7c..6f396c1 100644 --- a/src/components/GameWindow.vue +++ b/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(() => {
-
-
- - +
+ + {{ team.name }} +
-
@@ -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 { diff --git a/src/components/MetalPlate.vue b/src/components/MetalPlate.vue new file mode 100644 index 0000000..0f29737 --- /dev/null +++ b/src/components/MetalPlate.vue @@ -0,0 +1,58 @@ + + + + +