shop
/
php


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>幸福保</title>
    <link rel="stylesheet" href="index/css/all.min.css" />
    <link rel="stylesheet" href="index/css/slick.css">
    <link rel="stylesheet" href="index/css/slick-theme.css">
    <link rel="stylesheet" href="index/css/magnific-popup.css">
    <link rel="stylesheet" href="index/css/bootstrap.min.css" />
    <link rel="stylesheet" href="index/css/templatemo-style.css" />

</head>
<body>
<div class="adcenter"></div>
<!-- Hero section -->
<section id="hero" class="text-white tm-font-big tm-parallax">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
        <div class="container">
            <div class="tm-next">
                <a href="#hero" class="navbar-brand">幸福保</a>
            </div>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars navbar-toggler-icon"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link tm-nav-link" href="#介绍">介绍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tm-nav-link" href="#work"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link tm-nav-link" href="#contact">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="text-center tm-hero-text-container">
        <div class="tm-hero-text-container-inner">
            <h2 class="tm-hero-title">幸福保</h2>
            <!-- <p class="tm-hero-subtitle">
                Parallax Bootstrap Theme
                <br />by TemplateMo
            </p> -->
        </div>
    </div>

    <div class="tm-next tm-intro-next">
        <a href="#介绍" class="text-center tm-down-arrow-link">
            <i class="fas fa-3x fa-caret-down tm-down-arrow"></i>
        </a>
    </div>
</section>

<section id="介绍" class="tm-section-pad-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <img src="index/img/the-town-01.jpg" alt="Image" class="img-fluid tm-intro-img" />
            </div>
            <div class="col-lg-6">
                <div class="tm-intro-text-container">
                    <h2 class="tm-text-primary mb-4 tm-section-title">介绍</h2>
                    <p class="mb-4 tm-intro-text">
						幸福保让您轻松实现“互联网+养老”，专业可依赖的实力技术研发团队，成员分别来自移动互联网公司，通讯设计制造商、增值应用提供商、游戏设计公司，幸福保APP致力于帮助百姓利用日常消费获取养老金，提升全国百姓养老、防老的生活品质；同时帮助商家引流，商家还可以用幸福保移动互联网+广告，实现精准营销，高效获取目标客户，提高营业收入。
                    </p>
                    <p class="mb-5 tm-intro-text">

                    <div class="tm-next">

                    </div>
                </div>
            </div>
        </div>

        <!--		<div class="row tm-section-pad-top">-->
        <!--			<div class="col-lg-4">-->
        <!--				<i class="fas fa-4x fa-bus text-center tm-icon"></i>-->
        <!--				<h4 class="text-center tm-text-primary mb-4">超值美购</h4>-->
        <!--				<p>-->
        <!--					数百种商品 一站式购买-->
        <!--				</p>-->
        <!--			</div>-->

        <!--			<div class="col-lg-4 mt-5 mt-lg-0">-->
        <!--				<i class="fas fa-4x fa-bicycle text-center tm-icon"></i>-->
        <!--				<h4 class="text-center tm-text-primary mb-4">全国包邮</h4>-->
        <!--				<p>-->
        <!--					全国包邮，支持货到付款！-->
        <!--				</p>-->
        <!--			</div>-->
        <!--			<div class="col-lg-4 mt-5 mt-lg-0">-->
        <!--				<i class="fas fa-4x fa-city text-center tm-icon"></i>-->
        <!--				<h4 class="text-center tm-text-primary mb-4">正品承保</h4>-->
        <!--				<p>-->
        <!--					为您购买的每一件商品进行正品承保-->
        <!--				</p>-->
        <!--			</div>-->
        <!--		</div>-->
</section>
<section id="work" class="tm-section-pad-top">
    <div class="container tm-container-gallery">
        <div class="row">
            <div class="text-center col-12">
                <h2 class="tm-text-primary tm-section-title mb-4"></h2>
                <!-- <p class="mx-auto tm-work-description">
                    "Curabitur ac orci ac lorem blandit volutpat. Sed ac sodales nibh, ut
                    porttitor elit. Sed id dui mi. Vestibulum ante ipsum primis in faucibus
                    orci luctus et ultrices posuere cubilia."
                </p> -->
            </div>
        </div>
        <div class="row">
            <!-- <div class="col-12">
                <div class="mx-auto tm-gallery-container">
                    <div class="grid tm-gallery">
                        <a href="img/gallery-img-01.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-01.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Dreamy <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-02.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-02.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Second <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-03.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-03.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Third <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-04.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-04.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Dreamy <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-05.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-05.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Fifth <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-06.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-06.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Sixth <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-01.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-01.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Dreamy <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                        <a href="img/gallery-img-02.jpg">
                            <figure class="effect-honey tm-gallery-item">
                                <img src="img/gallery-tn-02.jpg" alt="Image" class="img-fluid">
                                <figcaption>
                                    <h2><i>Eighth <span>Honey</span> Now</i></h2>
                                </figcaption>
                            </figure>
                        </a>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</section>

