样式调整

 package.json

@@ -1,32 +1,33 @@
{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "ant-design-vue": "^1.7.8",
    "axios": "^0.24.0",
    "babel-plugin-import": "^1.13.3",
    "core-js": "^2.6.5",
    "jsdom": "^18.1.1",
    "location": "0.0.1",
    "navigator": "^1.0.1",
    "spark-md5": "^3.0.2",
    "vue": "^2.6.10",
    "vue-simple-uploader": "^0.7.6",
    "vuex": "^3.6.2",
    "xmlhttprequest": "^1.8.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "less-loader": "^6.2.0",
    "sass-loader": "^12.3.0",
    "vue-template-compiler": "^2.6.10"
  }
    "name": "default",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    "dependencies": {
        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
        "@vue/babel-preset-jsx": "^1.2.4",
        "ant-design-vue": "^1.7.8",
        "axios": "^0.24.0",
        "babel-plugin-import": "^1.13.3",
        "core-js": "^2.6.5",
        "jsdom": "^18.1.1",
        "location": "0.0.1",
        "navigator": "^1.0.1",
        "text-loader": "^0.0.1",
        "vue": "^2.6.14",
        "vue-markdown": "^2.2.4",
        "vue-simple-uploader": "^0.7.6",
        "vue-virtual-scroller": "^1.0.10",
        "vuex": "^3.6.2"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.8.0",
        "@vue/cli-service": "^3.8.0",
        "less": "^4.1.2",
        "less-loader": "^6.0.0",
        "vue-template-compiler": "^2.6.14"
    }
}

 src/assets/md.less

File was renamed from src/assets/md.css
@@ -1,16 +1,16 @@
body{
    margin: 0 auto;
    font-family: "Microsoft YaHei", arial,sans-serif;
    color: #444444;
    line-height: 1;
    padding: 30px;
}
@media screen and (min-width: 768px) {
    body {
        width: 748px;
        margin: 10px auto;
    }
}
 body{
     margin: 0 auto;
     font-family: "Microsoft YaHei", arial,sans-serif;
     color: #444444;
     line-height: 1;
     padding: 30px;
 }
 @media screen and (min-width: 768px) {
     body {
         width: 748px;
         margin: 10px auto;
     }
 }
h1, h2, h3, h4 {
    color: #111111;
    font-weight: 400;

 src/components/layouts/box1-info.vue

@@ -35,9 +35,6 @@
<style lang="less">
    /*头像部分*/
    .blog-avatar {
        border-radius: 15px;
        background-color: white;

        img {
            width: 60px;
            height: auto;

 src/components/layouts/box2-class.vue

@@ -91,6 +91,10 @@
            border-left: none;
        }

        a {
            color: black;
        }

        .link span:first-child {
            color: #999;
        }

 src/components/layouts/box4-minibox.vue

@@ -71,12 +71,10 @@

    div .blog-right-side-meta a span:hover {
        background: #262a30;
        ;
        color: #fff;
        white-space: normal;
        word-break: break-word;
        // white-space: normal;
        // word-break: break-word;
        /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
        height: 20%;
        z-index: 600;
    }
</style>

 src/components/layouts/box5-article.vue

@@ -118,6 +118,10 @@
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;

        a {
            color: black;
        }
    }

    .article-split-line {

 src/components/layouts/box6-articleList.vue

@@ -2,8 +2,12 @@
    <div>
        <box5></box5>
        <box5></box5>
        <a-pagination showQuickJumper  :default-current="current" :defaultPageSize="pageSize" :total="total" />
        <box5></box5>
        <box5></box5>
        <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
            :total="total" />
    </div>

</template>

<script>
@@ -14,14 +18,15 @@
        },
        data() {
            return {
                data: [],
                loading: false,
                busy: false,
                size: "small",
                total: 500,
                pageSize: 20,
                current: 4,
            }
        },

        }
    }
	
</script>

<style>
</style>

 src/components/layouts/main.vue

