index.html 12.1 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/swiper-3.4.2.min.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/audio.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/happy.css" />
    <title>星球奇境</title>
</head>

<body>
    <!--导航-->
    <include file="public@header" />

    <!--banner-->
    <div class="hpin_banner swiper-container">
        <ul class="swiper-wrapper">
            <notempty name="city_banner">
                <li class="swiper-slide">
                    <img src="{:cmf_get_image_url($city_banner)}" />
                </li>
            </notempty>
        </ul>
        <!--<div class="swiper-pagination"></div>-->
    </div>
    <div class="happy_index">
        <!--头部-->
        <div class="hpin_title">
            <img src="__TMPL__/public/assets/images/cicon_06@2x.png" alt="" />
            <p>{$city_name}</p>
        </div>
        <!--星球故事-->
        <div class="hpin_main1">
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_18@2x.png" alt="" />
                <h1>星球<span>故事</span></h1>
                <p>Planet Story</p>
                <!--<div class="more"><a href="hayyp_gushi.html">MORE+</a></div>-->
            </div>
            <!--内容-->
            <div class="hpin_mainCon">
                <notempty name="res_xqgs">
                    <div class="hpin_mainCon1">
                        <a href="/portal/star/getStoryDetail?id={$res_xqgs.id}">
                            <div class="hpin_mainConImg">
                                <img src="{:cmf_get_image_url($res_xqgs.thumbnail)}" alt="" />
                            </div>
                        </a>
                        <div class="hpin_mainConTxt">
                            {$res_xqgs.excerpt}
                        </div>
                    </div>
                    <notempty name="res_xqgs.audio">
                        <div class="hpin_mainCon2">
                            <audio id="audio" src="{:cmf_get_file_download_url($res_xqgs.audio)}"></audio>
                        </div>
                        <else/>
                        <div class="hpin_mainCon2">
                            <audio id="audio" src="__TMPL__/public/assets/images/清平调.mp3"></audio>
                        </div>
                    </notempty>

                </notempty>
            </div>
        </div>
        <!--网红美景-->
        <div class="hpin_main2">
            <!--标题-->
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_19@2x.png" alt="" />
                <h1>网红<span>美景</span></h1>
                <p>Top Attraction</p>
                <div class="more"><a href="/portal/star/getMoreScenery?city_id={$city_id}">MORE+</a></div>
            </div>
            <!--内容-->
            <div class="hpin_main2Con swiper-container2">
                <ul class="swiper-wrapper">
                    <volist name="res_whmj" id="vo">
                        <li class="swiper-slide">
                            <a href="/portal/star/getSceneryDetail?id={$vo.id}">
                                <div class="hpin_main2Con1">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                                </div>
                                <div class="hpin_main2ConBot">
                                    <p class="hpin_main2Con2 one-txt-cut">{$vo.post_title}</p>
                                    <div class="hpin_main2Con3">
                                        <div class="hpin_main2Con3_1">
                                            <img src="__TMPL__/public/assets/images/cicon_82@2x.png" alt="" />
                                            <p>{$vo.post_hits}</p>
                                        </div>
                                        <div class="hpin_main2Con3_1">
                                            <img src="__TMPL__/public/assets/images/cicon_81@2x.png" alt="" />
                                            <p>{$vo.post_favorites}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--异域珍馐-->
        <div class="hpin_main3">
            <!--标题-->
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_20@2x.png" alt="" />
                <h1>异域<span>珍馐</span></h1>
                <p>Gastronomy</p>
                <div class="more"><a href="/portal/star/getMoreFood?city_id={$city_id}">MORE+</a></div>
            </div>
            <!--内容-->
            <div class="hpin_main3Con swiper-container3">
                <ul class="swiper-wrapper">
                    <volist name="res_yyzx" id="vo">
                        <li class="swiper-slide">
                            <a href="/portal/star/getFoodDetail?id={$vo.id}">
                                <div class="hpin_main3ConImg">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                                </div>
                                <p class="hpin_main3ConTxt one-txt-cut">
                                    {$vo.post_title}?
                                </p>
                            </a>
                        </li>
                    </volist>
                </ul>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--良宿美寝-->
        <div class="hpin_main4">
            <!--标题-->
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_21@2x.png" alt="" />
                <h1>良宿<span>美寝</span></h1>
                <p>Accommodation</p>
                <div class="more"><a href="/portal/star/getMoreHotel?city_id={$city_id}">MORE+</a></div>
            </div>
            <!--内容-->
            <div class="hpin_main4Con swiper-container4">
                <ul class="swiper-wrapper">
                    <volist name="res_lsmq" id="vo">
                        <li class="swiper-slide">
                            <a href="/portal/star/getHotelDetail?id={$vo.id}">
                                <div class="hpin_main4ConImg">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                                </div>
                                <p class="hpin_main3ConTxt one-txt-cut ">
                                    {$vo.post_title}
                                </p>
                            </a>
                        </li>
                    </volist>
                </ul>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--活力生态-->
        <div class="hpin_main5">
            <!--标题-->
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_22@2x.png" alt="" />
                <h1>活力<span>生态</span></h1>
                <p>Responsible Tourism</p>
                <div class="more"><a href="/portal/star/getMoreEcology?city_id={$city_id}">MORE+</a></div>
            </div>
            <!--内容-->
            <div class="hpin_main5Con swiper-container5">
                <ul class="swiper-wrapper">
                    <volist name="res_hlst" id="vo">
                        <li class="swiper-slide">
                            <a href="/portal/star/getEcologyDetail?id={$vo.id}">
                                <div class="hpin_main5ConImg">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                                </div>
                                <div class="hpin_main5ConTxt">
                                    <h1 class="hpin_main5ConTxt1 one-txt-cut ">
                                        {$vo.post_title}
                                    </h1>
                                    <p class="hpin_main5ConTxt2 txt-cut">
                                        {$vo.post_excerpt}
                                    </p>
                                </div>
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
        <!--便利出行-->
        <div class="hpin_main6">
            <!--标题-->
            <div class="hpin_main1Title">
                <img src="__TMPL__/public/assets/images/cicon_23@2x.png" alt="" />
                <h1>便利<span>出行</span></h1>
                <p>Easy Travel</p>
                <div class="more"><a href="/portal/star/getMoreTravel?city_id={$city_id}">MORE+</a></div>
            </div>
            <!--内容-->
            <div class="hpin_mainCon swiper-container6">
                <ul class="swiper-wrapper">
                    <volist name="res_blcx" id="vo">
                        <li class="swiper-slide">
                            <a href="/portal/star/getTravelDetail?id={$vo.id}">
                                <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
                            </a>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
    </div>
    <!--底部-->
    <include file="public@footer" />
    <script src="__TMPL__/public/assets/js/base.js"></script>
    <script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
    <script src="__TMPL__/public/assets/js/swiper.min.js"></script>
    <script src="__TMPL__/public/assets/js/k-audio.js"></script>
    <script src="__TMPL__/public/assets/js/public.js"></script>
    <script type="text/javascript">
        //音频
        var audios = document.getElementsByTagName("audio");
        for (var i = 0; i < audios.length; i++) {
            var a = new kac(
                audios[i],
                800,
                30,
                "https://raw.githubusercontent.com/KIPI-C/k-audio.js/master/22.lrc",
                true
            );
            a.style("#E1E1E6");
        }

        //banner
        var swiper = new Swiper(".swiper-container", {
            pagination: ".swiper-pagination",
            paginationClickable: true,
            centeredSlides: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false
        });
        //网红美景
        var swiper = new Swiper(".swiper-container2", {
            pagination: ".swiper-pagination",
            slidesPerView: 2,
            slidesPerColumn: 2,
            paginationClickable: true,
            spaceBetween: 10
        });
        //异域珍馐
        var swiper = new Swiper(".swiper-container3", {
            pagination: ".swiper-pagination",
            slidesPerView: 1,
            slidesPerColumn: 2,
            paginationClickable: true,
            spaceBetween: 10
        });
        //良俗美寝
        var swiper = new Swiper(".swiper-container4", {
            pagination: ".swiper-pagination",
            slidesPerView: 1,
            slidesPerColumn: 1,
            paginationClickable: true,
            centeredSlides: true,
            spaceBetween: 30,
            autoplayDisableOnInteraction: false
        });
        //活力生态
        var swiper = new Swiper(".swiper-container5", {
            slidesPerView: 1.8,
            paginationClickable: true,
            spaceBetween: 10,
            freeMode: true
        });
        //便利出行
        var swiper = new Swiper(".swiper-container6", {
            slidesPerView: 1.7,
            paginationClickable: true,
            spaceBetween: 10,
            freeMode: true
        });
    </script>
</body>

</html>