<template>
|
<div class="wrapper-container">
|
<div class="wrapper-content">
|
<div class="left-container wrapper">
|
<screen-face></screen-face>
|
</div>
|
<div class="center-container wrapper">
|
<screen-detection></screen-detection>
|
</div>
|
<div class="right-container wrapper">
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ScreenFace from '../screen-face/index';
|
import ScreenDetection from '../screen-detection/index';
|
export default {
|
name: 'ScreenWrapper',
|
components: {
|
ScreenFace,
|
ScreenDetection
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.wrapper-container {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 1;
|
.wrapper-content {
|
width: 100%;
|
height: calc(100% - 100px);
|
margin-top: 100px;
|
border: 1px solid red;
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.wrapper {
|
width: 33.3%;
|
height: 100%;
|
box-sizing: border-box;
|
padding: 0 10px;
|
border: 1px solid red;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
&:first-of-type {
|
padding-left: 0;
|
}
|
&:last-of-type {
|
padding-right: 0;
|
}
|
}
|
</style>
|
