generated from VLADIMIR/template_frontend
update design
This commit is contained in:
parent
980bdd0bdc
commit
81151ec4a6
@ -61,7 +61,7 @@
|
|||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background: #eee;
|
background: #ccc;
|
||||||
transition:
|
transition:
|
||||||
color 0.5s,
|
color 0.5s,
|
||||||
background-color 0.5s;
|
background-color 0.5s;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import { apiGetDays } from './client';
|
import { apiGetDays } from './client';
|
||||||
import type { Schedule } from './models';
|
import type { Schedule } from './models';
|
||||||
import { formatRussianDate, formatTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
|
import { formatRussianDate, cleanTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
|
||||||
import { capitalizeFirstLetter } from './text';
|
import { capitalizeFirstLetter } from './text';
|
||||||
|
|
||||||
const schedule = ref<Schedule>({ updateTime: "", days: [] })
|
const schedule = ref<Schedule>({ updateTime: "", days: [] })
|
||||||
@ -17,12 +17,13 @@ onMounted(async () => {
|
|||||||
<div>
|
<div>
|
||||||
<div v-for="day in schedule.days" :key="day.date" class="day-block">
|
<div v-for="day in schedule.days" :key="day.date" class="day-block">
|
||||||
{{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
|
{{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
|
||||||
<span v-if="getRelativeDayName(day.date) !== ''">({{ getRelativeDayName(day.date) }})</span>
|
<span v-if="getRelativeDayName(day.date) !== ''" class="relative-day-name">{{ getRelativeDayName(day.date)
|
||||||
|
}}</span>
|
||||||
<div v-for="(performance, index) in day.performances" :key="performance.name" class="performance-block">
|
<div v-for="(performance, index) in day.performances" :key="performance.name" class="performance-block">
|
||||||
<hr v-if="index > 0" class="hr">
|
<hr v-if="index > 0" class="hr">
|
||||||
<div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'"
|
<div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'"
|
||||||
class="time-collection-block">
|
class="time-collection-block">
|
||||||
Сбор: {{ formatTime(performance.timeCollection) }}
|
Сбор: {{ cleanTime(performance.timeCollection) }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
Время:
|
Время:
|
||||||
@ -55,16 +56,18 @@ onMounted(async () => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.day-block {
|
.day-block {
|
||||||
border: solid 2px #000058;
|
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time-collection-block {
|
.time-collection-block {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
line-height: 25px;
|
||||||
|
margin: 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.place-block {
|
.place-block {
|
||||||
@ -84,4 +87,12 @@ onMounted(async () => {
|
|||||||
.hr {
|
.hr {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.relative-day-name {
|
||||||
|
background-color: #70e5ff;
|
||||||
|
padding: 3px 10px 6px 10px;
|
||||||
|
border-radius: 15px;
|
||||||
|
float: right;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -149,18 +149,6 @@ export function timeAgo(goDateStr: string): string {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatTime(timeStr: string): string {
|
|
||||||
if (!timeStr) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
return timeStr
|
|
||||||
// 1. Убираем абсолютно все пробелы (включая табы и неразрывные пробелы)
|
|
||||||
.replace(/\s+/g, "")
|
|
||||||
// 2. Заменяем все точки на двоеточия
|
|
||||||
.replace(/\./g, ":");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function formatTimeRange(text: string): string {
|
export function formatTimeRange(text: string): string {
|
||||||
if (!text) {
|
if (!text) {
|
||||||
return "";
|
return "";
|
||||||
@ -185,3 +173,21 @@ export function formatTimeRange(text: string): string {
|
|||||||
.trim();
|
.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function cleanTime(text: string): string {
|
||||||
|
if (!text) return text;
|
||||||
|
|
||||||
|
// Ищем шаблон: 1-2 цифры, затем [двоеточие или точка] с возможными пробелами, затем 2 цифры
|
||||||
|
const match = text.match(/\d{1,2}\s*[:.]\s*\d{2}/);
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
// Берем найденный кусок (например, "8. 00")
|
||||||
|
const extractedTime = match[0];
|
||||||
|
|
||||||
|
// Удаляем все пробелы и заменяем точку на двоеточие
|
||||||
|
return extractedTime.replace(/\s+/g, '').replace('.', ':');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Если время не найдено, возвращаем исходный текст
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user