104 lines
3.9 KiB
Vue
104 lines
3.9 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">
|
|
<v-skeleton-loader type="text" v-if="fetching"></v-skeleton-loader>
|
|
<div v-if="!fetching">
|
|
<div class="d-flex flex-column align-center justify-center main-text">
|
|
<p class="text-h4 text-xl-h1 text-md-h2 text-sm-h3 ma-10">Юрий говорит:</p>
|
|
<p class="text-h5 text-xl-h2 text-md-h3 text-sm-h4 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
|
|
</div>
|
|
<div class="d-flex align-center justify-center flex-column">
|
|
<v-btn
|
|
variant="elevated"
|
|
color="#94BBE9FF"
|
|
@click="reloadPhrase"
|
|
class="ml-10 mr-10 mt-3 mb-3">
|
|
Другая фраза
|
|
</v-btn>
|
|
<a
|
|
v-if="currentPhrase === secret"
|
|
href="/download/basya_answer.docx"
|
|
class="ml-10 mr-10 mt-3 mb-3">
|
|
<v-btn variant="elevated">Инструкция</v-btn>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-sheet>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
import {ref} from 'vue';
|
|
import {useBasyaStore} from "../../stores/basya.js";
|
|
|
|
export default {
|
|
name: "Basya",
|
|
data: () => ({
|
|
secret: 'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции',
|
|
phrases: ref(),
|
|
fetching: true,
|
|
currentPhrase: ref(),
|
|
winWidth: ref(document.documentElement.clientWidth),
|
|
// size: ref(),
|
|
isLess: false,
|
|
basyaStore: useBasyaStore()
|
|
}),
|
|
methods: {
|
|
reloadPhrase(){
|
|
let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)].phrase;
|
|
if (newPhrase === this.currentPhrase){
|
|
this.reloadPhrase();
|
|
} else {
|
|
this.currentPhrase = newPhrase;
|
|
}
|
|
},
|
|
onResize(e) {
|
|
this.winWidth = ref(document.documentElement.clientWidth);
|
|
console.log(this.winWidth.value);
|
|
}
|
|
},
|
|
mounted() {
|
|
this.basyaStore.getPhrases().then(()=>{
|
|
this.phrases = this.basyaStore.phrases;
|
|
this.reloadPhrase();
|
|
this.fetching = false;
|
|
})
|
|
this.isLess = ref(this.winWidth.value <= 600 ? 'flex-column' : '');
|
|
/*
|
|
this.size = this.winWidth <= 600 ? 'x-small' :
|
|
this.winWidth > 600 && this.winWidth <= 960 ? 'small' :
|
|
this.winWidth > 960 && this.winWidth <= 1280 ? '' :
|
|
this.winWidth > 1280 && this.winWidth <= 1920 ? 'large' :
|
|
this.winWidth > 1920 ? 'x-large' : '';
|
|
*/
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.main-sheet-bg {
|
|
background-color: #424242;
|
|
color: #E0E0E0;
|
|
text-decoration-color: #E0E0E0;
|
|
}
|
|
|
|
.main-text {
|
|
text-align: center;
|
|
}
|
|
|
|
.vertical-center {
|
|
justify-content: center;
|
|
}
|
|
</style>
|