120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<v-container fluid class="ma-0 pa-0 full-screen d-flex">
|
|
<img
|
|
src="../assets/images/pipebackground_1.svg"
|
|
style=""
|
|
class="d-flex align-end ma-0 pa-0 new-background-image"
|
|
/>
|
|
<v-container
|
|
fill-height
|
|
class="d-flex align-center"
|
|
style="position: static; z-index: 10;"
|
|
>
|
|
<v-row>
|
|
<v-col class="d-flex justify-center">
|
|
<h1 class="display-2">Playground</h1>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col>
|
|
<h1 class="display-2">Playground</h1>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col>
|
|
<h1 class="display-2">{{ viewportHeight - 64 }}</h1>
|
|
</v-col>
|
|
<v-col>
|
|
<h1 class="display-2">{{ viewportWidth }}</h1>
|
|
</v-col>
|
|
<v-col>
|
|
<h1 class="display-2">{{ backgroundWidth }}</h1>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
viewportHeight: window.innerHeight,
|
|
viewportWidth: window.innerWidth,
|
|
backgroundWidth: "",
|
|
};
|
|
},
|
|
created() {
|
|
window.addEventListener("resize", this.updateHeight);
|
|
window.addEventListener("resize", this.updateWidth);
|
|
this.querySelectorsPlayground();
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener("resize", this.updateHeight);
|
|
window.addEventListener("resize", this.updateWidth);
|
|
},
|
|
mounted() {
|
|
// this.getBackgroundWidth();
|
|
},
|
|
methods: {
|
|
updateHeight() {
|
|
this.viewportHeight = window.innerHeight;
|
|
},
|
|
updateWidth() {
|
|
this.viewportWidth = window.innerWidth;
|
|
},
|
|
getBackgroundWidth() {
|
|
var background = document.querySelector("#backgroundsvg");
|
|
this.backgroundWidth = background.clientWidth;
|
|
},
|
|
querySelectorsPlayground() {
|
|
console.log(document.images);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~vuetify/src/styles/styles.sass";
|
|
$background-width: 795px;
|
|
|
|
.full-screen {
|
|
height: calc(100vh - 64px);
|
|
}
|
|
|
|
img.new-background-image {
|
|
height: calc(100vh);
|
|
width: calc(100vw);
|
|
position: absolute;
|
|
@media screen and (min-width: $background-width) {
|
|
object-fit: scale-down;
|
|
object-position: right;
|
|
}
|
|
@media screen and (max-width: $background-width) {
|
|
object-fit: cover;
|
|
object-position: left;
|
|
}
|
|
@media #{map-get($display-breakpoints, 'md-and-up')} {
|
|
top: -64px;
|
|
}
|
|
@media #{map-get($display-breakpoints, 'sm-and-down')} {
|
|
top: -56px;
|
|
}
|
|
}
|
|
|
|
.background-image {
|
|
position: absolute;
|
|
height: calc(100vh - 64px);
|
|
// width: 100%;
|
|
max-width: 1115px;
|
|
right: 0;
|
|
z-index: 1;
|
|
border-style: dashed;
|
|
object-fit: cover;
|
|
object-position: right top;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|