景龙 / xingqiu · 提交

转到一个项目

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

修改首页轮播和视频页

内嵌 并排对比
正在显示 11 个修改的文件 包含 146 行增加 和 63 行删除
@@ -109,6 +109,7 @@ class EnjoyController extends HomeBaseController @@ -109,6 +109,7 @@ class EnjoyController extends HomeBaseController
109 public function getCityName(){ 109 public function getCityName(){
110 $res = Db::name('city_category') 110 $res = Db::name('city_category')
111 ->where('pid','<>',0) 111 ->where('pid','<>',0)
  112 + ->where('id','<>',CityCategoryModel::xqgh_cc)
112 ->where('delete_time',0) 113 ->where('delete_time',0)
113 ->field('id,name')->select()->toArray(); 114 ->field('id,name')->select()->toArray();
114 return $res; 115 return $res;
@@ -137,7 +137,6 @@ class RegionController extends HomeBaseController @@ -137,7 +137,6 @@ class RegionController extends HomeBaseController
137 137
138 //星球影院更多(按照城市查询) 138 //星球影院更多(按照城市查询)
139 public function getMoreVideo(){ 139 public function getMoreVideo(){
140 - $page = $this->request->param('page',1,'intval');  
141 $city_id = $this->request->param('city_id',0,'intval'); 140 $city_id = $this->request->param('city_id',0,'intval');
142 $position['city_id'] = $city_id; 141 $position['city_id'] = $city_id;
143 $position['category_id'] = CityCategoryModel::xqyy; 142 $position['category_id'] = CityCategoryModel::xqyy;
@@ -52,6 +52,9 @@ class CityCategoryModel extends Model @@ -52,6 +52,9 @@ class CityCategoryModel extends Model
52 const yjyr = 26;//悦己悦人 52 const yjyr = 26;//悦己悦人
53 const xjhd_c = 27;//星际活动 53 const xjhd_c = 27;//星际活动
54 54
  55 + //城市
  56 + const xqgh_cc = 65;//星球故事
  57 +
55 //五大洲 58 //五大洲
56 const asia = 1;//亚洲 59 const asia = 1;//亚洲
57 const europe = 2;//欧洲 60 const europe = 2;//欧洲
@@ -43,6 +43,8 @@ @@ -43,6 +43,8 @@
43 <img src="__TMPL__/public/assets/starImg/banner/3.jpg" alt=""> 43 <img src="__TMPL__/public/assets/starImg/banner/3.jpg" alt="">
44 </div> 44 </div>
45 </div> 45 </div>
  46 + <div class="swiper-button-nextban"></div>
  47 + <div class="swiper-button-prevban"></div>
46 <!--<div class="swiper-pagination">--> 48 <!--<div class="swiper-pagination">-->
47 49
48 <!--</div>--> 50 <!--</div>-->
@@ -789,18 +791,17 @@ @@ -789,18 +791,17 @@
789 spaceBetween: 0, 791 spaceBetween: 0,
790 centeredSlides: true, 792 centeredSlides: true,
791 autoplay: { 793 autoplay: {
792 - delay: 2500, 794 + delay: 4000,
793 disableOnInteraction: false, 795 disableOnInteraction: false,
794 }, 796 },
795 - loop:true  
796 // pagination: { 797 // pagination: {
797 // el: '.swiper-pagination', 798 // el: '.swiper-pagination',
798 // clickable: true, 799 // clickable: true,
799 // }, 800 // },
800 -// navigation: {  
801 -// nextEl: '.swiper-button-next',  
802 -// prevEl: '.swiper-button-prev',  
803 -// }, 801 + navigation: {
  802 + nextEl: '.swiper-button-nextban',
  803 + prevEl: '.swiper-button-prevban'
  804 + }
804 }); 805 });
805 806
806 807
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 - <title>童趣未来详情</title> 8 + <title>公益未来详情</title>
9 <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css"> 9 <link rel="stylesheet" href="__TMPL__/public/assets/css/show.css">
10 <link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css"> 10 <link rel="stylesheet" href="__TMPL__/public/assets/css/mask.css">
11 </head> 11 </head>
@@ -18,8 +18,8 @@ @@ -18,8 +18,8 @@
18 <div class="show_9 clearfix"> 18 <div class="show_9 clearfix">
19 <!-- 视频 --> 19 <!-- 视频 -->
20 <div class="show_9_video"> 20 <div class="show_9_video">
21 - <img class="video_poster iop" src="__TMPL__/public/assets/starImg/bicon_28.png" alt="">  
22 - <video id="video" width="100%" height="426" src="__TMPL__/public/assets/starImg/video.mp4"></video> 21 + <img class="video_poster iop" src="" alt="">
  22 + <video id="video" width="100%" height="426" src=""></video>
