友情链接

<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
    <style type="text/css">
        @media only screen and (max-width: 360px) {
            #friedsGroup {
                columns: 1 !important;
            }

        }

        #MySignature {
            display: none !important;
        }

        #app a, #card a {
            color: inherit;
        }

        #friedsGroup {
            columns: 2;
        }

        .friends {
            margin-bottom: 20px;
            width: 100%;
            display: inline-grid;
        }

        .friendCard {
            background-color: var(--BlockColor);
            border-radius: 8px;
            padding: 20px;
            border: 1px solid rgba(120, 130, 140, 0.13);
        }

        .friendCard:hover {
            box-shadow: 6px 11px 41px -28px #a99de7;
        }

        .friendCard img {
            width: 70px !important;
            height: 70px !important;
            float: left;
            margin-right: 20px !important;
        }

        .friendCard .name {
            margin: 0 0 10px 0 !important;
            font-size: 20px;
            font-weight: 700;
        }

        .friendCard .sign {
            margin: 0 !important;
            font-size: 16px;
            color: var(--TextColor2);
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <h3 id="友情链接">友情链接</h3>
    <div id="app">
        <div id="friedsGroup">
            <div class="friends" v-for="friend in friends">
                <div class="friendCard">
                    <a :href="friend.blogUrl" target="_blank" class="item">
                        <img :src="friend.avatarUrl" alt=""/>
                        <div class="info">
                            <p class="name">{{friend.blogName}}</p>
                            <p class="sign">{{friend.blogSign}}</p>
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
    <p>
        <myscript><br/>
            new Vue({<br/>
            el: '#app',<br/>
            data: {<br/>
            friends: [<br/>
            {<br/>
            blogName:'Chen博客',<br/>
            blogUrl:'https://www.cnblogs.com/chen88/',<br/>
            avatarUrl: 'https://img2018.cnblogs.com/blog/1593971/201911/1593971-20191110180054588-545489045.png',<br/>
            blogSign: '一个不爱写博客的程序员博客'<br/>
            },<br/>


            ]<br/>
            }<br/>
            })<br/>
        </myscript>
    </p>
    <h3 id="申请友链">申请友链</h3>
    <p>点击下方私信，互换下方表格中的字段内容。</p>
    <table>
        <thead>
        <tr class="header">
            <th>字段名</th>
            <th>字段内容</th>
            <th>示例</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>blogName</td>
            <td>博客昵称</td>
            <td>Chen</td>
        </tr>
        <tr class="even">
            <td>blogUrl</td>
            <td>博客地址</td>
            <td>https://www.cnblogs.com/chen88/</td>
        </tr>
        <tr class="odd">
            <td>avatarUrl</td>
            <td>博客头像</td>
            <td>https://img2018.cnblogs.com/blog/1593971/201911/1593971-20191110180054588-545489045.png</td>
        </tr>
        <tr class="even">
            <td>blogSign</td>
            <td>个性签名</td>
            <td>Stay hungry,Stay foolish.</td>
        </tr>
        </tbody>
    </table>
    <h3 id="联系我">联系我</h3>
    <div id="card">
        <div id="proBody">
            <center>
                <img src="https://img2018.cnblogs.com/blog/1593971/201911/1593971-20191110180054588-545489045.png"/>
                <p class="name">Chen</p>
                <p class="sign">Stay hungry,Stay foolish.</p>
                <input type="button" class="contact" value="私信"
                       onclick="location.href='https://msg.cnblogs.com/send/Chen%E5%8D%9A%E5%AE%A2'"/>
            </center>

        </div>

        <div id="proFooter">
            <ul>
                <li>
                    <a href="http://sighttp.qq.com/msgrd?v=1&uin=2609076192"
                       target="_blank">
                        <i class="fa fa-qq" aria-hidden="true"
                           style="font-size:1.7rem;"></i> &nbsp&nbsp&nbsp&nbspQ&nbspQ
                        &nbsp&nbsp&nbsp&nbsp
                    </a>
                </li>
                <li>
                    <a href="https://github.com/2609076192" target="_blank">
                        <i class="fa fa-github fa-2x" aria-hidden="true"></i>
                        Github
                    </a>
                </li>
                <li>
                    <a href="https://img2018.cnblogs.com/blog/1593971/201911/1593971-20191110180054588-545489045.png"
                       target="_blank">
                        <i class="fa fa-weixin fa-2x" aria-hidden="true"></i>
                        WeChat
                    </a>
                </li>

            </ul>
        </div>
    </div>

</div>
<div id="MySignature"></div>
<div class="clear"></div>