GBRSWN/CZKJ.GBRS2.WebMVC/Views/Home/Index.cshtml

@model IndexModel
@section style{
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/plugins/swiper/idangerous.swiper.css">
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/css/index.css">
    <style>
        .l-fix {
            position: fixed;
            left: 0;
            z-index: 1000;
            top: 50%;
            box-shadow: 0 6px 100px -10px rgba(0,0,0,.35);
            transform: translate(0,-50%);
            margin-top: 75px;
        }

        .l-fix2 {
            margin-top: -75px;
        }

        .l-fix a {
            display: block;
            width: 140px;
            height: 140px;
            background-color: #f15558;
            color: #fff;
            display: flex;
            text-align: center;
            align-content: center;
            flex-wrap: wrap;
            font-size: 16px;
            line-height: 1.8;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.3s;
        }
        /*.l-fix a:hover {
                background-color: #fff;
                color: #f15558;
                border: 1px solid #f15558;
            }*/
        .l-fix p {
            width: 100%;
        }

        @@media (max-width: 768px) {
            .l-fix a {
                width: 60px;
                align-items: center;
                flex-direction: row-reverse;
            }

            .l-fix p {
                width: 50%;
                line-height: 18px;
            }
        }
    </style>
}
<div class="banner">
    <div class="swiper-container" id="banner">
        <div class="swiper-wrapper">
            @foreach (var item in Model.GalleryList)
            {
                <div class="swiper-slide" style="background-image:url('@item.Image')">
                    <div class="txt">
                        <h2>
                            @Html.Raw(item.Title)
                        </h2>
                        @if (!string.IsNullOrWhiteSpace(item.Url))
                        {
                            <a href="@(!string.IsNullOrWhiteSpace(item.Url)?item.Url:"javascript:void(0);")">查看详情</a>
                        }

                    </div>
                </div>
            }
        </div>
        <ul class="swiper-pagination">
            @for (int i = 0; i < Model.GalleryList.Count; i++)
            {
                var item = Model.GalleryList[i];
                <li class="@(i == 0?"cur":"")">
                    <h2>@item.ProductName</h2>
                    <p>@item.ProductDesc</p>
                </li>
            }
        </ul>
    </div>
</div>
<!-- fast track -->
<div class="fast-track container">
    <h2 class="index-tit wow fadeInUp">
        快速通道
    </h2>
    <div class="wow fadeInUp">
        <div class="swiper-container" id="fast">
            <div class="swiper-wrapper">
                @if (Model.FastIConList.Count > 0)
                {
                    foreach (var item in Model.FastIConList)
                    {
                        <div class="swiper-slide">
                            <a @(!string.IsNullOrWhiteSpace(item.Url) ? "target=_blank" : "") href="@(!string.IsNullOrWhiteSpace(item.Url)?item.Url:"javascript:void(0);")" class="@(string.IsNullOrWhiteSpace(item.Url)?"no-link":"")">
                                <img src="@item.Image" alt="">
                                <p>@item.Title</p>
                            </a>
                        </div>
                    }
                }
            </div>
            <div class="swiper-pagination visible-xs-block"></div>
            <span class="arrow-left arrow disabled hidden-xs"></span>
            <span class="arrow-right arrow hidden-xs"></span>
        </div>
    </div>
</div>
<!-- product -->
<!-- product -->
<div class="product container">
    <h2 class="index-tit wow fadeInUp">
        人生中的每时每刻<br />国宝人寿期待与您相伴
    </h2>
    <div class="row">
        @foreach (var item in Model.ProductList)
        {
            <div class="col-sm-3 col-xs-6 wow fadeInUp">
                <a href="@(string.IsNullOrWhiteSpace(item.Url)?"javascript:void(0);":item.Url)" @(!string.IsNullOrWhiteSpace(item.Url) ? "target=_blank" : "")>
                    <div class="img">
                        <img src="@item.Image" alt="">
                    </div>
                    <div class="txt">
                        <p>@Html.Raw(item.Title)</p>
                    </div>
                    <div class="con">
                        <h2>@Html.Raw(item.Title)</h2>
                        <p>@Html.Raw(item.Summary)</p>
                    </div>
                </a>
            </div>
        }
    </div>
    @*<a class="more" href="">查看更多</a>*@
