64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<template>
|
|
<v-container fluid class="sub-layout">
|
|
<v-row no-gutters>
|
|
<v-col cols="12" md="8">
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
|
|
<policy-plot/>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-card class="tile" :style="{ height: 'calc(20vh - 24px)', width: '100%' }">
|
|
<weight-tuner/>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%' }">
|
|
<reward-plot/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-row no-gutters>
|
|
<v-col cols="12">
|
|
<v-card class="tile" :style="{ height: 'calc(40vh - 24px)', width: '100%'}">
|
|
<MountainCarCanvas/>
|
|
</v-card>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-card class="tile" :style="{ height: 'calc(60vh - 48px)', width: '100%' }">
|
|
<control-panel/>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import WeightTuner from "@/components/WeightTuner.vue";
|
|
import RewardPlot from "@/components/RewardPlot.vue";
|
|
import PolicyPlot from "@/components/PolicyPlot.vue";
|
|
import ControlPanel from "@/components/ControlPanel.vue";
|
|
import MountainCarCanvas from "@/components/MountainCarCanvas.vue";
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sub-layout{
|
|
padding: 0;
|
|
margin: 1px 0 0 0;
|
|
}
|
|
.tile {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
border: 1px solid #333;
|
|
}
|
|
</style>
|