{extend name="Hustbe/common/base" /}
{block name="title"}{:__('虚拟主机销售页面')}{/block}
{block name="banner"}
<!-- 模版特殊处理，其他模版不参考此方法 -->
<div class="container-fluid" id="top-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title">
                    <div class="title-with-icon">
                        <span class="icon"><img src="{$TemplateStatic}/images/server1.svg" alt=""></span><span
                            class="text">{:__('虚拟主机销售页面')}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="main"}
<style>
    .button-group button {
        background: white;
        border: 1px solid red;
        border: 0;
        color: rgb(0, 0, 0);
        margin-bottom: 12px;
        line-height: 30px;
        font-size: 14px;
        width: 32.3%;
        border: 1px solid #d6d6d6;
    }

    .button-group .active {
        background: #00bfde;
        color: white;
    }

    .sub-pricing {
        text-align: left;
        background: #f5f5f6;
    }

    .sub-pricing .panel-body {
        color: #73777a;
    }

    .sub-pricing .panel-heading {
        background-color: white;
    }


    .sub-pricing label {
        color: #73777a;
        font-size: inherit;
    }

    .wareInfo {
        padding: 15px;
        display: none;
    }

    .shoppingInfo ul,
    .wareInfo ul {
        padding: 0px;
    }

    .shoppingInfo li,
    .wareInfo li {
        list-style: none;
    }

    .total-price,
    .new-money {
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 24px;
        color: #ff8a00;
        line-height: 1;
        clear: both;
    }

    .new-money {
        font-size: xx-large;
        display: inline-block;
    }

    .total-price span {
        font-size: 12px;
        color: #35b34a;
        /* margin-left: 8px; */
        vertical-align: middle;
    }

    .description {
        font-size: 12px;
        color: #ff8a00;
        margin: 8px 0;
    }

    .description a {
        padding: 0px 6px;
        font-size: 15px;
    }

    .description a:hover {
        color: cadetblue;
    }

    .shoppingInfo {
        color: #999;
    }

    .shoppingInfo button {
        background: #ff8a00;
        font-size: 14px;
        color: #fff;
        padding: 0 30px;
        height: 45px;
        line-height: 40px;
        border-color: transparent;
    }

    .shoppingInfo .disabled {
        background: #c1c1c1;
    }

    .panel {
        border-radius: 0px;
        border: unset;
    }

    .presell_desc {
        color: red;
    }

    .promotion_desc {
        color: #ff8a00;
    }

    @media screen and (min-width:500px) {
        .content {
            /* width: 50%; */
            padding: 0 10%;
        }

        .button-group button {
            width: 120px;
        }
    }
</style>
<div class="sub-pricing container-fluid">
    <div class="ware-content">
        <div class="row content">
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">基本配置</h3>
                    </div>
                    <div class="panel-body">
                        <!-- 主机类型 -->
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-2">
                                <label for="">主机类型：</label>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-10">
                                <div class="button-group" id="vhostBtn">
                                    <!-- 主机类型 -->
                                    {volist name="vhostType" id="vhost"}
                                    <button data-val="{$key}" class="{if $Request.get.vhost==$key}active{/if}"
                                        title="{$vhost}" data-class=".{$key}">{$vhost}</button>
                                    {/volist}

                                </div>
                            </div>
                        </div> <!-- 机房 -->
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-2">
                                <label for="">机房：</label>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-10">
                                <div class="button-group" id="localBtn">
                                    <!-- 机房/地区 -->
                                    {volist name="wareList" id="local"}
                                    <button class="{$local.type} local ware"
                                        ></button>
                                    {/volist}
                                </div>
                            </div>
                        </div> <!-- 产品名 -->
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-2">
                                <label for="">产品名称：</label>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-10">
                                <div class="button-group" id="wareBtn">
                                    <!-- 产品列表 -->
                                    {volist name="wareList" id="ware"}
                                    <button class=" {$ware.type}  local ware locals"
                                         data-sid="{$ware.wid}">{$ware.name}</button>
                                    {/volist}
                                </div>
                                <!-- 产品描述内容 -->
                                <div class="wareInfo">
                                    <ul>
                                        <li>10GB Storage</li>
                                        <li>1 Domain name</li>
                                        <li>512Mb Ram</li>
                                        <li>5GB Bandwidth</li>
                                        <li>10 Emails</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 操作系统 -->
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-2">
                                <label for="">操作系统：</label>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-10">
                                <div class="button-group" id="osBtn">
                                    <!-- 操作系统 -->
                                    {volist name="osType" id="os"}
                                    <button class="{$os} os" data-val="{$os}">{$os}</button>
                                    {/volist}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">当前配置</h3>
                    </div>
                    <div class="panel-body">
                        <div class="shoppingInfo">
                            <!-- 当前配置汇总 -->
                            <ul>
                                <li>
                                    <span class="vhost-info-key">主机类型：</span>
                                    <span class="vhost-info-value"></span>
                                </li>
                                <li>
                                    <span class="local-info-key">机房：</span>
                                    <span class="local-info-value"></span>
                                </li>
                                <li>
                                    <span class="ware-info-key">产品名称：</span>
                                    <span class="ware-info-value"></span>
                                </li>
                                <li>
                                    <span class="os-info-key">操作系统：</span>
                                    <span class="os-info-value"></span>
                                </li>
                                <li>
                                    <span class="number-info-key">时长：</span>
                                    <span class="number-info-value"></span>
                                </li>
                            </ul>
                            <!-- 主机其他说明 -->
                            <div class="presell_desc">

                            </div>
                            <!-- 促销 -->
                            <div class="promotion_desc">

                            </div>
                            <!-- 自定义域名 -->
                            <div class="custom_domain">

                            </div>
                            <hr>
                            <div class="price-info">
                                <div class="price-title">总配置费用：</div>
                                <!-- 总计费用及优惠价格 -->
                                <div class="total-price">
                                    ￥<b class="new-money">0</b>
                                    <span class="price-save">节省￥<span class="price-money">0</span></span>
                                </div>
                            </div>
                            <!-- 最终商品的信息 -->
                            <form id="orderInfo">
                                <input type="hidden" value="" id="wareId" name="wid">
                                <input type="hidden" value="" id="buyTime" name="time">
                                <input type="hidden" value="" id="custom_domain" name="custom_domain">
                                {:token()}
                            </form>

                            <div class="build-button">
                                {if $user.id==''}
                                <button id="buildOrder" disabled="" class="disabled" title="请登录后下单"> 立即购买 </button>
                                {else/}
                                <button id="buildOrder"> 立即购买 </button>
                                {/if}
                            </div>
                            <!-- 判断是否登录 -->
                            <div class="description">
                                {if $user.id==''}请<a href="{:url('index/user/login')}" class="text-info"
                                    title="点击登录">登录</a>查看更多优惠{/if}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">购买时长</h3>
                    </div>
                    <div class="panel-body default-button">
                        <div class="row">
                            <div class="col-xs-2 col-sm-12 col-md-2">
                                <label for="">时长：</label>
                            </div>
                            <div class="col-xs-10 col-sm-12 col-md-10">
                                <!-- 最小、最大可购买份数 -->
                                <div class="button-group" id="numberBtn">
                                    <button class="active">1个月</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
{/block}