285 lines
15 KiB
HTML
285 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="cn">
|
||
|
|
<head>
|
||
|
|
{include file="header"/}
|
||
|
|
<title>[$article.title]-{fox:basic name='title'/}</title>
|
||
|
|
<meta name="keywords" content="[$article.keywords]" />
|
||
|
|
<meta name="description" content="[$article.description]" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 顶部 -->
|
||
|
|
<header class="foxui-border-bottom foxui-bg-white">{include file="nav"/}</header>
|
||
|
|
<!-- 主体内容 -->
|
||
|
|
<main>
|
||
|
|
<!-- 内容 -->
|
||
|
|
<div class="foxcms-main view-video-main">
|
||
|
|
<div class="foxcms-container">
|
||
|
|
<ul class="foxui-breadcrumb icon-separator foxui-hidden-sm foxui-hidden-xs wow slideInUp">
|
||
|
|
{fox:positionshut name='field'}
|
||
|
|
<li class="foxui-breadcrumb-item">
|
||
|
|
<a href="[$field.link]">[$field.name]</a>
|
||
|
|
<i class="foxui-icon-xiangyou-o"></i>
|
||
|
|
</li>
|
||
|
|
{/fox:positionshut}
|
||
|
|
</ul>
|
||
|
|
<div class="video-box">
|
||
|
|
<div class="left">
|
||
|
|
<div class="video">
|
||
|
|
<video controls src="{fox:videogroup field='videos'}{if $index==1 }[$video.url]{/if}{/fox:videogroup}"></video>
|
||
|
|
<div class="unfold-btn foxui-hidden-sm foxui-hidden-xs">
|
||
|
|
<a>
|
||
|
|
<i class="foxui-icon-shuangxiangzuo-o"></i>
|
||
|
|
<span>列表</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right video-group-pc foxui-hidden-sm foxui-hidden-xs">
|
||
|
|
<div class="right-inner">
|
||
|
|
<div class="fold-btn">
|
||
|
|
<a>
|
||
|
|
<span>列表</span>
|
||
|
|
<i class="foxui-icon-shuangxiangyou-o"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<ul class="video-group">
|
||
|
|
{fox:videogroup field="videos"}
|
||
|
|
<li>
|
||
|
|
<a class="{if $index==1 }current{/if}" data-videourl="[$video.url]">
|
||
|
|
<div class="col sort">[$index]</div>
|
||
|
|
<div class="col circle"></div>
|
||
|
|
<div class="col title">[$video.title]</div>
|
||
|
|
<div class="col time">[$video.duration]</div>
|
||
|
|
<div class="col icon">
|
||
|
|
<i class="foxui-icon-kaishi-f"></i>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
{/fox:videogroup}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="video-group-h5 foxui-visible-xs foxui-visible-sm">
|
||
|
|
<div class="foxui-row foxui-gutter-y-4 video-group">
|
||
|
|
{fox:videogroup field="videos"}
|
||
|
|
<div class="foxui-col-xs-8 foxui-col-sm-8">
|
||
|
|
<div class="foxui-ellipsis">
|
||
|
|
<a class="foxui-link {if $index==1 }current{/if}" data-videourl="[$video.url]">[$index].[$video.title]</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/fox:videogroup}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="foxui-bg-white">
|
||
|
|
<div class="foxcms-container">
|
||
|
|
<div class="article-head wow slideInUp">
|
||
|
|
<h1>[$article.title]</h1>
|
||
|
|
<p class="foxui-hidden-sm foxui-hidden-xs foxui-margin-bottom-0">
|
||
|
|
<span>日期：[$article.release_time|date='Y-m-d H:m']</span>
|
||
|
|
<span>来源：[$article.article_source]</span>
|
||
|
|
<span>作者：[$article.author]</span>
|
||
|
|
<span>浏览量：[$article.click]</span>
|
||
|
|
</p>
|
||
|
|
<div class="head-info-h5 foxui-display-none foxui-visible-sm foxui-visible-xs">
|
||
|
|
<p>
|
||
|
|
<span>日期：[$article.release_time|date='Y-m-d H:m']</span>
|
||
|
|
<span>来源：[$article.article_source]</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span>作者：[$article.author]</span>
|
||
|
|
<span>浏览量：[$article.click]</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="article-content wow slideInUp">
|
||
|
|
<div class="article-content-inner">
|
||
|
|
<div class="rich-text">[$article.content]</div>
|
||
|
|
<div class="share-list">
|
||
|
|
<ul class="share-list-inner">
|
||
|
|
<li class="share-item wx-share">
|
||
|
|
<i class="foxui-icon-weixin-f"></i>
|
||
|
|
<span>微信分享</span>
|
||
|
|
</li>
|
||
|
|
<li class="share-item qq-share">
|
||
|
|
<i class="foxui-icon-QQ-f"></i>
|
||
|
|
<span>转发QQ</span>
|
||
|
|
</li>
|
||
|
|
<li class="share-item xl-share">
|
||
|
|
<i class="foxui-icon-xinlang-f"></i>
|
||
|
|
<span>转发微博</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="foxcms-detail-pagination">
|
||
|
|
<div class="detail-pagination-pc foxui-hidden-sm foxui-hidden-xs">
|
||
|
|
{fox:prenext get='pre' disstyle='disabled'/}
|
||
|
|
<div class="pre [$field.disstyle]">
|
||
|
|
<p>上一篇</p>
|
||
|
|
<a href="[$field.link]" class="foxui-ellipsis-2">[$field.title ?? '没有了']</a>
|
||
|
|
</div>
|
||
|
|
{/fox:prenext} {fox:channel name='field' type='self'}
|
||
|
|
<div class="center">
|
||
|
|
<a href="[$field.link]">
|
||
|
|
<i class="foxui-icon-zhenlie-f"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{/fox:channel} {fox:prenext get='next' disstyle='disabled'/}
|
||
|
|
<div class="next [$field.disstyle]">
|
||
|
|
<p>下一篇</p>
|
||
|
|
<a href="[$field.link]" class="foxui-ellipsis-2">[$field.title ?? '没有了']</a>
|
||
|
|
</div>
|
||
|
|
{/fox:prenext}
|
||
|
|
</div>
|
||
|
|
<div class="detail-pagination-h5 foxui-visible-sm foxui-visible-xs">
|
||
|
|
<ul>
|
||
|
|
{fox:prenext get='pre' disstyle='disabled'/}
|
||
|
|
<li class="pre [$field.disstyle]">
|
||
|
|
<a class="foxui-border" href="[$field.link]">上一篇</a>
|
||
|
|
</li>
|
||
|
|
{/fox:prenext} {fox:channel name='field' type='self'}
|
||
|
|
<li class="center">
|
||
|
|
<a href="[$field.link]">
|
||
|
|
<i class="foxui-icon-zhenlie-f"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
{/fox:channel} {fox:prenext get='next' disstyle='disabled'/}
|
||
|
|
<li class="next [$field.disstyle]">
|
||
|
|
<a class="foxui-border" href="[$field.link]">下一篇</a>
|
||
|
|
</li>
|
||
|
|
{/fox:prenext}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="foxcms-container">
|
||
|
|
<div class="recommend-list">
|
||
|
|
<div class="title">
|
||
|
|
<h1>相关推荐</h1>
|
||
|
|
</div>
|
||
|
|
<div class="swiper recommend-swiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{fox:arclist name='field' flag='c'}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<a href="[$field.link]">
|
||
|
|
<div class="list-case-item wow slideInUp">
|
||
|
|
<div class="pic">
|
||
|
|
<img src="[$field.img_url]" alt="" />
|
||
|
|
{if $field.model == 'video'}
|
||
|
|
<i class="foxui-icon-bofang-f"></i>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
<div class="cover">
|
||
|
|
<div class="cover-head">
|
||
|
|
<h2>[$field.title]</h2>
|
||
|
|
</div>
|
||
|
|
<div class="cover-foot">
|
||
|
|
<h3>[$field.column]</h3>
|
||
|
|
<p>[$field.tags]</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{/fox:arclist}
|
||
|
|
</div>
|
||
|
|
<div class="swiper-pagination"></div>
|
||
|
|
<div class="swiper-button-prev"></div>
|
||
|
|
<div class="swiper-button-next"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 右侧浮动内容 -->
|
||
|
|
<div class="foxcms-fixed-container">{include file="fixed"/}</div>
|
||
|
|
</main>
|
||
|
|
<!-- 底部 -->
|
||
|
|
<footer class="wow slideInUp">{include file="footer"/}</footer>
|
||
|
|
</body>
|
||
|
|
<script src="_STATIC_/skin/js/foxui-1.21.min.js"></script>
|
||
|
|
<script src="_STATIC_/skin/js/common.js"></script>
|
||
|
|
<script>
|
||
|
|
$('.fold-btn').click(function () {
|
||
|
|
$('.video-box .right').animate({ width: 0 });
|
||
|
|
$('.unfold-btn').css({ display: 'block' });
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.unfold-btn').click(function () {
|
||
|
|
$('.video-box .right').animate({ width: '30%' });
|
||
|
|
$('.unfold-btn').css({ display: 'none' });
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-group-pc .video-group a').click(function () {
|
||
|
|
let $this = $(this),
|
||
|
|
isCurrent = $this.is('current');
|
||
|
|
if (!isCurrent) {
|
||
|
|
let $video = $('.video video'),
|
||
|
|
index = $this.closest('li').index();
|
||
|
|
|
||
|
|
$('.video-group a.current').removeClass('current');
|
||
|
|
$('.video-group-h5 .video-group a').eq(index).addClass('current');
|
||
|
|
$this.addClass('current');
|
||
|
|
$video.attr('src', $this.attr('data-videourl'));
|
||
|
|
$video[0].play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video-group-h5 .video-group a').click(function () {
|
||
|
|
let $this = $(this),
|
||
|
|
isCurrent = $this.is('current');
|
||
|
|
if (!isCurrent) {
|
||
|
|
let $video = $('.video video'),
|
||
|
|
index = $this.closest('.foxui-col-xs-8').index();
|
||
|
|
|
||
|
|
$('.video-group a.current').removeClass('current');
|
||
|
|
$('.video-group-pc .video-group a').eq(index).addClass('current');
|
||
|
|
$this.addClass('current');
|
||
|
|
$video.attr('src', $this.attr('data-videourl'));
|
||
|
|
$video[0].play();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('.video video').on('ended', function () {
|
||
|
|
let len = $('.video-group-pc .video-group a').length,
|
||
|
|
index = $('.video-group-pc .video-group a.current').closest('li').index();
|
||
|
|
if (index < len) {
|
||
|
|
$('.video-group-pc .video-group a')
|
||
|
|
.eq(index + 1)
|
||
|
|
.click();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
new Swiper('.recommend-swiper', {
|
||
|
|
slidesPerView: 1,
|
||
|
|
spaceBetween: 30,
|
||
|
|
breakpoints: {
|
||
|
|
991: { slidesPerView: 3 },
|
||
|
|
},
|
||
|
|
pagination: {
|
||
|
|
el: '.swiper-pagination',
|
||
|
|
clickable: true,
|
||
|
|
},
|
||
|
|
navigation: {
|
||
|
|
nextEl: '.swiper-button-next',
|
||
|
|
prevEl: '.swiper-button-prev',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}, 300);
|
||
|
|
|
||
|
|
$(document).on('click', '.wx-share', function () {
|
||
|
|
shareWeixin();
|
||
|
|
});
|
||
|
|
$(document).on('click', '.qq-share', function () {
|
||
|
|
shareQQ('', '[$article.title]');
|
||
|
|
});
|
||
|
|
$(document).on('click', '.xl-share', function () {
|
||
|
|
shareSina('', '[$article.title]');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|