@using Hncore.Pass.Vpn.Response.Product
@using Microsoft.Extensions.Configuration
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Infrastructure.Serializer;
@inject IConfiguration m_Configuration
@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
@model List<ProductWithPackageResponse>
@{
    ViewData["Title"] = "购买产品";
    UserLoginModel user = null;
    if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
    {
        user = userCookie.FromJsonTo<UserLoginModel>();
    }
    var pid = this.Context.Request.Query.ContainsKey("id") ? this.Context.Request.Query["id"].ToString() : "";
    var defaultProduct = Model.Select(m => m.Product).FirstOrDefault();
    if (pid == "")
    {
        pid = Model.Select(m => m.Product).FirstOrDefault().Id.ToString();
    }
    else
    {
        defaultProduct = Model.Select(m => m.Product).FirstOrDefault(m => m.Id.ToString() == pid);
    }

    var productPackages = Model.Where(m => m.Product.Id == defaultProduct.Id).FirstOrDefault().Packages.Where(p => p.Status == 1 && p.IsTest == 0);//.Select(m => m.Packages.Where(p => p.Status == 1 && p.IsTest == 0).FirstOrDefault());

    var defaultPackage = productPackages.FirstOrDefault();// Model.Where(m => m.Product.Id == defaultProduct.Id).Select(m => m.Packages.FirstOrDefault()).FirstOrDefault();

    var baseUrl = m_Configuration["BaseInfoUrl"];
    var restTimes = "3次";
    var restStatus = "注册即送";
    if (user != null){
        restStatus = "剩余次数";
        restTimes = await m_AccountService.GetRestTestCount(user.Id)+"次";
    }
    Func<string, string> P = (path) => $"{baseUrl}{path}";
}
<style>
    .productName {
        font-style: oblique;
        font-weight: 400;
        font-size: 32px;
        color: #f49119;
    }
    .pkgNameCard {
        background: #223da4;
        height: 90px;
        padding: 15px;
    }
    .clear {
        clear: both;
    }

    .clearfix:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both
    }

    .main-page {
        margin: 0 auto;
        width: 1170px;
        padding-bottom:50px;
    }

        .main-page .left {
            width:15%;
            border-right: 1px #ccc solid;
            margin-top: 25px;
            padding-right:10px;
        }

        .main-page .left, .main-page .right {
            float: left;
        }

        .main-page .nav-back {
            height: 300px;
        }

        .main-page .nav {
            position: relative;
            margin-top: -300px;
            width: 136px;
            text-align: center;
            font-size: 18px;
            font-family: "微软雅黑";
            color: #000;
        }

            .main-page .nav div {
                height: 47px;
                line-height: 47px;
                margin-bottom: 8px;
                border-radius: 2px;
                cursor: pointer;
            }

                .main-page .nav div.on {
                    background: #223da4;
                    color: #fff;
                }

        .main-page .right {
            width: 85%;
            height: 800px;
           
        }

        .main-page .content {
            position: relative;
            overflow: hidden;
        }
    .contentNew {
        border:none;
    }
    .youhuiNew {
        font-size: 16px;
        border: none;
        text-align: center;
        padding: 10px 0;
        color: red;
        font-weight: bold;

    }
    .mtop {
        margin-top:30px;
    }

    .packageitem1{
        position: relative;
    }
    .packageitem1::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "首单0.1元";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem1::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    .packageitem2{
        position: relative;
    }
    .packageitem2::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "7折+送 1 天";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem2::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }
    .packageitem3{
        position: relative;
    }
    .packageitem3::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "7折+送 3 天";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem3::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    .packageitem10{
        position: relative;
    }
    .packageitem10::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "7折+送 10 天";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem10::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

     .packageitem30{
        position: relative;
    }
    .packageitem30::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "7折+送 1 月";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem30::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

     .packageitem8530{
        position: relative;
    }
    .packageitem8530::before {
        position: absolute;
        top: 0.3rem;
        left: -0.5rem;
        z-index: 1;
        padding-right: 0.625rem;
        font-weight: bold;
        line-height: 0px;
        color: white;
        height: 0px;
        border: 1.0rem solid #FF9933;
        border-right-color: transparent;
        content: "8.5折+送 1 月";
        box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
    }

    .packageitem8530::after {
        content: "";
        position: absolute;
        top: 2.1875rem;
        left: -0.5rem;
        border: 0.25rem solid #f64e3d;
        border-left-color: transparent;
        border-bottom-color: transparent;
    }

    .warning{
        position: fixed;
        width: 400px;
        height: auto;
        left: 47%;
        top: 30%;
        z-index: 3;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 6px 8px 6px #ccc;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30px;
        display: none;
    }
     #hidebg { position:absolute;left:0px;top:0px;

      background-color:#000;

      width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/

      filter:alpha(opacity=60);  /*设置透明度为60%*/

      opacity:0.6;  /*非IE浏览器下设置透明度为60%*/

      display:none; /* https://www.daixiaorui.com */

      z-Index:2;}   
