<template>
|
<div id="userLayout" :class="['user-layout-wrapper', device]">
|
<div class="videocontainer">
|
<video muted class="fullscreenvideo" src="@/assets/img/bigdata/bgvideo.mp4" autoplay loop></video>
|
<img class="" src="@/assets/img/bigdata/videomodel.png" alt="" />
|
</div>
|
<div class="container">
|
<route-view></route-view>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import RouteView from '@/components/layouts/RouteView'
|
import { mixin, mixinDevice } from '@tievd/cube-block/lib/utils/mixin.js'
|
|
export default {
|
name: 'UserLayout',
|
|
components: {
|
RouteView,
|
},
|
|
mixins: [mixinDevice, mixin],
|
|
data() {
|
return {}
|
},
|
|
mounted() {
|
document.body.classList.add('userLayout')
|
},
|
|
beforeDestroy() {
|
document.body.classList.remove('userLayout')
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.videocontainer {
|
position: fixed;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
z-index: -100;
|
top: 0;
|
left: 0;
|
}
|
|
.videocontainer:before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
display: block;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
}
|
|
.fullscreenvideo {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
min-width: 100%;
|
min-height: 100%;
|
width: auto;
|
height: auto;
|
z-index: -100;
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
-webkit-transition: 1s opacity;
|
transition: 1s opacity;
|
}
|
#userLayout.user-layout-wrapper {
|
height: 100%;
|
|
&.mobile {
|
.container {
|
.main {
|
max-width: 368px;
|
width: 98%;
|
}
|
}
|
}
|
|
.container {
|
width: 100%;
|
min-height: 100%;
|
// background: @body-background url(~@/assets/img/background.svg) no-repeat 50%;
|
// background-size: 100%;
|
padding: 110px 0 144px;
|
position: relative;
|
|
a {
|
text-decoration: none;
|
}
|
|
.main {
|
min-width: 260px;
|
width: 368px;
|
margin: 0 auto;
|
}
|
}
|
}
|
|
// .change-background-image() when (@theme = dark) {
|
// #userLayout.user-layout-wrapper .container {
|
// color: @theme;
|
// background-image: url(~@/assets/img/tybackground.jpg);
|
// }
|
// }
|
// .change-background-image();
|
</style>
|
