index.html 13.5 KB
<!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="__TMPL__/public/assets/css/enjoyment.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/enjoyment_index.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/js/swiper4/swiper.min.css">
    <style>
        /*.Spot_main .swiper-slide-next .Spot_top img {*/
            /*width: 625px;*/
            /*height: 648px;*/
        /*}*/
        .Spot_item, .swiper-slide-prev, .swiper-slide-prev .Spot_item img {
             max-width: 1200px;
        }
    </style>
</head>

<body>
<include file="public@header"/>
<div class="banner">
    <img src="__TMPL__/public/assets/starImg/enjoy_banner.jpg" alt="">
</div>
<main>
    <div class="container">
        <div class="region">
            <!--<select name="city_id">-->
                <!--<option value="0">所有</option>-->

                <!--<volist name="city_name" id="vo">-->
                    <!--<option value="{$vo.id}" <eq name="$vo.id" value="$city_id">selected</eq>>{$vo.name}</option>-->
                <!--</volist>-->
            <!--</select>-->
            <div class="select">
                <input type="text" value="中国" readonly="readonly">
                <img src="__TMPL__/public/assets/starImg/down.png" alt="">
                <ul style="height:300px;overflow-y: scroll;width:240px;">
                    <li>所有</li>
                    <volist name="city_name" id="vo">
                        <li value="{$vo.id}" <eq name="$vo.id" value="$city_id">selected</eq>>{$vo.name}</li>
                    </volist>
                </ul>
            </div>
        </div>
        <!--亲临现场-->
        <div class="Spot" id="own">
            <div class="Spot_title clearfix">
                <div class="Spot_icon fl">
                    <img src="__TMPL__/public/assets/starImg/aicon_61.png" alt="">
                </div>
                <div class="Spot_name fl">
                    <div class="Spot_name_left fl">
                        亲临
                    </div>
                    <div class="Spot_name_right fl">
                        现场
                    </div>
                </div>
                <div class="Spot_English_name fl">
                    <p>On Spot</p>
                </div>
            </div>
            <div class="Spot_main">
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <volist name="res_qlxc" id="vo">
                            <div class="swiper-slide">
                                <div class="Spot_item">
                                    <a href="/portal/enjoy/getEnjoyDetail?id={$vo.id}">
                                        <div class="Spot_top"><img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""></div>
                                        <div class="Spot_bottom">
                                            <div class="Spot_bottom_title">
                                                {$vo.post_title}
                                            </div>
                                            <div class="Spot_bottom_main">
                                                {$vo.post_excerpt}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </volist>
                    </div>
                </div>

                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <!--市井漫游-->
        <div class="Walker" id="roam">
            <div class="Spot_title clearfix">
                <div class="Spot_icon fl">
                    <img src="__TMPL__/public/assets/starImg/aicon_62.png" alt="">
                </div>
                <div class="Spot_name fl">
                    <div class="Spot_name_left fl">
                        市井
                    </div>
                    <div class="Spot_name_right fl">
                        漫游
                    </div>
                </div>
                <div class="Spot_English_name fl">
                    <p>Local Walker</p>
                </div>
            </div>
            <div class="Walker_main">
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <volist name="res_sjmy" id="vo">
                            <div class="swiper-slide">
                                <div class="Walker_item clearfix">
                                    <a href="/portal/enjoy/getEnjoyDetail?id={$vo.id}">
                                        <div class="Walker_item_left fl">
                                            <img src="{:cmf_get_image_url($vo.photos)}" alt="">
                                        </div>
                                        <div class="Walker_item_right fr">
                                            <div class="Walker_item_right_top">
                                                <div class="Walker_item_right_top_title">
                                                    {$vo.post_title}
                                                </div>
                                                <div class="Walker_item_right_top_main">
                                                    {$vo.post_excerpt}
                                                </div>
                                            </div>
                                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </volist>
                    </div>

                </div>

            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!--视听盛宴-->
        <div class="Feast" id="feast">
            <div class="Spot_title clearfix">
                <div class="Spot_icon fl">
                    <img src="__TMPL__/public/assets/starImg/aicon_64.png" alt="">
                </div>
                <div class="Spot_name fl">
                    <div class="Spot_name_left fl">
                        视听
                    </div>
                    <div class="Spot_name_right fl">
                        盛宴
                    </div>
                </div>
                <div class="Spot_English_name fl">
                    <p>Sense Feast</p>
                </div>
            </div>
            <div class="Feast_main">
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <volist name="res_stsy" id="vo">
                            <div class="swiper-slide">
                                <div class="Feast_item">
                                    <a href="/portal/enjoy/getEnjoyDetail?id={$vo.id}">
                                        <div class="Feast_item_img">
                                            <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                        </div>
                                        <div class="Feast_item_bottom">
                                            <div class="Feast_item_bottom_title">
                                                {$vo.post_title}
                                            </div>
                                            <div class="Feast_item_bottom_text">
                                                {$vo.post_excerpt}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </volist>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!--户外天堂-->
        <div class="Sport" id="sky">

            <div class="Spot_title clearfix">
                <div class="Spot_icon fl">
                    <img src="__TMPL__/public/assets/starImg/aicon_65.png" alt="">
                </div>
                <div class="Spot_name fl">
                    <div class="Spot_name_left fl">
                        户外
                    </div>
                    <div class="Spot_name_right fl">
                        天堂
                    </div>
                </div>
                <div class="Spot_English_name fl">
                    <p>Outdoor & Sport</p>
                </div>
            </div>
            <div class="Sport_main">
                <div class="swiper-container swiper-no-swiping">
                    <div class="swiper-wrapper">
                        <volist name="res_hwtt" id="vo">
                            <div class="swiper-slide">
                                <div class="Spot_item">
                                    <a href="/portal/enjoy/getEnjoyDetail?id={$vo.id}">
                                        <div class="Spot_top main_top"><img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""></div>
                                        <div class="Spot_bottom">
                                            <div class="Spot_bottom_title">
                                                {$vo.post_title}
                                            </div>
                                            <div class="Spot_bottom_main main_left">
                                                {$vo.post_excerpt}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </volist>
                        <volist name="res_hwtt" id="vo">
                            <div class="swiper-slide">
                                <div class="Spot_item">
                                    <a href="/portal/enjoy/getEnjoyDetail?id={$vo.id}">
                                        <div class="Spot_top main_top"><img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""></div>
                                        <div class="Spot_bottom">
                                            <div class="Spot_bottom_title">
                                                {$vo.post_title}
                                            </div>
                                            <div class="Spot_bottom_main main_left">
                                                {$vo.post_excerpt}
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </volist>
                    </div>
                </div>
            </div>

            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</main>
