新的文章组件

 src/components/group/articleList.vue

@@ -38,16 +38,16 @@
</script>

<style lang="less">
    .container {
        height: 700px;
    }
    // .container {
    //     height: 700px;
    // }

    .content {
        height: 95%;
        overflow-y: scroll;
    }
    // .content {
    //     height: 95%;
    //     overflow-y: scroll;
    // }

    .content::-webkit-scrollbar {
        display: none;
    }
    // .content::-webkit-scrollbar {
    //     display: none;
    // }
</style>

 src/components/group/boxRight.vue

@@ -58,17 +58,19 @@
                    title: "友情链接",
                    isShowRemark:true,
                    list: [{
                        name: "inleft.com",
                        name: "https://gofor.live",
                    }, {
                        name: "b.inleft.com",
                        name: "blog.inleft.com",
                    }, {
                        name: "Baby Song- 陈奕迅 超超超超 标题",
                        name: "https://blog.ahzoo.cn/",
                    }, {
                        name: "Baby Song- 陈奕迅 超超 标题",
                        name: "https://vian.top/",
                    }, {
                        name: "Baby Song ",
                        name: "https://musenxi.com/",
                    }, {
                        name: "inleft.com",
                        name: "alenc.cn",
                    }, {
                        name: "howshow.tech",
                    }, {
                        name: "b.inleft.com",
                    }, {

 src/components/group/tempBoxActicle.vue

New file
@@ -0,0 +1,276 @@
<template>
    <div>
        <div class="recent-posts" id="recent-posts">
            <div class="recent-post-item">
                <div class="post_cover left_radius">
                    <a href="/p/s211131.html" title="使用KeyStore生成证书">
                        <div class="block left_radius"></div>
                        <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg"
                            onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" alt="使用KeyStore生成证书">
                    </a>
                </div>
                <div class="recent-post-info">
                    <a class="article-title" href="/p/s211131.html" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
                    <div class="article-meta-wrap">
                        <span class="post-meta-date">
                            <i class="far fa-calendar-alt"></i>
                            <span class="article-meta-label"></span>
                            <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">2022-01-13</time>
                        </span>
                        <span class="article-meta">
                            <span class="article-meta__separator">|</span>
                            <i class="fas fa-inbox"></i><a class="article-meta__categories"
                                href="/categories/Java%E5%BC%80%E5%8F%91/%E9%9A%8F%E6%89%8B%E8%AE%B0/">随手记</a>
                        </span>
                    </div>
                    <div class="content">
                        前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret...
                        <!--key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey
                        在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg
                         指定密钥的算法 (如
                        RSA DSA（如果不指定默认采用DSA）) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass
                        指定密钥库的密码(获取keystore信息所需的密码)
                        keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如：
                        “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ... -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {}
        }
    }
</script>

