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

update welcome window

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-03-24 14:55:51 +07:00
parent 39928b2615
commit c8dbce1462
5 changed files with 125 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MessageCloud.vue
+26 -75
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import type { Action } from './models';
import { apiLetsgo } from './client';
import MessagePaper from './MessagePaper.vue';
interface Props {
action: Action
@@ -26,95 +27,45 @@ async function letsgo(place: string) {
</script>
<template>
<div class="main">
<div class="message-cloud-3"></div>
<div class="message-cloud-2"></div>
<div class="message-cloud">
<div class="message-header">
{{ props.action.place }}: {{ props.action.name }}
<span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
<MessagePaper>
<div class="message-header">
{{ props.action.place }}: {{ props.action.name }}
<span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
</div>
<div v-show="props.action.isOpen">
<hr class="hr" />
<div class="message-content">
<div v-if="props.action.image.length">
<div class="message-image-border">
<img v-bind:src="props.action.image" class="message-image" />
</div>
</div>{{ props.action.text }}
</div>
<div v-show="props.action.isOpen">
<hr class="hr" />
<div class="message-content">
<div v-if="props.action.image.length">
<div class="message-image-border">
<img v-bind:src="props.action.image" class="message-image" />
</div>
</div>{{ props.action.text }}
</div>
<div v-if="index == count - 1">
<hr class="hr" v-if="props.action.buttons?.length" />
<div v-for="door in props.action.buttons" :key="door.code" class="button-dialog"
v-on:click="letsgo(door.code)" :disabled="gameState !== 'RUN' || !door.show">
<div class="button-dialog-text">
{{ door.name }}
</div>
<div v-if="index == count - 1">
<hr class="hr" v-if="props.action.buttons?.length" />
<div v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)"
:disabled="gameState !== 'RUN' || !door.show">
<div class="button-dialog-text">
{{ door.name }}
</div>
</div>
<hr class="hr" v-if="props.action.applications.length" />
<div class="message-footer" v-for="application in props.action.applications" :key="application.name">
Приложение: {{ application.name }}
<div class="application-label">{{ application.number }}</div>
</div>
</div>
<hr class="hr" v-if="props.action.applications.length" />
<div class="message-footer" v-for="application in props.action.applications" :key="application.name">
Приложение: {{ application.name }}
<div class="application-label">{{ application.number }}</div>
</div>
</div>
</div>
</MessagePaper>
</template>
<style scoped>
.main {
position: relative;
}
.hr {
margin: 10px 0;
border: dashed 1px;
border-color: black;
}
.message-cloud {
margin: 15px 0;
padding: 16px;
font-family: main;
color: black;
line-height: 20px;
font-size: 18px;
font-weight: 900;
position: relative;
}
.message-cloud,
.message-cloud-2,
.message-cloud-3 {
border-radius: 5px;
background-image: url("@/assets/paper.jpg");
background-size: cover;
display: flow-root;
box-shadow: 0px 0 5px black;
}
.message-cloud-2,
.message-cloud-3 {
position: absolute;
top: 0;
left: 0;
}
.message-cloud-2 {
transform: rotate(-3deg);
filter: brightness(50%);
height: 100%;
width: 100%;
}
.message-cloud-3 {
transform: rotate(2deg);
filter: brightness(80%);
height: 100%;
width: 100%;
}
.message-header {
font-size: 20px;
}
src/components/MessagePaper.vue
+61
View File
@@ -0,0 +1,61 @@
<script setup lang="ts">
/* код */
</script>
<template>
<div class="main">
<div class="message-cloud-3"></div>
<div class="message-cloud-2"></div>
<div class="message-cloud">
<slot></slot>
</div>
</div>
</template>
<style scoped>
.main {
position: relative;
}
.message-cloud {
margin: 15px 0;
padding: 16px;
font-family: main;
color: black;
line-height: 20px;
font-size: 18px;
font-weight: 900;
position: relative;
}
.message-cloud,
.message-cloud-2,
.message-cloud-3 {
border-radius: 5px;
background-image: url("@/assets/paper.jpg");
background-size: cover;
display: flow-root;
box-shadow: 0px 0 5px black;
}
.message-cloud-2,
.message-cloud-3 {
position: absolute;
top: 0;
left: 0;
}
.message-cloud-2 {
transform: rotate(-3deg);
filter: brightness(50%);
height: 100%;
width: 100%;
}
.message-cloud-3 {
transform: rotate(2deg);
filter: brightness(80%);
height: 100%;
width: 100%;
}
</style>
src/components/WelcomeGameBlock.vue
+21 -9
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';
import MessagePaper from './MessagePaper.vue';
interface QROptions {
width?: number;
@@ -15,7 +16,7 @@ const qrOptions = ref<QROptions>({
margin: 1,
color: {
dark: '#303030',
light: 'f0f0f0'
light: 'none'
}
});
@@ -29,15 +30,17 @@ const props = withDefaults(defineProps<Props>(), {})
<template>
<div>
<div class="qr">
<div>
{{ team }}
<MessagePaper>
<div class="qr">
<div class="team-name">
{{ team }}
</div>
<VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
<div class="message">
Пора решать загадку
</div>
</div>
<VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
<div>
Пора решать загадку
</div>
</div>
</MessagePaper>
</div>
</template>
@@ -46,4 +49,13 @@ const props = withDefaults(defineProps<Props>(), {})
text-align: center;
width: 200px;
}
.team-name {
margin: 10px 0;
font-size: 20px;
}
.message {
margin: 7px 0;
}
</style>