表单校验

 src/components/fixed/header.vue

@@ -9,9 +9,11 @@
        <a-col v-bind="showSmall">
            <router-link to="/main3">我的网盘 »</router-link>
        </a-col>
        <a-col v-bind="showSmall">
            <router-link to="/main4">友人帐 »</router-link>
        </a-col>
        <a-col v-bind="showMain">
            <a-auto-complete ref="mySearch" 
            v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
            <a-auto-complete ref="mySearch" v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
                <a-input @keydown.enter="onSelect">
                    <a-icon slot="suffix" type="search" class="certain-category-icon" />
                </a-input>
@@ -73,11 +75,11 @@
                },
                showSmall: {
                    xs: 6,
                    sm: 6,
                    md: 6,
                    lg: 6,
                    xl: 6,
                    xxl: 6,
                    sm: 4,
                    md: 4,
                    lg: 4,
                    xl: 4,
                    xxl: 4,
                },
                showMain: {
                    xs: 0,

 src/components/group/articleListScorll.vue

@@ -2,6 +2,7 @@
    <div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div v-for="temp in data">
                <newArticle></newArticle>
                <box5 v-bind="temp"></box5>
            </div>
            <div v-if="loading && !busy" class="demo-loading-container">
@@ -23,6 +24,7 @@
    import infiniteScroll from 'vue-infinite-scroll';
    import box5 from "../mini/box5-article.vue"
    import babyActicle from '../../assets/baby.htm'
    import newArticle from "../mini/box-new-article.vue"
    import shijie from '../../assets/shijie.htm'

    var obj1 = {
@@ -52,7 +54,8 @@

    export default {
        components: {
            box5
            box5,
            newArticle
        },
        directives: {
            infiniteScroll

 src/components/group/tempBoxActicle.vue

@@ -89,7 +89,7 @@
    }

    .recent-post-item a {
        color: #99a9bf;
        // color: #99a9bf;
        text-decoration: none;
        word-wrap: break-word;
        -webkit-transition: all .2s;

 src/components/group/tempFormCheck.vue

@@ -1,59 +1,19 @@
<template>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item ref="name" label="Activity name" prop="name">
            <a-input v-model="form.name" @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        " />
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
        <a-form-model-item has-feedback label="Password" prop="pass">
            <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="Activity zone" prop="region">
            <a-select v-model="form.region" placeholder="please select your zone">
                <a-select-option value="shanghai">
                    Zone one
                </a-select-option>
                <a-select-option value="beijing">
                    Zone two
                </a-select-option>
            </a-select>
        <a-form-model-item has-feedback label="Confirm" prop="checkPass">
            <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="Activity time" required prop="date1">
            <a-date-picker v-model="form.date1" show-time type="date" placeholder="Pick a date" style="width: 100%;" />
        </a-form-model-item>
        <a-form-model-item label="Instant delivery" prop="delivery">
            <a-switch v-model="form.delivery" />
        </a-form-model-item>
        <a-form-model-item label="Activity type" prop="type">
            <a-checkbox-group v-model="form.type">
                <a-checkbox value="1" name="type">
                    Online
                </a-checkbox>
                <a-checkbox value="2" name="type">
                    Promotion
                </a-checkbox>
                <a-checkbox value="3" name="type">
                    Offline
                </a-checkbox>
            </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="Resources" prop="resource">
            <a-radio-group v-model="form.resource">
                <a-radio value="1">
                    Sponsor
                </a-radio>
                <a-radio value="2">
                    Venue
                </a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="Activity form" prop="desc">
            <a-input v-model="form.desc" type="textarea" />
        <a-form-model-item has-feedback label="Age" prop="age">
            <a-input v-model.number="ruleForm.age" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">
                Create
            <a-button type="primary" @click="submitForm('ruleForm')">
                Submit
            </a-button>
            <a-button style="margin-left: 10px;" @click="resetForm">
            <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
                Reset
            </a-button>
        </a-form-model-item>
@@ -62,70 +22,89 @@
<script>
    export default {
        data() {
            let checkPending;
            let checkAge = (rule, value, callback) => {
                clearTimeout(checkPending);
                if (!value) {
                    return callback(new Error('Please input the age'));
                }
                checkPending = setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('Please input digits'));
                    } else {
                        if (value < 18) {
                            callback(new Error('Age must be greater than 18'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please input the password'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please input the password again'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error("Two inputs don't match!"));
                } else {
                    callback();
                }
            };

            let validateContent = (rule, value, callback) => {
                console.log(1111);
                if (1 == 1) {
                    this.$refs.ruleForm.validateField('checkPass');
                } 
                callback();
            };
            return {
                labelCol: {
                    span: 4
                },
                wrapperCol: {
                    span: 14
                },
                other: '',
                form: {
                    name: '',
                    region: undefined,
                    date1: undefined,
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                ruleForm: {
                    pass: '',
                    checkPass: '',
                    age: '',
                },
                rules: {
                    name: [{
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 5,
                            message: 'Length should be 3 to 5',
                            trigger: 'blur'
                        },
                    ],
                    region: [{
                        required: true,
                        message: 'Please select Activity zone',
                    pass: [{
                        validator: validatePass,
                        trigger: 'change'
                    }],
                    date1: [{
                        required: true,
                        message: 'Please pick a date',
                    checkPass: [{
                        validator: validatePass2,
                        trigger: 'change'
                    }],
                    type: [{
                        type: 'array',
                        required: true,
                        message: 'Please select at least one activity type',
                        trigger: 'change',
                    }, ],
                    resource: [{
                        required: true,
                        message: 'Please select activity resource',
                    age: [{
                        validator: checkAge,
                        trigger: 'change'
                    }, ],
                    desc: [{
                        required: true,
                        message: 'Please input activity form',
                        trigger: 'blur'
                    }],
                    common: [{
                        validator: validateContent,
                        trigger: 'change'
                    }],
                },
                layout: {
                    labelCol: {
                        span: 4
                    },
                    wrapperCol: {
                        span: 14
                    },
                },
            };
        },
        methods: {
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        console.log('11');
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
@@ -133,8 +112,8 @@
                    }
                });
            },
            resetForm() {
                this.$refs.ruleForm.resetFields();
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    };

 src/components/mini/box-friend.vue

New file
@@ -0,0 +1,157 @@
<template>
    <div style="display: flex;" class="link-box">
        <div v-for="temp in [1,2,1,1,1,1]">
            <!-- <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>
        </div>
    </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(500% / 5 - 1.875rem);
            width: calc(500% / 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/box-new-article.vue

New file
@@ -0,0 +1,386 @@
<template>
    <div>
        <div class="recent-posts" id="recent-posts" v-for="(item ,index) in [1,1,1]">
            <div class="recent-post-item">
				
                <div class="post_cover left_radius" v-if="index%2==0">
                    <router-link to="/mdDetail" :title="title">
                        <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="title">
                    </router-link>
                </div>
				
                <div class="post_cover right_radius" v-else>
                    <router-link to="/mdDetail" :title="title">
                        <div class="block right_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="title">
                    </router-link>
                </div>

                <div class="recent-post-info">
                    <router-link to="/mdDetail"  class="article-title"> {{title}} </router-link>
                    <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
                    <div class="article-meta-wrap" style="display: flex;">
                        <span class="post-meta-date">
                            <a-icon type="calendar" />
                            <span class="article-meta-label"></span>
                            <time datetime="2022-01-13T06:25:00.000Z"
                                title=" 2022-01-13 14:25:00">{{publishTime}}</time>
                        </span>
                        <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
                        <span class="article-meta">
                            <a-icon type="book" />
                            <router-link to="/mdDetail"  class="article-meta__categories"> {{tag}} </router-link>
                            <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
                        </span>
                    </div>
                    <div class="content">
                        {{content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                "title": "使用KeyStore生成证书",
                "publishTime": "2022-01-14",
                "tag": "随手记",
                "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 - ..."
            }
        }
    }
</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;
    @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:not(:first-child) {
    //     margin-top: 1rem;
    // }
    #recent-posts>.recent-post-item {
        margin-top: 1rem;
    }

    #recent-posts>.recent-post-item {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: box;
        display: flex;
        -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;

        -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 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;

        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: @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;
    }

    #recent-posts>.recent-post-item .right_radius {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -o-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
        border-radius: 0 8px 8px 0;
        border-top-left-radius: 0px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 0px;
    }

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

    .block.right_radius {
        background: linear-gradient(to left, 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>.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;

        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;
        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;
        order: 2;
        margin: 0;

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

    }

    #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
        color: #448aff;
    }



    //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);
    }

    @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/mini/box10-add.vue

@@ -5,7 +5,7 @@
                <a-input v-model="form.title" placeholder="限 50字内" />
            </a-form-model-item>

            <a-form-model-item label="模式切换">
            <a-form-model-item label="模式切换" prop="common">
                <a-switch v-model="form.online" />
                <span class="myTip">
                    本地文件/由系统生成文件
@@ -101,9 +101,17 @@
                </a-form-model-item>

                <a-form-model-item label="定时">
                    <a-date-picker v-model="form.publishDate" show-time type="<datetime></datetime>" placeholder="发布时间"
                    <a-date-picker v-model="form.publishDate" show-time type="datetime" placeholder="发布时间"
                        style="width: 100%;" :disabledDate="disabledDate"
                        :getCalendarContainer="getCalendarContainer()" />
                </a-form-model-item>

                <a-form-model-item label="置顶权重">
                    <a-slider v-model="form.sliderValue" :default-value="20" :step="5"
                        :getTooltipPopupContainer="getCalendarContainer()" />
                    <span class="myTip">
                        越大越靠前
                    </span>
                </a-form-model-item>


@@ -130,7 +138,7 @@
                        </a-form-model-item>

                        <a-form-model-item label="授权密码" v-show="form.auth=='password'">
                            <a-input v-model="form.password" type="password" placeholder="Password">
                            <a-input v-model="form.password" type="password" placeholder="独立密码">
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-model-item>
@@ -148,6 +156,18 @@
    import moment from "moment";
    export default {
        data() {

            let validateContent = (rule, value, callback) => {
                if (this.form.online) {
                    console.log("内容未填");
                    this.$refs.myForm.validateField('content')
                } else {
                    console.log("文件未传");
                    this.$refs.myForm.validateField('blogFileList')
                }
                callback();
            };

            return {

                blogFileList: [],
@@ -170,6 +190,7 @@
                    span: 13
                },
                form: {
                    online: false,
                    preference: false,
                    title: '',
                    content: '',
@@ -196,18 +217,21 @@
                            trigger: 'blur'
                        },
                    ],
                    common: [{
                        validator: validateContent,
                        trigger: []
                    }],
                    content: [{
                        max: 10,
                        required: true,
                        message: '至少选一个上传内容',
                        message: '至少填一下上传内容',
                        trigger: 'blur'
                    }, ],
                    blogFileList: [{
                        min: 1,
                        required: true,
                        message: '文件未上传',
                    }, {
                        min: 1,
                        message: '文件未上传',
                    }, ],
                    }],
                    class: [{
                        required: true,
                        message: '至少选一个分类',

 src/components/mini/tagInfo.vue

@@ -2,7 +2,7 @@
    <div class="swichTag">
        <a-page-header style="padding: 0px;" title=" " @back="() => this.$router.go(-1)">
        </a-page-header>
        <a-divider :dashed="true" orientation="left">关于我的一些..小故事</a-divider>
        <a-divider :dashed="true" orientation="left">关于我的一些..<span class="myTip">小故事</span></a-divider>

        <a-timeline pending="...">
            <p slot="pendingDot" style="font-size: 18px;" />
@@ -15,7 +15,7 @@
                    <li> 喜欢钢琴~喜欢吉他 </li>
                    <li> 爱音乐,也爱看番 </li>
                    <li> B界的白嫖怪</li>
                    <li> PC单机的<span class="myTip">伪</span>硬核玩家 </li>
                    <li> PC单机的<!-- <span class="myTip">伪</span> --><span class="myTip" style="text-decoration:line-through">硬核</span>玩家 </li>
                    <li>

                        <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 35px;border-radius: 20px;" />

 src/components/swichLabel/main1-show.vue

@@ -17,7 +17,7 @@
                    <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 key="reset" @click="reset" type="danger">
                                    擦掉重来
                                </a-button>
                                <a-button key="back" @click="handleCancel">
@@ -51,7 +51,6 @@
                        <a-icon type="plus-circle" style="margin-left: 0px;" />
                    </a-button>
                    <tempFriendBox></tempFriendBox>
                    <tempBoxActicle></tempBoxActicle>
                    <router-view class="fade"></router-view>
                </a-col>

@@ -66,27 +65,19 @@

<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"
    import boxLeft from "../group/boxLeft.vue"
    import boxRight from "../group/boxRight.vue"
    import articleList from "../group/articleList.vue"
    import articleListScorll from "../group/articleListScorll.vue"

    export default {

        components: {
            tempFriendBox,
            tempBoxActicle,
            tempFormCheck,
            box10,
            boxLeft,
            boxRight,
            articleList,
            articleListScorll,


        },
        methods: {
            getCalendarContainer(trigger) {
@@ -97,7 +88,7 @@
            },
            handleOk(e) {
                console.log(this.$refs.modalBox.form);
                var res=this.$refs.modalBox.$refs.myForm.validate(valid => {
                var res = this.$refs.modalBox.$refs.myForm.validate(valid => {
                    if (valid) {
                        this.$message.info("校验通过")
                    } else {
@@ -105,9 +96,9 @@
                        return false;
                    }
                });
				
				
                if(!res)return;


                if (!res) return;

                this.$message.info("提交表单")

@@ -118,7 +109,7 @@
                }, 3000);
            },
            reset(e) {
                var res=this.$refs.modalBox.$refs.myForm.resetFields()
                var res = this.$refs.modalBox.$refs.myForm.resetFields()
            },
            handleCancel(e) {
                this.visible = false;
@@ -265,11 +256,14 @@
    }


    @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);

    /*---------------------
        |   核心盒子构成start   |
        ------- ---------------*/
    .blog-container {
        border-radius: 15px;
        // background-color: #f5f8fa;
        background-color: white;

        line-height: 1.4;
@@ -289,9 +283,25 @@
        padding-top: 10px;
        padding-bottom: 20px;
        overflow: hidden;
        -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
        // box-shadow: 1px 1px 1px 2px #00000059;
		
        // -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: @card-box-shadow;
        -webkit-box-shadow: @card-box-shadow;
        transition: all .4s;
        -webkit-transition: all .6s;
        -moz-transition: all .6s;
        -o-transition: all .6s;
        -ms-transition: all .6s;
    }

    //div本体阴影
    .blog-container:hover {
        transition: all .25s;
        -webkit-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);
        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);
    }

    .show-line {

 src/components/swichLabel/main4-show.vue

New file
@@ -0,0 +1,48 @@
<template>
    <div class="blog-main">
        <a-row>
            <a-col v-bind="colApiMain " class="holdHeight">
                <a-page-header title="朋友们" style="padding: 0px;" @back="() => this.$router.go(-1)" />
                <boxFriend></boxFriend>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import boxFriend from "../mini/box-friend.vue"
    export default {
        components: {
            boxFriend,
        },

        data() {
            return {
                colApiMain: {
                    xs: 24,
                    sm: 24,
                    md: {
                        span: 24,
                        offset: 0,
                    },
                    lg: {
                        span: 20,
                        offset: 2,
                    },
                    xl: {
                        span: 20,
                        offset: 2,
                    },
                    xxl: {
                        span: 20,
                        offset: 2,
                    },
                }
            }
        }
    }
</script>

<style lang="less">

</style>

 src/config/router.config.js

@@ -5,6 +5,7 @@
import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'
import main3 from '../components/swichLabel/main3-show.vue'
import main4 from '../components/swichLabel/main4-show.vue'

import box1 from '../components/mini/box1-info.vue'
import tagTime from '../components/mini/tagTime.vue'
@@ -65,6 +66,10 @@
                path: '/main3',
                component: main3,
            },
            {
                path: '/main4',
                component: main4,
            },
            

        ]