index.html 14.2 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/js/swiper4/swiper.min.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css/happy_index.css" />
</head>

<body>
    <include file="public@header"/>
    <div class="happy_index">
        <!-- banner轮播图 -->
        <div class="happy_banner">
            <notempty name="city_banner">
                <img src="{:cmf_get_image_url($city_banner)}" alt="" />
                <else/>
                <img src="__TMPL__/public/assets/starImg/star_banner.jpg" alt="" />
            </notempty>
            <h3>Planet Discovery</h3>
        </div>
        <!-- main 背景 -->
        <div class="happy_InMain">
            <!-- 搜索框 -->
            <div class="happy_search">
                <input type="text" />
                <div class="happy_search_icon">
                    <span><img src="__TMPL__/public/assets/starImg/aicon_42.png" alt=""/></span>
                    <span class="address">{$city_name}</span>
                </div>
            </div>
            <!-- 星球故事盒子 -->
            <div class="show_InMain_box show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img src="__TMPL__/public/assets/starImg/aicon_03.png" alt="">
                        <p>星球<span>故事</span></p>
                        <h2>Planet Story</h2>
                    </div>
                    <!-- 更多 -->
                    <!--<div class="happy_IN2">-->
                        <!--<a href=""> MORE+ </a>-->
                    <!--</div>-->
                </div>
                <!-- 内容 -->
                <div class="show_INMain_con2_2">
                    <notempty name="res_xqgs">
                        <div class="swiper-slide">
                            <div class="show_index_con2Txt clearfix">
                                <a href="/portal/star/getStoryDetail?id={$res_xqgs.id}">
                                    <!-- 左侧图片 -->
                                    <img class="show_indexImg1" src="{:cmf_get_image_url($res_xqgs.thumbnail)}" alt="">
                                </a>
                                <!-- 文字 -->
                                <div class="show_index_con2Txt2">
                                    {$res_xqgs.excerpt}
                                </div>
                                <!-- 进度条 -->
                                <div class="show_index_progress">
                                    <img src="__TMPL__/public/assets/starImg/aicon_15.png" alt="">
                                </div>
                            </div>
                        </div>
                    </notempty>
                </div>
            </div>
            <!-- 网红美景 -->
            <div class="happy_InMain_box2 show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img style="width:28px;" src="__TMPL__/public/assets/starImg/aicon_06.png" alt="" />
                        <p>网红<span>美景</span></p>
                        <h2>Top Attraction</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="happy_IN2">
                        <a href="/portal/star/getMoreScenery?city_id={$city_id}"> MORE+ </a>
                    </div>
                </div>
                <!-- 第二部分 -->
                <div class="happy_food_con2_2 clearfix 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="happy_food_con2_2Img">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                </div>
                                <div class="happy_food_con2_2Txt2 clearfix">
                                    <h2>{$vo.post_title}</h2>
                                    <div>
                                        <img src="__TMPL__/public/assets/starImg/bicon_14.png" alt="">
                                        <p>{$vo.post_hits}</p>
                                    </div>
                                    <div>
                                        <img src="__TMPL__/public/assets/starImg/bicon_13.png" alt="">
                                        <p>{$vo.post_favorites}</p>
                                    </div>
                                </div>
                                </a>
                            </li>
                        </volist>
                    </ul>
                    <div class="show_swiper2_btn clearfix">

                        <div class="swiper-button-prev2"></div>
                        <div class="swiper-pagination">

                        </div>
                        <div class="swiper-button-next2"></div>
                    </div>
                </div>
            </div>
            <!-- 异域珍馐 -->
            <div class="show_InMain_box3 show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img style="width:38px;" src="__TMPL__/public/assets/starImg/aicon_11.png" alt="" />
                        <p>异域<span>珍馐</span></p>
                        <h2>Gastronomy</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="happy_IN2">
                        <a href="/portal/star/getMoreFood?city_id={$city_id}"> MORE+ </a>
                    </div>
                </div>
                <!-- 第一部分 -->
                <div class="happy_food_con2_1 swiper-container3">
                    <ul class="clearfix swiper-wrapper">
                        <volist name="res_yyzx" id="vo">
                            <a href="/portal/star/getFoodDetail?id={$vo.id}" class="swiper-slide">
                                <li >
                                    <div class="happy_food_con2_1Img">
                                        <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                    </div>
                                    <div class="happy_food_con2_1Txt clearfix">
                                        <h2>{$vo.post_title}</h2>
                                    </div>
                                </li>
                            </a>
                        </volist>
                    </ul>
                    <div class="show_swiper2_btn clearfix">

                        <div class="swiper-button-prev2"></div>
                        <div class="swiper-pagination">

                        </div>
                        <div class="swiper-button-next2"></div>
                    </div>
                </div>
            </div>
            <!-- 良宿美寝 -->
            <div class="show_InMain_box4 show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img style="width:38px;" src="__TMPL__/public/assets/starImg/aicon_17.png" alt="" />
                        <p>良宿<span>美寝</span></p>
                        <h2>Accommodation</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="happy_IN2">
                        <a href="/portal/star/getMoreHotel?city_id={$city_id}"> MORE+ </a>
                    </div>
                </div>
                <!-- 第一部分 -->
                <div class="happy_live_con_1 swiper-container4">
                    <div class="swiper-wrapper">
                        <volist name="res_lsmq" id="vo">
                            <a href="/portal/star/getHotelDetail?id={$vo.id}" class="swiper-slide">
                                <div>
                                    <div class="happy_live_con_1Img">
                                        <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                    </div>
                                    <p>{$vo.post_title}</p>
                                </div>
                            </a>
                        </volist>
                    </div>
                    <div class="show_swiper2_btn clearfix">

                        <div class="swiper-button-prev2"></div>
                        <div class="swiper-pagination">

                        </div>
                        <div class="swiper-button-next2"></div>
                    </div>
                </div>
            </div>
            <!-- 活力生态 -->
            <div class="show_InMain_box5 show_InMain_box2">
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img style="width:38px;" src="__TMPL__/public/assets/starImg/aicon_18.png" alt="" />
                        <p>活力<span>生态</span></p>
                        <h2>Responsible Tourism</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="happy_IN2">
                        <a href="/portal/star/getMoreEcology?city_id={$city_id}"> MORE+ </a>
                    </div>
                </div>
                <!-- 第一部分 -->
                <div class="happy_ecological_con2_1">
                    <ul class="clearfix">
                        <volist name="res_hlst" id="vo">
                            <li>
                                <a href="/portal/star/getEcologyDetail?id={$vo.id}">
                                    <div class="happy_ecological_con2_1Img">
                                        <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                    </div>
                                    <div class="happy_ecological_con2_1Txt">
                                        <h1>{$vo.post_title}</h1>
                                        <p>
                                            {$vo.post_excerpt}
                                        </p>
                                    </div>
                                </a>
                            </li>
                        </volist>
                    </ul>
                </div>
            </div>
            <!-- 便利出行 -->
            <div class="show_InMain_box6 show_InMain_box2">>
                <!-- 顶部标题 -->
                <div class="happy_INMain_tit clearfix">
                    <div class="happy_IN1 clearfix">
                        <img src="__TMPL__/public/assets/starImg/aicon_19.png" alt="" style="width:34px;margin-top: 2px;">
                        <p>便利<span>出行</span></p>
                        <h2>Easy Travel</h2>
                    </div>
                    <!-- 更多 -->
                    <div class="happy_IN2">
                        <a href="/portal/star/getMoreTravel?city_id={$city_id}"> MORE+ </a>
                    </div>
                </div>
                <!-- 内容一 -->
                <div class="happy_convenient_con_1 clearfix">
                    <volist name="res_blcx" id="vo">
                            <div class="happy_convenient_con_1Img">
                                <a href="/portal/star/getTravelDetail?id={$vo.id}">
                                    <img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
                                </a>
                            </div>
                    </volist>
                </div>
            </div>
        </div>
    </div>
    <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>
        // swiper
        var swiper = new Swiper(".swiper-container", {
            slidesPerView: 4,
            spaceBetween: 53,
            pagination: {
                el: ".swiper-pagination",
                clickable: true
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
            }
        });
        // 星球故事swiper
        var swiper = new Swiper('.swiper-container2', {
            slidesPerView: 4,
            spaceBetween: 16,
            // loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next2',
                prevEl: '.swiper-button-prev2',
            },
        });
        // 异域珍馐swiper
        var swiper = new Swiper('.swiper-container3', {
            slidesPerView: 2,
            spaceBetween: 16,
            // loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next2',
                prevEl: '.swiper-button-prev2',
            },
        });
        // 良宿美寝swiper
        var swiper = new Swiper('.swiper-container4', {
            slidesPerView: 1,
            spaceBetween: 16,
            // loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next2',
                prevEl: '.swiper-button-prev2',
            },
        });
        // banner视频
        var video = document.getElementById("video");

        function bofang() {
            video.play();
            $("#video").attr("controls", "controls");
            $(".show_in_banner2").hide();
        }
    </script>
</body>

</html>