@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Data
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model PageData<ArticleEntity>
@{
    var type = this.Context.Request.GetInt("Catalog");  
}
<div class="container-fluid softBg">
    <div class="container">
        <form asp-action="Search" asp-controller="Article" method="get">
            <div class="row">
                <div class="col-lg-3 zxbz">
                    <img src="~/img/img_news.png">
                </div>
                <div class="col-lg-6 searchInput">
                    <input type="text" name="KeyWord" />
                    <p class="hot">搜索热词：<span>账号无法登录</span><span>如何充值</span></p>
                </div>
                <div class="col-lg-3 searchBtn text-left">
                    <button type="submit" class="btn btn-search">立即搜索</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="container-fluid conBg">
    <div class="container">
        <div class="fourModel">
            <div class="item">
                <p><a asp-action="info" asp-controller="article" asp-route-id="3"><img src="~/img/ios.png"></a></p>
                <p>苹果手机教程</p>
            </div>
            <div class="item">
                <p><a asp-action="info" asp-controller="article" asp-route-id="4"><img src="~/img/az.png"></a></p>
                <p>安卓手机教程</p>
            </div>
            <div class="item">
                <p><a asp-action="info" asp-controller="article" asp-route-id="5"><img src="~/img/mnq.png"></a></p>
                <p>安卓模拟器教程</p>
            </div>
            <div class="item">
                <p><a asp-action="info" asp-controller="article" asp-route-id="6"><img src="~/img/pc.png"></a></p>
                <p>Windows电脑教程</p>
            </div>
        </div>

        <div class="mylist">
            <ul class="nav nav-tabs newsList" role="tablist">
                <li role="presentation" class="@(type==1?"active":"")"><a href="?Catalog=1"><img src="~/img/tab1.png">聚头条</a></li>
                <li role="presentation" class="@(type==2?"active":"")"><a href="?Catalog=2"> <img src="~/img/tab2.png">优惠活动</a></li>
                <li role="presentation" class="@(type==3?"active":"")"><a href="?Catalog=3"><img src="~/img/tab3.png">常见问题</a></li>
                <li role="presentation" class="@(type==4?"active":"")"><a href="?Catalog=4"><img src="~/img/tab4.png">新手教程</a></li>
                @*<li role="presentation" class="@(type==0?"active":"")"><a href="?Catalog=0"><img src="~/img/tab4.png">全部</a></li>*@

            </ul>
            <div class="tab-content listcon">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <ul class="listUl">
                        @foreach (var item in Model.List)
                        {
                            <li>
                                <div class="newsTit">
                                    <div class="item">
                                        @item.Title
                                    </div>
                                    <div class="item">
                                        @item.CreateTime.ToString("yyyy.MM.dd")
                                    </div>
                                </div>
                                <p class="gaiyao">@item.SubTitle</p>
                                <p><a asp-action="info" asp-controller="article" asp-route-id="@item.Id">查看全文→</a></p>
                            </li>
                        }

                        @*<li>
                                <div class="newsTit">
                                    <div class="item">
                                        如何查看IP代理地址是否启动成功？
                                    </div>
                                    <div class="item">
                                        2020.1.1
                                    </div>
                                </div>
                                <p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
                                <p><a href="#">查看全文→</a></p>
                            </li>
                            <li>
                                <div class="newsTit">
                                    <div class="item">
                                        如何查看IP代理地址是否启动成功？
                                    </div>
                                    <div class="item">
                                        2020.1.1
                                    </div>
                                </div>
                                <p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
                                <p><a href="#">查看全文→</a></p>
                            </li>
                            <li>
                                <div class="newsTit">
                                    <div class="item">
                                        如何查看IP代理地址是否启动成功？
                                    </div>
                                    <div class="item">
                                        2020.1.1
                                    </div>
                                </div>
                                <p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
                                <p><a href="#">查看全文→</a></p>
                            </li>
                            <li>
                                <div class="newsTit">
                                    <div class="item">
                                        如何查看IP代理地址是否启动成功？
                                    </div>
                                    <div class="item">
                                        2020.1.1
                                    </div>
                                </div>
                                <p class="gaiyao">概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字概要文字</p>
                                <p><a href="#">查看全文→</a></p>
                            </li>*@
                    </ul>
                </div>
            </div>

            <div class="fenye">
                @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
                @*<ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link fenyeActive" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>*@
            </div>
        </div>
    </div>
</div>