修改页面样式

yangyin

2024-07-05 a8eec18144b57b95ca5b5295b86e8a793fe6391a

 src/layout/component/main.vue

@@ -1,22 +1,30 @@
<template>
   <el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
   <el-main
      class="layout-main"
      :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`"
   >
      <el-scrollbar
         ref="layoutMainScrollbarRef"
         class="layout-main-scroll layout-backtop-header-fixed"
         wrap-class="layout-main-scroll"
         view-class="layout-main-scroll h100"
         wrap-class="layout-main-scroll  flex"
         view-class="layout-main-scroll bg-[#1c1e1d]  flex h100 w-full"
      >
         <LayoutParentView />
         <!-- <LayoutFooter v-if="isFooter" /> -->
         <SideBar />
         <div class="flex-auto flex-col flex right-container">
            <Header class="flex-0" />
            <LayoutParentView class="flex-auto" />
         </div>
      </el-scrollbar>
      <el-backtop :target="setBacktopClass" />
   </el-main>
</template>

<script setup lang="ts" name="layoutMain">
import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from './header/Header.vue';
import SideBar from './sidebar/Sidebar.vue';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
@@ -63,3 +71,18 @@
   layoutMainScrollbarRef,
});
</script>

<style scoped lang="scss">
.right-container {
   width: 100vw;
   // margin: 0;
   padding: 0;
   overflow: hidden;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background-color: #1c1e1d;
   font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   margin: 6px;
   border-radius: 10px;
}
</style>