<!-- Contact -->
<section id="contact" class="tm-section-pad-top tm-parallax-2">
    <div class="container tm-container-contact">
        <div class="row">
            <div class="col-12">
                <h2 class="mb-4 tm-section-title">联系我们</h2>
                <div class="mb-5 tm-underline">
                    <div class="tm-underline-inner"></div>
                </div>
                <p class="mb-5">
					幸福保让您轻松实现“互联网+养老”，专业可依赖的实力技术研发团队，成员分别来自移动互联网公司，通讯设计制造商、增值应用提供商、游戏设计公司，幸福保APP致力于帮助百姓利用日常消费获取养老金，提升全国百姓养老、防老的生活品质；同时帮助商家引流，商家还可以用幸福保移动互联网+广告，实现精准营销，高效获取目标客户，提高营业收入。
				</p>
        </div>
    </div>
    <a class="text-center small tm-footer gogoggg" href="http://www.beian.miit.gov.cn/" style="color: #fff;">
        <p class="mb-0">
            冀ICP备2025100336号-1
        </p>
    </a>
</section>
<script src="index/js/jquery-1.9.1.min.js"></script>
<script src="index/js/slick.min.js"></script>
<script src="index/js/jquery.magnific-popup.min.js"></script>
<script src="index/js/jquery.singlePageNav.min.js"></script>
<script src="index/js/bootstrap.min.js"></script>
<script>

    function getOffSet() {
        var _offset = 450;
        var windowHeight = window.innerHeight;

        if (windowHeight > 500) {
            _offset = 400;
        }
        if (windowHeight > 680) {
            _offset = 300
        }
        if (windowHeight > 830) {
            _offset = 210;
        }

        return _offset;
    }

    function setParallaxPosition($doc, multiplier, $object) {
        var offset = getOffSet();
        var from_top = $doc.scrollTop(),
            bg_css = 'center ' + (multiplier * from_top - offset) + 'px';
        $object.css({
            "background-position": bg_css
        });
    }

    // Parallax function
    // Adapted based on https://codepen.io/roborich/pen/wpAsm
    var background_image_parallax = function($object, multiplier, forceSet) {
        multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
        multiplier = 1 - multiplier;
        var $doc = $(document);
        // $object.css({"background-attatchment" : "fixed"});

        if (forceSet) {
            setParallaxPosition($doc, multiplier, $object);
        } else {
            $(window).scroll(function() {
                setParallaxPosition($doc, multiplier, $object);
            });
        }
    };

    var background_image_parallax_2 = function($object, multiplier) {
        multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
        multiplier = 1 - multiplier;
        var $doc = $(document);
        $object.css({
            "background-attachment": "fixed"
        });
        $(window).scroll(function() {
            var firstTop = $object.offset().top,
                pos = $(window).scrollTop(),
                yPos = Math.round((multiplier * (firstTop - pos)) - 186);

            var bg_css = 'center ' + yPos + 'px';

            $object.css({
                "background-position": bg_css
            });
        });
    };

    $(function() {
        // Hero Section - Background Parallax
        background_image_parallax($(".tm-parallax"), 0.30, false);
        background_image_parallax_2($("#contact"), 0.80);

        // Handle window resize
        window.addEventListener('resize', function() {
            background_image_parallax($(".tm-parallax"), 0.30, true);
        }, true);

        // Detect window scroll and update navbar
        $(window).scroll(function(e) {
            if ($(document).scrollTop() > 120) {
                $('.tm-navbar').addClass("scroll");
            } else {
                $('.tm-navbar').removeClass("scroll");
            }
        });

        // Close mobile menu after click
        $('#tmNav a').on('click', function() {
            $('.navbar-collapse').removeClass('show');
        })

        // Scroll to corresponding section with animation
        $('#tmNav').singlePageNav();

        // Add smooth scrolling to all links
        // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
        $("a").on('click', function(event) {
            if (this.hash !== "") {
                event.preventDefault();
                var hash = this.hash;

                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 400, function() {
                    window.location.hash = hash;
                });
            } // End if
        });

        // Pop up
        $('.tm-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled: true
            }
        });

        // Gallery
        $('.tm-gallery').slick({
            dots: true,
            infinite: false,
            slidesToShow: 5,
            slidesToScroll: 2,
            responsive: [{
                breakpoint: 1199,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 2
                }
            },
                {
                    breakpoint: 991,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 767,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
    $(".tm-footer").on('click')
</script>
</body>
</html>