2025-04-03 20:25:25 +08:00
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<Sidebar />
|
2025-04-09 21:07:15 +08:00
|
|
|
<div class="content ">
|
2025-04-03 20:25:25 +08:00
|
|
|
<RouterView />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import Sidebar from '../components/Sidebar.vue';
|
|
|
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
body,
|
|
|
|
|
html {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
|
display: flex;
|
2025-04-09 21:07:15 +08:00
|
|
|
width: 1600px;
|
|
|
|
|
height: 900px;
|
|
|
|
|
background-color: #338F6A;
|
|
|
|
|
|
2025-04-03 20:25:25 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
|
width: 200px;
|
2025-04-09 21:07:15 +08:00
|
|
|
background-color: #338F6A;
|
2025-04-03 20:25:25 +08:00
|
|
|
padding: 20px;
|
2025-04-09 21:07:15 +08:00
|
|
|
/* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
|
2025-04-03 20:25:25 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content {
|
2025-04-09 21:07:15 +08:00
|
|
|
margin-left: 280px;
|
|
|
|
|
width: 1304px;
|
|
|
|
|
height: 868px;
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
border-radius: 36px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
}
|
2025-04-03 20:25:25 +08:00
|
|
|
|
2025-04-09 21:07:15 +08:00
|
|
|
.center-justify {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
2025-04-03 20:25:25 +08:00
|
|
|
}
|
|
|
|
|
</style>
|