technique_admin/src/layout/index.vue

<template>
  <el-container class="layout-container-demo">
    <el-aside width="210px" :style="{ 'background-color': '#304156' }">
      <component :is="cAside"></component>
    </el-aside>
    <el-main>
      <div class="content-box">
        <el-col :span="24" class="content">
          <transition name="move" mode="out-in">
            <el-row>
              <el-col :span="24" class="header">
                <component :is="cHeader"></component>
              </el-col>
              <el-col :span="24" class="crumb">
                <component :is="tagsBar"></component>
              </el-col>
              {{ pagesLoading }}
              <el-col :span="24" class="container" :style="{ padding: '10px' }">
                <router-view :style="viewStyle"></router-view>
              </el-col>
            </el-row>
          </transition>
          <el-backtop target=".content"></el-backtop>
        </el-col>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
// 组件
import cHeader from './parts/Header.vue'
import cAside from './parts/Sidebar.vue'
import tagsBar from './parts/Tagsbar.vue'
const viewStyle = ref({
  height: '81.5vh',
  background: '#ffffff',
  'overflow-x': 'hidden',
  'overflow-y': 'auto',
  border: '1px solid #f0f0f0',
  padding: '10px'
})
</script>

<style scoped lang="scss">
.layout-container-demo {
  height: 100%;
  width: 100%;

  .el-header {
    padding: 0;
  }

  .el-main {
    padding: 0;
    background-color: #f0f0f0;
  }
}
</style>