</style>
<!-- ad -->
<div id="hidebg"></div>
@* <div class="container-fluid ad">
    <a asp-action="taobao" asp-controller="article">   <img src="~/img/acBanner.png"></a>
</div> *@
<div class="container-fluid ad" style="background-image: url(/img/acBanner_1.png?11231);background-repeat:no-repeat;background-size:100% auto;height:270px;">

    <div class="row" style="color:white;width:calc(100vw-1px);">
        <div class="col-md-3 col-md-offset-1" style="padding-top:2%;text-align:center;">
            <h1>需求<span style="color: red;font-size:49px;">五个</span>以上</h1>
            <h2>联系客服设置优惠价</h2>
            <a target="_blank" href="https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"><h3 style="color: #e45b4b;">>>>联系客服<<<</h3></a>
        </div>
        <div class="col-md-8 " style="padding-top:1.5%;">
            <h2 style="padding-left:8%;">十余种全网知名旗舰产品低价热销</h2>
            <h1 style="font-size:45px;padding-left:6%;">淘宝动态IP销量排名NO.1</h1>
            <h4 style="color: #e45b4b;padding-left:5%;">已完美对接淘宝、淘宝付款后、金额将自动充值到您的会员余额中</h4>
            <a target="_blank" href="https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.45e51debbIPZJ7&ft=t&id=644774449094"><h4 style="color: #e45b4b;padding-left:2%;">欢迎淘宝下单，每次下单都会随机赠送优惠券，最低54元，优惠券支持所有套餐！&nbsp;<span style="color:#FFFF00;">点击去淘宝店铺付款&nbsp;<span class="glyphicon glyphicon-arrow-right"></span></span></h4></a>
        </div>
    </div>
