@extends('web.layouts.base')
@section('add_css')
    <link rel="stylesheet" href="{{ $style_path }}/css/home.css">
@endsection
@section('content')
    <!-- 封面图片 -->
    <div class="posterwrap solution">
        <div class="poster">
            <div class="textwarp">
                <h2>解决方案</h2>
            </div>
        </div>
    </div>


    <!-- 解决方案 -->
    <div class="solutionwrap">
        <div class="row">
            <!-- 方案01 -->
            @if(count($server)>0)
                @foreach($server as $v)
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                        <div class="holder">
                            <div class="cover" data-id="{{ $v->id }}"  data-url="{{ route('web.server.show',['id'=>$v->id]) }}" style='background-image: url("{{ $v->thumb }}")'>
                                <div class="cover-back transition"></div>
                                <i class="fa fa-search fa-4x searchicon transition"></i>
                            </div>
                            <img src="{{ $v->thumb }}" class="clone" style="display:none">
                            <div class="title">
                                <p class="name">{{ $v->name }}
                                <p class=" money">
                                    ￥{{ $v->money }}
                                </p>
                                </p>
                                <p class="intro">{{ $v->subname }}</p>

                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                @endif


        </div>

        <div class="page">
            {{ $pages }}
        </div>

    </div>


    <!-- PC端服务详情 -->
    <div class="fuwu-details-box">
        <div class="alt-back"></div>
        <i class="fa fa-circle-o-notch fa-spin fa-2x searchicon transition"></i>
        <img src="{{ $style_path }}/image/guanbi.svg" class="closeintro transition">
        <iframe name="fuwu" src=""></iframe>
    </div>




@endsection
@section('foot_js')
    <script src="{{ $style_path }}/js/common.js"></script>
    <script src="{{ $style_path }}/js/home.js"></script>
    <script>
        $(document).ready(function() {

            /* 显示服务详情 */
            $("div.cover").click(function() {
                var id = $(this).attr('data-id');
                var reloadurl = $(this).attr('data-url');
                if ($("body").width() <= 1024) {

                    window.location.href = reloadurl;
                } else {
                    $("body").css({
                        "width": $("body").width(),
                        "overflow": "hidden"
                    });
                    $(".fuwu-details-box iframe").attr('src', reloadurl);
                    $('.fuwu-details-box').show();
                    $('.fuwu-details-box .alt-back').fadeIn();
                    $(".fuwu-details-box").animate({
                        top: "0px"
                    });
                }
            });

            /* 关闭服务详情 */
            $("img.closeintro,.fuwu-details-box .alt-back").click(function() {
                $('.fuwu-details-box .alt-back').fadeOut();
                $(".fuwu-details-box").animate({
                    top: "100%"
                }, function() {
                    $('.fuwu-details-box').hide();
                    $("body").css({
                        "width": 'auto',
                        "overflow": "auto"
                    });
                    $(".fuwu-details-box iframe").attr('src', "");
                    $(".fuwu-details-box i").show();
                });
            });

        });
    </script>

@endsection