114 lines
4.7 KiB
Vue
114 lines
4.7 KiB
Vue
<template>
|
||
<v-app>
|
||
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
|
||
<v-card :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
|
||
<v-card-title></v-card-title>
|
||
<v-card-text class="h-100 d-flex flex-column align-center justify-center">
|
||
<div class="d-flex flex-column align-center justify-center main-text">
|
||
<p class="text-h1 ma-10">Юрий говорит:</p>
|
||
<p class="text-h2 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
|
||
</div>
|
||
<div class="d-flex align-center justify-center">
|
||
<v-btn
|
||
variant="elevated"
|
||
color="#94BBE9FF"
|
||
@click="reloadPhrase"
|
||
class="ma-10">
|
||
Другая фраза
|
||
</v-btn>
|
||
<a
|
||
v-if="currentPhrase === phrases[23]"
|
||
href="/download/basya_answer.docx"
|
||
class="ma-10">
|
||
<v-btn variant="elevated">Инструкция</v-btn>
|
||
</a>
|
||
</div>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-sheet>
|
||
</v-app>
|
||
</template>
|
||
|
||
<script>
|
||
import {ref} from 'vue';
|
||
export default {
|
||
name: "Basya",
|
||
data: () => ({
|
||
phrases: [
|
||
'Доброе утро. С проблемой боремся.',
|
||
'Авария у провайдера, сроков на данный момент нет, разбираются',
|
||
'Перегрузите страницу, все должно работать',
|
||
'Доброе утро, смотрим',
|
||
'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
|
||
'Коллеги, пробуйте',
|
||
'Коллеги, проблема массовая, разбираемся',
|
||
'Попробуйте сейчас',
|
||
'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
|
||
'Коллеги, занимаемся проблемой',
|
||
'По срокам пока сказать не могу',
|
||
'Добрый день. Разбираемся',
|
||
'Перепроверьте услуги',
|
||
'Обновите страницу ctrl+f5',
|
||
'Коллеги минуту, разбираемся',
|
||
'скиньте скриншот',
|
||
'Коллеги, проблема массовая, решается',
|
||
'Подождите еще',
|
||
'Коллеги, разбираемся',
|
||
'Работаем',
|
||
'Коллеги, проблема массовая. Ожидайте сигнала.',
|
||
'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
|
||
'Коллеги, проблема общая. Сейчас решаем вопрос.',
|
||
'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
|
||
],
|
||
currentPhrase: ref()
|
||
}),
|
||
methods: {
|
||
reloadPhrase(){
|
||
let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
|
||
if (newPhrase === this.currentPhrase){
|
||
this.reloadPhrase();
|
||
} else {
|
||
this.currentPhrase = newPhrase;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.reloadPhrase();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
.bg-gradient {
|
||
background: rgb(238, 174, 202)!important;
|
||
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;;
|
||
/*
|
||
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
|
||
background-size: 200% 200%;
|
||
animation: gradient 15s ease infinite;
|
||
height: 100vh;
|
||
*/
|
||
}
|
||
|
||
.main-sheet-bg {
|
||
background-color: #424242;
|
||
color: #E0E0E0;
|
||
text-decoration-color: #E0E0E0;
|
||
}
|
||
|
||
.main-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.vertical-center {
|
||
justify-content: center;
|
||
/* -ms-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
|
||
transform: translateY(-50%);
|
||
*/
|
||
}
|
||
|
||
</style>
|