85 lines
1.3 KiB
Vue
85 lines
1.3 KiB
Vue
|
<!--
|
||
|
|
* @Author: Kane
|
||
|
|
* @Date: 2022-11-22 17:50:49
|
||
|
|
* @LastEditors: Kane
|
||
|
|
* @LastEditTime: 2022-12-14 10:21:42
|
||
|
|
* @FilePath: \hello-cli\src\App.vue
|
||
|
|
* @Description:
|
||
|
|
*
|
||
|
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div class="banner">
|
||
|
|
<AppBanner>标题</AppBanner>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="nav"></div>
|
||
|
|
<div class="view"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import AppBanner from "./components/AppBanner.vue";
|
||
|
|
// import { reactive } from "vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "App",
|
||
|
|
components: { AppBanner },
|
||
|
|
methods: {},
|
||
|
|
};
|
||
|
|
|
||
|
|
// const data = reactive({
|
||
|
|
// title: "标题",
|
||
|
|
// });
|
||
|
|
|
||
|
|
// return { data };
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
@import url("assets/css/colors.css");
|
||
|
|
|
||
|
|
#app {
|
||
|
|
background-color: #f4f5f7;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
background-color: #fff;
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
min-width: 1280px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banner {
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
/* border: 1px solid red; */
|
||
|
|
height: calc(100% - 50px);
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav {
|
||
|
|
flex: 0 0 200px;
|
||
|
|
background-color: bisque;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.view {
|
||
|
|
flex-grow: 1;
|
||
|
|
flex-shrink: 1;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: auto;
|
||
|
|
background-color: antiquewhite;
|
||
|
|
/* min-width: 800px; */
|
||
|
|
}
|
||
|
|
|
||
|
|
hr {
|
||
|
|
width: 100%;
|
||
|
|
border: 1px solid 1px;
|
||
|
|
}
|
||
|
|
</style>
|