src/components/layouts/main2-show.vue

@@ -2,36 +2,32 @@
   <div class="blog-main">
      <a-row>
         <a-col v-bind="colApiLeft">
            <boxLeft></boxLeft>
            <music :searchType="searchType"></music>
         </a-col>
         <a-col v-bind="colApiMain ">
            <boxLeft></boxLeft>
            <musicPanal></musicPanal>
            <!-- <boxLeft></boxLeft> -->
         </a-col>
         <a-col v-bind="colApiRight">
            <boxLeft></boxLeft>
         </a-col>
      </a-row>
   </div>
</template>

<script>
   import music from "./music.vue"
   import musicPanal from "./musicPanal.vue"
   import boxLeft from "./boxLeft.vue"
   import boxRight from "./boxRight.vue"
   import box6 from "./box6-articleList.vue"
   export default {
      components: {
         music,
         musicPanal,
         boxLeft,
         boxRight,
         box6
      },

      data() {
         return {
            sliderApi: {
               collapsible: true, //是否可收起

               collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
            },
            searchType:"乐谱搜索",
            colApiLeft: {
               xs: 0,
               sm: 0,
@@ -62,113 +58,5 @@
</script>

<style lang="less">
   .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;
      box-shadow: 1px 1px 1px 2px #1196c459
   }

   .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;
   }
	
</style>