@@ -1,8 +1,8 @@
<template>
    <div id="components-layout-basic" >
    <div id="components-layout-basic">
        <a-layout>
            <a-layout-header>
                <tag-Header ></tag-Header>
            <a-layout-header :style="{ position: 'fixed', zIndex: 999, width: '100%' }">
                <tag-Header></tag-Header>
            </a-layout-header>
            <a-layout>
                <router-view class="fade"></router-view>
@@ -29,8 +29,33 @@

            }
        },
		
        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>

@@ -43,8 +68,9 @@
        .ant-layout {}

        .ant-layout-header {
            margin-bottom: 15px;
            background-color: #ffffff;
            // 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 {

 src/components/layouts/main1-show.vue

@@ -3,12 +3,27 @@
        <a-row>
            <a-col v-bind="colApiLeft">
                <boxLeft></boxLeft>
                <a-drawer placement="left" :closable="false" :visible="visible1" 
                    :after-visible-change="afterVisibleChange" @close="onClose1">
                    <boxLeft></boxLeft>
                </a-drawer>
            </a-col>
            <a-col v-bind="colApiMain ">
                <a-button @click="showDrawer1">
                    小抽屉1
                </a-button>
                <a-button @click="showDrawer2">
                    小抽屉2
                </a-button>
                <router-view></router-view>
            </a-col>
            <a-col v-bind="colApiRight">
            <a-col v-bind="colApiRight" ref="myDrawer">
                <boxRight></boxRight>

                <a-drawer placement="right" :closable="false" :visible="visible2" 
                    :after-visible-change="afterVisibleChange" @close="onClose2">
                    <boxRight></boxRight>
                </a-drawer>
            </a-col>
        </a-row>
    </div>
@@ -24,9 +39,27 @@
            boxRight,
            box6
        },
        methods: {
            afterVisibleChange(val) {
            },
            showDrawer1() {
                this.visible1 = true;
            },
            showDrawer2() {
                this.visible2 = true;
            },
            onClose1() {
                this.visible1 = false;
            },
            onClose2() {
                this.visible2 = false;
            },
        },

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

@@ -67,15 +100,16 @@
        background-color: white;
        border-radius: 15px;
    }
	

    .article-detail {
        max-height: 750px;
        overflow: overlay;
    }
	

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

    /*左右两边的盒子容器*/
@@ -141,7 +175,9 @@
        padding-top: 10px;
        padding-bottom: 20px;
        overflow: hidden;
        box-shadow: 1px 1px 1px 2px #1196c459
        -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        // box-shadow: 1px 1px 1px 2px #00000059
    }

    .show-line {

 src/components/layouts/main2-show.vue

@@ -58,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>

 src/components/layouts/main3-show.vue

@@ -60,113 +60,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>

 src/components/layouts/mdDetail.vue

@@ -40,8 +40,8 @@
    }
</script>

<style scoped>
    @import '../../assets/md.css';
<style scoped  >
    /* @import '../../assets/md.less'; */

    


 src/components/layouts/tagInfo.vue

@@ -34,9 +34,9 @@
                        <br>
                        <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
                        <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
                        <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:
                        <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
                        <br>
                        <br>希望我们的故事还没有终点..
                        <br>end..希望我们的故事还没有终点..
                    </div>
                </li>


 src/main.js

@@ -5,7 +5,7 @@


import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.css';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);

Vue.prototype.$axios = axios

 vue.config.js

@@ -2,13 +2,13 @@
module.exports = {
    configureWebpack: (config) => {
        config.module.rules.push({
            test: /\.md/,
            test: /\.md$/,
            use: [{
                loader: 'text-loader', // 解决ivew组件 忽略前缀i的问题
                options: {
                    prefix: false
                }
            }]
            }, ]
        })
    },
    css: {
@@ -18,7 +18,9 @@
                    // If you are using less-loader@5 please spread the lessOptions to options directly
                    modifyVars: {
                        "primary-color": "#1DA57A", // 全局主色
                        "link-color": "#1890ff", // 链接色
                        // "link-color": "#1890ff", // 链接色
                        "link-color": "#ffffff", // 链接色
                        "link-hover-color": "#30a9de",
                        "success-color": "#52c41a", // 成功色
                        "warning-color": "#faad14", // 警告色
                        "error-color": "#f5222d", // 错误色