src/components/layouts/main.vue

@@ -1,96 +1,91 @@
<template>
   <div id="components-layout-basic">
      <a-layout>
         <a-layout-header>Header</a-layout-header>
         <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }">
            <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,
            }
         }
      },
      methods: {

         // 下载文件
         down: function() {
            console.log(111);
            this.$axios({
               "url": "http://192.168.40.149:9000/test2/save/%E6%B5%8B%E8%AF%95%E9%83%A8/%E6%96%87%E4%BB%B6%E7%BB%84/OIP-C.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin/20220113/us-east-1/s3/aws4_request&X-Amz-Date=20220113T085350Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=36db32d3fe577716ada0655379327e837efdfd3a133be6051281ae9eaad8e04f",
               "method": "get",
               "responseType": "blob"

            }).then((res) => {

               let blob = new Blob([res.data], {
                  type: "application/octet-stream"
               });
               let url = window.URL.createObjectURL(blob)
               let link = document.createElement('a')
               link.download="inleft.jpg"
					
               link.style.display = 'none'
               link.href = url
               document.body.appendChild(link)
               link.click()
            })
         }

      }
   }
</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: #ffffff;
         backdrop-filter: saturate(180%) blur(1em);
         background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%);
      }

      .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 +99,7 @@
         height: 100%;
      }

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

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


@@ -134,7 +122,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 +141,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;
   }