效果图
    image.png

    代码实现：
    image.png

    1. .el-table tr{
    2.   background-color: rgba(0,0,0,0) !important;
    3. }
    4. .el-table tr th{
    5.   background-color: rgba(0,0,0,0) !important;
    6. }
    7. /* 去掉鼠标悬浮效果 */
    8. .el-table tbody tr:hover > td {
    9.   background-color: rgba(255,255,255,0.75) !important;
    10. }
    12. .el-table{
    13.   background-color: rgba(0,0,0,0) !important;
    14. }
    16. .el-tabs--border-card{
    17.   background-color: rgba(0,0,0,0) !important;
    18. }
    20. .el-card{
    21.   background-color: rgba(0,0,0,0) !important;
    22.  }

    image.png

    1. <template>
    2.   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    3.     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    4.     <sidebar class="sidebar-container"/>
    6.     <div :class="{hasTagsView:needTagsView}" class="main-container" >
    7.       <div style="background-color: white;position: absolute;width: 100%;height: 100%;display: flex;flex-wrap: wrap;overflow: hidden">
    8.         <span style="flex: none; padding: 40px 50px;transform:rotate(-35deg);color: #eeeeee;" v-for="(item,i) in 1000">{{username}}</span>
    9.       </div>
    10.       <div :class="{'fixed-header':fixedHeader}">
    11.         <navbar />
    12.         <tags-view v-if="needTagsView" />
    13.       </div>
    14.       <app-main />
    15.       <right-panel>
    16.         <settings />
    17.       </right-panel>
    18.     </div>
    19.   </div>
    20. </template>
    22. <script>
    23. import RightPanel from '@/components/RightPanel'
    24. import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
    25. import ResizeMixin from './mixin/ResizeHandler'
    26. import { mapState } from 'vuex'
    27. import variables from '@/assets/styles/variables.scss'
    29. export default {
    30.   name: 'Layout',
    31.   components: {
    32.     AppMain,
    33.     Navbar,
    34.     RightPanel,
    35.     Settings,
    36.     Sidebar,
    37.     TagsView
    38.   },
    39.   mixins: [ResizeMixin],
    40.   computed: {
    41.     ...mapState({
    42.       theme: state => state.settings.theme,
    43.       sideTheme: state => state.settings.sideTheme,
    44.       sidebar: state => state.app.sidebar,
    45.       device: state => state.app.device,
    46.       needTagsView: state => state.settings.tagsView,
    47.       fixedHeader: state => state.settings.fixedHeader,
    48.       username:state => state.user.name,
    49.     }),
    50.     classObj() {
    51.       return {
    52.         hideSidebar: !this.sidebar.opened,
    53.         openSidebar: this.sidebar.opened,
    54.         withoutAnimation: this.sidebar.withoutAnimation,
    55.         mobile: this.device === 'mobile'
    56.       }
    57.     },
    58.     variables() {
    59.       return variables;
    60.     }
    61.   },
    62.   methods: {
    63.     handleClickOutside() {
    64.       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    65.     }
    66.   }
    67. }
    68. </script>
    70. <style lang="scss" scoped>
    71.   @import "~@/assets/styles/mixin.scss";
    72.   @import "~@/assets/styles/variables.scss";
    74.   .app-wrapper {
    75.     @include clearfix;
    76.     position: relative;
    77.     height: 100%;
    78.     width: 100%;
    80.     &.mobile.openSidebar {
    81.       position: fixed;
    82.       top: 0;
    83.     }
    84.   }
    86.   .drawer-bg {
    87.     background: #000;
    88.     opacity: 0.3;
    89.     width: 100%;
    90.     top: 0;
    91.     height: 100%;
    92.     position: absolute;
    93.     z-index: 999;
    94.   }
    96.   .fixed-header {
    97.     position: fixed;
    98.     top: 0;
    99.     right: 0;
    100.     z-index: 9;
    101.     width: calc(100% - #{$base-sidebar-width});
    102.     transition: width 0.28s;
    103.   }
    105.   .hideSidebar .fixed-header {
    106.     width: calc(100% - 54px);
    107.   }
    109.   .mobile .fixed-header {
    110.     width: 100%;
    111.   }
    112. </style>

    image.png

    image.png