调整轮播图
This commit is contained in:
@@ -156,7 +156,7 @@ function getVideosByCate($categoryId, $take = '8')
|
||||
->get();
|
||||
}
|
||||
|
||||
function dateLocalMonth($m)
|
||||
function dateLocalMonth($m): string
|
||||
{
|
||||
$months = [
|
||||
'1' => '一月',
|
||||
|
||||
@@ -721,7 +721,7 @@ body {
|
||||
.modularEight-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
@@ -1097,8 +1097,18 @@ body {
|
||||
|
||||
.briefSwiper-img {
|
||||
position: relative;
|
||||
padding-top: 100%;
|
||||
width: 100%;
|
||||
padding-top: 110%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.briefSwiper-img img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.briefSwiper-cont {
|
||||
@@ -2898,3 +2908,116 @@ body {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
|
||||
/*视频样式*/
|
||||
.videoList {margin-bottom: 20px; border-radius: 4px;cursor: pointer;overflow: hidden; background-color: #f0f0f0;}
|
||||
.videoImg{position: relative; width: 100%; padding-top: 60%;}
|
||||
.videoImg-icon{position: absolute; width: 45px; height: 45px; border-radius: 50%; background: rgba(0,0,0,.6); left: calc(50% - 22px); top: calc(50% - 22px); text-align: center; line-height: 50px; color: #fff;}
|
||||
.videoImg-icon>span{font-size: 20px;}
|
||||
.videoText{padding: 15px; box-sizing: border-box;}
|
||||
.videoText>p{font-size: 18px;}
|
||||
.videoText-tips{display: flex; color: #999;}
|
||||
.videoList:hover {color: #449942}
|
||||
|
||||
.js-lightBox{
|
||||
cursor: pointer;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.js-lightBox:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lightBox-view img{
|
||||
display: block;
|
||||
display: none;
|
||||
border:0px;
|
||||
margin:0px !important;
|
||||
}
|
||||
|
||||
.lightBox-popupMask{
|
||||
position: fixed;
|
||||
background:black;
|
||||
filter:alpha(opacity=80);/* IE */
|
||||
opacity:0.8;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
z-index:9999;
|
||||
display: none;
|
||||
background-image: url('/assets/index/images/icon/overlay.png');
|
||||
}
|
||||
|
||||
.lightBox-title {
|
||||
line-height: 40px;
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.lightBox-popup{
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index:10000;
|
||||
top:0%;
|
||||
left:50%;
|
||||
height: 50%;
|
||||
background-color: white;
|
||||
/* margin-left:-500px; */
|
||||
border-radius: 10px;
|
||||
border:5px solid white;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-image: url('/assets/index/images/icon/loading.gif');
|
||||
background-size: 8%;
|
||||
}
|
||||
|
||||
.lightBox-description .lightBox-btn{
|
||||
top:0; */
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width:50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
filter:alpha(opacity=20);/* IE */
|
||||
opacity: .4;
|
||||
background-image: url('/assets/index/images/icon/opacity.png');
|
||||
}
|
||||
.lightBox-description .lightBox-btn:hover{
|
||||
filter:alpha(opacity=100);/* IE */
|
||||
opacity: 1;
|
||||
}
|
||||
.lightBox-view .lightBox-description{
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
left:0;
|
||||
padding: 5px 5px 5px 10px;
|
||||
display: none;
|
||||
color:white;
|
||||
background-color: black;
|
||||
filter:alpha(opacity=80);/* IE */
|
||||
background: rgba(0,0,0,.8);
|
||||
}
|
||||
.lightBox-view .lightBox-description .lightBox-current-index{
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
font-style:italic;
|
||||
}
|
||||
.lightBox-view .lightBox-description .lightBox-close{
|
||||
float: right;
|
||||
display: block;
|
||||
width:40px;
|
||||
height:40px;
|
||||
cursor: pointer;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/assets/index/images/icon/close.png');
|
||||
background-position: center center;
|
||||
}
|
||||
.lightBox-description .btn-position{
|
||||
float: right;
|
||||
position:relative;
|
||||
width:100px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
601
public/assets/index/css/video.css
Normal file
601
public/assets/index/css/video.css
Normal file
@@ -0,0 +1,601 @@
|
||||
ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*
|
||||
* 视频播放器
|
||||
* */
|
||||
.video-box {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
z-index: 99999999999;
|
||||
}
|
||||
.video-box button {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
background: none;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-box .video-button {
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-box .video-button i {
|
||||
font-size: 56px;
|
||||
}
|
||||
.video-box .video-button.video-btn-volume i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.video-box .video-button.video-tooltip-toggle i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.video-box .video-video {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-box .video-video video {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
.video-box .video-container {
|
||||
width: 852px;
|
||||
min-height: 550px;
|
||||
max-height: 90vh;
|
||||
background: #000000;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.video-box .video-container.video-ready {
|
||||
opacity: 1;
|
||||
}
|
||||
.video-box.quanping .video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
.video-box.video-playing .video-div.video-hide-ui .video-ui {
|
||||
-webkit-transform: translateY(39px);
|
||||
-ms-transform: translateY(39px);
|
||||
transform: translateY(39px);
|
||||
}
|
||||
.video-box.heibian .video-container {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.video-box.heibian .video-div.video-hide-ui .video-ui {
|
||||
-webkit-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.video-box.heibian.quanping .video-container {
|
||||
padding: 0;
|
||||
}
|
||||
.video-box.hideui .video-div .video-ui {
|
||||
-webkit-transform: translateY(39px);
|
||||
-ms-transform: translateY(39px);
|
||||
transform: translateY(39px);
|
||||
}
|
||||
.video-box .i {
|
||||
font-family: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 80%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.video-box .i:before,
|
||||
.video-box i:after {
|
||||
display: none !important;
|
||||
}
|
||||
.video-box .i-voice-on {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C10C%2022%2C12%2022%2C18%2018%2C20'%20%2F%3E%3Cpath%20d%3D'M22%2C6C%2028%2C10%2028%2C20%2022%2C24'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-box .i-voice-off {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M2%2C10L2%2C20L5%2C20L13%2C25L13%2C5L5%2C10L5%2C10Z'%2F%3E%3Cpath%20d%3D'M18%2C11L27%2C20'%20%2F%3E%3Cpath%20d%3D'M18%2C20L27%2C11'%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-box .i-bofang {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2C7L10%2C23L24%2C15z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-box .i-zhanting {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2C7L7%2C23L11%2C23L11%2C7z'%2F%3E%3Cpath%20d%3D'M20%2C7L20%2C23L24%2C23L24%2C7z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-box .i-quanping {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L6%2C6L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L6%2C25L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L24%2C6L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L24%2C25L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-box .i-suoxiao {
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%20%20%3E%3Cg%20%20stroke%3D'%23fff'%20stroke-width%3D'1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20%3E%3Cpath%20d%3D'M6%2C10L10%2C10L10%2C6'%2F%3E%3Cpath%20d%3D'M6%2C21L10%2C21L10%2C25'%2F%3E%3Cpath%20d%3D'M20%2C6L20%2C10L24%2C10'%2F%3E%3Cpath%20d%3D'M20%2C25L20%2C21L24%2C21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
}
|
||||
.video-bg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
opacity: .9;
|
||||
}
|
||||
.video-div {
|
||||
background: #000;
|
||||
font-size: 0;
|
||||
letter-spacing: -1px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.video-ui {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 6;
|
||||
letter-spacing: .25px;
|
||||
-webkit-transition: transform 0.3s ease;
|
||||
-o-transition: transform 0.3s ease;
|
||||
-ms-transition: transform 0.3s ease;
|
||||
-moz-transition: transform 0.3s ease;
|
||||
transition: transform 0.3s ease;
|
||||
-webkit-transform: translateY(0px);
|
||||
-o-transform: translateY(0px);
|
||||
-ms-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.video-loading-pulse {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
-webkit-animation: pulse 750ms infinite;
|
||||
animation: pulse 750ms infinite;
|
||||
-webkit-animation-delay: 250ms;
|
||||
animation-delay: 250ms;
|
||||
}
|
||||
.video-loading-pulse:before,
|
||||
.video-loading-pulse:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
-webkit-animation: pulse 750ms infinite;
|
||||
animation: pulse 750ms infinite;
|
||||
}
|
||||
.video-loading-pulse:before {
|
||||
left: -12px;
|
||||
}
|
||||
.video-loading-pulse:after {
|
||||
left: 12px;
|
||||
-webkit-animation-delay: 500ms;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
.video-loading {
|
||||
opacity: 1;
|
||||
color: #2c97f6;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 0px 3600px #000;
|
||||
background: #000;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.video-loading i {
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
border: 0.25rem solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: white;
|
||||
-webkit-animation: adeg 1s infinite linear;
|
||||
-o-animation: adeg 1s infinite linear;
|
||||
-ms-animation: adeg 1s infinite linear;
|
||||
-moz-animation: adeg 1s infinite linear;
|
||||
animation: adeg 1s infinite linear;
|
||||
}
|
||||
.video-loading .i-loading:before {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.video-loading.yihuanchun {
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes adeg {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.video-close {
|
||||
position: absolute;
|
||||
top: calc(52px + 2%);
|
||||
right: 5%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2030'%3E%3Cg%20fill%3D'%23fff'%3E%3Cpath%20d%3D'M0%2C1L1%2C0L30%2C29L29%2C30z'%2F%3E%3Cpath%20d%3D'M29%2C0L29%2C0L30%2C1L1%2C30L0%2C29z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.video-bofang.f-czspjuzhong {
|
||||
z-index: 2;
|
||||
font-size: 0;
|
||||
}
|
||||
.video-bofang.f-czspjuzhong i {
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: #fff;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
line-height: 62px;
|
||||
font-size: 66px;
|
||||
-webkit-transition: transform 1s;
|
||||
-o-transition: transform 1s;
|
||||
-ms-transition: transform 1s;
|
||||
-moz-transition: transform 1s;
|
||||
transition: transform 1s;
|
||||
}
|
||||
.video-hide {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
.video-hide i {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(3);
|
||||
-o-transform: scale(3);
|
||||
-ms-transform: scale(3);
|
||||
-moz-transform: scale(3);
|
||||
transform: scale(3);
|
||||
will-change: transform, opacity;
|
||||
z-index: 0;
|
||||
}
|
||||
.video-progress {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 36px;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
.video-progress:hover .video-progress-hover,
|
||||
.video-progress:hover .video-tooltip-time {
|
||||
opacity: 1;
|
||||
}
|
||||
.video-tooltip-time {
|
||||
width: 46px;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
z-index: 5;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.5s;
|
||||
-o-transition: opacity 0.5s;
|
||||
-ms-transition: opacity 0.5s;
|
||||
-moz-transition: opacity 0.5s;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.video-tooltip-time .video-tinytip-content {
|
||||
margin-left: -23px;
|
||||
}
|
||||
.video-tooltip-time .video-text {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.video-tinytip .video-tooltip-content {
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.video-progress-padding {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
bottom: 0;
|
||||
z-index: 40;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-progress-list {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
z-index: 39;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
-webkit-transform: scaleY(0.6);
|
||||
-ms-transform: scaleY(0.6);
|
||||
transform: scaleY(0.6);
|
||||
transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
.video-progress-play,
|
||||
.video-progress-buffer,
|
||||
.video-progress-hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.video-progress-buffer {
|
||||
z-index: 33;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.video-progress-hover {
|
||||
z-index: 34;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
-o-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
-ms-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
-moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
.video-progress-play {
|
||||
z-index: 35;
|
||||
background-color: #2c97f6;
|
||||
}
|
||||
.video-progress-handle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -6.5px;
|
||||
margin-top: -6.5px;
|
||||
border-radius: 50%;
|
||||
background-color: #2c97f6;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transition: -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
transition: transform 0.1s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.1s cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
.video-progress-padding:hover + .video-progress-list {
|
||||
-webkit-transform: scaleY(1);
|
||||
-ms-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.video-progress-padding:hover + .video-progress-list .video-progress-handle {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.video-controls-buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
.video-time-panel {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: 36px;
|
||||
padding: 0 5px;
|
||||
line-height: 36px;
|
||||
letter-spacing: .25px;
|
||||
}
|
||||
.video-time-panel-current {
|
||||
color: #DEDEDF;
|
||||
}
|
||||
.video-fullscreen {
|
||||
float: right;
|
||||
}
|
||||
.video-definition {
|
||||
float: right;
|
||||
width: 55px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
}
|
||||
.video-definition .video-button {
|
||||
width: 100%;
|
||||
}
|
||||
.video-definition .video-button span {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.video-definition .video-tooltip-content {
|
||||
width: 80px;
|
||||
left: 50%;
|
||||
margin-left: -40px;
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.video-definition:hover .video-tooltip-content {
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
color: #aaa;
|
||||
display: block;
|
||||
z-index: 6;
|
||||
}
|
||||
.video-menu .video-menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 38px;
|
||||
background: -webkit-linear-gradient(top, transparent 0, transparent 50%, rgba(255, 255, 255, 0.1) 50%) center bottom no-repeat;
|
||||
background-size: 80% 1px;
|
||||
}
|
||||
.video-menu .video-menu-item:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.video-menu .video-menu-item.video-active {
|
||||
color: #FF8F00;
|
||||
}
|
||||
.video-volume {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
.video-popup .video-popup-content {
|
||||
transform: scaleY(0);
|
||||
bottom: 41px;
|
||||
position: absolute;
|
||||
}
|
||||
.video-popup .video-popup-content:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.video-popup:hover .video-popup-content {
|
||||
-webkit-transform: scaleY(1);
|
||||
-o-transform: scaleY(1);
|
||||
-ms-transform: scaleY(1);
|
||||
-moz-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.video-volume-slider {
|
||||
left: 0;
|
||||
width: 36px;
|
||||
height: 100px;
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.video-tinytip-tiao {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.video-volume-range {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 10px;
|
||||
width: 4px;
|
||||
height: 80px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.video-volume-range-current {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-color: #2c97f6;
|
||||
}
|
||||
.video-volume-handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -4px;
|
||||
width: 12px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (max-width: 998px) {
|
||||
.video-box .video-container {
|
||||
width: 80vw;
|
||||
max-height: 80vh;
|
||||
min-height: 44.9vw;
|
||||
}
|
||||
}
|
||||
@media (max-width: 468px) {
|
||||
.video-box .video-container {
|
||||
width: 100vw;
|
||||
min-height: 54.9vw;
|
||||
}
|
||||
.video-loading i {
|
||||
font-size: 26px;
|
||||
}
|
||||
.video-definition {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 视频结尾
|
||||
* */
|
||||
.f-czspjuzhong {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
BIN
public/assets/index/images/icon/close.png
Normal file
BIN
public/assets/index/images/icon/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
BIN
public/assets/index/images/icon/loading.gif
Normal file
BIN
public/assets/index/images/icon/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
public/assets/index/images/icon/next.png
Normal file
BIN
public/assets/index/images/icon/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/assets/index/images/icon/opacity.png
Normal file
BIN
public/assets/index/images/icon/opacity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/assets/index/images/icon/overlay.png
Normal file
BIN
public/assets/index/images/icon/overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 B |
BIN
public/assets/index/images/icon/prev.png
Normal file
BIN
public/assets/index/images/icon/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/assets/index/images/srIcon/srSpread_icon_list.png
Normal file
BIN
public/assets/index/images/srIcon/srSpread_icon_list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
5
public/assets/index/js/jquery.min.js
vendored
Normal file
5
public/assets/index/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
308
public/assets/index/js/lightBox.js
Normal file
308
public/assets/index/js/lightBox.js
Normal file
@@ -0,0 +1,308 @@
|
||||
;(function($){
|
||||
|
||||
var lightBox = function(setting){
|
||||
|
||||
var self = this;
|
||||
this.obj = $('.js-lightBox') ;
|
||||
this.setting = setting;
|
||||
this.defaultSetting = {
|
||||
speed:'fast',
|
||||
scale: 0.8
|
||||
}
|
||||
$.extend(this.defaultSetting,this.getCustomSetting());
|
||||
this.groupArr = [];
|
||||
this.clear = false;
|
||||
this.groupName = null;
|
||||
this.bodyNode = $(document.body);
|
||||
this.popupMask = $("<div class='lightBox-popupMask'></div>");
|
||||
this.popup = $("<div class='lightBox-popup'></div>");
|
||||
this.settingDefaultImg();
|
||||
|
||||
//主要通过点击事件触发大部分效果
|
||||
this.obj.on('click', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var currentGroup = $(this).attr('data-group');
|
||||
if(currentGroup != self.groupName){
|
||||
self.groupName = currentGroup;
|
||||
}
|
||||
//设置默认每次点击插入遮罩层与图片层的DOM结构
|
||||
self.defaultDOM();
|
||||
|
||||
//点击当前对象获取到所在的集合
|
||||
self.getImageGroup();
|
||||
|
||||
//（点击、左右切换）设置弹出图层的效果及图片的转换
|
||||
self.initLightBox($(this));
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
lightBox.prototype = {
|
||||
//是否带有自定义设置
|
||||
getCustomSetting : function(){
|
||||
var setting = this.setting ;
|
||||
if(setting && setting != ''){
|
||||
return setting;
|
||||
}else{
|
||||
return {};
|
||||
}
|
||||
},
|
||||
//设置需要使用该效果的图片添加唯一的ID值
|
||||
settingDefaultImg : function (){
|
||||
var obj = this.obj;
|
||||
obj.each(function(i){obj.eq(i).attr('data-id',i)});
|
||||
},
|
||||
//实现左右切换
|
||||
goto : function(dir){
|
||||
var len = this.groupArr.length;
|
||||
if(dir==='prev'){
|
||||
var picSrc = this.groupArr[--this.index].src;
|
||||
this.loadCompletePicShow(picSrc);
|
||||
}else{
|
||||
var picSrc = this.groupArr[++this.index].src;
|
||||
this.loadCompletePicShow(picSrc);
|
||||
}
|
||||
},
|
||||
//过渡效果显示图片层的框
|
||||
showMaskAndPopu:function(src,id){
|
||||
var _this_ = this
|
||||
_scale_ = 1 ;
|
||||
this.winWidth = $(window).width();
|
||||
this.winHeight = $(window).height();
|
||||
this.lightBoxPic.hide();
|
||||
this.lightBoxDescription.hide();
|
||||
this.lightBoxPopupMask.fadeIn();
|
||||
this.lightPopup.fadeIn();
|
||||
|
||||
this.lightPopup.css({
|
||||
"width" : this.winWidth/4 ,
|
||||
"height" : this.winHeight/4 ,
|
||||
"marginLeft" : -(this.winWidth/4) / 2 ,
|
||||
"marginTop" : -this.lightPopup.height() - 8 ,
|
||||
}).animate({
|
||||
"marginTop" : (this.winHeight-this.lightPopup.height() + 8)/2
|
||||
},this.defaultSetting.speed,function(){
|
||||
_this_.loadCompletePicShow(_this_.src);
|
||||
})
|
||||
|
||||
},
|
||||
settingParmt : function(thisObj){
|
||||
//设置每个图片显示的信息
|
||||
this.src = thisObj.attr('src');
|
||||
this.title = thisObj.attr('data-title');
|
||||
this.lightBoxPic.attr('src',this.src);
|
||||
},
|
||||
//获取当前索引值
|
||||
getCurrentIndex : function(thisObj){
|
||||
var thisID = thisObj.attr('data-id'),
|
||||
index = 0;
|
||||
jQuery.each(this.groupArr,function(i,e){
|
||||
if(thisID == e.id){
|
||||
index = i;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return index;
|
||||
},
|
||||
loadPicShow : function(thisSrc,callback){
|
||||
var image = new Image();
|
||||
if(!!window.ActiveXObject){
|
||||
//兼容IE
|
||||
image.onreadystatechange = function(){
|
||||
if(this.readyState == "complete"){
|
||||
callback();
|
||||
}
|
||||
};
|
||||
}else{
|
||||
image.onload = function(){
|
||||
callback();
|
||||
};
|
||||
}
|
||||
image.src = thisSrc;
|
||||
},
|
||||
//主要展示图片的函数
|
||||
loadCompletePicShow : function (src){
|
||||
var _this_ = this ;
|
||||
this.lightBoxPic.css({"width":"auto","height":"auto"}).hide();
|
||||
//this.lightBoxDescription.hide();
|
||||
this.winWidth = $(window).width();
|
||||
this.winHeight = $(window).height();
|
||||
this.clear = true;
|
||||
|
||||
_this_.loadPicShow(src,function(){
|
||||
_this_.lightBoxPic.attr('src',src);
|
||||
var picWidth = _this_.lightBoxPic.width() * 2;
|
||||
var picHeight = _this_.lightBoxPic.height() * 2;
|
||||
|
||||
//判断所点击的图片是否需要左右按钮
|
||||
var groupArrLength = _this_.groupArr.length;
|
||||
if( groupArrLength>1 ){
|
||||
if(_this_.index === 0){
|
||||
_this_.lightBoxPrevBtn.addClass('disable');
|
||||
_this_.lightBoxNextBtn.removeClass('disable');
|
||||
}else if(_this_.index === groupArrLength-1){
|
||||
_this_.lightBoxNextBtn.addClass('disable');
|
||||
_this_.lightBoxPrevBtn.removeClass('disable');
|
||||
}else{
|
||||
_this_.lightBoxNextBtn.removeClass('disable');
|
||||
_this_.lightBoxPrevBtn.removeClass('disable');
|
||||
}
|
||||
}
|
||||
|
||||
//当图片大于浏览器窗口时按等比例方式显示
|
||||
if(picWidth > _this_.winWidth || picHeight > _this_.winHeight){
|
||||
_scale_ = Math.min(_this_.winWidth/(picWidth+12) * _this_.defaultSetting.scale , _this_.winHeight/(picHeight+12)* _this_.defaultSetting.scale);
|
||||
}else{
|
||||
_scale_ = _this_.defaultSetting.scale;
|
||||
}
|
||||
|
||||
picWidth = picWidth * _scale_;
|
||||
picHeight = picHeight * _scale_;
|
||||
//加载完毕图片展示的动画效果
|
||||
_this_.lightPopup.animate({
|
||||
"width" : picWidth -12 ,
|
||||
"height" : picHeight -12 ,
|
||||
"marginLeft" : -picWidth / 2 ,
|
||||
"marginTop" : (_this_.winHeight - picHeight ) /2 ,
|
||||
},function(){
|
||||
_this_.lightBoxPic.css({
|
||||
"width" : picWidth -12 ,
|
||||
"height" : picHeight -12 ,
|
||||
});
|
||||
|
||||
_this_.lightBoxTitle.text(_this_.groupArr[_this_.index].title);
|
||||
_this_.lightBoxCurrentIndex.text( (_this_.index + 1 ) + ' of ' + _this_.groupArr.length );
|
||||
_this_.lightBoxPic.fadeIn();
|
||||
_this_.lightBoxDescription.fadeIn();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
//点击后需要促发的弹出框效果(并设置宽高)
|
||||
initLightBox:function(thisObj){
|
||||
var _this_ = this ,
|
||||
sourceSrc = thisObj.attr('src'),
|
||||
currentID = thisObj.attr('data-id');
|
||||
this.left = thisObj.offset().left ;
|
||||
this.top = thisObj.offset().top ;
|
||||
this.width = thisObj.width() ;
|
||||
this.height = thisObj.height() ;
|
||||
|
||||
this.settingParmt(thisObj);
|
||||
this.showMaskAndPopu(sourceSrc,currentID);
|
||||
this.index = this.getCurrentIndex(thisObj);
|
||||
},
|
||||
//默认的幻灯片弹出框设置
|
||||
defaultDOM : function(){
|
||||
var _this_ = this ;
|
||||
var _leftBtn_ = '<span class="lightBox-btn lightBox-prev-btn active"></span>',
|
||||
_rightBtn_ = '<span class="lightBox-btn lightBox-next-btn active"></span>',
|
||||
_btn_ = $('<div class="btn-position">').append(_leftBtn_,_rightBtn_);
|
||||
|
||||
this.lightBoxView = '<div class="lightBox-view">'+
|
||||
'<div class="lightBox-pic">'+
|
||||
'<img src="" >'+
|
||||
'</div>'+
|
||||
'<div class="lightBox-description">'+
|
||||
'<span class="lightBox-close"></span>'+
|
||||
'<p class="lightBox-title"></p>'+
|
||||
''+
|
||||
'</div>'+
|
||||
'</div>';
|
||||
|
||||
this.bodyNode.prepend(this.popupMask,this.popup);
|
||||
this.popup.html('').append(this.lightBoxView);
|
||||
|
||||
this.lightBoxPopupMask = this.bodyNode.find('.lightBox-popupMask');
|
||||
this.lightPopup = this.bodyNode.find('.lightBox-popup');
|
||||
this.lightBoxPic = this.lightPopup.find('.lightBox-pic > img');
|
||||
this.lightBoxClose = this.lightPopup.find('.lightBox-close');
|
||||
this.lightBoxTitle = this.lightPopup.find('.lightBox-title');
|
||||
this.lightBoxCurrentIndex = this.lightPopup.find('.lightBox-current-index');
|
||||
this.lightBoxDescription = this.lightPopup.find('.lightBox-description');
|
||||
this.lightBoxDescription.find('.lightBox-close').after(_btn_);
|
||||
this.lightBoxPrevBtn = this.lightPopup.find('.lightBox-prev-btn');
|
||||
this.lightBoxNextBtn = this.lightPopup.find('.lightBox-next-btn');
|
||||
|
||||
//关闭按钮事件
|
||||
this.lightBoxPopupMask.on('click',function(event){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(this).fadeOut();
|
||||
_this_.lightPopup.fadeOut();
|
||||
_this_.clear = false;
|
||||
});
|
||||
|
||||
this.lightBoxClose.on('click',function(event){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this_.lightPopup.fadeOut();
|
||||
_this_.lightBoxPopupMask.fadeOut();
|
||||
_this_.clear = false;
|
||||
});
|
||||
|
||||
//左右按钮Hover事件 与 点击事件
|
||||
this.lightBoxPrevBtn.on('click',function(event){
|
||||
if(!$(this).hasClass('disable')){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this_.goto('prev')
|
||||
}
|
||||
})
|
||||
|
||||
//响应式设置
|
||||
var timer = null;
|
||||
$(window).resize(function(event) {
|
||||
/* Act on the event */
|
||||
if(_this_.clear){
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
_this_.loadCompletePicShow(_this_.groupArr[_this_.index].src);
|
||||
},500)
|
||||
}
|
||||
|
||||
});
|
||||
document.onkeyup = function(e) {
|
||||
e = (e) ? e : window.event;
|
||||
if(e.key === "ArrowLeft" || e.keyCode === 37 ){
|
||||
_this_.lightBoxPrevBtn.click();
|
||||
}else if(e.key === "ArrowRight" || e.keyCode === 39){
|
||||
_this_.lightBoxNextBtn.click();
|
||||
}
|
||||
};
|
||||
this.lightBoxNextBtn.on('click',function(event){
|
||||
if(!$(this).hasClass('disable')){
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
_this_.goto('next')
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取每个组别的所有对象
|
||||
getImageGroup : function(){
|
||||
var _this_ = this ;
|
||||
_this_.groupArr = [];
|
||||
this.bodyNode.find("[data-group='"+ this.groupName +"']").each(function(index, el) {
|
||||
|
||||
_this_.groupArr.push({
|
||||
"src":$(el).attr('src'),
|
||||
"title":$(el).attr('data-title'),
|
||||
"id":$(el).attr('data-id'),
|
||||
"group":$(el).attr('data-group'),
|
||||
"src":$(el).attr('src')
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
};
|
||||
$.extend({
|
||||
LightBox :function(object){
|
||||
new lightBox(object);
|
||||
}
|
||||
});
|
||||
|
||||
window['lightBox'] = lightBox;
|
||||
|
||||
})(jQuery);
|
||||
534
public/assets/index/js/pingzi_video.js
Normal file
534
public/assets/index/js/pingzi_video.js
Normal file
@@ -0,0 +1,534 @@
|
||||
$(document).ready(function() {
|
||||
/*
|
||||
* pc端判断
|
||||
*/
|
||||
function IsPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone",
|
||||
"SymbianOS", "Windows Phone",
|
||||
"iPad", "iPod"
|
||||
];
|
||||
var flag = true;
|
||||
for(var v = 0; v < Agents.length; v++) {
|
||||
if(userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
/*
|
||||
* 随机数
|
||||
* */
|
||||
function _charecter() {
|
||||
var character = String.fromCharCode(Math.floor(Math.random() * 26) + "A".charCodeAt(0));
|
||||
return character;
|
||||
}
|
||||
/*
|
||||
* 补0
|
||||
*/
|
||||
function addzero(num) {
|
||||
if(num < 10) {
|
||||
return("0" + num);
|
||||
} else {
|
||||
return num;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 视频事件监听事件
|
||||
*
|
||||
* @eventName 视频事件名称
|
||||
* @m 视频对象
|
||||
* @fun 回调函数
|
||||
*
|
||||
*/
|
||||
var eventTester = function(eventName, m, fun) {
|
||||
if(window.addEventListener) {
|
||||
m.addEventListener(eventName, function() {
|
||||
if(fun) {
|
||||
fun(this);
|
||||
}
|
||||
//console.log((new Date()).getTime(),eventName);
|
||||
}, false);
|
||||
} else {
|
||||
m.attachEvent('on' + eventName, function() {
|
||||
if(fun) {
|
||||
fun(this);
|
||||
}
|
||||
// console.log((new Date()).getTime(),eventName);
|
||||
});
|
||||
}
|
||||
}
|
||||
/*
|
||||
* 视频播放
|
||||
*
|
||||
*/
|
||||
//视频播放
|
||||
$(".m-video").on("click", function() {
|
||||
if($(".video-box").length > 0) {
|
||||
return;
|
||||
}
|
||||
document.ondragstart = function() {
|
||||
return false;
|
||||
};
|
||||
window.onresize = function() {
|
||||
iteme = setTimeout(function() {
|
||||
if(!checkFull()) {
|
||||
//要执行的动作
|
||||
$("body").removeClass("noscroll");
|
||||
$(".video-box").removeClass("quanping");
|
||||
$(".video-fullscreen").find("i").removeClass("i-suoxiao").addClass("i-quanping");
|
||||
} else {
|
||||
$("body").addClass("noscroll");
|
||||
$(".video-box").addClass("quanping");
|
||||
$(".video-fullscreen").find("i").removeClass("i-quanping").addClass("i-suoxiao");
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
function checkFull() {
|
||||
var explorer = window.navigator.userAgent.toLowerCase();
|
||||
console.log(window.screen.width, window.outerWidth, window.screen.height, window.outerHeight)
|
||||
if(explorer.indexOf('chrome') > 0) { //chrome
|
||||
if((window.screen.width - window.outerWidth <= 17) && (window.screen.height - window.outerHeight <= 17)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else { //IE 9+ fireFox
|
||||
if(window.outerWidth == screen.width) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function quanpin(elem) {
|
||||
if(IsPC()) {
|
||||
var elem = document.documentElement;
|
||||
} else {
|
||||
if(elem.paused && elem.networkState <= elem.HAVE_METADATA) {
|
||||
elem.play();
|
||||
setTimeout(function() {
|
||||
elem.pause();
|
||||
elem.webkitEnterFullScreen();
|
||||
return;
|
||||
}, 0);
|
||||
} else {
|
||||
elem.webkitEnterFullScreen();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(elem.requestFullscreen) {
|
||||
//"W3C";
|
||||
elem.requestFullscreen();
|
||||
} else if(elem.mozRequestFullScreen) {
|
||||
//FireFox
|
||||
elem.mozRequestFullScreen();
|
||||
|
||||
} else if(elem.webkitRequestFullScreen) {
|
||||
//Chrome等
|
||||
elem.webkitRequestFullScreen();
|
||||
|
||||
} else if(elem.msRequestFullscreen) {
|
||||
//IE11
|
||||
console.log(11);
|
||||
elem.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function exitquanping() {
|
||||
if(document.exitFullscreen) {
|
||||
|
||||
document.exitFullscreen();
|
||||
|
||||
} else if(document.mozCancelFullScreen) {
|
||||
|
||||
document.mozCancelFullScreen();
|
||||
|
||||
} else if(document.webkitCancelFullScreen) {
|
||||
|
||||
document.webkitCancelFullScreen();
|
||||
|
||||
} else if(document.msExitFullscreen) {
|
||||
|
||||
document.msExitFullscreen();
|
||||
|
||||
}
|
||||
}
|
||||
var menuarr;
|
||||
var menustr="";
|
||||
if($(this).attr("data-menu")){
|
||||
menuarr=$(this).attr("data-menu").split(" ");
|
||||
$(menuarr).each(function(k){
|
||||
menustr+="<li class='video-menu-item video-menu-item-"+k+" "+(k==0?"video-active":"")+"' >"+this+"</li>";
|
||||
})
|
||||
}
|
||||
|
||||
var datasrc = $(this).attr("data-src"),src='';
|
||||
var dangqian="";
|
||||
if(src.indexOf("mp4")<0&&$(this).attr("data-menu")){
|
||||
dangqian=menuarr[0];
|
||||
src = datasrc+dangqian+".mp4";
|
||||
}else{
|
||||
src = datasrc;
|
||||
}
|
||||
if(!src) {
|
||||
alert("未添加视频链接");
|
||||
}
|
||||
console.log(src);
|
||||
var menu=["<div class='video-definition video-tooltip '>",
|
||||
"<button class='video-button video-tooltip-toggle video-definition-button'>",
|
||||
"<span>"+dangqian+"</span>",
|
||||
"</button>",
|
||||
"<div class='video-tooltip-content'>",
|
||||
"<ul class='video-menu'>",
|
||||
menustr,
|
||||
"</ul>",
|
||||
"</div>",
|
||||
"</div>"];
|
||||
if(!$(this).attr("data-menu")){
|
||||
menu=[]
|
||||
}
|
||||
var vClass = $(this).attr("data-heibian") ? "heibian" : "";
|
||||
var videoid = "my" + _charecter() + _charecter();
|
||||
var iteme = null;
|
||||
var str = ["<div class='video-box " + vClass + "' id='" + videoid + "box'>",
|
||||
"<div class='video-bg'></div>",
|
||||
"<div class='video-loading-pulse'></div>",
|
||||
"<div class='video-close'></div>",
|
||||
"<div class='video-container f-czspjuzhong'>",
|
||||
"<div class='video-div'>",
|
||||
"<div class='video-video'>",
|
||||
"<video id=" + videoid + " x-webkit-airplay='' playsinline='' webkit-playsinline='' ",
|
||||
"src='" + src + "'",
|
||||
">",
|
||||
"</video>",
|
||||
"</div>",
|
||||
"<div class='video-bofang f-czspjuzhong '> <i class='i i-bofang '></i></div>",
|
||||
"<div class='video-loading yihuanchun f-czspjuzhong'> <i class='i i-loading '></i></div>",
|
||||
"<div class='video-ui'>",
|
||||
"<div class='video-progress'>",
|
||||
"<div class='video-tooltip video-tinytip video-tooltip-time'>",
|
||||
"<button class='video-tooltip-toggle'>",
|
||||
"<span class='video-tooltip-value'></span>",
|
||||
"</button>",
|
||||
"<div class='video-tooltip-content'>",
|
||||
"<div class='video-tinytip-content'>",
|
||||
"<span class='video-text'></span>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"<div class='video-progress-padding'></div>",
|
||||
"<div class='video-progress-list'>",
|
||||
"<div class='video-progress-buffer'></div>",
|
||||
"<div class='video-progress-hover'></div>",
|
||||
"<div class='video-progress-play'><span class='video-progress-handle'></span></div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"<div class='video-controls-buttons'>",
|
||||
"<button class='video-bofang video-button'> <i class='i i-bofang f-czspjuzhong'></i></button>",
|
||||
"<span class='video-time-panel'>",
|
||||
"<span class='video-time-panel-current'>00:00</span>",
|
||||
"<span class='video-time-panel-split'>  /  </span>",
|
||||
"<span class='video-time-panel-total'>00:00</span>",
|
||||
"</span>",
|
||||
"<div class='video-fullscreen'>",
|
||||
"<button class='video-button video-tooltip-toggle video-fullscreen-default' type='button'>",
|
||||
"<i class='i i-quanping f-czspjuzhong'></i>",
|
||||
"</button>",
|
||||
"</div>",
|
||||
menu.join(""),
|
||||
"<div class='video-volume video-popup'>",
|
||||
"<button class='video-button video-btn-volume' data-state='volume'>",
|
||||
"<i class='i i-voice-on f-czspjuzhong'></i>",
|
||||
"</button>",
|
||||
"<div class='video-volume-slider video-popup-content'>",
|
||||
"<div class='video-volume-range'>",
|
||||
"<div class='video-volume-range-current' style='height: 50%;'>",
|
||||
"<div class='video-volume-handle'></div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"<div class='video-tinytip-tiao'></div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>",
|
||||
"</div>"
|
||||
]
|
||||
$("body").append(str.join(""));
|
||||
var meido = document.getElementById(videoid);
|
||||
meido.volume = .5;
|
||||
var videobox = $("#" + videoid + "box");
|
||||
|
||||
/*视频缓存成功可以获取长度和播放*/
|
||||
eventTester("waiting", meido, function() {
|
||||
console.log(" 等待数据，并非错误");
|
||||
$(".video-loading").removeClass("yihuanchun");
|
||||
});
|
||||
eventTester("playing", meido, function() {
|
||||
console.log("播放了");
|
||||
videobox.addClass("video-playing").removeClass("video-pause");
|
||||
$(".video-loading").addClass("yihuanchun");
|
||||
});
|
||||
eventTester("stalled", meido, function() {
|
||||
console.log("/网速失速");
|
||||
});
|
||||
eventTester("ended", meido, function() {
|
||||
//console.log("播放结束");
|
||||
// $(".video-close").click();
|
||||
});
|
||||
eventTester("canplay", meido, function() {
|
||||
//console.log("可以播放");
|
||||
$(".video-container",videobox).addClass("video-ready");
|
||||
meido.canplay=true;
|
||||
meido.play();
|
||||
$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting").css("transition","none");
|
||||
});
|
||||
eventTester("loadedmetadata", meido, function() {
|
||||
//console.log("成功获取时长")
|
||||
$(".video-time-panel-total").html(addzero(parseInt(meido.duration / 60)) + ":" + addzero(parseInt(meido.duration % 60)));
|
||||
});
|
||||
eventTester("suspend",meido,function(){
|
||||
// $(".video-loading").removeClass("yihuanchun");
|
||||
console.log("延迟下载")
|
||||
})
|
||||
eventTester("loadstart",meido,function(){
|
||||
console.log("客户端开始请求数据")
|
||||
$(".video-loading").removeClass("yihuanchun");
|
||||
})
|
||||
eventTester("progress",meido,function(){
|
||||
$(".video-container",videobox).addClass("video-ready");
|
||||
console.log("客户端正在请求数据")
|
||||
})
|
||||
/*进度相关*/
|
||||
eventTester("timeupdate", meido, function() {
|
||||
//console.log("播放时间改变");
|
||||
if(meido.canplay){
|
||||
var currentTime = meido.currentTime;
|
||||
var buffered = meido.buffered.end(0);
|
||||
var duration = meido.duration;
|
||||
for(var i = 0; i < meido.buffered.length; i++) {
|
||||
if(currentTime < meido.buffered.end(i)) {
|
||||
buffered = meido.buffered.end(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
var buff_pro = parseInt((buffered / duration) * 100);
|
||||
$(".video-time-panel-current").html(addzero(parseInt(currentTime / 60)) + ":" + addzero(parseInt(currentTime % 60)));
|
||||
$(".video-progress-play").css("width", currentTime / duration * 100 + "%");
|
||||
$(".video-progress-buffer").css("width", buff_pro + "%");
|
||||
}
|
||||
});
|
||||
var mx = 0;
|
||||
$(document).on("mousemove", function(e) {
|
||||
mx = e.screenX;
|
||||
})
|
||||
eventTester("play", meido, function(e) {
|
||||
videobox.addClass("video-playing").removeClass("video-pause");
|
||||
$(".video-bofang.f-czspjuzhong").addClass("video-hide");
|
||||
//var ny=e.cy
|
||||
var px = mx;
|
||||
clearTimeout(iteme);
|
||||
iteme = setTimeout(function() {
|
||||
if(px == mx) {
|
||||
$(".video-div").addClass("video-hide-ui");
|
||||
}
|
||||
}, 5000);
|
||||
});
|
||||
eventTester("pause", meido, function() {
|
||||
videobox.addClass("video-pause").removeClass("video-playing");
|
||||
$(".video-bofang.f-czspjuzhong").removeClass("video-hide");
|
||||
});
|
||||
eventTester("ended", meido, function() {
|
||||
videobox.removeClass("video-pause video-playing");
|
||||
$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
|
||||
// $(".video-bofang.f-czspjuzhong").removeClass("video-hide");
|
||||
});
|
||||
/*
|
||||
* 播放暂停切换
|
||||
*
|
||||
* */
|
||||
$(".video-bofang,.video-video").on("click", function(e) {
|
||||
if(IsPC() || e.currentTarget.classList[0] == "video-bofang" || e.target.classList[0] == "video-bofang") {
|
||||
clearTimeout(iteme);
|
||||
iteme = setTimeout(function() {
|
||||
//do function在此处写单击事件要执行的代码
|
||||
if($(".video-bofang").find("i").hasClass("i-bofang")) {
|
||||
meido.play();
|
||||
$(".video-bofang").find("i").removeClass("i-bofang").addClass("i-zhanting");
|
||||
} else {
|
||||
meido.pause();
|
||||
$(".video-bofang").find("i").removeClass("i-zhanting").addClass("i-bofang");
|
||||
}
|
||||
},100);
|
||||
} else {
|
||||
if(videobox.hasClass("hideui")) {
|
||||
videobox.removeClass("hideui");
|
||||
} else {
|
||||
videobox.addClass("hideui");
|
||||
}
|
||||
}
|
||||
});
|
||||
/*
|
||||
* 双击全屏
|
||||
*
|
||||
* */
|
||||
$(".video-video").on("dblclick", function() {
|
||||
if(IsPC()) {
|
||||
clearTimeout(iteme);
|
||||
if(videobox.hasClass("quanping")) {
|
||||
exitquanping();
|
||||
} else {
|
||||
quanpin();
|
||||
}
|
||||
}
|
||||
});
|
||||
/*
|
||||
*
|
||||
* 鼠标移入隐藏UI
|
||||
*
|
||||
* */
|
||||
$(".video-ui").on("mouseleave", function() {
|
||||
clearTimeout(iteme);
|
||||
iteme = setTimeout(function() {
|
||||
//do function在此处写单击事件要执行的代码
|
||||
$(".video-div").addClass("video-hide-ui");
|
||||
}, 5000);
|
||||
|
||||
});
|
||||
$(".video-ui").on("mouseenter", function() {
|
||||
$(".video-div").removeClass("video-hide-ui");
|
||||
});
|
||||
/*
|
||||
*
|
||||
* 关闭video
|
||||
*
|
||||
* */
|
||||
$(".video-close").on("click touchstart", function() {
|
||||
videobox.remove();
|
||||
});
|
||||
//进度条面板相对浏览器的左边的距离
|
||||
var parent_left = 0;
|
||||
//鼠标位置相对浏览器的左边的距离
|
||||
var e_left = 0;
|
||||
/*
|
||||
* 进度条
|
||||
*/
|
||||
$(".video-progress", videobox).on("mousemove touchmove", function(e) {
|
||||
var event;
|
||||
if(e.offsetX) {
|
||||
event = e;
|
||||
} else if(e.originalEvent.changedTouches[0].clientX) {
|
||||
event = e.originalEvent.changedTouches[0];
|
||||
}
|
||||
parent_left = $(this).offset().left;
|
||||
//鼠标位置相对浏览器的左边的距离
|
||||
e_left = event.pageX;
|
||||
var width = e_left - parent_left;
|
||||
var wb = (width / $(this).width());
|
||||
var tt = wb * meido.duration;
|
||||
$(".video-tooltip", $(this)).css({
|
||||
"left": (wb * 100) + "%"
|
||||
});
|
||||
$(".video-progress-hover", videobox).css({
|
||||
"width": (wb * 100) + "%"
|
||||
});
|
||||
$(".video-text", videobox).html(addzero(parseInt(tt / 60)) + ":" + addzero(parseInt(tt % 60)));
|
||||
});
|
||||
$(".video-progress", videobox).on("click touchstart touchend", function(e) {
|
||||
videobox.removeClass("video-playing");
|
||||
var percent = ($(".video-progress-hover", videobox).width() / $(this).width());
|
||||
console.log(percent);
|
||||
meido.currentTime = (percent * meido.duration);
|
||||
});
|
||||
/*
|
||||
* 音量
|
||||
*/
|
||||
var canMove = false;
|
||||
$(".video-tinytip-tiao", videobox).on("mousedown", function(e) {
|
||||
canMove = true;
|
||||
console.log(canMove);
|
||||
var zi = $(".video-volume-range-current", videobox);
|
||||
if(canMove) {
|
||||
volumeh = 1 - e.offsetY / $(this).height();
|
||||
console.log(volumeh);
|
||||
zi.css("height", volumeh * 100 + "%")
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
$(document).on("mouseup", function(e) {
|
||||
canMove = false;
|
||||
});
|
||||
var volumeh = 0;
|
||||
$(".video-tinytip-tiao", videobox).on("mousemove ", function(e) {
|
||||
var zi = $(".video-volume-range-current", videobox);
|
||||
var hh = $(".video-volume-range", videobox);
|
||||
if(canMove) {
|
||||
console.log(e);
|
||||
volumeh = 1 - (e.offsetY - 16) / hh.height();
|
||||
console.log(volumeh);
|
||||
if(volumeh <= 0) {
|
||||
$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
|
||||
} else if(volumeh > 1) {
|
||||
volumeh = 1;
|
||||
} else {
|
||||
$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
|
||||
}
|
||||
zi.css("height", volumeh * 100 + "%")
|
||||
meido.volume = volumeh;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
$(".video-btn-volume", videobox).on("click", function() {
|
||||
if($(this).find("i").hasClass("i-voice-on")) {
|
||||
meido.volume = false;
|
||||
volumeh = $(".video-volume-range-current", videobox).height() / $(".video-volume-range", videobox).height();
|
||||
console.log(volumeh);
|
||||
$(".video-volume-range-current", videobox).css("height", 0 + "%");
|
||||
$(".video-btn-volume i").removeClass("i-voice-on").addClass("i-voice-off");
|
||||
} else {
|
||||
meido.volume = true;
|
||||
$(".video-volume-range-current", videobox).css("height", volumeh * 100 + "%");
|
||||
$(".video-btn-volume i").removeClass("i-voice-off").addClass("i-voice-on");
|
||||
}
|
||||
})
|
||||
/*
|
||||
* 音量 结尾
|
||||
*/
|
||||
/*
|
||||
* 全屏
|
||||
*/
|
||||
$(".video-fullscreen", videobox).on("click", function() {
|
||||
if($(this).find("i").hasClass("i-quanping")) {
|
||||
quanpin(meido);
|
||||
} else {
|
||||
console.log("退出全屏");
|
||||
exitquanping();
|
||||
}
|
||||
})
|
||||
/*
|
||||
* 全屏结尾
|
||||
*/
|
||||
|
||||
/*
|
||||
* 切换清晰度
|
||||
*/
|
||||
$(".video-menu-item").on("click",function(){
|
||||
if($(this).hasClass("video-active")){
|
||||
return ;
|
||||
}
|
||||
$(this).addClass("video-active").siblings().removeClass("video-active");
|
||||
$(".video-definition-button span").html($(this).html());
|
||||
var duration=meido.currentTime;
|
||||
meido.canplay=false;
|
||||
meido.pause();
|
||||
meido.src=datasrc+$(this).html()+".mp4";
|
||||
meido.currentTime=duration;
|
||||
});
|
||||
});
|
||||
})
|
||||
@@ -170,7 +170,7 @@
|
||||
<span>四十周年所庆宣传片</span>
|
||||
</div>
|
||||
<div class="briefVideo-video">
|
||||
<video width="100%" height="100%" controls
|
||||
<video width="100%" height="100%" style="object-fit:fill" controls
|
||||
src="{{ getVideoByCate(15,'link_url') }}"
|
||||
poster="{{ getVideoByCate(15,'cover_url') }}"
|
||||
>
|
||||
@@ -178,59 +178,65 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (getAdvertsByCate(16,10)->isNotEmpty())
|
||||
|
||||
<div class="briefAlbum">
|
||||
<div class="briefAlbum-title"><span>四十周年所庆纪念册</span></div>
|
||||
<div class="swiper-container briefSwiper"
|
||||
style="background-image: url(/assets/index/images/briefIcon/briefAlbum_back.jpg);">
|
||||
<div class="briefAlbum">
|
||||
<div class="briefAlbum-title"><span>四十周年所庆纪念册</span></div>
|
||||
<div class="briefSwiper-back"
|
||||
style="background-image: url(/assets/index/images/briefIcon/briefAlbum_back.jpg);">
|
||||
<div class="swiper-container briefSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
@foreach (getAdvertsByCate(16,10) as $info)
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="swiper-slide" data-href="">
|
||||
<div class="ce-img briefSwiper-img">
|
||||
<span style="background-image: url({{ $info->cover_url }});"></span>
|
||||
<div class="briefSwiper-cont">
|
||||
<div class="ce-nowrap briefSwiper-cont-name">
|
||||
{{ $info->title }}
|
||||
</div>
|
||||
<div class="ce-nowrap briefSwiper-cont-more">
|
||||
<span>查看详情</span>
|
||||
@if (getAdvertsByCate(16,10)->isNotEmpty())
|
||||
@foreach (getAdvertsByCate(16,10)->chunk(3) as $adverts)
|
||||
<div class="swiper-slide">
|
||||
@foreach($adverts as $advert)
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="ce-img briefSwiper-img mian">
|
||||
<img class='js-lightBox'
|
||||
data-title="{{ $advert->title }}"
|
||||
data-group='group-1'
|
||||
src="{{ $advert->cover_url }}"/>
|
||||
<div class="briefSwiper-cont">
|
||||
<div class="ce-nowrap briefSwiper-cont-name">
|
||||
{{ $advert->title }}
|
||||
</div>
|
||||
{{-- <div class="ce-nowrap briefSwiper-cont-more ">--}}
|
||||
{{-- <span>查看详情</span>--}}
|
||||
{{-- </div>--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
@endif
|
||||
</div>
|
||||
<!-- Add Arrows -->
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- end 四十年所庆 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end 四十年所庆 -->
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('script')
|
||||
<script type="text/javascript" src="{{ asset('assets/index/js/swiper.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('assets/index/js/jquery.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('assets/index/js/lightBox.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
// 四十周年所庆纪念册
|
||||
var mySwiper = new Swiper('.briefSwiper', {
|
||||
pagination: '.brief-pagination',
|
||||
slidesPerView: 3,
|
||||
var swiper = new Swiper('.briefSwiper', {
|
||||
nextButton: '.swiper-button-next',
|
||||
prevButton: '.swiper-button-prev',
|
||||
slidesPerView: 1,
|
||||
paginationClickable: true,
|
||||
spaceBetween: 30,
|
||||
autoplay: 2000
|
||||
spaceBetween: 60
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.Rightfixed-img-code').hover(
|
||||
function () {
|
||||
@@ -243,5 +249,11 @@
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 图片放大
|
||||
jQuery(document).ready(function ($) {
|
||||
$.LightBox({speed: 500})
|
||||
});
|
||||
|
||||
</script>
|
||||
@endpush
|
||||
@@ -20,6 +20,8 @@
|
||||
<div class="srTitle-name">
|
||||
<img src="/assets/index/images/srIcon/srTitle_1.png"/>
|
||||
{{ getOneCategory(17,'title') }}
|
||||
<div class="party-title-more" data-href="{{ getOneCategory(17,'link') }}">更多>>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="srRrends-list">
|
||||
|
||||
@@ -63,11 +63,14 @@
|
||||
<div class="col-xs-12 col-md-5">
|
||||
<div class="journalCont-title">{{ getOneCategory(63,'article')->title }}</div>
|
||||
<div class="journalCont-tool">
|
||||
<div data-href="" class="journalCont-tool-more">
|
||||
<div data-href="{{ getOneCategory(63,'article')->link }}"
|
||||
class="journalCont-tool-more">
|
||||
<img src="/assets/index/images/journalCont_icon_00.jpg"/>查看更多
|
||||
</div>
|
||||
<div data-href="" class="journalCont-tool-teach">
|
||||
<img src="/assets/index/images/journalCont_icon_01.jpg"/>征稿启事
|
||||
<div data-href="{{ getOneCategory(75,'url') }}"
|
||||
class="journalCont-tool-teach">
|
||||
<img src="/assets/index/images/journalCont_icon_01.jpg"/>
|
||||
{{ getOneCategory(75,'title') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<div class="educateStudent-cont">
|
||||
<div class="educateStudent-cont-name">
|
||||
{{ getOneCategory(54,'article')->title }}
|
||||
<span>/ Introduction to graduate education</span></div>
|
||||
<span>/ {{ getOneCategory(53,'article')->remark }}</span></div>
|
||||
<div class="ce-nowrap-multi educateStudent-cont-text">
|
||||
{{ getOneCategory(54,'article')->description }}
|
||||
</div>
|
||||
@@ -42,12 +42,12 @@
|
||||
<!-- start 硕士导师简介 -->
|
||||
<div class="educateMargin briefMargin">
|
||||
<div class="educate-title">{{ getOneCategory(53,'title') }}</div>
|
||||
@if(getOneCategory(54,'article'))
|
||||
@if(getOneCategory(53,'article'))
|
||||
<div class="educateMaster">
|
||||
<div class="educateMaster-right">
|
||||
<div class="ce-img educateStudent-img">
|
||||
<!-- 图片为5:3-->
|
||||
<span style="background-image: url({{ getOneCategory(54,'article')->cover_url }});"></span>
|
||||
<span style="background-image: url({{ getOneCategory(53,'article')->cover_url }});"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,15 +55,15 @@
|
||||
<div class="educateMaster-cont-name">
|
||||
<img src="/assets/index/images/educatePop.png"/>
|
||||
<div class="educateMaster-cont-tutor">
|
||||
{{ getOneCategory(54,'article')->title }}
|
||||
<span>Introduction to master tutor</span>
|
||||
{{ getOneCategory(53,'article')->title }}
|
||||
<span>{{ getOneCategory(53,'article')->remark }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-nowrap-multi educateStudent-cont-text">
|
||||
{{ getOneCategory(54,'article')->description }}
|
||||
{{ getOneCategory(53,'article')->description }}
|
||||
</div>
|
||||
<div class="publicHover educateStudent-cont-more"
|
||||
data-href=" {{ getOneCategory(54,'article')->link }}">更多>>
|
||||
data-href=" {{ getOneCategory(53,'article')->link }}">更多>>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user