|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<meta 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" href="__TMPL__/public/assets/css/swiper-3.4.2.min.css" />
|
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/base.css" />
|
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/index.css" />
|
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css" />
|
|
|
|
<title>星球影院</title>
|
|
|
|
<style>
|
|
|
|
.video_poster {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 97%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<include file="public@header"/>
|
|
|
|
<div class="mask">
|
|
|
|
</div>
|
|
|
|
<!-- 视频 -->
|
|
|
|
<div class="fourth_video">
|
|
|
|
<div class="fourth_video_center">
|
|
|
|
<div class="video_bg">
|
|
|
|
<img class="video_poster iop" src="" alt="">
|
|
|
|
<video src="" id="video" width="100%" style="height: 3.4rem;" controlsList="nodownload"></video>
|
|
|
|
</div>
|
|
|
|
<div class="fourth_video_start">
|
|
|
|
<img onclick="bofang()" src="__TMPL__/public/assets/images/aicon_30.png" alt="" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 专辑搜索 -->
|
|
|
|
<div class="index_seventh_contant">
|
|
|
|
<!-- 顶部 -->
|
|
|
|
<div class="show_9_video_asideTie clearfix">
|
|
|
|
<p>专辑</p>
|
|
|
|
<div class="select">
|
|
|
|
<input type="hidden" value="{$cityName}" id="cityName">
|
|
|
|
<form method="GET" action="/portal/region/getMoreVideo">
|
|
|
|
<input type="text" class="show_city" value="所有" readonly="readonly">
|
|
|
|
<img src="__TMPL__/public/assets/images/down2.png" alt="" />
|
|
|
|
<ul>
|
|
|
|
<li>所有</li>
|
|
|
|
<volist name="city_name" id="vo">
|
|
|
|
<li value="{$vo.id}">{$vo.name}</li>
|
|
|
|
</volist>
|
|
|
|
<input type="hidden" value="0" name="city_id" id="city_id">
|
|
|
|
</ul>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="index_seventh_swiper">
|
|
|
|
<div class="star_gall_img swiper-container">
|
|
|
|
<!-- 轮播图 -->
|
|
|
|
<ul class="swiper-wrapper curren video_active">
|
|
|
|
<volist name="res['data']" id="vo">
|
|
|
|
<li class="swiper-slide">
|
|
|
|
<div class="idnex_seventh_swiper_contant">
|
|
|
|
<div class="idnex_seventh_swiper_contant_img">
|
|
|
|
<img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" />
|
|
|
|
</div>
|
|
|
|
<div class="idnex_seventh_swiper_contant_title txt-cut" style="-webkit-line-clamp: 2;">
|
|
|
|
{$vo.post_title}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<input type="hidden" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
|
|
|
|
<!--标题-->
|
|
|
|
<input type="hidden" value="{$vo.post_title}" class="li_post_title">
|
|
|
|
<!--国家-->
|
|
|
|
<input type="hidden" value="{$vo.city_name}" class="li_city_name">
|
|
|
|
<!--取景-->
|
|
|
|
<input type="hidden" value="{$vo.framing}" class="li_framing">
|
|
|
|
<!--上映时间-->
|
|
|
|
<input type="hidden" value="{$vo.release_time}" class="li_release_time">
|
|
|
|
</li>
|
|
|
|
</volist>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 影片信息 -->
|
|
|
|
<div class="index_seventh_bottom">
|
|
|
|
<div class="index_seventh_bottom_one"><span class="post_title"></span></div>
|
|
|
|
<div class="index_seventh_bottom_two">国家：<span class="city_name"></span></div>
|
|
|
|
<div class="index_seventh_bottom_three">取景：<span class="framing"></span></div>
|
|
|
|
<div class="index_seventh_bottom_four">上映时间：<span class="release_time"></span></div>
|
|
|
|
<div class="index_seventh_bottom_five">
|
|
|
|
<div class="index_seventh_bottom_title">分享:</div>
|
|
|
|
<div class="index_seventh_bottom_img1">
|
|
|
|
<img src="__TMPL__/public/assets/images/cicon_71@2x.png" alt="" />
|
|
|
|
</div>
|
|
|
|
<div class="index_seventh_bottom_img1">
|
|
|
|
<img src="__TMPL__/public/assets/images/cicon_72@2x.png" alt="" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<include file="public@footer"/>
|
|
|
|
</body>
|
|
|
|
<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>
|
|
|
|
// 星域秀场视频
|
|
|
|
var video = document.getElementById("video");
|
|
|
|
|
|
|
|
function bofang() {
|
|
|
|
video.play();
|
|
|
|
$("#video").attr("controls", "controls");
|
|
|
|
$(".fourth_video_start").hide();
|
|
|
|
$('.video_poster').css('z-index', '-1');
|
|
|
|
}
|
|
|
|
// swiper
|
|
|
|
|
|
|
|
var swiper = new Swiper(".swiper-container", {
|
|
|
|
slidesPerView: 3,
|
|
|
|
paginationClickable: true,
|
|
|
|
spaceBetween: 8,
|
|
|
|
freeMode: true
|
|
|
|
});
|
|
|
|
$(".select input").click(function() {
|
|
|
|
if ($(this).next("img").attr("src") == "__TMPL__/public/assets/images/down2.png") {
|
|
|
|
$(this)
|
|
|
|
.next("img")
|
|
|
|
.attr("src", "__TMPL__/public/assets/images/upjian.png");
|
|
|
|
$(".select ul").toggle();
|
|
|
|
} else {
|
|
|
|
$(this)
|
|
|
|
.next("img")
|
|
|
|
.attr("src", "__TMPL__/public/assets/images/down2.png");
|
|
|
|
$(".select ul").toggle();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//默认第一个视频
|
|
|
|
switch_video(0);
|
|
|
|
|
|
|
|
//点击切换
|
|
|
|
$('.curren li').click(function(){
|
|
|
|
var index = $(this).index();
|
|
|
|
$('.curren').children('li').find('.li_img').css('opacity','0.3');
|
|
|
|
$('.curren').children('li').find('.txt-cut').css('color','rgba(153, 153, 153, 1)');
|
|
|
|
switch_video(index);
|
|
|
|
});
|
|
|
|
$(".select ul li").click(function() {
|
|
|
|
$(".select input").val($(this).text());
|
|
|
|
$(".select ul").hide();
|
|
|
|
var index = $(this).index();
|
|
|
|
$(".curren")
|
|
|
|
.eq(index)
|
|
|
|
.addClass("video_active")
|
|
|
|
.siblings()
|
|
|
|
.removeClass("video_active");
|
|
|
|
});
|
|
|
|
|
|
|
|
//切换视频
|
|
|
|
function switch_video(index){
|
|
|
|
//视频路径
|
|
|
|
var li_index = $('.curren').children('li').eq(index);
|
|
|
|
//选中颜色
|
|
|
|
li_index.find('.li_img').css('opacity','1');
|
|
|
|
li_index.find('.txt-cut').css('color','rgba(9, 255, 142, 1)');
|
|
|
|
|
|
|
|
//视频
|
|
|
|
var oneVideo = li_index.children('.li_video').val();
|
|
|
|
$('#video').attr('src',oneVideo);
|
|
|
|
|
|
|
|
// 视频封面图
|
|
|
|
var oneCover = li_index.find('.li_img').attr('src');
|
|
|
|
$('.video_poster').attr('src',oneCover);
|
|
|
|
// $('.video_poster').css('z-index', '10');
|
|
|
|
|
|
|
|
$('.fourth_video_start').css({
|
|
|
|
'z-index': "11",
|
|
|
|
"display":"block"
|
|
|
|
});
|
|
|
|
|
|
|
|
//标题，国家，取景，上映时间
|
|
|
|
var post_title = li_index.children('.li_post_title').val();
|
|
|
|
var city_name = li_index.children('.li_city_name').val();
|
|
|
|
var framing = li_index.children('.li_framing').val();
|
|
|
|
var release_time = li_index.children('.li_release_time').val();
|
|
|
|
$('.post_title').text(post_title);
|
|
|
|
$('.city_name').text(city_name);
|
|
|
|
$('.framing').text(framing);
|
|
|
|
$('.release_time').text(release_time);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|