<include file="public@footer"/>
<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/js/swiper4/swiper.min.js"></script>
<script src="__TMPL__/public/assets/js/public.js"></script>

<script>
    $('.select input').click(function() {
        if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
            $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png")
            $('.select ul').toggle();
        } else {
            $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/down.png")
            $('.select ul').toggle();
        }

    });

    $('.select ul li').click(function() {
        $('.select input').val($(this).text());
        $('.select ul').hide();
        var index = $(this).index();
        $('.curren').eq(index).addClass('video_active').siblings().removeClass('video_active');
    });

    $(document).ready(function() {
        var val = $('.select input').val();
        var val2 = $('.select ul li:first-child').text();
        val = val2;
        $('.select input').val(val)
    });


    var swiper = new Swiper('.Spot_main .swiper-container', {
        slidesPerView: 2,
        spaceBetween: 50,
        navigation: {
            nextEl: '.Spot_main .swiper-button-next',
            prevEl: '.Spot_main .swiper-button-prev',
        },

    });
    var swipe = new Swiper('.Walker_main .swiper-container', {
        navigation: {
            nextEl: '.Walker .swiper-button-next',
            prevEl: '.Walker .swiper-button-prev',
        },
    });
    var swi = new Swiper('.Feast .swiper-container', {
        slidesPerView: 3,
        spaceBetween: 50,
        navigation: {
            nextEl: '.Feast .swiper-button-next',
            prevEl: '.Feast .swiper-button-prev',
        },

    });
    var sw = new Swiper('.Sport .swiper-container', {
        slidesPerView: 2,
        spaceBetween: 50,
        navigation: {
            nextEl: '.Sport .swiper-button-next',
            prevEl: '.Sport .swiper-button-prev',
        },

    });

</script>
</body>

</html>