58 lines
990 B
Vue
58 lines
990 B
Vue
<script setup lang="ts">
|
|
import RobotViewport from './components/RobotViewport.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="row-container">
|
|
<div class="box box1"></div>
|
|
<div class="box box2">
|
|
<RobotViewport />
|
|
</div>
|
|
<div class="box box3"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
align-items: start;
|
|
width: 100vw;
|
|
height: calc(100vh - 1.5rem);
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.row-container {
|
|
width: 100vw;
|
|
max-height: 100%;
|
|
flex-shrink: 1;
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.box1 {
|
|
background-color: pink;
|
|
width: 3.5rem;
|
|
}
|
|
|
|
.box2 {
|
|
background-color: lightblue;
|
|
aspect-ratio: 3/2;
|
|
max-width: calc(150vh - 13.5rem);
|
|
max-height: calc((100vw - 13.5) * 2 / 3);
|
|
flex-grow: 2;
|
|
}
|
|
|
|
.box3 {
|
|
flex-grow: 1;
|
|
min-width: 10rem;
|
|
max-width: 20rem;
|
|
background-color: darkblue;
|
|
}
|
|
</style>
|