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

update editor

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-24 19:18:38 +07:00
parent 16a107827a
commit 91ac1a43c8
8 changed files with 302 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/assets/index-BlF9CL1O.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-Brba20IB.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-BLlCl_NS.js → dist/assets/index-CjBYIuuQ.js
Vendored
+173 -173
View File
File diff suppressed because one or more lines are too long
dist/index.html
Vendored
+2 -2
View File
@@ -5,8 +5,8 @@
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вечерний детектив</title>
<script type="module" crossorigin src="/assets/index-BLlCl_NS.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Brba20IB.css">
<script type="module" crossorigin src="/assets/index-CjBYIuuQ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BlF9CL1O.css">
</head>
<body>
<div id="app"></div>
src/assets/base.css
+8 -1
View File
@@ -15,6 +15,13 @@
--vt-c-text-light-2: rgb(60 60 60 / 66%);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgb(235 235 235 / 64%);
/* Главный цвет */
--main-color: rgba(34, 50, 60, 1);
/* --second-color: rgb(97, 74, 22); */
--second-color: burlywood;
--main-back-color: rgba(240, 240, 240, 1);
--main-back-item-color: rgba(254, 254, 254, 1);
}
/* semantic color variables for this project */
@@ -74,4 +81,4 @@ body {
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
src/assets/images/paper.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

src/components/MessagePaper.vue
+65
View File
@@ -0,0 +1,65 @@
<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, .message-cloud-2, .message-cloud-3 {
background-color: bisque;
}
.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/images/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/PlaceBlock.vue
+53 -11
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger, NButton } from 'naive-ui'
import type { PropType } from 'vue'
import { LockOutlined } from '@vicons/material'
import { Icon } from '@vicons/utils'
@@ -86,7 +86,10 @@ function onCreateKey(): Key {
</div>
<div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
<p>[{{ props.place.code }}] - {{ props.place.name }}</p>
<div class="message-header">
{{ props.place.code }}: {{ props.place.name }}
</div>
<hr class="hr" />
<div class="message-content">
<div v-if="props.place.image">
<div class="message-image-border">
@@ -104,7 +107,9 @@ function onCreateKey(): Key {
</span>
</div>
<div v-for="application in props.place.applications" v-bind:key="application.name" class="application-block">
<hr class="hr" v-if="props.place.applications.length" />
<div class="message-footer application-block" v-for="application in props.place.applications"
v-bind:key="application.name">
Приложение: {{ application.name }}
</div>
@@ -130,14 +135,26 @@ function onCreateKey(): Key {
placeholder="В начале было слово..." />
<p class="settings-header">Картинка</p>
<n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
<n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
<n-upload-dragger>
<n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки
</n-text>
</n-upload-dragger>
</n-upload>
<div>
<n-space>
<n-space vertical>
<img :src="props.place.image" class="message-edit-image">
<n-button @click="props.place.image = '', props.place.fileList = null">Убрать картинку</n-button>
</n-space>
<n-space vertical>
<n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
<n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
<n-upload-dragger>
<n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки
</n-text>
</n-upload-dragger>
</n-upload>
</n-space>
</n-space>
</div>
<p class="settings-header">Видимость точки</p>
<n-switch v-model:value="props.place.hidden">
<template #checked>
Скрытая точка
@@ -210,6 +227,13 @@ function onCreateKey(): Key {
</template>
<style scoped>
.hr {
margin: 10px 0;
border: dashed 1px;
/* border-color: black; */
border-color: #eee;
}
.place-block-hover,
.place-block {
margin: 10px 0;
@@ -234,6 +258,7 @@ function onCreateKey(): Key {
}
.message-content {
font-weight: 500;
white-space: pre-wrap;
}
@@ -316,4 +341,21 @@ function onCreateKey(): Key {
.message-image {
width: 100%;
}
.message-edit-image {
width: 135px;
height: 135px;
}
.message-header {
font-size: 20px;
padding-right: 50px;
}
.message-footer {
padding-right: 50px;
font-weight: 400;
color: var(--second-color);
position: relative;
}
</style>