<!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/index.css"> <link rel="stylesheet" href="__TMPL__/public/assets/js/swiper4/swiper.min.css"> <style> .slide-image{ width:260px; height:375px; } .star_ming{ cursor:pointer; } </style> </head> <body> <!-- 侧边 --> <div class="index_sidebar"> <img src="__TMPL__/public/assets/starImg/aicon_24.png" alt=""> <img class="index_scrollTop" src="__TMPL__/public/assets/starImg/aicon_25.png" alt=""> </div> <!-- 头部 --> <include file="public@header"/> <!-- banner --> <div id="banner"> <img src="__TMPL__/public/assets/starImg/aicon_01.png" alt=""> </div> <!-- 首页主体内容 --> <div id="star_main"> <!-- 星球奇境 --> <div class="star_happy" id="star"> <div> <span class="happy_title clearfix"> <p>星球<i>奇境</i></p> <p>PLANET DISCOVERY</p> </span> <em class="north clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>北美洲</p> <ul class="star_happy_box"> <volist name="res_city.north" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="south clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>南美洲</p> <ul class="star_happy_box"> <volist name="res_city.south" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="antarctica clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>南极洲</p> <ul class="star_happy_box"> <volist name="res_city.antarctica" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="europe clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>欧洲</p> <ul class="star_happy_box"> <volist name="res_city.europe" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="africa clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>非洲</p> <ul class="star_happy_box"> <volist name="res_city.africa" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="asia clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>亚洲</p> <ul class="star_happy_box"> <volist name="res_city.asia" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> <em class="oceania clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_41.png" alt=""> <p>大洋洲</p> <ul class="star_happy_box"> <volist name="res_city.oceania" id="vo"> <li><a href="/portal/star/index?city_id={$vo.id}">{$vo.name}</a></li> </volist> </ul> </em> </div> </div> <!-- 星享体验 --> <div class="star_exper"> <div class="star_experience"> <!-- 标题 --> <div class="star_title clearfix"> <span> <p>星享<i>体验</i></p> <p>STAR EXPERIENCE</p> </span> </div> <!-- 内容 --> <div class="star_exper_main clearfix"> <!-- 12个月 --> <!-- 一月 --> <div class="star_month"> <div class="star_february hovers april"> <p>1</p> <p>January</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>1</p> <p>January</p> </div> <!-- 图片 --> <notempty name="res_month.January"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.January.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.January.post_title}</p> <p>{$res_month.January.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> </div> <!-- 二月 --> <div class="star_month clearfix"> <div class="star_february hovers february"> <p>2</p> <p>February</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>2</p> <p>February</p> </div> <!-- 图片 --> <notempty name="res_month.February"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.February.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.February.post_title}</p> <p>{$res_month.February.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 三月 --> <div class="star_month clearfix"> <div class="star_february february february_bg hovers" style="color:rgba(91,91,107,1);"> <p>3</p> <p>March</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>3</p> <p>March</p> </div> <!-- 图片 --> <notempty name="res_month.March"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.March.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.March.post_title}</p> <p>{$res_month.March.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 四月 --> <div class="star_month clearfix" style="margin:0 0 10px 0"> <div class="star_february april hovers"> <p>4</p> <p>April</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>4</p> <p>April</p> </div> <!-- 图片 --> <notempty name="res_month.April"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.April.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.April.post_title}</p> <p>{$res_month.April.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 五月 --> <div class="star_month clearfix"> <div class="star_february may hovers"> <p>5</p> <p>May</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>5</p> <p>May</p> </div> <!-- 图片 --> <notempty name="res_month.May"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.May.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.May.post_title}</p> <p>{$res_month.May.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> </div> <!-- 六月 --> <div class="star_month clearfix"> <div class="star_february star_august star_august_bg hovers"> <p>6</p> <p>June</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>6</p> <p>June</p> </div> <!-- 图片 --> <notempty name="res_month.June"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.June.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.June.post_title}</p> <p>{$res_month.June.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 七月 --> <div class="star_month clearfix"> <div class="star_february hovers july"> <p>7</p> <p>July</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>7</p> <p>July</p> </div> <!-- 图片 --> <notempty name="res_month.July"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.July.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.July.post_title}</p> <p>{$res_month.July.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 八月 --> <div class="star_month clearfix" style="margin:0 0 10px 0"> <div class="star_february star_august hovers august"> <p>8</p> <p>August</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>8</p> <p>August</p> </div> <!-- 图片 --> <notempty name="res_month.August"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.August.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.August.post_title}</p> <p>{$res_month.August.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 九月 --> <div class="star_month clearfix"> <div class="star_february star_august star_august_bg2 hovers"> <p>9</p> <p>September</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>9</p> <p>September</p> </div> <!-- 图片 --> <notempty name="res_month.September"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.September.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.September.post_title}</p> <p>{$res_month.September.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> </div> <!-- 十月 --> <div class="star_month clearfix"> <div class="star_february hovers october"> <p>10</p> <p>October</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>10</p> <p>October</p> </div> <!-- 图片 --> <notempty name="res_month.October"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.October.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.October.post_title}</p> <p>{$res_month.October.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 十一月 --> <div class="star_month clearfix"> <div class="star_february star_august star_august_bg3 hovers"> <p>11</p> <p>November</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>11</p> <p>November</p> </div> <!-- 图片 --> <notempty name="res_month.November"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.November.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.November.post_title}</p> <p>{$res_month.November.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> <!-- 十二月 --> <div class="star_month clearfix" style="margin:0 0 10px 0"> <div class="star_february hovers december"> <p>12</p> <p>December</p> </div> <!-- 翻转后 --> <div class="reverse hovers"> <!-- 右上角月份 --> <div class="img_month"> <p>12</p> <p>December</p> </div> <!-- 图片 --> <notempty name="res_month.December"> <div class="reverse_Imgs"> <img src="{:cmf_get_image_url($res_month.December.thumbnail)}"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>{$res_month.December.post_title}</p> <p>{$res_month.December.category_name}</p> </div> <else/> <div class="reverse_Imgs"> <img src="__TMPL__/public/assets/starImg/aicon_28.png"/> </div> <!-- 图片下方文字 --> <div class="img_bottom"> <p>日本札幌冰雪节</p> <p>慕尼黑啤酒节</p> </div> </notempty> </div> <!-- <img src="__TMPL__/public/assets/starImg/aicon_28.png" alt=""> --> </div> </div> </div> </div> <!-- 星域秀场 --> <div class="star_stage"> <div class="star_planet"> <!-- 标题 --> <div class="star_title clearfix"> <span> <p>星域<i>秀场</i></p> <p> PLANET STAGE</p> </span> </div> <!-- 视频 --> <div class="star_video"> <notempty name="res_xqyy"> <video id="video" width="100%" height="675" src="{:cmf_get_file_download_url($res_xqyy.video)}"></video> <img class="show_in_poster" src="{:cmf_get_image_url($res_xqyy.thumbnail)}" alt=""> <else/> <video id="video" width="100%" height="675" src="__TMPL__//public/assets/starImg/video.mp4"></video> <img class="show_in_poster" src="__TMPL__/public/assets/starImg/bicon_34.png" alt=""> </notempty> <img onclick="bofang()" class="show_in_banner2" src="__TMPL__/public/assets/starImg/aicon_30.png" alt=""> </div> <!-- 人物简介 --> <notempty name="res_mxft"> <!-- 标题 --> <div class="star_personal clearfix star_ming"> <div class="star_title clearfix"> <span> <p>明星<i>访谈</i></p> <p>Star Interview</p> </span> </div> <!-- 左侧头像 --> <input type="hidden" id="star_id" value="{$res_mxft.id}"> <div class="personal_left"> <img src="{:cmf_get_image_url($res_mxft.avatar)}" alt=""> </div> <!-- 右侧简介 --> <div class="personal_right clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_32.png" alt=""> <!-- 人物简介 --> <div class="personal_synopsis"> <!-- 姓名 --> <div class="personal_name"> <p>{$res_mxft.full_name}</p> <p>{$res_mxft.position} {$res_mxft.trade}</p> </div> <!-- 叙述 --> <div class="personal_narration"> <p> {$res_mxft.post_excerpt} </p> </div> </div> </div> </div> </notempty> </div> </div> <!-- 星域画廊 --> <div class="star_gallery"> <div class="star_gall"> <!-- 标题 --> <div class="star_title clearfix"> <span> <p>星域<i>画廊</i></p> <p> PLANET GALLERY</p> </span> </div> <!-- 图片 --> <div class="star_gall_img swiper-container"> <!-- 轮播图 --> <ul class="swiper-wrapper"> <volist name="res_xyhl" id="vo"> <li class="swiper-slide"> <img class="swiper-slide slide-image" src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> </li> </volist> </ul> <!-- 左右按钮 --> <div class="swiper-button-next"> </div> <div class="swiper-button-prev "> </div> </div> <!-- 更多按钮 --> <div class="star_gall_more"> <a href="">MORE+</a> </div> </div> </div> <!-- 星探推荐 --> <div class="star_gallery"> <div class="star_gall"> <!-- 标题 --> <div class="star_title clearfix"> <span> <p>星探<i>推荐</i></p> <p> STAR RECOMMENDATION</p> </span> </div> <!-- 图片 --> <div class="star_gall_img swiper-container2"> <!-- 轮播图 --> <ul class="swiper-wrapper"> <volist name="res_xttj" id="vo"> <li class="swiper-slide scout_box"> <div class="scout_image"> <img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> </div> <empty name="vo.place"> <a href="/portal/scout/getSceneryDetail?id={$vo.id}"> <else /> <a href="/portal/scout/getTravelDetail?id={$vo.id}"> </empty> <h1> {$vo.post_title} </h1> <p>¥{$vo.price}</p> </a> </li> </volist> </ul> <!-- 左右按钮 --> <div class="swiper-button-next2"> </div> <div class="swiper-button-prev2"> </div> </div> </div> </div> <!-- 星际活动 --> <notempty name="res_xjhd"> <div class="star_activity"> <!-- 标题 --> <div class="star_title clearfix"> <span> <p>星际<i>活动</i></p> <p>PLANET ACTIVITY</p> </span> </div> <!-- 内容 --> <div class="star_activity_con"> <ul class="clearfix xjhd"> <volist name="res_xjhd" id="vo"> <li> <img style="width:590px;height:590px;" src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> <p>{$vo.post_title}</p> </li> </volist> </ul> </div> </div> </notempty> </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> // 点击返回头部 $(window).scroll(function() { if ($(window).scrollTop() > 2000) { $('.index_scrollTop').fadeIn(); } else { $('.index_scrollTop').fadeOut(); } }) $('.index_scrollTop').click(function() { $('html,body').animate({ scrollTop: 0 }, 'slow') }); // 星球奇景 $('.star_happy em').hover(function() { if ($(this).children('img').attr('src') == "__TMPL__/public/assets/starImg/aicon_41.png") { $(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_42.png"); $(this).children('.star_happy_box').show(); } else { $(this).children('img').attr('src', "__TMPL__/public/assets/starImg/aicon_41.png"); $(this).children('.star_happy_box').hide(); } }); // tab切换 $('.star_happy_box li').click(function() { $(this).addClass('active').siblings().removeClass('active'); }); $('.star_ming').click(function() { var id = $('#star_id').val(); window.location.href = '/portal/region/getStarDetail?id='+id; }); // 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: 14, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next2', prevEl: '.swiper-button-prev2', }, }); // 星域秀场视频 var video = document.getElementById("video"); function bofang() { video.play(); $('#video').attr('controls', 'controls') $('.show_in_banner2').hide(); $('.show_in_poster').hide(); } </script> </body> </html>