index.html 14.8 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;*/
        /*}*/
        
        .Walker_main .Spot_items,
        .Walker_main .swiper-slide-prev,
        .Walker_main .swiper-slide-prev .Spot_item img {
            max-width: 1200px;
        }
        
        .Spot_main .swiper-slide-next .Spot_top img {
            width: 648px;
            height: 648px;
        }
        
        .Spot_item,
        .swiper-slide-prev,
        .swiper-slide-prev .Spot_item img {
            max-width: 648px;
        }
    </style>
</head>

<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
    <include file="public@header" />
    <div class="banner">
        <volist name="coverImg" id="vo">
            <img src="{:cmf_get_image_url($vo.image)}" alt="">
        </volist>
    </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="hidden" value="{$cityName}" id="cityName">
                    <form method="GET" action="/portal/enjoy/index">
                        <input class="show_city" type="text" value="所有" readonly="readonly">
                        <img src="__TMPL__/public/assets/starImg/down.png" alt="">
                        <ul style="min-height:138px;max-height:300px;overflow-y: scroll;width:240px;">
                            <li>所有</li>
                            <volist name="city_name" id="vo">
                                <li value="{$vo.id}">{$vo.name}</li>
                            </volist>
                        </ul>
                        <input type="hidden" value="0" name="city_id" id="city_id">
                        <div style="display:none;">
                            <input type="submit" id="city_submit" />
                        </div>
                    </form>
                </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 style="max-width: 648px;" 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.index_thumbnail2)}" 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>
                        </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>
        $(function() {
            var value = $('#cityName').val();
            if (value != '') {
                $('.show_city').val(value);
            } else {
                $('.show_city').val('所有');
            }

            $('.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() {
                $('.show_city').val($(this).text());
                $('.select ul').hide();
                var index = $(this).index();

                $('#city_id').val($(this).val());
                $('.curren').eq(index).addClass('video_active').siblings().removeClass('video_active');

                $('form').submit();
            });

            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>