新增友链卡片

 src/components/group/tempBoxActicle.vue

@@ -3,14 +3,14 @@
        <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生成证书">
                    <a href="#" 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>
                    <a class="article-title" href="#" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
                    <div class="article-meta-wrap">
                        <span class="post-meta-date">
                            <i class="far fa-calendar-alt"></i>
@@ -19,19 +19,18 @@
                        </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>
                            <i class="fas fa-inbox"></i><a class="article-meta__categories" href="#">随手记</a>
                        </span>
                    </div>
                    <div class="content">
                        前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret...
                        <!--key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey
                        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 - ... -->
                        “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ...
                    </div>
                </div>
            </div>
@@ -41,10 +40,6 @@

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

@@ -56,6 +51,7 @@
    @global-font-size: 14px;
    @font-color: #666;
    @title-clolr: dimgray;
    @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);

    #recent-posts>.recent-post-item {
        display: -webkit-box;
@@ -64,7 +60,6 @@
        display: -ms-flexbox;
        display: box;
        display: flex;
        height: 210px;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -o-box-orient: horizontal;
@@ -93,24 +88,24 @@

    }

    .recent-post-item 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;
    }

    .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%;
@@ -194,21 +189,23 @@
        font-weight: 600;
        color: @title-clolr;
        font-size: 1.6em;
        // margin-bottom: 0.3rem;
        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;
        /* autoprefixer: off */
        -webkit-line-clamp: 2;
        /* autoprefixer: on */
    }



    #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
        order: 3;
@@ -227,16 +224,23 @@
        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;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        /* autoprefixer: off */
        -webkit-line-clamp: 3;
        /* autoprefixer: on */

    }

    @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);
    #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
        color: #448aff;
    }



    //div本体阴影
    #recent-posts>.recent-post-item:hover {
@@ -273,4 +277,66 @@
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    @media screen and (max-width:768px) {
        #recent-posts .recent-post-item .recent-post-info .article-title {
            font-size: 1.32em !important;
            margin-bottom: 0 !important;
        }
    }

    @media screen and (min-width: 769px) {
        #recent-posts>.recent-post-item>.recent-post-info>.content {
            opacity: 0;
            line-height: .8;
            transition: all .25s;
            color: #999;
            margin-bottom: 10px;
            display: -webkit-container;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    @media screen and (max-width: 768px) {
        #recent-posts>.recent-post-item>.recent-post-info {
            width: 69%;
            font-size: 12px !important;
            margin: .7rem 0;
        }
    }

    @media screen and (max-width: 768px) {
        #recent-posts>.recent-post-item>.recent-post-info>.content {
            opacity: 1;
            line-height: 1.7;
            color: #999;
            display: -webkit-container;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    @media screen and (min-width: 769px) {
        #recent-posts>.recent-post-item {
            height: 15em;
        }
    }

    @media screen and (max-width: 768px) {
        #recent-posts .recent-post-item {
            height: 12em !important;
            padding: 0;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
        }
    }

    @media only screen and (max-width: 768px) {
        @ahzoo-proportion: 0.65;
        @global-font-size: 12px;
    }
</style>

 src/components/group/tempFriendBox.vue

New file
@@ -0,0 +1,176 @@
<template>
    <div style="display: flex;" class="link-box">
        <!-- <a href="#" target="_blank" class="no-underline"> -->
        <a href="#" class="no-underline">
            <div class="thumb">
                <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
            </div>
            <div class="content">
                <p class="title">
                    长野 の BLOG
                </p>
            </div>
        </a>
        <a href="#" class="no-underline">
            <div class="thumb">
                <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
            </div>
            <div class="content">
                <p class="title">
                    长野 の BLOG
                </p>
            </div>
        </a>
        <a href="#" class="no-underline">
            <div class="thumb">
                <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
            </div>
            <div class="content">
                <p class="title">
                    长野 の BLOG
                </p>
            </div>
        </a>

    </div>
</template>

<script>
    export default {}
</script>

</script>

