景龙 / xingqiu · 提交

转到一个项目

作者 景龙
提交 22a1c36387efd920988dac0325ee73d5f09d1852 1 个父辈 60dbd111
1 个管道 的构建 通过 耗费 2 秒

修改首页轮播和视频页

内嵌 并排对比
正在显示 11 个修改的文件 包含 146 行增加 和 63 行删除
... ... @@ -109,6 +109,7 @@ class EnjoyController extends HomeBaseController
public function getCityName(){
$res = Db::name('city_category')
->where('pid','<>',0)
->where('id','<>',CityCategoryModel::xqgh_cc)
->where('delete_time',0)
->field('id,name')->select()->toArray();
return $res;
... ...
... ... @@ -137,7 +137,6 @@ class RegionController extends HomeBaseController
//星球影院更多(按照城市查询)
public function getMoreVideo(){
$page = $this->request->param('page',1,'intval');
$city_id = $this->request->param('city_id',0,'intval');
$position['city_id'] = $city_id;
$position['category_id'] = CityCategoryModel::xqyy;
... ...
... ... @@ -52,6 +52,9 @@ class CityCategoryModel extends Model
const yjyr = 26;//悦己悦人
const xjhd_c = 27;//星际活动
//城市
const xqgh_cc = 65;//星球故事
//五大洲
const asia = 1;//亚洲
const europe = 2;//欧洲
... ...
... ... @@ -43,6 +43,8 @@
<img src="__TMPL__/public/assets/starImg/banner/3.jpg" alt="">
</div>
</div>
<div class="swiper-button-nextban"></div>
<div class="swiper-button-prevban"></div>
<!--<div class="swiper-pagination">-->
<!--</div>-->
... ... @@ -789,18 +791,17 @@
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 2500,
delay: 4000,
disableOnInteraction: false,
},
loop:true
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
navigation: {
nextEl: '.swiper-button-nextban',
prevEl: '.swiper-button-prevban'
}
});
... ...
... ... @@ -5,7 +5,7 @@
<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>
<title>公益未来详情</title>
<link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
<link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css">
</head>
... ...
... ... @@ -18,8 +18,8 @@
<div class="show_9 clearfix">
<!-- 视频 -->
<div class="show_9_video">
<img class="video_poster iop" src="__TMPL__/public/assets/starImg/bicon_28.png" alt="">
<video id="video" width="100%" height="426" src="__TMPL__/public/assets/starImg/video.mp4"></video>
<img class="video_poster iop" src="" alt="">
<video id="video" width="100%" height="426" src=""></video>
<img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
</div>
<!-- 视频侧边选择 -->
... ... @@ -28,7 +28,7 @@
<div class="show_9_video_asideTie clearfix">
<p>专辑</p>
<div class="select">
<input type="text" value="中国" readonly="readonly">
<input type="text" value="所有" readonly="readonly">
<img src="__TMPL__/public/assets/starImg/down.png" alt="">
<ul style="height:300px;overflow-y: scroll;width:145px;">
<li>所有</li>
... ... @@ -43,11 +43,19 @@
<ul class="curren">
<volist name="res['data']" id="vo">
<li class="clearfix">
<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
<img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" style="opacity: 0.3;">
<p>
{$vo.post_title}
</p>
<input type="text" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
<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>
... ... @@ -56,12 +64,12 @@
<!-- 底部 -->
<div class="show_9_video_asideTxt clearfix">
<!-- 标题 -->
<h1>令人神往的蒙大拿州弗里德黑德湖</h1>
<h1 class="post_title">令人神往的蒙大拿州弗里德黑德湖</h1>
<!-- 国家 -->
<div class="show_9_video_asideTxt2">
<p>国家：美国</p>
<p>取景：蒙大拿州弗里德黑德湖</p>
<p>上映时间：2019-11-12</p>
<p>国家：<span class="city_name">美国</span></p>
<p>取景：<span class="framing">蒙大拿州弗里德黑德湖</span></p>
<p>上映时间：<span class="release_time">2019-11-12</span></p>
</div>
<!-- 分享 -->
<div class="show_9_video_asideTxt3 clearfix">
... ... @@ -77,24 +85,31 @@
<script>
// 星域秀场视频
$(function() {
$('.curren li').each(function() {
$(this).click(function() {
// 封面图
var img = $(this).find('img').attr('src');
$('.video_poster').attr('src', img);
// 视频
$('.video_poster').css('z-index', '10');
$('.play_button').show();
$('.play_button').css('z-index', '11');
var videoSrc = $(this).children('.li_video').val();
$('#video').attr('src', videoSrc);
//默认第一个视频
switch_video(0);
$('.curren').children('li').children('.li_img').css('opacity','0.3');
$('.curren').children('li').eq(0).children('.li_img').css('opacity','1');
// 视频标题
var videoTitle = $(this).children('p').text();
$('.show_9_video_asideTxt h1').text(videoTitle);
});
//点击切换
$('.curren li').click(function(){
var index = $(this).index();
$('.curren').children('li').children('.li_img').css('opacity','0.3');
$('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
switch_video(index);
});
//鼠标滑过
$('.curren li').hover(function(){
$('.curren').children('li').children('.li_img').css('opacity','0.3');
$('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
$(this).children('.li_img').css('opacity','1');
$(this).children('p').css('color','rgba(9, 255, 142, 1)');
});
// 点击input下拉
$('.select input').click(function() {
if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
$(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png");
... ... @@ -106,18 +121,10 @@
});
//下拉框选择城市
$('.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');
});
$(document).ready(function() {
var val = $('.select input').val();
var val2 = $('.select ul li:first-child').text();
val = val2;
$('.select input').val(val);
console.log(index);
});
// 弹出框
... ... @@ -127,10 +134,34 @@
$('.curren').eq(0).addClass('video_active');
});
//切换视频
function switch_video(index){
//视频路径
var li_index = $('.curren').children('li').eq(index);
//选中颜色
li_index.children('.li_img').css('opacity','1');
li_index.children('p').css('color','rgba(9, 255, 142, 1)');
var oneVideo = li_index.children('.li_video').val();
$('#video').attr('src',oneVideo);
// 视频封面图
var oneCover = li_index.children('.li_img').attr('src');
$('.video_poster').attr('src',oneCover);
//标题，国家，取景，上映时间
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);
}
// 点击播放
function bofang() {
video.play();
$('#video').attr('controls', 'controls')
$('#video').attr('controls', 'controls');
$('.play_button').hide();
$('.video_poster').css('z-index', '-1');
}
... ...
... ... @@ -100,12 +100,14 @@
</volist>
</div>
<div class="show_swiper2_btn clearfix">
<div class="swiper-button-prev2"></div>
<div class="swiper-pagination">
<div class="show_swiper2_btn22">
<div class="swiper-button-prev2"></div>
<div class="swiper-pagination">
</div>
<div class="swiper-button-next2"></div>
</div>
<div class="swiper-button-next2"></div>
</div>
</div>
... ...
... ... @@ -101,7 +101,6 @@
/* 二维码 */
#footer .about_bot .qr_code dl {
width: 57px;
height: 80px;
float: left;
margin-right: 31px
... ...
... ... @@ -98,8 +98,8 @@ p {
width: 80px;
z-index: 10;
position: fixed;
right: 59px;
top: 500px;
right: 48px;
top: 600px;
}
.index_sidebar img {
... ... @@ -111,6 +111,41 @@ p {
.index_scrollTop {
display: none;
}
.swiper-container6{
position: relative;
}
.swiper-button-nextban.swiper-button-disabled, .swiper-button-prevban.swiper-button-disabled {
opacity: 1;
cursor: auto;
pointer-events: none;
background-color: white;
}
.swiper-button-nextban,.swiper-button-prevban{
width: 60px;
height: 60px;
position: absolute;
border-radius: 50%;
z-index: 10;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(9, 255, 142, 1);
}
.swiper-button-nextban{
top: 40%;
right: 3.1%;
float: left;
background-size: 20px 20px;
background-image: url(../starImg/right.png);
}
.swiper-button-prevban{
top: 40%;
left: 3.1%;
float: left;
background-size: 20px 20px;
background-image: url(../starImg/left.png);
}
/* 主体内容 */
#star_main {
... ... @@ -118,7 +153,6 @@ p {
background-color: rgba(60, 60, 148, 1);
}
/* 星球奇遇 */
#star_main .star_happy {
... ...
... ... @@ -325,23 +325,29 @@ body {
.show_index_progress img {
margin: 10px 0 0 45px;
}
.swiper-button-next2.swiper-button-disabled, .swiper-button-prev2.swiper-button-disabled {
opacity: 1;
cursor: auto;
pointer-events: none;
background-color: white;
}
.swiper-button-next2,
.swiper-button-prev2 {
position: absolute;
width: 34px;
height: 34px;
width: 30px;
height: 30px;
border-radius: 50%;
z-index: 10;
cursor: pointer;
background-size: 34px 34x;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(9, 255, 142, 1);
background-size: 12px 12px;
}
.swiper-button-prev2 {
position: static;
float: left;
background-image: url("../starImg/aicon_10.png")
left: 0;
background-image: url(../starImg/left.png);
}
.swiper-pagination {
... ... @@ -351,9 +357,8 @@ body {
}
.swiper-button-next2 {
position: static;
float: left;
background-image: url("../starImg/aicon_09.png")
background-image: url(../starImg/right.png);
}
.swiper-pagination-clickable .swiper-pagination-bullet {
... ... @@ -376,11 +381,19 @@ body {
.show_swiper2_btn {
margin-top: -45px;
left: 45%;
z-index: 1;
position: relative;
}
.show_swiper2_btn22{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
/* 星球画廊 */
... ...
... ... @@ -39,7 +39,7 @@
<!-- 搜索框 -->
<section class="home_search">
<i class="search_icon"></i>
<input type="text" placeholder="巴厘岛">
<input type="text" placeholder="">
</section>
<notempty name="user">
<section class="home_login login_person">
... ...