云服务器价格 - 高性价比云主机租用
<section class="padding-60-0-100 position-relative eee-bg">
<div class="container">
<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">
<pre><code> <div class="card">
<div class="card-header">
基本配置
</div>
<div class="card-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">
<!-- 主机类型 -->
{foreach name="wareSort" id="sort"}
<button data-val="{$key}" data-class=".{$sort}"
data-sort="{$sort}">{$sort}</button>
{/foreach}
</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.os} {$local.type} local ware"
data-class=".{$local.local}">{$local.local}</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="{if $Request.param.wid==$ware.wid}active{/if} {$ware.os} {$ware.sort} {$ware.local} local ware locals"
data-class=".{$ware.os}" data-sid="{$ware.wid}">{$ware.name}</button>
{/volist}
<!-- 自定义产品列表 -->
{volist name="customize" id="cust"}
<button
class="{if $Request.param.wid==$cust.wid}active{/if} {$cust.sort} local customize"
data-sid="{$cust.wid}">{$cust.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 os">
<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="card">
<div class="card-header">
当前配置
</div>
<div class="card-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="card">
<div class="card-header">
购买时长
</div>
<div class="card-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">
<select name="numberBtn_select" id="numberBtn_select" class="form-control">
<option value="1">1个月</option>
</select>
<button class="active">1个月</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</code></pre>
</section>
<script>
// 首次访问时隐藏全部商品，只显示分类
$(document).ready(function () {
$("#wareBtn button").hide();
$("#wareBtn button.locals").show();
});
// 根据主机类型切换显示对应的商品
$("#vhostBtn button").click(function () {
var val = $(this).data("val");
$("#wareBtn button").hide();
$("#wareBtn button." + val).show();
});
</script>
原文地址: https://www.cveoy.top/t/topic/bX7j 著作权归作者所有。请勿转载和采集!