<style lang="less">
    .myFriend {
        a {
            padding: 10px;
        }
    }

    .link-box a {
        width: 33.75rem;
        background: #fff;
        float: left;
        margin: 0 0 4.375rem;
        color: #2E2E2E;
        text-decoration: none;
        border-bottom: none;
        border-radius: .25rem;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
        -moz-box-shadow: 0 3px 0.0625rem #0000001a;
        box-shadow: 0 3px 0.0625rem #0000001a;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        transition: .3s;
    }

    .link-box a:hover:after {
        left: 0;
        width: 100%;
        -webkit-transition: width 350ms;
        -moz-transition: width 350ms;
        -ms-transition: width 350ms;
        -o-transition: width 350ms;
        transition: width 350ms;
    }

    .link-box a .thumb {
        font-size: 0;
        overflow: hidden;
        background-color: #fff;
        margin: 0;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
    }

    .link-box a .thumb img {
        width: 100%;
        height: auto;
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-transition: .4s;
        -moz-transition: .4s;
        -ms-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
    }

    .link-box a .content {
        text-align: center;
        background-color: #fff;
    }

    .link-box a .content .title {
        text-align: center;
        padding: 1rem .25rem;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .link-box a:hover,
    .link-box a:active {
        -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
        box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
        -webkit-transform: translateY(-0.25rem);
        -moz-transform: translateY(-0.25rem);
        -ms-transform: translateY(-0.25rem);
        -o-transform: translateY(-0.25rem);
        transform: translateY(-0.25rem);
        -moz-transform: none;
    }

    @media screen and (min-width: 1600px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(200% / 5 - 1.875rem);
            width: calc(200% / 5 - 1.875rem);
        }
    }

    @media screen and (max-width: 1599px) and (min-width: 768px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(150% / 4 - 1.875rem);
            width: calc(150% / 4 - 1.875rem);
        }
    }



    @media screen and (max-width: 500px) and (min-width: 319px) {
        .link-box a {
            margin: 0 0.75rem 1.5rem;
            width: -webkit-calc(50% - 1.5rem);
            width: calc(50% - 1.5rem);
        }
    }

    @media screen and (max-width: 767px) and (min-width: 501px) {
        .link-box a {
            margin: 0 0.9375rem 3.75rem;
            width: -webkit-calc(100% / 3 - 1.875rem);
            width: calc(100% / 3 - 1.875rem);
        }
    }
</style>

 src/components/mini/box5-article.vue

@@ -9,7 +9,7 @@
        </div> -->

        <div class="blog-article-meta">
            <h2 class="article-title">{{title}}</h2>
            <h2 class="blog-article-title">{{title}}</h2>
            <div class="article-split-line"></div>
            <div class="article-summary blog-scroll" v-html="source" />
            <div class="article-split-line"></div>
@@ -113,7 +113,7 @@
        border-radius: 15px;
    }

    .article-title {
    .blog-article-title {
        color: #555;
        font-size: 14px;
        line-height: 14px;

 src/components/swichLabel/main1-show.vue

@@ -17,6 +17,9 @@
                    <div class="myModal">
                        <a-modal v-model="visible" title="日志添加" on-ok="handleOk">
                            <template slot="footer">
                                <a-button key="reset" @click="reset"  type="danger">
                                    擦掉重来
                                </a-button>
                                <a-button key="back" @click="handleCancel">
                                    歇会
                                </a-button>
@@ -47,6 +50,7 @@
                        日志
                        <a-icon type="plus-circle" style="margin-left: 0px;" />
                    </a-button>
                    <tempFriendBox></tempFriendBox>
                    <tempBoxActicle></tempBoxActicle>
                    <router-view class="fade"></router-view>
                </a-col>
@@ -61,6 +65,7 @@
</template>

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

        components: {
            tempFriendBox,
            tempBoxActicle,
            tempFormCheck,
            box10,
@@ -111,6 +117,9 @@
                    this.loading = false;
                }, 3000);
            },
            reset(e) {
                var res=this.$refs.modalBox.$refs.myForm.resetFields()
            },
            handleCancel(e) {
                this.visible = false;
            },