update design

This commit is contained in:
Владимир Фёдоров 2026-03-31 14:55:32 +07:00
parent 980bdd0bdc
commit 81151ec4a6
3 changed files with 34 additions and 17 deletions

View File

@ -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;

View File

@ -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>

View File

@ -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;
}