通用后台模板结构 

  1 <section class="containerCon outer">
  2         <aside class="aside asideLeft" data-toggle="open">
  3             <header class="header leftTitle">Header</header>
  4             <div class="asideCon">
  5                 <ul>
  6                     <li v-for="i in 100" :key="i">{{ i }}</li>
  7                 </ul>
  8             </div>
  9         </aside>
 10         <section class="containerCon is-vertical" style="height:100%;">
 11             <header class="header" style="display: flex;align-items: center;">
 12                 <div style="flex: 1;">
 13                     Header
 14                 </div>
 15             </header>
 16             <main class="main">
 17                 main区
 18                 <ul>
 19                     <li v-for="i in 100" :key="i">{{ i }}</li>
 20                 </ul>
 21             </main>
 22             <footer class="footer">Footer</footer>
 23         </section>
 24     </section>
 25 <style scoped>
 26 .header,.footer {
 27     background-color:#dcebff;
 28     color:#333;
 29     text-align:center;
 30     height:60px;
 31     line-height:60px;
 32     flex-shrink:0;
 33     border-bottom:1px solid rgb(179 192 209 / 50%);
 34 }
 35 .header {
 36     box-sizing:border-box;
 37 }
 38 .footer {
 39     padding:0 20px;
 40     border-top:1px solid rgb(179 192 209 / 50%);
 41     background-color:#B3C0D1;
 42 }
 43 .containerCon {
 44     display:flex;
 45     flex-direction:row;
 46     flex:1;
 47     flex-basis:auto;
 48     box-sizing:border-box;
 49     min-width:0;
 50 }
 51 .containerCon.outer {
 52     position:absolute;
 53     left:0;
 54     top:0;
 55     right:0;
 56     bottom:0;
 57     overflow:hidden;
 58 }
 59 .aside {
 60     width:300px;
 61     background-color:#f5faff;
 62     transition:all .5s;
 63     display:flex;
 64     flex-basis:auto;
 65     box-sizing:border-box;
 66     min-width:0;
 67     border-right:1px solid rgb(179 192 209 / 50%);
 68 }
 69 .containerCon.is-vertical,.aside.asideLeft {
 70     flex-direction:column;
 71 }
 72 .main {
 73     /* background-color:#E9EEF3;
 74     */
 75     color:#333;
 76     /* padding:0 0 0 16px;*/
 77      overflow:auto;
 78     flex:1;
 79 }
 80 .asideCon {
 81     /* background-color:#E9EEF3;
 82     */
 83     color:#333;
 84     padding:16px;
 85     overflow:auto;
 86     flex:1;
 87 }
 88 
 89 ::-webkit-scrollbar {
 90     /*滚动条整体样式*/
 91     width:10px;
 92     /*高宽分别对应横竖滚动条的尺寸*/
 93     height:1px;
 94 }
 95 ::-webkit-scrollbar-thumb {
 96     /*滚动条里面小方块*/
 97     border-radius:10px;
 98     box-shadow:inset 0 0 5px rgba(0,0,0,0.15);
 99     background:#b3c0d1;
100 }
101 ::-webkit-scrollbar-track {
102     /*滚动条里面轨道*/
103   box-shadow:inset 0 0 5px rgba(0,0,0,0.15);
104     border-radius:10px;
105     background:#ededed;
106 }
107 </style>

示例图片：

 

posted @ 2022-04-05 01:22  芳香四溢713051  阅读(26)  评论(0)  编辑  收藏  举报