ApiAdmin/application/index/view/product/index.html

{extend name="public/base" /}
{block name="title"}用户中心{/block}
{block name="myStyle"}
    <link href="__CSS__/product.css" rel="stylesheet">
{/block}
{block name="myContent"}
    <div id="bg" style="background-image:url(__IMG__/cover/bg6.jpg);"></div>
    <div id="bg-mask"></div>

    <header class="header">
        <nav class="navbar" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img style="width:50px;" src="__IMG__/logo.jpg" alt=""></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="http://www.7d-vision.com">返回七维首页</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <div class="container pt50">
        <ul class="product-list">
            <li class="product">
                <h3 class="product-tit">Go!Pano studio（正式版） <a class="btn btn-link J-proDetail" href="###">查看详情</a></h3>
                <div class="product-desc-pop hide">
                    <h3 class="product-tit">Go!Pano studio（正式版）</h3>
                    <div class="product-img"><img style="width:100%;" src="__IMG__/product/gopano_studio.jpg" alt=""></div>
                    <div class="product-desc">
                        <h4 class="display-h4">出色4k</h4>
                        <p>实时预监画面<br>
                            支持VR头显、电脑显示器画面预览,一键调节曝光、白平衡、色彩饱和度、伽马值，消除误拍风险
                        </p>

                        <h4 class="display-h4">多目镜头</h4>
                        <p>画面完美实时缝合</p>

                        <p>支持2-10目镜头的全景视频实时缝合<br>
                            内置算法实时还原真实视角</p>

                        <h4 class="display-h4">4K输出</h4>
                        <p>强大的4K输出能力</p>

                        <p>支持SDI/HDNI信号输出以及本地画面录制</p>

                        <h4 class="display-h4">稳定安全的系统</h4>
                        <p>高效拍摄可不间断连续录制12个小时以上</p>

                        <h4 class="display-h4">人性化界面</h4>
                        <p>最贴合摄影师习惯<br>
                            操作界面简洁明了、美观舒适、容易上手</p>

                        <h4 class="display-h4">一键美化</h4>
                        <p>打造大片既视感<br>
                            系统自带调色功能，输出更完美、细腻的全景影片</p>
                    </div>
                </div>
                <div class="product-ctrl">
                    <a href="#" proName="Go!Pano studio（正式版）" type="1" class="btn btn-danger J-btn-buy">立即购买</a>
                    <!-- <a href="#" class="btn btn-primary J-btn-downloadFreetrial">下载试用版</a> -->
                </div>
            </li>
            <li class="product">
                <h3 class="product-tit">Go!Pano studio（体验版） <a class="btn btn-link J-proDetail" href="###">查看详情</a></h3>
                <div class="product-desc-pop hide">
                    <h3 class="product-tit">Go!Pano studio（体验版）</h3>
                    <div class="product-img"><img style="width:100%;" src="__IMG__/product/gopano_studio_freetrial.jpg" alt=""></div>
                    <div class="product-desc">
                        <h4 class="display-h4">出色4k</h4>
                        <p>实时预监画面<br>
                            支持VR头显、电脑显示器画面预览,一键调节曝光、白平衡、色彩饱和度、伽马值，消除误拍风险
                        </p>

                        <h4 class="display-h4">多目镜头</h4>
                        <p>画面完美实时缝合</p>

                        <p>支持2-10目镜头的全景视频实时缝合<br>
                            内置算法实时还原真实视角</p>

                        <h4 class="display-h4">4K输出</h4>
                        <p>强大的4K输出能力</p>

                        <p>支持SDI/HDNI信号输出以及本地画面录制</p>

                        <h4 class="display-h4">稳定安全的系统</h4>
                        <p>高效拍摄可不间断连续录制12个小时以上</p>

                        <h4 class="display-h4">人性化界面</h4>
                        <p>最贴合摄影师习惯<br>
                            操作界面简洁明了、美观舒适、容易上手</p>

                        <h4 class="display-h4">一键美化</h4>
                        <p>打造大片既视感<br>
                            系统自带调色功能，输出更完美、细腻的全景影片</p>
                    </div>
                </div>
                <div class="product-ctrl">
                    <!-- <a href="#" class="btn btn-danger J-btn-buy">立即购买</a> -->
                    <a href="#" proName="Go!Pano studio（体验版）" type="2" url="{:url('Product/buy')}" class="btn btn-primary J-btn-downloadFreetrial">下载试用版</a>
                </div>
            </li>
            <li class="product">
                <h3 class="product-tit">Go!Pano studio for Free<a class="btn btn-link J-proDetail" href="###">查看详情</a></h3>
                <div class="product-desc-pop hide">
                    <h3 class="product-tit">Go!Pano studio for Free</h3>
                    <div class="product-img"><img style="width:100%;" src="__IMG__/product/gopano_studio.jpg" alt=""></div>
                    <div class="product-desc">
                        <h4 class="display-h4">出色4k</h4>
                        <p>实时预监画面<br>
                            支持VR头显、电脑显示器画面预览,一键调节曝光、白平衡、色彩饱和度、伽马值，消除误拍风险
                        </p>

                        <h4 class="display-h4">多目镜头</h4>
                        <p>画面完美实时缝合</p>

                        <p>支持2-10目镜头的全景视频实时缝合<br>
                            内置算法实时还原真实视角</p>

                        <h4 class="display-h4">4K输出</h4>
                        <p>强大的4K输出能力</p>

                        <p>支持SDI/HDNI信号输出以及本地画面录制</p>

                        <h4 class="display-h4">稳定安全的系统</h4>
                        <p>高效拍摄可不间断连续录制12个小时以上</p>

                        <h4 class="display-h4">人性化界面</h4>
                        <p>最贴合摄影师习惯<br>
                            操作界面简洁明了、美观舒适、容易上手</p>

                        <h4 class="display-h4">一键美化</h4>
                        <p>打造大片既视感<br>
                            系统自带调色功能，输出更完美、细腻的全景影片</p>
                    </div>
                </div>
                <div class="product-ctrl">
                    <a href="#" class="btn btn-default J-btn-buy disabled">即将开放</a>
                </div>
            </li>
            <li class="product">
                <h3 class="product-tit">Go!Pano Sony-RigⅡ<a class="btn btn-link J-proDetail" href="###">查看详情</a></h3>
                <div class="product-desc-pop hide">
                    <h3 class="product-tit">Go!Pano Sony-RigⅡ</h3>
                    <div class="product-img"><img style="width:100%;" src="__IMG__/product/sony_rig_2.png" alt=""></div>
                    <div class="product-desc">
                        <p>2代 用最少个数的相机，占用最小的空间组成覆盖360°x 360°的视角度全景图像，适合室外远景（演唱会，赛事）</p>
                    </div>
                </div>
                <div class="product-ctrl">
                    <a href="#" proName="Go!Pano Sony-RigⅡ" type="0" class="btn btn-danger J-btn-buy">立即购买</a>
                    <!-- <a href="#" class="btn btn-link J-btn-downloadFreetrial">下载试用版</a> -->
                </div>
            </li>
            <li class="product">
                <h3 class="product-tit">Go!Pano Sony-RigⅢ<a class="btn btn-link J-proDetail" href="###">查看详情</a></h3>
                <div class="product-desc-pop hide">
                    <h3 class="product-tit">Go!Pano Sony-RigⅢ</h3>
                    <div class="product-img"><img style="width:100%;" src="__IMG__/product/sony_rig_3.jpg" alt=""></div>
                    <div class="product-desc">
                        <p>3代 相机组合覆盖360°x300°视角度的全景图像，水平三台相机减少拼接从而保证水平画面足够清晰，顶部一个相机使天空完美无缝，适合室内近景直播。</p>
                    </div>
                </div>
                <div class="product-ctrl">
                    <a href="#" proName="Go!Pano Sony-RigⅢ" type="0" class="btn btn-danger J-btn-buy">立即购买</a>
                    <!-- <a href="#" class="btn btn-link J-btn-downloadFreetrial">下载试用版</a> -->
                </div>
            </li>
        </ul>
    </div> <!-- /container -->

    <!-- Modal -->
    <div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="orderModalLabel">填写完善您的资料</h4>
                </div>
                <div class="modal-body">
                    <form class="form-area form-product" role="form" id="form-product">
                        <input type="hidden" name="proName" value="">
                        <input type="hidden" name="type" value="">
                        <div class="form-group">
                            <label for="J-form-phoneNumber">电子邮箱</label>
                            <div class="por">
                                <input type="email" name="email" class="form-control form-control-phone" id="J-form-phoneNumber" placeholder="请填写联系人电子邮箱" required autofocus>
                            </div>
                        </div>
                        <div class="form-group" id="J-form-usertype">
                            <label for="">用户类型</label>
                            <div class="fix">
                                <div class="fl mr50">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" checked name="usertype" id="J-form-type-personal" value="personal">
                                            个人
                                        </label>
                                    </div>
                                </div>
                                <div class="fl">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="usertype" id="J-form-type-company" value="company">
                                            公司
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" id="J-form-name">
                            <label for="">个人名称</label>
                            <div class="por">
                                <input type="text" name="name" class="form-control" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">您的位置</label>
                            <div class="">
                                <select name="location" id="" class="form-control">
                                    {volist name="pro" id="vo"}
                                        <option value="{$key}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="J-form-company">现有设备</label>
                            <div class="por">
                                <input type="text" class="form-control form-control-phone" id="J-form-company" placeholder="填写现有设备" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary ajax-post" target-form="form-product" href="{:url('Product/buy')}" >提交</button>
                            <p style="color:#c33;font-weight:bold;">提交后会有工作人员跟您联系</p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="proDetailModal" tabindex="-1" role="dialog" aria-labelledby="proDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">商品详情</h4>
                </div>
                <div class="modal-body">
                    <img src="#" alt="">
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="myScript"}
    <script src="__STATIC__/lib/happy-validate/happy.js"></script>
    <script src="__STATIC__/lib/happy-validate/happy.methods.js"></script>

    <script>
        $(document).ready(function () {
            $('#form-signin').isHappy({
                fields: {
                    '#J-form-phoneNumber': {
                        required: true,
                        message: '请输入格式正确的手机号',
                        test: happy.USPhone
                    },
                    '#J-form-pw': {
                        required: true,
                        message: '请输入密码'
                    }
                }
            });
            $('.J-btn-buy').on('click', function(){
                $("input[name=proName]").val($(this).attr('proName'));
                $("input[name=type]").val($(this).attr('type'));
                $('#orderModal').modal('show');
            });
            $('.J-btn-downloadFreetrial').on('click', function(){
                var proName = $(this).attr('proName');
                var type = $(this).attr('type');
                var target = $(this).attr('url');
                var query = {proName:proName,type:type};
                $.post(target, query).success(function(data) {
                    return;
                });
                alert('btn-download-free');
            });

            // 选择用户类型
            $('#J-form-usertype').on('click', 'input:radio',function(e){
                // e.preventDefault();
                var $form_anme = $('#J-form-name');
                var label = $form_anme.find('label');
                // console.log($(this).val());
                if ($(this).val() == 'personal') {
                    label.text('个人名称');
                }else{
                    label.text('公司名称');
                };
            })

            $('.J-proDetail').on('click', function(e){
                e.preventDefault();
                var $parent = $(this).parents('.product');
                var $desc = $parent.find('.product-desc-pop').clone().removeClass('hide');
                $('#proDetailModal').find('.modal-body').html($desc);
                $('#proDetailModal').modal('show');
            })
        });
    </script>
{/block}