</div>
@*<div style="height:30px;"></div>*@
<!-- service -->
<div class="service container">
    <h2 class="index-tit wow fadeInUp">
        国宝人寿全新一站式服务<br />只为您更好的体验
    </h2>
    <div class="row">
        <div class="col-sm-3 left wow fadeInUp">
            <div class="img">
                <picture>
                    <source srcset="@(!string.IsNullOrWhiteSpace(Model.LeftServicegallery.MobileImage)?Model.LeftServicegallery.MobileImage:Model.LeftServicegallery.Image)" media="(max-width: 767px)">
                    <img src="@Model.LeftServicegallery.Image" alt="">
                </picture>
            </div>
            <div class="txt">
                <h2>@Model.LeftServicegallery.Title</h2>
                <p>
                    @Html.Raw(Model.LeftServicegallery.Summary)
                </p>
                @if (string.IsNullOrWhiteSpace(Model.LeftServicegallery.Url))
                {
                    <a href="javascript:void(0);" style="background:#999;color:#fff;pointer-events:none;">敬请期待</a>
                }
                else
                {
                    <a target="_blank" href="@Model.LeftServicegallery.Url">查看详情</a>
                }

            </div>
        </div>
        <div class="col-sm-9 right">
            <div class="row">
                @foreach (var item in Model.ServiceList)
                {
                    <div class="col-sm-4 col-xs-6 wow fadeInUp">
                        <div class="img">
                            <a href="@(!string.IsNullOrWhiteSpace(item.Url)?item.Url:"javascript:void(0);")" @(!string.IsNullOrWhiteSpace(item.Url) ? "target=_blank" : "")>
                                <img src="@item.Image" alt="">
                            </a>
                        </div>
                        <div class="txt">
                            <h2>
                                <a href="@(!string.IsNullOrWhiteSpace(item.Url)?item.Url:"javascript:void(0);")" @(!string.IsNullOrWhiteSpace(item.Url) ? "target=_blank" : "")>@item.Title</a>
                            </h2>
                            <p>@item.Summary</p>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<!-- ad-1 -->
<div class="ad-ent" style="background-image:@(Model.BackGalleryList.Count>0?Model.BackGalleryList[0].Image:"")">
    <div class="txt">
        <h2 class="wow fadeInUp">为什么选择国宝</h2>
        @*<p class="wow fadeInUp">实力雄厚 · 行业领军 · 管理专业 · 服务贴心</p>*@
    </div>
</div>
<!-- ad-num -->
<div class="ad-num hidden-xs">
    <div class="container">
        <p class="wow fadeInUp" style="text-align:center;font-size:26px;">实力雄厚 · 行业领军 · 管理专业 · 服务贴心</p>
    </div>
</div>
<!-- news -->
<div class="container info-box">
    <div class="row">
        <div class="col-sm-8 news wow fadeInUp">
            <div class="tabs">
                @for (int i = 0; i < Model.TypeList.Count; i++)
                {
                    var item = Model.TypeList[i];
                    <span class="@(i == 0?"cur":"")">@item.Name</span>
                }
            </div>
            <div class="tab-con swiper-container">
                <div class="swiper-wrapper">
                    @for (int i = 0; i < Model.TypeList.Count; i++)
                    {
                        var item = Model.TypeList[i];
                        var child = Model.ChildrenList.FirstOrDefault(x => x.ParentId == item.Id);
                        <div class="item swiper-slide">
                            @if (item.Id == 88)
                            {
                                <a class="img" href="@Url.Action("Dynamic","Article")" target="_blank">
                                    <img src="@item.Thumbnail" alt="">
                                </a>
                            }
                            else
                            {
                                <a href="@Url.Action("Industry","Article",new { typeId=child.Id})" class="img" target="_blank">
                                    <img src="@item.Thumbnail" alt="">
                                </a>
                            }
                            <div class="txt">
                                <div class="left">
                                    <h2>@item.Name</h2>
                                    <p>@item.Description</p>
                                </div>
                                <div class="right">
                                    @if (item.Id == 88)
                                    {
                                        <a href="@Url.Action("Dynamic","Article")" target="_blank">更多新闻</a>
                                    }
                                    else
                                    {
                                        <a href="@Url.Action("Industry","Article",new { typeId=child.Id})" target="_blank">查看更多</a>
                                    }
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
        <div class="col-sm-4 media-all">
            <h2 class="wow fadeInUp">
                国宝全媒体
                <br>
                <span>MEDIA</span>
            </h2>
            <ul class="icons">
                <li class="wow fadeInUp wx-box">
                    <a @(string.IsNullOrWhiteSpace(Model.Wechat) ? "" : "target=_blank") href="javascript:void(0);" class="@(!string.IsNullOrWhiteSpace(Model.Wechat)?"":"no-link")">
                        <div class="img">
                            <img src="/assets/image/icon/icon7.png" alt="">
                        </div>
                        @if (!string.IsNullOrWhiteSpace(Model.Wechat))
                        {
                            <div class="wxQrcode">
                                <img src="@Model.Wechat" alt="">
                            </div>
                        }
                        <p>官方微信</p>
                    </a>
                </li>
                <li class="wow fadeInUp">
                    <a @(string.IsNullOrWhiteSpace(Model.Weibo) ? "" : "target=_blank") href="@(!string.IsNullOrWhiteSpace(Model.Weibo)?Model.Weibo:"javascript:void(0);")" class="@(!string.IsNullOrWhiteSpace(Model.Weibo)?"":"no-link")">
                        <div class="img">
                            <img src="/assets/image/icon/icon8.png" alt="">
                        </div>
                        <p>官方微博</p>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</div>
<!-- map -->
<div class="map-box" style="background-image:@(Model.BackGalleryList.Count>1?Model.BackGalleryList[1].Image:"")">
    <div class="container">
        <h2 class="title wow fadeInUp">诚信 · 专业 · 忠厚 · 创新</h2>
    </div>
</div>



@section script{
    <script src="/assets/plugins/swiper/idangerous.swiper.min.js"></script>
    <script src="/assets/plugins/wow/wow.min.js"></script>
    <script>
        window.dataMark = "0$15231983314041342$$15231983492438575$";
        $(function () {
            //ie9及一下
            if (window.lessThenIE8) {
                alert("ie");
            }
            //banner carousel
            var bannerSwiper = new Swiper('#banner', {
                pagination: '#banner .swiper-pagination',
                createPagination: false,
                paginationClickable: true,
                speed: 800,
                autoplay: 5000,
                loop: true,
                onSlideChangeStart: function (swiper) {
                    bannerPage(swiper.activeLoopIndex);
                }
            })
            $("#banner .swiper-pagination li").on("mouseenter", function () {
                var index = $(this).index();
                bannerPage(index);
                bannerSwiper.swipeTo(index);
                bannerSwiper.stopAutoplay();
            })
            $("#banner .swiper-pagination li").on("mouseleave", function () {
                bannerSwiper.startAutoplay();
            })

            function bannerPage(index) {
                $("#banner .swiper-pagination li").eq(index).addClass("cur").siblings().removeClass("cur");
            }
            //fast track
            var fastrSwiper = new Swiper('#fast', {
                pagination: '#fast .swiper-pagination',
                slidesPerView: 3,
                speed: 800,
                onSlideChangeStart: function (swiper) {
                    //isFirstFast();
                    //isLastFast();
                }
            })
            $('.arrow-left').on('click', function (e) {
                e.preventDefault();
                fastrSwiper.swipePrev();
                isFirstFast();
                $('.arrow-right').removeClass("disabled");
            })
            $('.arrow-right').on('click', function (e) {
                e.preventDefault();
                fastrSwiper.swipeNext();
                isLastFast();
                $('.arrow-left').removeClass("disabled")
            })

            function isFirstFast() {
                if (fastrSwiper.activeIndex == 0) {
                    $('.arrow-left').addClass("disabled");
                } else {
                    $('.arrow-left').removeClass("disabled");
                }
            }

            function isLastFast() {
                if (fastrSwiper.activeIndex == fastrSwiper.slides.length - 6) {
                    $('.arrow-right').addClass("disabled");
                } else {
                    $('.arrow-right').removeClass("disabled");
                }
            }

            fastRWD();
            $(window).on("resize", function () {
                fastRWD();
            })
            //fast track style response
            function fastRWD() {
                if (innerWidth < 768) {
                    fastrSwiper.params.slidesPerView = 3;
                    fastrSwiper.reInit();
                }
                if (innerWidth >= 768 && innerWidth < 1200) {
                    fastrSwiper.params.slidesPerView = 5;
                    fastrSwiper.reInit();
                }
                if (innerWidth >= 1200) {
                    fastrSwiper.params.slidesPerView = 6;
                    fastrSwiper.reInit();
                }
            }

            //news
            var tabsSwiper = new Swiper('.tab-con', {
                speed: 800,
                onSlideChangeStart: function () {
                    $(".tabs .cur").removeClass('cur')
                    $(".tabs span").eq(tabsSwiper.activeIndex).addClass('cur')
                }
            })
            $(".tabs span").on('mouseenter', function (e) {
                e.preventDefault()
                $(".tabs .cur").removeClass('cur')
                $(this).addClass('cur')
                tabsSwiper.swipeTo($(this).index())
            })
            $(".tabs span").click(function (e) {
                e.preventDefault();
            })
        });
    </script>
    <script src="~/assets/js/grayscale.js"></script>
    <script>
        grayscale($(".no-link img"));
    </script>
}