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