84 lines
2.7 KiB
Vue
84 lines
2.7 KiB
Vue
<template>
|
||
<div class="d-flex justify-end align-center">
|
||
<v-table class="main-sheet-bg text-xxl-h6 text-xl-body-1 text-lg-body-1 text-md-body-1 text-sm-body-1 text-caption pl-5" :class="[this.isMore700 ? this.isWide ? 'w-25' : 'w-66' : 'w-100']" style="text-align: left">
|
||
<tbody>
|
||
<tr>
|
||
<td><v-icon :icon="`mdi-account`"></v-icon>Возраст</td>
|
||
<td>{{ personalData.age }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td><v-icon :icon="`mdi-city`"></v-icon>Город</td>
|
||
<td>{{ personalData.location }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td><v-icon :icon="`mdi-at`"></v-icon>E-mail</td>
|
||
<td>{{ personalData.email }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td><v-icon :icon="`mdi-phone`"></v-icon>Телефон</td>
|
||
<td>{{ personalData.phoneNumber }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</v-table>
|
||
<div v-if="this.isMore700" class="w-33">
|
||
<v-img class="image-gradient" src="./images/resume.png"></v-img>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "PersonalInfo",
|
||
data: () => ({
|
||
personalData: {
|
||
age: '25 лет',
|
||
location: 'г. Иркутск',
|
||
email: 'belezov.pavel@mail.ru',
|
||
phoneNumber: '+7-914-919-21-17'
|
||
},
|
||
windowHeight: document.documentElement.clientHeight,
|
||
windowWidth: document.documentElement.clientWidth,
|
||
isWide: window.innerWidth > 1920,
|
||
isMore700: window.innerWidth > 700,
|
||
tableClass: 'w-25'
|
||
}),
|
||
created() {
|
||
window.addEventListener("resize", this.myEventHandler);
|
||
},
|
||
mounted() {
|
||
this.myEventHandler();
|
||
window.addEventListener("resize", this.myEventHandler, { passive: true });
|
||
},
|
||
methods: {
|
||
myEventHandler(e) {
|
||
this.windowHeight = document.documentElement.clientHeight;
|
||
this.windowWidth = document.documentElement.clientWidth;
|
||
if (this.windowWidth < 1750){
|
||
this.isWide = false;
|
||
this.tableClass = 'w-66';
|
||
} else {
|
||
this.isWide = true;
|
||
this.tableClass = 'w-33';
|
||
}
|
||
if (this.windowWidth < 700){
|
||
this.isMore700 = false;
|
||
} else {
|
||
this.isMore700 = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.main-sheet-bg {
|
||
background-color: #424242;
|
||
color: #E0E0E0;
|
||
text-decoration-color: #E0E0E0;
|
||
}
|
||
|
||
.image-gradient {
|
||
mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
|
||
}
|
||
</style>
|