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

fix

Browse Source
This commit is contained in:
Владимир Фёдоров 2026-03-24 02:19:53 +07:00
parent faf6725a99
commit cfb58ca82c
2 changed files with 67 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/GameWindow.vue
View File

@ -168,7 +168,7 @@ onMounted(() => {
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
position: relative; position: relative;
padding: 5px 0 15px 0; padding: 5px 10px 15px 10px;
} }
.center-message { .center-message {

95
src/components/MessageCloud.vue
View File

@ -26,39 +26,47 @@ async function letsgo(place: string) {
</script> </script>
<template> <template>
<div class="message-cloud"> <div class="main">
<div class="message-header"> <div class="message-cloud-3"></div>
{{ props.action.place }}: {{ props.action.name }} <div class="message-cloud-2"></div>
<span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span> <div class="message-cloud">
</div> <div class="message-header">
<div v-show="props.action.isOpen"> {{ props.action.place }}: {{ props.action.name }}
<hr class="hr" /> <span class="collapse-icon" @click="clickCollapse">{{ props.action.isOpen ? '−' : '+' }}</span>
<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>
<div v-if="index == count - 1"> <div v-show="props.action.isOpen">
<hr class="hr" v-if="props.action.buttons?.length" /> <hr class="hr" />
<div v-for="door in props.action.buttons" :key="door.code" class="button-dialog" v-on:click="letsgo(door.code)" <div class="message-content">
:disabled="gameState !== 'RUN' || !door.show"> <div v-if="props.action.image.length">
<div class="button-dialog-text"> <div class="message-image-border">
{{ door.name }} <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> </div>
</div> </div>
</div> <hr class="hr" v-if="props.action.applications.length" />
<hr class="hr" v-if="props.action.applications.length" /> <div class="message-footer" v-for="application in props.action.applications" :key="application.name">
<div class="message-footer" v-for="application in props.action.applications" :key="application.name"> Приложение: {{ application.name }}
Приложение: {{ application.name }} <div class="application-label">{{ application.number }}</div>
<div class="application-label">{{ application.number }}</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.main {
position: relative;
}
.hr { .hr {
margin: 10px 0; margin: 10px 0;
border: dashed 1px; border: dashed 1px;
@ -66,17 +74,45 @@ async function letsgo(place: string) {
} }
.message-cloud { .message-cloud {
/* border-radius: 15px; */ margin: 15px 0;
margin: 12px 10px;
padding: 16px; padding: 16px;
display: flow-root;
background-image: url("@/assets/paper.jpg");
background-size: cover;
font-family: main; font-family: main;
color: black; color: black;
line-height: 20px; line-height: 20px;
font-size: 18px; font-size: 18px;
font-weight: 900; 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 { .message-header {
@ -115,6 +151,7 @@ async function letsgo(place: string) {
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
margin-top: 10px; margin-top: 10px;
margin-right: 10px;
background-image: url("@/assets/belt.png"); background-image: url("@/assets/belt.png");
background-size: cover; background-size: cover;
color: #bfa07d; color: #bfa07d;