src/components/layouts/main.vue

@@ -1,96 +1,63 @@
<template>
   <div id="components-layout-basic">
      <a-layout>
         <a-layout-header>Header</a-layout-header>
         <a-layout-header>
            <tag-Header></tag-Header>
         </a-layout-header>
         <a-layout>
            <div class="blog-main">
               <a-row>
                  <a-col v-bind="colApiLeft">
                     <boxLeft></boxLeft>
                  </a-col>
                  <a-col v-bind="colApiMain ">
                     <box5></box5>
                     <box5></box5>
                     <a-pagination v-model="current" :total="50" show-less-items />
                  </a-col>
                  <a-col v-bind="colApiRight">
                     <boxRight></boxRight>
                  </a-col>
               </a-row>
            </div>
            <!-- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider>
            <a-layout-content>Content</a-layout-content>
            <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider> -->
            <router-view class="fade"></router-view>
         </a-layout>
         <a-layout-footer>Footer</a-layout-footer>
         <a-layout-footer>
            <div>
               <p>备案号:
                  <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a>
               </p>
            </div>
         </a-layout-footer>
      </a-layout>
   </div>
</template>

<script>
   import boxLeft from "./boxLeft.vue"
   import boxRight from "./boxRight.vue"
   import box5 from "./box5.vue"
   import tagHeader from "./tag-header.vue"
   export default {
      components: {
         boxLeft,
         boxRight,
         box5
         tagHeader
      },
		
      data() {
         return {
            current: 2,
            sliderApi: {
               collapsible: true, //是否可收起

               collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
            },
            colApiLeft: {
               xs: 0,
               sm: 0,
               md: 0,
               lg: 8,
               xl: 8,
               xxl: 6,
            },
            colApiRight: {
               xs: 0,
               sm: 0,
               md: 0,
               lg: 0,
               xl: 0,
               xxl: 4,
            },
            colApiMain: {
               xs: 24,
               sm: 24,
               md: 24,
               lg: 14,
               xl: 14,
               xxl: 14,
            }
         }
      }

   }
</script>

<style lang="less">
   #components-layout-basic {
      text-align: center;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;

      .ant-layout-header,
      .ant-layout-footer {
         background: #7dbcea;
         color: #fff;
      .ant-layout {}

      .ant-layout-header {
         background-color: #001529;
      }

      .ant-layout-footer {
         line-height: 1.5;
         background-color: #edf1f299;
         padding: 0px;

         p {
            margin: auto;
            color: #757575;
         }

         a {
            opacity: 0.8;
            color: #757575;
         }
      }

      .ant-layout-sider {
@@ -104,14 +71,7 @@
         height: 100%;
      }

      // >.ant-layout {
      //    width: 100%;
      //    min-height: 100%;
      // }

      // >.ant-layout:last-child {
      //    margin: 0;
      // }
   }


@@ -134,7 +94,13 @@
   p {
      font-size: 17px;
      letter-spacing: 0.8px;
      line-height: 30px;
      line-height: 22px;
   }

   .fade {
      -webkit-animation-name: "fade";
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: 1;
   }

   .fadeInLeft {
@@ -147,117 +113,6 @@
      -webkit-animation-name: "fadeInRight";
      -webkit-animation-duration: 1s;
      -webkit-animation-iteration-count: 1;
   }

   .blog-main {
      padding-left: 5%;
      padding-right: 5%;
   }



   /*左右两边的盒子容器*/
   .blog-cell {
      opacity: 0.8;
      padding: 0px 25px 10px;
   }

   /*左边部分*/
   .blog-left-side {
      position: sticky;
      // top: 80px;
      padding-left: 2%;
      /*padding-right: 2%;*/
      z-index: 100;
   }

   /*中间部分*/
   .blog-body {
      padding-top: 10px;
      /*padding-left: 3%;*/
      /*padding-right: 3%;*/
   }

   /*右边部分*/
   .blog-right-side {
      position: sticky;
      top: -19%;
      padding-top: 10px;
      /*padding-left: 2%;*/
      /*padding-right: 2%;*/
      z-index: 100;
   }

   div .blog-right-side-meta div {
      padding-left: 6%;
      padding-right: 6%;
      margin-bottom: 3%;
   }


   /*---------------------
      |   核心盒子构成start   |
      ------- ---------------*/
   .blog-container {
      border-radius: 15px;
      background-color: white;

      line-height: 1.4;
      white-space: nowrap;
      /*规定段落中的文本不进行换行：*/
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      max-height: 300px;
      /*margin-top: 10px;*/
      /*min-height: 200px;*/

      // overflow-x: hidden;
      // overflow-y: overlay;
      // display: block;

      padding-top: 10px;
      padding-bottom: 20px;
      overflow: hidden;


   }

   .show-line {
      border-top: 1px solid #999;
   }

   .blog-scroll {
      padding-top: 10px;
      max-height: 200px;

      overflow-x: hidden;
      overflow-y: overlay;
   }


   .blog-scroll:hover::-webkit-scrollbar {
      display: block;
   }

   .blog-scroll:hover::-webkit-scrollbar {
      display: block;
   }

   .blog-scroll::-webkit-scrollbar {
      width: 5px;
      display: none;
   }

   .blog-scroll::-webkit-scrollbar-thumb {
      background-color: rgba(153, 154, 170, 0.3);
      border-radius: 2px;
   }

   /*margin滚动条上偏移*/
   .blog-scroll::-webkit-scrollbar-track {
      margin-top: 5px;
      margin-bottom: 5px;
   }