vue-learning/入门/cli/hello-cli/src/App.vue

<!--
 * @Author: Kane
 * @Date: 2022-11-22 17:50:49
 * @LastEditors: Kane
 * @LastEditTime: 2022-12-05 00:52:17
 * @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";

export default {
  name: "App",
  components: { AppBanner },
  methods: {},
};
</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>