<style lang="less">
    @card-bg: #f5f8fa;
    @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
    @ahzoo-proportion: 1;
    @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
    @global-font-size: 14px;
    @font-color: #666;
    @title-clolr: dimgray;

    #recent-posts>.recent-post-item {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        height: 210px;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -o-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -moz-box-align: center;
        -o-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        border-radius: 12px 8px 8px 12px;
        background: var(--card-bg);
        -webkit-box-shadow: var(--card-box-shadow);
        box-shadow: var(--card-box-shadow);
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        -ms-transition: all .3s;
        transition: all .3s;

        background: @card-bg;
        -webkit-box-shadow: @card-box-shadow;
        box-shadow: @card-box-shadow;

    }

    .recent-post-item {
        padding-left: calc(1.2rem * @ahzoo-proportion) !important;
        padding-right: calc(1.2rem * @ahzoo-proportion) !important;
        // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        line-height: 2;

        a {
            color: #99a9bf;
            text-decoration: none;
            word-wrap: break-word;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -ms-transition: all .2s;
            transition: all .2s;
            overflow-wrap: break-word;
            background-color: transparent;
        }

        img {
            max-width: 100%;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -ms-transition: all .2s;
            transition: all .2s;
            border-style: none;
        }
    }

    .recent-post-item * {
        cursor: url(@cursorURL), auto !important;
        font-size: @global-font-size;
        color: var(--font-color);
    }

    * {
        tap-highlight-color: transparent;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }

    #recent-posts>.recent-post-item .post_cover {
        width: 33%;
        position: sticky;

        opacity: .8;
        padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
        overflow: hidden;
        height: 100%;
        -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    }

    #recent-posts>.recent-post-item .left_radius {
        border-radius: 8px 0 0 8px;
    }

    .block.left_radius {
        background: linear-gradient(to right, transparent, @card-bg 98%);
        position: absolute;
        width: 100%;
        height: calc(100% - 2.2rem * @ahzoo-proportion);
        z-index: 2;
        top: calc(1.1rem * @ahzoo-proportion);
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg {
        border-radius: 15px;
        width: 100%;
        height: 100%;
        -webkit-transition: all .6s;
        -moz-transition: all .6s;
        -o-transition: all .6s;
        -ms-transition: all .6s;
        transition: all .6s;
        object-fit: cover;
    }

    #recent-posts>.recent-post-item>.recent-post-info {
        width: 77%;
        padding: 0px calc(1.2rem * @ahzoo-proportion);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        a {
            text-decoration: none;
            -webkit-transition: all .2s;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -ms-transition: all .2s;
            transition: all .2s;
            overflow-wrap: break-word;
        }
    }

    #recent-posts>.recent-post-item>.recent-post-info>.article-title {
        order: 1;
        font-weight: 600;
        color: @title-clolr;
        font-size: 1.6em;
        // margin-bottom: 0.3rem;
        line-height: 1.4;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        -webkit-line-clamp: 2;
    }

    #recent-posts>.recent-post-item>.recent-post-info>.article-title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
        order: 3;
        color: #858585;
        font-size: 90%;

        .article-meta-label {
            padding-right: 0.2rem;
        }
    }

    #recent-posts>.recent-post-item>.recent-post-info>.content {
        opacity: 0;
        line-height: .8;
        transition: all .25s;
        color: #999;
        margin-bottom: 19px;
        text-overflow: ellipsis;
        overflow: hidden;
        order: 2;
        margin: 0;
        // display: -webkit-box;
        // -webkit-line-clamp: 2;
        // -webkit-box-orient: vertical;
        overflow: hidden;
    }

    @card-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);

    //div本体阴影
    #recent-posts>.recent-post-item:hover {
        -webkit-box-shadow: @card-hover-box-shadow;
        box-shadow: @card-hover-box-shadow;
    }

    // 图片缩放
    #recent-posts>.recent-post-item:hover img.post_bg {
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -o-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
        -webkit-box-shadow: @card-hover-box-shadow;
        box-shadow: @card-hover-box-shadow;
    }

    //内容缩放 内容显示
    #recent-posts>.recent-post-item:hover .recent-post-info .content {
        opacity: 1;
        line-height: 1.8;
        transition: all .25s;
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
        transform: scale(.9);
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
</style>

 src/components/mini/box10-add.vue

@@ -95,6 +95,9 @@
                            <a-icon type="upload" /> jpg/png/jpeg..
                        </a-button>
                    </a-upload>
                    <span class="myTip">
                        自动转码,可以传高清图
                    </span>
                </a-form-model-item>

                <a-form-model-item label="定时">

 src/components/mini/box5-article.vue

@@ -8,7 +8,7 @@
            </a>
        </div> -->

        <div class="article-meta">
        <div class="blog-article-meta">
            <h2 class="article-title">{{title}}</h2>
            <div class="article-split-line"></div>
            <div class="article-summary blog-scroll" v-html="source" />
@@ -107,7 +107,7 @@
        /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
    }

    .article-meta {
    .blog-article-meta {
        padding: 30px 30px 10px;
        background-color: white;
        border-radius: 15px;

 src/components/mini/tagInfo.vue

@@ -18,9 +18,9 @@
                    <li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
                    <li>

                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;" />
                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;border-radius: 20px;" />
                        我的小老弟&御用暖床袋
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;" />
                        <img src="http://t.inleft.com/share/media_photo/IMG_20220117_145633.jpg" style="width: 50px;border-radius: 30px" />
                        <span style="font-size: 10px;color: #999">(小乖)</span>
                    </li>
                </ul>

 src/components/swichLabel/main1-show.vue

@@ -47,7 +47,7 @@
                        日志
                        <a-icon type="plus-circle" style="margin-left: 0px;" />
                    </a-button>
                    <!-- <tempFormCheck></tempFormCheck> -->
                    <tempBoxActicle></tempBoxActicle>
                    <router-view class="fade"></router-view>
                </a-col>

@@ -61,6 +61,7 @@
</template>

<script>
    import tempBoxActicle from "../group/tempBoxActicle.vue"
    import tempFormCheck from "../group/tempFormCheck.vue"
    import box10 from "../mini/box10-add.vue"
    import boxLeft from "../group/boxLeft.vue"
@@ -71,6 +72,7 @@
    export default {

        components: {
            tempBoxActicle,
            tempFormCheck,
            box10,
            boxLeft,

 src/components/swichLabel/main2-show.vue

@@ -8,7 +8,7 @@
                <box8></box8>
                <!-- <boxLeft></boxLeft> -->
            </a-col>
			

        </a-row>
    </div>
</template>
@@ -26,7 +26,7 @@

        data() {
            return {
                searchType:"乐谱搜索",
                searchType: "乐谱搜索",
                colApiLeft: {
                    xs: 24,
                    sm: {
@@ -50,7 +50,7 @@
                        offset: 1,
                    },
                },
				

                colApiMain: {
                    xs: {
                        span: 24,
@@ -82,6 +82,5 @@
    }
</script>

<style lang="less">
	
<style >
</style>