<!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/show.css"> <link rel="stylesheet" href="__TMPL__/public/assets/css/audio.css"> <style> .slide-image { width: 260px; height: 375px; } .show_INMain_con5_2 p, .show_INMain_con6_1 p { height: 45px; } .swiper-button-prev2, .swiper-button-next2 { outline: none; } .hl_index { overflow: hidden; float: left; margin-top: 11px; } .hl_index span { width: 8px; height: 8px; float: left; background: rgba(255, 255, 255, 1); opacity: 0.6; display: inline-block; border-radius: 50%; margin-right: 6px; } .swiper-button-prev2 { margin-right: 6px; } .hl_index .first { background: #09FF8E; } .swiper-button-disabled2 { background-color: white !important; } .show_in_banner2 { z-index: 20; } .show_bannerFen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .show_bannerFen img { width: 100%; height: 100%; } </style> </head> <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false"> <!--头部--> <include file="public@header" /> <div class="show_index"> <!-- banner视频 --> <div class="show_index_banner"> <notempty name="res_xqyy"> <video id="video" controls width="100%" height="660" src="{:cmf_get_file_download_url($res_xqyy.video)}" controlsList="nodownload"></video> <else/> <video id="video" autoplay="autoplay" controls width="100%" height="660" src="__TMPL__/public/assets/starImg/video.mp4" controlsList="nodownload"></video> </notempty> <!-- poster="__TMPL__/public/assets/starImg/aicon_01.png" --> <img onclick="bofang()" class="show_in_banner2" src="__TMPL__/public/assets/starImg/aicon_30.png" alt=""> <div class="show_bannerFen"> <img src="{:cmf_get_image_url($res_xqyy.thumbnail)}" alt=""> </div> </div> <!-- main 背景 --> <div class="show_InMain"> <!-- 明星访谈盒子 --> <div class="show_InMain_box"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="star_interview"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_48.png" alt=""> <p>明星<span>访谈</span></p> <h2>Star Interview</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreStar"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con clearfix"> <a href="/portal/region/getStarDetail?id={$res_mxft.id}"> <img class="show_INMain_con1" src="{:cmf_get_image_url($res_mxft.avatar)}" alt=""> <div class="show_INMain_con2 clearfix"> <img class="show_INMain_con3" src="__TMPL__/public/assets/starImg/aicon_32.png" alt=""> <h2>{$res_mxft.full_name}</h2> <h3>{$res_mxft.position} {$res_mxft.trade}</h3> <p>{$res_mxft.post_excerpt}</p> </div> </a> </div> </div> <!-- 星球故事盒子 --> <div class="show_InMain_box show_InMain_box2"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="story"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_03.png" alt=""> <p>星球<span>故事</span></p> <h2>Planet Story</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreStory"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con2_2 swiper-container2 swiper-no-swiping"> <div class="swiper-wrapper"> <volist name="res_xqgs" id="vo"> <div class="swiper-slide"> <div class="show_index_con2Txt clearfix"> <a href="/portal/star/getStoryDetail?id={$vo.id}"> <!-- 左侧图片 --> <img class="show_indexImg1" src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> </a> <!-- 文字 --> <div class="show_index_con2Txt2"> {$vo.excerpt} </div> <!-- 进度条 --> <div class="show_index_progress"> <notempty name="vo.audio"> <audio src="{:cmf_get_file_download_url($vo.audio)}"></audio> <else/> <audio src="http://link.hhtjim.com/163/442869240.mp3"></audio> </notempty> <!--<img src="__TMPL__/public/assets/starImg/aicon_15.png" alt="">--> </div> </div> </div> </volist> </div> <div class="show_swiper2_btn clearfix"> <div class="show_swiper2_btn22"> <div class="swiper-button-prev2"></div> <div class="hl_index"> <volist name="res_xqgs" id="vo"> <span></span> </volist> </div> <div class="swiper-button-next2"></div> </div> </div> </div> </div> </div> <!-- 星球画廊盒子 --> <div class="show_InMain_box show_InMain_box3"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="gallery"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_50.png" alt=""> <p>星球<span>画廊</span></p> <h2>Star Gallery</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreGallery"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con3_3 swiper-container"> <ul class="swiper-wrapper"> <volist name="res_xyhl" id="vo"> <li class="swiper-slide"> <a href="/portal/region/getGalleryDetail?id={$vo.id}"> <img class="swiper-slide slide-image" src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> </a> </li> </volist> </ul> <div class="swiper-button-next"> </div> <div class="swiper-button-prev "> </div> </div> </div> <!-- 独角快报 --> <div class="show_InMain2"> <div class="show_InMain_box4"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="news"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_51.png" alt="" style="margin-top:5px;width: 30px;"> <p>独角<span>快报</span></p> <h2>Planet Express</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreNews"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con4"> <ul> <volist name="res_djkb" id="vo"> <li class="clearfix"> <a href="/portal/region/getNewsDetail?id={$vo.id}"> <img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> <div class="show_INMain_con4_txt"> <h2>{$vo.post_title}</h2> <p> {$vo.post_excerpt} </p> <span>{$vo.create_time|date="Y-m-d",###}</span> </div> </a> </li> </volist> </ul> </div> </div> </div> <!-- 独角日志 --> <div class="show_InMain_box show_InMain_box5"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="note"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_52.png" alt="" style="margin-top:3px;width: 28px;"> <p>独角<span>日志</span></p> <h2>Neo Blog</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreNote"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con5"> <ul class="clearfix"> <volist name="res_djrz" id="vo"> <li> <a href="/portal/region/getNoteDetail?id={$vo.id}"> <div class="show_INMain_con5_1"> <img src="{:cmf_get_image_url($vo.index_thumbnail)}" alt=""> </div> <div class="show_INMain_con5_2"> <h1>{$vo.post_title}</h1> <p> {$vo.post_excerpt} </p> <img src="{:cmf_get_image_url($vo.avatar)}" alt=""> </div> </a> </li> </volist> </ul> </div> </div> <!-- 公益未来 --> <div class="show_InMain_box show_InMain_box6"> <!-- 顶部标题 --> <div class="show_INMain_tit clearfix" id="future"> <div class="show_IN1 clearfix"> <img src="__TMPL__/public/assets/starImg/aicon_53.png" alt="" style="margin-top:5px;width:37px;"> <p>公益<span>未来</span></p> <h2>Commonweal & Future</h2> </div> <!-- 更多 --> <div class="show_IN2"> <a href="/portal/region/getMoreFuture"> MORE+ </a> </div> </div> <!-- 内容 --> <div class="show_INMain_con6"> <ul class="clearfix"> <volist name="res_tqwl" id="vo"> <li> <a href="/portal/region/getFutureDetail?id={$vo.id}"> <img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> <div class="show_INMain_con6_1"> <h1>{$vo.post_title}</h1> <p>{$vo.post_excerpt}</p> </div> </a> </li> </volist> </ul> </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 src="__TMPL__/public/assets/js/k-audio.js"></script> <script> var index = 0; $(window).ready(function() { if (index == 0) { $('.swiper-button-prev2').addClass('swiper-button-disabled2'); } }); //禁止下载 $('video').bind('contextmenu', function() { return false; }); // 轮播图 $('.hl_index span:first-child').addClass('first'); $('.swiper-button-next2').click(function() { index++; if (index == $('.swiper-container2 .swiper-wrapper .swiper-slide').length) { index = $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1 } $(".swiper-container2 .swiper-wrapper").animate({ "left": -1200 * index }, 300); $(".hl_index span").eq(index).css("background-color", "#09FF8E") .siblings().css("background-color", "#FFFFFF"); if (index == $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) { $('.swiper-button-next2').addClass('swiper-button-disabled2'); $('.swiper-button-prev2').removeClass('swiper-button-disabled2'); } else if (index <= $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) { $('.swiper-button-next2').removeClass('swiper-button-disabled2'); $('.swiper-button-prev2').removeClass('swiper-button-disabled2'); } else { $('.swiper-button-next2').removeClass('swiper-button-disabled2'); } }); $(".swiper-button-prev2").click(function() { if (index == 0) { index = 0; } else { index--; } $(".swiper-container2 .swiper-wrapper").animate({ "left": -1200 * index }, 300); $(".hl_index span").eq(index).css("background-color", "#09FF8E") .siblings().css("background-color", "#FFFFFF"); if (index == 0) { $('.swiper-button-prev2').addClass('swiper-button-disabled2'); $('.swiper-button-next2').removeClass('swiper-button-disabled2'); } else if (index <= $('.swiper-container2 .swiper-wrapper .swiper-slide').length - 1) { $('.swiper-button-next2').removeClass('swiper-button-disabled2'); $('.swiper-button-prev2').removeClass('swiper-button-disabled2'); } else { $('.swiper-button-prev2').removeClass('swiper-button-disabled2'); } }); $('audio').each(function() { var a = new kac(this, 800, 40, "https://raw.githubusercontent.com/KIPI-C/k-audio.js/master/22.lrc", true); a.style("#E1E1E6"); }); // 获取所有audios var audios = document.getElementsByTagName("audio"); // 暂停函数 function pauseAll() { var self = this; [].forEach.call(audios, function(i) { // 将audios中其他的audio全部暂停 i !== self && i.pause(); }) } // 给play事件绑定暂停函数 [].forEach.call(audios, function(i) { i.addEventListener("play", pauseAll.bind(i)); }); // 星球画廊swiper var swiper = new Swiper('.swiper-container', { slidesPerView: 4, spaceBetween: 53, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); // 星球故事swiper // var swiper = new Swiper('.swiper-container2', { // slidesPerView: 1, // spaceBetween: 30, // // 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(); $('.show_bannerFen').hide(); } </script> </body> </html>