</div>
@*新布局*@
<p class="text-center tit"><img src="~/img/titi_choose.png"></p>
<div class="main-page">
    <div class="left" style="width: 175px;margin-top:calc(10vh);">
        <div class="nav-back" style="width: 175px;"></div>
        <div class="nav" style="width:175px;">
            @foreach (var item in Model)
            {
                if(item.Product.Id == 18) {
                    <div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id"><span class="glyphicon glyphicon-thumbs-up" style="color: #f64e3d;font-weight:bold;padding-right: 5px;">新</span>@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">7折</span></div>
                }
                else if(item.Product.Id == 6) {
                    <div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id"><span class="glyphicon glyphicon-thumbs-up" style="color: #f64e3d;font-weight:bold;padding-right: 5px;"> </span>@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">9折</span></div>
                }
                else if(item.Product.Id == 1||item.Product.Id == 2||item.Product.Id == 13||item.Product.Id == 17||item.Product.Id == 19) {
                    <div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">8折</span></div>
                }
                else if(item.Product.Id == 5) {
                    <div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">9折</span></div>
                }
                else if(item.Product.Id == 14) {
                    <div class="dropdown">
                        <button type="button" class="btn dropdown-toggle" style="width: 99%;height:100%;background:white;padding:0;" id="dropdownMenu1" data-toggle="dropdown"><div style="font-size: 18px;" class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name<span style="color: #f64e3d;font-weight:bold;float:right;padding-right: 5px;">8折</span></div>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" onclick="ttzhizun()" style="color: #FF9900;">尊享版-不限速</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" onclick="ttgaoji()"  style="color: #FFCC00;">高级版-限速4M</a>
                            </li>
                            <li role="presentation">
                                <a role="menuitem" tabindex="-1" onclick="ttputong()"  style="color: #CCCC66;">普通版-限速2M</a>
                            </li>
                        </ul>
                    </div>
                }
                else {
                    <div class="productItem" id="@("p"+item.Product.Id)" a-pid="@item.Product.Id">@item.Product.Name </div>
                }
            }

        </div>
    </div>
    <div class="right">
        <div class="contentNew">
            @foreach (var item in Model)
            {
                <div class="container  packagebox" id="@("box"+item.Product.Id)">
                    <div class="container bg_taocan">
                        
                        <div class="row" style="background:url(/img/products.png) no-repeat;   background-size:100% 100%;">
                            <div class="col-lg-4" style="height:200px;padding-top:30px;padding-left:50px;">
                                <p class="productName">@item.Product.Name</p>
                                <p style="    border-bottom: 2px solid #fff;font-size:16px;">@(string.Join("|",item.Packages.Select(m=>m.Name)))</p>
                            </div>
                            <div class="col-lg-8" style="height:200px;padding-top:30px">                               
                                @foreach (var str in item.Product.ContentLine)
                                {
                                    <p>@str</p>
                                }
                                <div class="row" style="text-align: right;   position: absolute; right: 50px; bottom: 10px;">
                                    @if (user == null)
                                    {
                                        <button type="button" class="btn btn-warning reBuy" style="font-size:25px;">续费通道</button>
                                    }
                                    else
                                    {
                                        <a asp-action="myaccounts" asp-controller="user"><button type="button" class="btn btn-warning"  style="font-size:25px;">续费通道</button></a>
                                        
                                    }


                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="youhuiNew" style="padding:0;margin:0;color:white;background-color:#FF0033;">一毛钱活动：不分新老用户都可参加！</p>
                    @* @if(item.Product.Id == 5){
                        <br>
                    } *@
                    @if(item.Product.Id == 13||item.Product.Id == 17){
                     <p class="youhuiNew" style="color: #0066CC;">本产品目前所有地区都屏蔽QQ微信</p>
                        @* <div style="text-align:center;cursor:pointer;padding: 0px;margin:0px;font-size:15px;font-weight:bold;color:red;" title="目前公布要停的地区为：
长春,芜湖,西宁,贵阳,南宁,中卫,
兰州,武汉,西安,郑州,长沙,成都,
南昌,福州,昆明,海口,杭州,沈阳,
哈尔滨,乌鲁木齐,呼和浩特,青岛,
济南,苏州,南京,徐州,上海,深圳,重庆">购买须知：本产品以下地区屏蔽微信和QQ：上海,深圳,重庆...<span
			data-container="body" data-toggle="popover" data-placement="auto top" 
			data-content="目前公布要停的地区为：
长春,芜湖,西宁,贵阳,南宁,中卫,兰州,武汉,西安,郑州,长沙,成都,南昌,福州,昆明,海口,杭州,沈阳,哈尔滨,乌鲁木齐,呼和浩特,青岛,济南,苏州,南京,徐州,上海,深圳,重庆" style="color: #000000;">查看详细地区 </span>
                    </div> *@
                    }
                    @if(item.Product.Id == 18){
                        <p class="youhuiNew" style="color: #FF9900;">天卡买一送一，周卡送3天，月卡送10天，双月卡送1个月，聚IP年中回馈，赠送力度史无前例！<br>（新开和续费都可参加，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）<br>新产品上线，全新IP池！</p>
                        <p class="youhuiNew" style="color: #0066CC;padding:0;margin:0;">本产品目前所有地区都屏蔽QQ微信</p>
                        @* <div style="text-align:center;cursor:pointer;padding: 0px;margin:0px;font-size:15px;font-weight:bold;color:red;" title="目前公布要停的地区为：
南京,重庆,六盘水，遵义，海口,无锡,常州,苏州,
铁岭,葫芦岛,抚顺,大连,辽源,通化,
宿迁,宁德,金华,池州">购买须知：本产品以下地区屏蔽微信和QQ：南京,海口...<span
			data-container="body" data-toggle="popover" data-placement="auto top" 
			data-content="目前公布要停的地区为：
南京,六盘水，遵义，海口,无锡,常州,苏州,
铁岭,葫芦岛,抚顺,大连,辽源,通化,
宿迁,宁德,金华,池州" style="color: #000000;">查看详细地区 </span>
                    </div> *@
                    }
                    @if(item.Product.Id == 8||item.Product.Id == 7){
                        <p class="youhuiNew" style="color: #0066CC;">因业务调整，本产品停止新开及续费，未到期账号可正常使用</p>
                    }
                    @if(item.Product.Id == 14){
                        <p class="youhuiNew">天天IP于8.6日已恢复，全新IP池，欢迎选购！<br>购买须知：本产品新开账号屏蔽QQ微信<br>购买需选择左侧天天产品类型</p>
                    }
                    @if(item.Product.Id == 1){
                        <p class="youhuiNew" style="color: #0066CC;">本产品目前所有地区都屏蔽QQ微信</p>
                        @* <div style="text-align:center;cursor:pointer;padding:5px;font-size:15px;font-weight:bold;color:red;" >购买须知：本产品域名出现问题，点击查看服务器ip地址<span
			data-container="body" data-toggle="popover" data-placement="auto top" 
			data-content="强子1混播 122.228.64.103
强子2混播  222.242.147.43
强子3混播  61.187.241.67
强子4混播  122.228.64.101
强子5混播  61.187.241.67
强子6混播  122.228.64.102
强子7混播  61.187.240.176
强子8混播  113.219.4.23
单地区用以上混播ip + 特征码连接，如您的IP账号为zx1234，要直连温州的，那账号框就输入：zx1234@zjwz。
" style="color: #000000;">查看详细地区 </span>
                    </div> *@
                    }
                    <script>
                        $(function () { 
                            $("[data-toggle='popover']").popover();
                        });
                    </script>
                    @if(item.Product.Id == 2){
                     <p class="youhuiNew" style="color: #0066CC;">本产品目前所有地区都屏蔽QQ微信</p>
                       @* <div style="text-align:center;cursor:pointer;padding:5px;font-size:15px;font-weight:bold;color:red;" >购买须知：本产品域名出现问题，点击查看服务器ip地址<span
			data-container="body" data-toggle="popover" data-placement="auto top" 
			data-content="讯连1混播 122.228.64.99
讯连2混播  61.187.186.42
单地区用以上混播ip + 特征码连接，如您的IP账号为zx1234，要直连温州的，那账号框就输入：zx1234@zjwz。
" style="color: #000000;">查看详细地区 </span>
                    </div> *@
                    }
                    @if(item.Product.Id == 6){
                       <p class="youhuiNew">本产品目前所有地区都屏蔽QQ微信<br><span  style="color: #FF9900;">双月卡赠送1个月，多买多送,活动截止2月15号<br>
（新开和续费都可参加，您可对同一账号多次续费都有赠送，每位会员不限账号数量，您可购买多个IP账号都有赠送）</span></p>
                    }
                    @if(item.Product.Id == 5){
                        <p class="youhuiNew">购买须知：本产品目前所有地区都屏蔽QQ微信</p>
                    }
                    @if(item.Product.Id == 19){
                        <p class="youhuiNew" style="color: #0066CC;">本产品目前所有地区都屏蔽QQ微信</p>
                        <p class="youhuiNew" style="padding: 0px;margin:0px;">本产品为独享，每个账号对应一个宽带拨号，永不超载，保证了网速及稳定性。<br>使用时只需设置这个唯一的服务器：1.hhip.vip，在账号列表中点击切换地区即可任意组合自己需要的地区<br><span style="color: #000000;">切记一定要指定一下地区，不然会没有网络</span>
                        </p>
                         @* <div style="text-align:center;cursor:pointer;padding: 0px;margin:0px;font-size:15px;font-weight:bold;color:red;" title="目前公布要停的地区为：
北京,上海,广州,深圳,重庆，浙江全省，安徽全省,
成都,徐州,南京,宿迁,福州,三明,南平,南昌,赣州,萍乡,
鄂尔多斯,包头,呼和浩特,韶关,东莞,烟台,滨州，青岛,
黄冈，武汉,邯郸，唐山，石家庄,曲靖，昆明,郑州,西安,
长沙,长春,兰州,哈尔滨,太原，运城，晋中,南宁,西宁,中卫">购买须知：本产品以下地区屏蔽微信和QQ：北京,上海,广州,深圳,重庆，浙江全省，安徽全省...<span
			data-container="body" data-toggle="popover" data-placement="auto top" 
			data-content="目前公布要停的地区为：
北京,上海,广州,深圳,重庆，浙江全省，安徽全省,
成都,徐州,南京,宿迁,福州,三明,南平,南昌,赣州,萍乡,
鄂尔多斯,包头,呼和浩特,韶关,东莞,烟台,滨州，青岛,
黄冈，武汉,邯郸，唐山，石家庄,曲靖，昆明,郑州,西安,
长沙,长春,兰州,哈尔滨,太原，运城，晋中,南宁,西宁,中卫" style="color: #000000;">查看详细地区 </span>
                    </div> *@
                    }
                    
                    @*<p class="text-center nameSmall">—<span>@item.Product.Name</span>—</p>*@
                    <div class="card" style="margin-top:30px;">
                    <div style="display: flex;margin: 0 auto;">

                        @if(item.Product.TenantId == 1157){
                            <div class="item packageitem" a-test="true" id="@("pkgtest"+item.Product.Id)" a-pkg-id="@item.Product.Id">
                                <p><span class="price">免费</span></p>
                                <p class="yuanjia" style="color: #FF9900;text-decoration:none;"><span>@restStatus</span></p>
                                <p>@restTimes</p>
                                <div class="pkgNameCard">
                                    <p class="tianka" style="font-size:17px;color:white;">测试卡</p>
                                    <p class="qixian">使用期限:1小时</p>
                                </div>
                                <img src="~/img/check.png" class="cardCheck">
                            </div>
                        }

                        @foreach (var package in item.Packages.Where(m => m.IsTest == 0 && m.Status == 1 ).OrderBy(m => m.TenantId))
                        {

                            <style>
                                .packageitem-@package.Id{
                                    position: relative;
                                }
                                .packageitem-@package.Id::before {
                                    position: absolute;
                                    top: 0.3rem;
                                    left: -0.5rem;
                                    z-index: 1;
                                    padding-right: 0.625rem;
                                    font-weight: bold;
                                    line-height: 0px;
                                    color: white;
                                    height: 0px;
                                    border: 1.2rem solid #f64e3d;
                                    border-right-color: transparent;
                                    content: "@package.Title 折";
                                    box-shadow: 0px 0.3125rem 0.3125rem -0.3125rem #000;
                                }

                                .packageitem-@package.Id::after {
                                    content: "";
                                    position: absolute;
                                    top: 2.1875rem;
                                    left: -0.5rem;
                                    border: 0.25rem solid #f64e3d;
                                    border-left-color: transparent;
                                    border-bottom-color: transparent;
                                }
                            </style>

                            @if(package.Price == 0.1M){
                                
                                <div class="item packageitem packageitem1" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
                                    

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#FF9933">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else if(package.Id == 1030){
                                
                                <div class="item packageitem packageitem2" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else if(package.Id == 1031){
                                
                                <div class="item packageitem packageitem3" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else if(package.Id == 1032){
                                
                                <div class="item packageitem packageitem10" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else if(package.Id == 1033){
                                
                                <div class="item packageitem packageitem30" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else if(package.Id == 104){
                                
                                <div class="item packageitem packageitem8530" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">

                                    <p><span class="price">@package.Price</span>元</p>
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            } 
                            else {
                                
                                <div class="item packageitem packageitem-@package.Id" id="@("pkg"+package.Id)" a-pkg-id="@package.Id">
                                   

                                    @if((package.Id == 64||package.Id == 1004)&&package.Price<60){
                                        <p><span class="price">60.00</span>元</p>
                                    } else {
                                        <p><span class="price">@package.Price</span>元</p>
                                    }
                                    <p class="yuanjia" style="color: #FF9900;">原价：<span>@package.LinePrice</span>元</p>
                                    <p>@(Math.Round(package.Price/package.DayCount,2))元/天</p>
                                    <div class="pkgNameCard" style="background-color:#f64e3d">
                                        <p class="tianka" style="font-size:17px;color:white;">@package.Name</p>
                                        <p class="qixian">@package.Profile</p>
                                    </div>
                                    <img src="~/img/check.png" class="cardCheck">
                                </div>
                            }
                        }
                    
                    </div>
                    </div>
                    <div style="margin-left:26%">
                    <div style="border: 1px dashed #ccc;margin-top:30px;width:50%;margin-left: 63px;background-color:#FFCC33">
                        <p class="youhuiNew" style="padding-bottom:0px;">温馨提示：需求5个以上，可以联系客服设置优惠价</p>
                        <p class="youhuiNew" style="padding-top:0px;padding-bottom:0px;">开通后有任何问题可无理由退款，并支持自助提现</p>
                     
                    </div>
                    </div>
                  

                    @if (user == null)
                    {
                        <p class="tijiao"><button type="button" class="btn btn-primary login">提交</button></p>
                    }
                    else
                    {
                        <p class="tijiao"><button type="button" class="btn btn-primary btn-submit">提交</button></p>
                    }
                </div>
            }

        </div>
    </div>
    <div class="clear"></div>
    <div class="warning">
        <div class="panel panel-default">
            <div class="panel-body text-center" style="font-size: 20px;">
                请先选择产品套餐^.^
            </div>
            <p class="text-center">
                <button type="button" class="btn btn-danger quxiao" onclick="$('.warning').hide();$('#hidebg').hide();">我明白了</button>
            </p>
        </div>
    </div>
</div>


@section Scripts{
    <script type="text/javascript">
        var currentPkgId = 0;
        var testProductId = 0;
        var isTest = false;
        function select(id) {
            var el = "#p" + id;
            var packageBox = "#box" + id;
            $(".packagebox").hide();
            $(packageBox).show();
            $(el).addClass("on");
            $(el).siblings().removeClass("on");
            var pkgid = $(el).attr("a-pkg-id");
            //selectPackage(pkgid);
        }

        function selectPackage(id ,falg = false) {
            currentPkgId = id;
            var el = "#pkg" + id;
            //$(".packageitem").hide();
            //$(el).show()
            
            

            $(el).siblings().removeClass("kuang");
            $(el).siblings().find(".cardCheck").hide();
            if(falg){
                $("#pkgtest" + id).addClass("kuang");
                $("#pkgtest" + id).find(".cardCheck").show();
            } else {
                $(el).addClass("kuang");
                $(el).find(".cardCheck").show();
            }
        }
        function loginSuccess(data) {
            window.location.href = "/product/index";
        }
        function testLoginSuccess(data) {
            window.location.href = "Test?id=" + testProductId;
        }
        function reBuyLoginSuccess(data) {
            window.location.href = "/User/MyAccounts";
        }

        //隐藏天天尊享版
        function hidettzz(){
            $("#pkg69").hide();
            $("#pkg70").hide();
            $("#pkg71").hide();
            $("#pkg1022").hide();
            $("#pkg1023").hide();
        }
        //隐藏天天高级版
        function hidettgj(){
            for (var i=1034;i<1039;i++){
                $("#pkg"+i).hide();
            }
        }
        //隐藏天天普通版
        function hidettpt(){
           for (var i=1039;i<1044;i++){
                $("#pkg"+i).hide();
            }
        }
        function ttzhizun() {
            $("#pkgtest14").show();
            $("#pkg69").show();
            $("#pkg70").show();
            $("#pkg71").show();
            $("#pkg1022").show();
            $("#pkg1023").show();
            for (var i=1033;i<1046;i++){
                $("#pkg"+i).hide();
            }
        }
        function ttgaoji() {
            $("#pkgtest14").hide();
            $("#pkg69").hide();
            $("#pkg70").hide();
            $("#pkg71").hide();
            $("#pkg1022").hide();
            $("#pkg1023").hide();
            for (var i=1040;i<1046;i++){
                $("#pkg"+i).hide();
            }
            for (var i=1034;i<1040;i++){
                $("#pkg"+i).show();
            }
        }
        function ttputong() {
            $("#pkgtest14").hide();
            $("#pkg69").hide();
            $("#pkg70").hide();
            $("#pkg71").hide();
            $("#pkg1022").hide();
            $("#pkg1023").hide();
            for (var i=1040;i<1046;i++){
                $("#pkg"+i).show();
            }
            for (var i=1034;i<1040;i++){
                $("#pkg"+i).hide();
            }
        }
    $(function () {
        $(".productItem").click(function () {
            //$(this).addClass("kuang");
            //$(this).siblings().removeClass("kuang");
            //$(this).find(".check").show();
            //$(this).siblings().find(".check").hide();
            $("[data-toggle='popover']").popover('hide')
            var pid = $(this).attr('a-pid');
            if(pid == 7){
                alert('请注意！无尽IP仅供电脑端使用！');
            }
            if (pid == 14) {
                $("#pkgtest14").hide();
                $("#pkg69").hide();
                $("#pkg70").hide();
                $("#pkg71").hide();
                $("#pkg1022").hide();
                $("#pkg1023").hide();
                for (var i=1034;i<1046;i++){
                    $("#pkg"+i).hide();
                }
                for (var i=1;i<30;i++){
                    $("#p"+i).removeClass("on");
                }
            } else {
                $("#p14").removeClass("on");
            }
            select(pid);
        });
        $(".card .item").click(function () {
            currentPkgId = $(this).attr('a-pkg-id');
            if ($(this).attr('a-test')){
                isTest = true;
            } else {
                isTest = false;
            }
            selectPackage(currentPkgId, isTest)
            //$(this).addClass("kuang");
            //$(this).siblings().removeClass("kuang");
            //$(this).find(".cardCheck").show();
            //$(this).siblings().find(".cardCheck").hide();

        })
        $(".btn-submit").click(function () {
            if(!currentPkgId){
                $('#hidebg').height($(document).height());
                $('#hidebg').show();
                $('.warning').show();
                return;
            }
            if(isTest||currentPkgId==1034||currentPkgId==1040){
                window.location.href = "Test?id=" + currentPkgId;
            } else {
                window.location.href = "Buy?id=" + currentPkgId;
            }
        })
        $(".testLogin").click(function () {
            loginCallback = testLoginSuccess;
            testProductId = $(this).attr("a-productId");
            $(".mask").show();
            $(".main").show();
            $(".main").addClass("animated bounceInDown");
        });
        $(".reBuy").click(function () {
            loginCallback = reBuyLoginSuccess;
            $(".mask").show();
            $(".main").show();
            $(".main").addClass("animated bounceInDown");
        });
    })
     select(@defaultProduct.Id)
    </script>

    @*<script type="text/javascript">
        $(".main-page .nav div").mouseenter(function () {
            var $this = $(this);
            var index = $this.index();
        }).mouseleave(function () {
            var $this = $(this);
            var index = $this.index();
        }).click(function () {
            var $this = $(this);
            var index = $this.index();
            var l = -(index * 800);
            $(".main-page .nav div").removeClass("on");
            $(".main-page .nav div").eq(index).addClass("on");
            $(".main-page .content .con-ggh:eq(0)").stop().animate({ "margin-top": l }, 500);
        });
    </script>*@
}