idsci/application/index/view/user/homepage.html

<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
</style>
<link href="__CDN__/assets/css/user/homepage.css?v={$Think.config.site.version|htmlentities}" rel="stylesheet">
<div class="common-bg">
    <div class="common-font">
        My Personal Homepage
    </div>
</div>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h2 class="page-header">My Personal Homepage</h2>
                        {:token()}

                    {if condition="$user.is_author == 'fault'"}
                    <div class="loadmore loadmore-line loadmore-nodata"><span class="loadmore-tips">暂无数据</span></div>
                    {/if}
                    {if condition="$user.is_author == 'correct'"}
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 text-center">
                            <div class="profile-avatar-container center-block">
                                <img class="profile-user-img img-responsive img-circle" src="{$user.avatar|htmlentities|cdnurl}" alt="">
                            </div>
                            <div class="user-name">
                                Justin Bieber
                            </div>
                        </div>
                    </div>
                    <!-- 个人文章统计数 -->
                    <div class="row mt-4">
                        <div class="control-label col-xs-12 col-sm-4 text-center">
                            <img src="__CDN__/assets/img/index/title_icon.png" alt="">
                            <span class="article-text">article：96</span>
                        </div>
                        <div class="control-label col-xs-12 col-sm-4 text-center">
                            <img src="__CDN__/assets/img/index/jounel_icon.png" alt="">
                            <span class="article-text">jounal : 12</span>
                        </div>
                        <div class="control-label col-xs-12 col-sm-4 text-center">
                            <img src="__CDN__/assets/img/index/join_time_icon.png" alt="">
                            <span class="article-text">Join Time : 5 years ago</span>
                        </div>
                    </div>

                    <!-- 个人发布的文章 -->
                    <h2 class="page-header mt-4" style="margin:0;padding: 23px 0 10px 0;border-bottom: 0">My Article</h2>

                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="tab-inner" style="background:#fff;">
                                <div class="article-list">
                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/wearable/109.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="奥睿科ORICO HU3温室加湿器">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/wearable/109.html">奥睿科ORICO HU3温室加湿器</a>
                                                </h3>
                                                <div class="article-intro">
                                                    加湿器可以说是目前家里比较常见的生活用品之一了，特别是爱美的女性朋友们，为了能保持容颜润泽，经常会在身旁备用一台。其实对于更多的用户来说，加湿器的主要作用还是放在空调房里，用来调节房间湿度
                                                </div>
                                                <div class="article-tag">
                                                    <span itemprop="date">2023-05-01</span>
                                                    <span itemprop="date">1023glance over</span>
                                                    <span class="article-read" style="display: block;float: right; margin:0;">
                                                        <a href="#" style="color: #007bff;">
                                                            Read more
                                                            <img src="__CDN__/assets/img/index/arrow_right_icon.png" alt="">
                                                        </a>
                                                    <span/>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/wearable/107.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="米家无线投影仪青春版">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/wearable/107.html">米家无线投影仪青春版</a>
                                                </h3>
                                                <div class="article-intro">
                                                    从2017年推出首款激光电视以来，小米正式“扎根”智能微投领域，目前已经推出了三款家用投影产品，其中9999元的激光电视主要针对的还是高端家庭用户，而米家投影仪系列的两款产品则更多的面向普通家庭和年轻消费群体            </div>
                                                <div class="article-tag">
                                                    <a href="/wearable.html" class="tag tag-primary">智能设备</a>
                                                    <span itemprop="date">2019年03月28日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 83 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/wearable/107.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 383 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/wearable/106.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="米家九号平衡车Plus">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/wearable/106.html">米家九号平衡车Plus</a>
                                                </h3>
                                                <div class="article-intro">
                                                    相较上一代九号平衡车，九号平衡车Plus拥有八大改进，脚踏面积相较上一代提升19%，底盘高度离地增加17%，采用11英寸高性能防滑胎，新一代平衡车电机功率为800W。            </div>
                                                <div class="article-tag">
                                                    <a href="/wearable.html" class="tag tag-primary">智能设备</a>
                                                    <span itemprop="date">2019年03月28日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 92 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/wearable/106.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 1613 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/wearable/105.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="智能WIFI无人机">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/wearable/105.html">智能WIFI无人机</a>
                                                </h3>
                                                <div class="article-intro">
                                                    2017四川航展无人机专项展可谓异彩纷呈，既有像翼龙、彩虹、鹞鹰这样的空中“大块头”，也有新晋的太阳能Wifi无人机、以及貌似怪兽的软体无人机。更多的，当然还是应用范围涵盖安防、测绘、巡线、植保等行业应用的各种款式工业无人机，以及与此相关的行业上下游企业。            </div>
                                                <div class="article-tag">
                                                    <a href="/wearable.html" class="tag tag-primary">智能设备</a>
                                                    <span itemprop="date">2019年03月28日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 50 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/wearable/105.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 2249 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/smarthome/104.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="智能游戏WIFI无线手柄">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/smarthome/104.html">智能游戏WIFI无线手柄</a>
                                                </h3>
                                                <div class="article-intro">
                                                    游戏手柄品种琳琅满目，而游戏手柄除了可以在电脑上进行有线连接以外，很多手柄厂商也设计出了无线连接的手柄，毕竟厂商和消费者心知肚明：无线才是未来。与手机去除掉耳机孔不同，手柄的无线设计非常受欢迎。            </div>
                                                <div class="article-tag">
                                                    <a href="/smarthome.html" class="tag tag-primary">智能家居</a>
                                                    <span itemprop="date">2019年03月28日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 296 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/smarthome/104.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 5668 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/mobiledevice/103.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="高保真无绳WIFI耳机">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/mobiledevice/103.html">高保真无绳WIFI耳机</a>
                                                </h3>
                                                <div class="article-intro">
                                                    在蓝牙4.2时代，续航、延迟与偶尔的断线是真无线耳机无法解决的问题，即使是价值超过千元的大品牌，比如苹果的airpod、索尼WF-1000X降噪豆、BOSESoundsportFree也无法幸免，毕竟蓝牙4.2的硬件条件并不十分完善。            </div>
                                                <div class="article-tag">
                                                    <a href="/mobiledevice.html" class="tag tag-primary">移动设备</a>
                                                    <span itemprop="date">2019年03月27日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 285 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/mobiledevice/103.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 3933 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/jianjie/102.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="Royal TSX 1.4.6 好用的多终端工具">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/jianjie/102.html">Royal TSX 1.4.6 好用的多终端工具</a>
                                                </h3>
                                                <div class="article-intro">
                                                    Royal TSX专为服务器管理员、系统工程师、开发人员和IT信息工作者开发设计，是一款访问远程系统使用不同协议的完美工具。            </div>
                                                <div class="article-tag">
                                                    <a href="/jianjie.html" class="tag tag-primary">简介</a>
                                                    <span itemprop="date">2019年03月27日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 102 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/jianjie/102.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 1022 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/jianjie/101.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="vSSH 1.11.1 强大的多标签ssh工具">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/jianjie/101.html">vSSH 1.11.1 强大的多标签ssh工具</a>
                                                </h3>
                                                <div class="article-intro">
                                                    Vssh for Mac是一款mac平台的SSH客户端工具，支持用户名和密码加密，非常实用的一款SSH客户端工具。            </div>
                                                <div class="article-tag">
                                                    <a href="/jianjie.html" class="tag tag-primary">简介</a>
                                                    <span itemprop="date">2019年03月27日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 117 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/jianjie/101.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 6124 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="article-item">
                                        <div class="media">
                                            <div class="media-left">
                                                <a href="/mobiledevice/100.html">
                                                    <div class="embed-responsive embed-responsive-4by3 img-zoom">
                                                        <img src="https://dummyimage.com/800x600" alt="Apple watch 智能手表">
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="media-body">
                                                <h3 class="article-title">
                                                    <a href="/mobiledevice/100.html">Apple watch 智能手表</a>
                                                </h3>
                                                <div class="article-intro">
                                                    从 2015 年，苹果推出第一代 Apple Watch 后，在这 3 年时间里，Apple Watch 已经凭借着较准确的定位、合理的迭代升级逐渐成为了目前智能手表行业相对较优的选择。            </div>
                                                <div class="article-tag">
                                                    <a href="/mobiledevice.html" class="tag tag-primary">移动设备</a>
                                                    <span itemprop="date">2019年03月27日</span>
                                                    <span class="hidden-xs" itemprop="likes" title="点赞次数"><i class="fa fa-thumbs-up"></i> 168 点赞</span>
                                                    <span class="hidden-xs" itemprop="comments"><a href="/mobiledevice/100.html#comments" target="_blank" title="评论数"><i class="fa fa-comments"></i> 0</a> 评论</span>
                                                    <span class="hidden-xs" itemprop="views" title="浏览次数"><i class="fa fa-eye"></i> 3934 浏览</span>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                </div>

                                <!--@formatter:off-->

                                <!-- S 分页栏 -->
                                <div class="text-center pager">
                                    <ul class="pagination"><li class="disabled"><span>«</span></li> <li class="active"><span>1</span></li><li><a href="/u/1.html?page=2">2</a></li><li><a href="/u/1.html?page=3">3</a></li><li><a href="/u/1.html?page=4">4</a></li><li><a href="/u/1.html?page=5">5</a></li><li><a href="/u/1.html?page=6">6</a></li><li><a href="/u/1.html?page=7">7</a></li><li><a href="/u/1.html?page=8">8</a></li><li><a href="/u/1.html?page=9">9</a></li><li><a href="/u/1.html?page=10">10</a></li> <li><a href="/u/1.html?page=2">»</a></li></ul>    </div>
                                <!-- E 分页栏 -->
                                <!--@formatter:on-->

                            </div>
                        </div>
                    </div>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .form-layer {height:100%;min-height:150px;min-width:300px;}
    .form-body {
        width:100%;
        overflow:auto;
        top:0;
        position:absolute;
        z-index:10;
        bottom:50px;
        padding:15px;
    }
    .form-layer .form-footer {
        height:50px;
        line-height:50px;
        background-color: #ecf0f1;
        width:100%;
        position:absolute;
        z-index:200;
        bottom:0;
        margin:0;
    }
    .form-footer .form-group{
        margin-left:0;
        margin-right:0;
    }
</style>