23 <img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt=""> 23 <img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
24 </div> 24 </div>
25 <!-- 视频侧边选择 --> 25 <!-- 视频侧边选择 -->
@@ -28,7 +28,7 @@ @@ -28,7 +28,7 @@
28 <div class="show_9_video_asideTie clearfix"> 28 <div class="show_9_video_asideTie clearfix">
29 <p>专辑</p> 29 <p>专辑</p>
30 <div class="select"> 30 <div class="select">
31 - <input type="text" value="中国" readonly="readonly"> 31 + <input type="text" value="所有" readonly="readonly">
32 <img src="__TMPL__/public/assets/starImg/down.png" alt=""> 32 <img src="__TMPL__/public/assets/starImg/down.png" alt="">
33 <ul style="height:300px;overflow-y: scroll;width:145px;"> 33 <ul style="height:300px;overflow-y: scroll;width:145px;">
34 <li>所有</li> 34 <li>所有</li>
@@ -43,11 +43,19 @@ @@ -43,11 +43,19 @@
43 <ul class="curren"> 43 <ul class="curren">
44 <volist name="res['data']" id="vo"> 44 <volist name="res['data']" id="vo">
45 <li class="clearfix"> 45 <li class="clearfix">
46 - <img src="{:cmf_get_image_url($vo.thumbnail)}" alt=""> 46 + <img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" style="opacity: 0.3;">
47 <p> 47 <p>
48 {$vo.post_title} 48 {$vo.post_title}
49 </p> 49 </p>
50 - <input type="text" value="{:cmf_get_file_download_url($vo.video)}" class="li_video"> 50 + <input type="hidden" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
  51 + <!--标题-->
  52 + <input type="hidden" value="{$vo.post_title}" class="li_post_title">
  53 + <!--国家-->
  54 + <input type="hidden" value="{$vo.city_name}" class="li_city_name">
  55 + <!--取景-->
  56 + <input type="hidden" value="{$vo.framing}" class="li_framing">
  57 + <!--上映时间-->
  58 + <input type="hidden" value="{$vo.release_time}" class="li_release_time">
51 </li> 59 </li>
52 </volist> 60 </volist>
53 </ul> 61 </ul>
@@ -56,12 +64,12 @@ @@ -56,12 +64,12 @@
56 <!-- 底部 --> 64 <!-- 底部 -->
57 <div class="show_9_video_asideTxt clearfix"> 65 <div class="show_9_video_asideTxt clearfix">
58 <!-- 标题 --> 66 <!-- 标题 -->
59 - <h1>令人神往的蒙大拿州弗里德黑德湖</h1> 67 + <h1 class="post_title">令人神往的蒙大拿州弗里德黑德湖</h1>
60 <!-- 国家 --> 68 <!-- 国家 -->
61 <div class="show_9_video_asideTxt2"> 69 <div class="show_9_video_asideTxt2">
62 - <p>国家：美国</p>  
63 - <p>取景：蒙大拿州弗里德黑德湖</p>  
64 - <p>上映时间：2019-11-12</p> 70 + <p>国家：<span class="city_name">美国</span></p>
  71 + <p>取景：<span class="framing">蒙大拿州弗里德黑德湖</span></p>
  72 + <p>上映时间：<span class="release_time">2019-11-12</span></p>
65 </div> 73 </div>
66 <!-- 分享 --> 74 <!-- 分享 -->
67 <div class="show_9_video_asideTxt3 clearfix"> 75 <div class="show_9_video_asideTxt3 clearfix">
@@ -77,24 +85,31 @@ @@ -77,24 +85,31 @@
77 <script> 85 <script>
78 // 星域秀场视频 86 // 星域秀场视频
79 $(function() { 87 $(function() {
80 - $('.curren li').each(function() {  
81 - $(this).click(function() {  
82 - // 封面图  
83 - var img = $(this).find('img').attr('src');  
84 - $('.video_poster').attr('src', img);  
85 - // 视频  
86 - $('.video_poster').css('z-index', '10');  
87 - $('.play_button').show();  
88 - $('.play_button').css('z-index', '11');  
89 - var videoSrc = $(this).children('.li_video').val();  
90 - $('#video').attr('src', videoSrc); 88 + //默认第一个视频
  89 + switch_video(0);
  90 + $('.curren').children('li').children('.li_img').css('opacity','0.3');
  91 + $('.curren').children('li').eq(0).children('.li_img').css('opacity','1');
91 92
92 - // 视频标题  
93 - var videoTitle = $(this).children('p').text();  
94 - $('.show_9_video_asideTxt h1').text(videoTitle);  
95 - }); 93 +
  94 + //点击切换
  95 + $('.curren li').click(function(){
  96 + var index = $(this).index();
  97 + $('.curren').children('li').children('.li_img').css('opacity','0.3');
  98 + $('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
  99 + switch_video(index);
  100 +
  101 +
  102 + });
  103 +
  104 + //鼠标滑过
  105 + $('.curren li').hover(function(){
  106 + $('.curren').children('li').children('.li_img').css('opacity','0.3');
  107 + $('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
  108 + $(this).children('.li_img').css('opacity','1');
  109 + $(this).children('p').css('color','rgba(9, 255, 142, 1)');
96 }); 110 });
97 111
  112 + // 点击input下拉
98 $('.select input').click(function() { 113 $('.select input').click(function() {
99 if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") { 114 if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
100 $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png"); 115 $(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png");
@@ -106,18 +121,10 @@ @@ -106,18 +121,10 @@
106 121
107 }); 122 });
108 123
  124 + //下拉框选择城市
109 $('.select ul li').click(function() { 125 $('.select ul li').click(function() {
110 - $('.select input').val($(this).text());  
111 - $('.select ul').hide();  
112 var index = $(this).index(); 126 var index = $(this).index();
113 - $('.curren').eq(index).addClass('video_active').siblings().removeClass('video_active');  
114 - });  
115 -  
116 - $(document).ready(function() {  
117 - var val = $('.select input').val();  
118 - var val2 = $('.select ul li:first-child').text();  
119 - val = val2;  
120 - $('.select input').val(val); 127 + console.log(index);
121 }); 128 });
122 129
123 // 弹出框 130 // 弹出框
@@ -127,10 +134,34 @@ @@ -127,10 +134,34 @@
127 134
128 $('.curren').eq(0).addClass('video_active'); 135 $('.curren').eq(0).addClass('video_active');
129 }); 136 });
  137 +
  138 + //切换视频
  139 + function switch_video(index){
  140 + //视频路径
  141 + var li_index = $('.curren').children('li').eq(index);
  142 + //选中颜色
  143 + li_index.children('.li_img').css('opacity','1');
  144 + li_index.children('p').css('color','rgba(9, 255, 142, 1)');
  145 +
  146 + var oneVideo = li_index.children('.li_video').val();
  147 + $('#video').attr('src',oneVideo);
  148 + // 视频封面图
  149 + var oneCover = li_index.children('.li_img').attr('src');
  150 + $('.video_poster').attr('src',oneCover);
  151 + //标题，国家，取景，上映时间
  152 + var post_title = li_index.children('.li_post_title').val();
  153 + var city_name = li_index.children('.li_city_name').val();
  154 + var framing = li_index.children('.li_framing').val();
  155 + var release_time = li_index.children('.li_release_time').val();
  156 + $('.post_title').text(post_title);
  157 + $('.city_name').text(city_name);
  158 + $('.framing').text(framing);
  159 + $('.release_time').text(release_time);
  160 + }
130 // 点击播放 161 // 点击播放
131 function bofang() { 162 function bofang() {
132 video.play(); 163 video.play();
133 - $('#video').attr('controls', 'controls') 164 + $('#video').attr('controls', 'controls');
134 $('.play_button').hide(); 165 $('.play_button').hide();
135 $('.video_poster').css('z-index', '-1'); 166 $('.video_poster').css('z-index', '-1');
136 } 167 }
@@ -100,12 +100,14 @@ @@ -100,12 +100,14 @@
100 </volist> 100 </volist>
101 </div> 101 </div>
102 <div class="show_swiper2_btn clearfix"> 102 <div class="show_swiper2_btn clearfix">
103 -  
104 - <div class="swiper-button-prev2"></div>  
105 - <div class="swiper-pagination"> 103 + <div class="show_swiper2_btn22">
  104 + <div class="swiper-button-prev2"></div>
  105 + <div class="swiper-pagination">
  106 + </div>
  107 + <div class="swiper-button-next2"></div>
106 108
107 </div> 109 </div>
108 - <div class="swiper-button-next2"></div> 110 +
109 </div> 111 </div>
110 112
111 </div> 113 </div>
@@ -101,7 +101,6 @@ @@ -101,7 +101,6 @@
101 /* 二维码 */ 101 /* 二维码 */
102 102
103 #footer .about_bot .qr_code dl { 103 #footer .about_bot .qr_code dl {
104 - width: 57px;  
105 height: 80px; 104 height: 80px;
106 float: left; 105 float: left;
107 margin-right: 31px 106 margin-right: 31px
@@ -98,8 +98,8 @@ p { @@ -98,8 +98,8 @@ p {
98 width: 80px; 98 width: 80px;
99 z-index: 10; 99 z-index: 10;
100 position: fixed; 100 position: fixed;
101 - right: 59px;  
102 - top: 500px; 101 + right: 48px;
  102 + top: 600px;
103 } 103 }
104 104
105 .index_sidebar img { 105 .index_sidebar img {
@@ -111,6 +111,41 @@ p { @@ -111,6 +111,41 @@ p {
111 .index_scrollTop { 111 .index_scrollTop {
112 display: none; 112 display: none;
113 } 113 }
  114 +.swiper-container6{
  115 + position: relative;
  116 +}
  117 +.swiper-button-nextban.swiper-button-disabled, .swiper-button-prevban.swiper-button-disabled {
  118 + opacity: 1;
  119 + cursor: auto;
  120 + pointer-events: none;
  121 + background-color: white;
  122 +}
  123 +.swiper-button-nextban,.swiper-button-prevban{
  124 + width: 60px;
  125 + height: 60px;
  126 + position: absolute;
  127 + border-radius: 50%;
  128 + z-index: 10;
  129 + cursor: pointer;
  130 + background-position: center;
  131 + background-repeat: no-repeat;
  132 + background-color: rgba(9, 255, 142, 1);
  133 +}
  134 +
  135 +.swiper-button-nextban{
  136 + top: 40%;
  137 + right: 3.1%;
  138 + float: left;
  139 + background-size: 20px 20px;
  140 + background-image: url(../starImg/right.png);
  141 +}
  142 +.swiper-button-prevban{
  143 + top: 40%;
  144 + left: 3.1%;
  145 + float: left;
  146 + background-size: 20px 20px;
  147 + background-image: url(../starImg/left.png);
  148 +}
114 /* 主体内容 */ 149 /* 主体内容 */
115 150
116 #star_main { 151 #star_main {
@@ -118,7 +153,6 @@ p { @@ -118,7 +153,6 @@ p {
118 background-color: rgba(60, 60, 148, 1); 153 background-color: rgba(60, 60, 148, 1);
119 } 154 }
120 155
121 -  
122 /* 星球奇遇 */ 156 /* 星球奇遇 */
123 157
124 #star_main .star_happy { 158 #star_main .star_happy {
@@ -325,23 +325,29 @@ body { @@ -325,23 +325,29 @@ body {
325 .show_index_progress img { 325 .show_index_progress img {
326 margin: 10px 0 0 45px; 326 margin: 10px 0 0 45px;
327 } 327 }
328 - 328 +.swiper-button-next2.swiper-button-disabled, .swiper-button-prev2.swiper-button-disabled {
  329 + opacity: 1;
  330 + cursor: auto;
  331 + pointer-events: none;
  332 + background-color: white;
  333 +}
329 .swiper-button-next2, 334 .swiper-button-next2,
330 .swiper-button-prev2 { 335 .swiper-button-prev2 {
331 - position: absolute;  
332 - width: 34px;  
333 - height: 34px; 336 + width: 30px;
  337 + height: 30px;
  338 + border-radius: 50%;
334 z-index: 10; 339 z-index: 10;
335 cursor: pointer; 340 cursor: pointer;
336 - background-size: 34px 34x;  
337 background-position: center; 341 background-position: center;
338 background-repeat: no-repeat; 342 background-repeat: no-repeat;
  343 + background-color: rgba(9, 255, 142, 1);
  344 + background-size: 12px 12px;
339 } 345 }
340 346
341 .swiper-button-prev2 { 347 .swiper-button-prev2 {
342 - position: static;  
343 float: left; 348 float: left;
344 - background-image: url("../starImg/aicon_10.png") 349 + left: 0;
  350 + background-image: url(../starImg/left.png);
345 } 351 }
346 352
347 .swiper-pagination { 353 .swiper-pagination {
@@ -351,9 +357,8 @@ body { @@ -351,9 +357,8 @@ body {
351 } 357 }
352 358
353 .swiper-button-next2 { 359 .swiper-button-next2 {
354 - position: static;  
355 float: left; 360 float: left;
356 - background-image: url("../starImg/aicon_09.png") 361 + background-image: url(../starImg/right.png);
357 } 362 }
358 363
359 .swiper-pagination-clickable .swiper-pagination-bullet { 364 .swiper-pagination-clickable .swiper-pagination-bullet {
@@ -376,11 +381,19 @@ body { @@ -376,11 +381,19 @@ body {
376 381
377 .show_swiper2_btn { 382 .show_swiper2_btn {
378 margin-top: -45px; 383 margin-top: -45px;
379 - left: 45%;  
380 z-index: 1; 384 z-index: 1;
381 position: relative; 385 position: relative;
382 } 386 }
383 - 387 +.show_swiper2_btn22{
  388 + position: absolute;
  389 + left: 50%;
  390 + top: 50%;
  391 + transform: translate(-50%,-50%);
  392 + -moz-transform: translate(-50%,-50%);
  393 + -o-transform: translate(-50%,-50%);
  394 + -webkit-transform: translate(-50%,-50%);
  395 + -ms-transform: translate(-50%,-50%);
  396 +}
384 397
385 /* 星球画廊 */ 398 /* 星球画廊 */
386 399
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 <!-- 搜索框 --> 39 <!-- 搜索框 -->
40 <section class="home_search"> 40 <section class="home_search">
41 <i class="search_icon"></i> 41 <i class="search_icon"></i>
42 - <input type="text" placeholder="巴厘岛"> 42 + <input type="text" placeholder="">
43 </section> 43 </section>
44 <notempty name="user"> 44 <notempty name="user">
45 <section class="home_login login_person"> 45 <section class="home_login login_person">