287 lines
14 KiB
HTML
287 lines
14 KiB
HTML
|
<!--
|
||
|
|
* @Descripttion : FOXCMS是一款高效的PHP多端跨平台内容管理系统
|
||
|
|
* @Author : FoxCMS Team
|
||
|
|
* @Date : 2023-04-10 16:46:42
|
||
|
|
* @version : V1.08
|
||
|
|
* @copyright : ©2021-现在 贵州黔狐科技股份有限公司 版权所有
|
||
|
|
* @LastEditTime : 2023-08-09 15:10:07
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="cn">
|
||
|
|
<head>
|
||
|
|
{include file="header"/}
|
||
|
|
<title>[$images.title]-{fox:basic name='title'/}</title>
|
||
|
|
<meta name="keywords" content="[$images.keywords]" />
|
||
|
|
<meta name="description" content="[$images.description]" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 顶部 -->
|
||
|
|
<header class="foxui-border-bottom foxui-bg-white">{include file="nav"/}</header>
|
||
|
|
<!-- 主体内容 -->
|
||
|
|
<main>
|
||
|
|
<!-- 内容 -->
|
||
|
|
<div class="foxcms-main view-image-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="swiper-box-pc">
|
||
|
|
<div class="main-swiper">
|
||
|
|
<div class="swiper" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{fox:imageslist name="field" calltype="parent" model="images"}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="pic">
|
||
|
|
<img src="[$field.imgsrc]" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/fox:imageslist}
|
||
|
|
</div>
|
||
|
|
<div class="swiper-button-next"></div>
|
||
|
|
<div class="swiper-button-prev"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="thumbs-swiper">
|
||
|
|
<div class="swiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{fox:imageslist name="field" calltype="parent" model="images"}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="pic">
|
||
|
|
<img src="[$field.imgsrc]" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/fox:imageslist}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 移动端 -->
|
||
|
|
<div class="swiper-box-h5">
|
||
|
|
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper main-swiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{fox:imageslist name="field" calltype="parent" model="images"}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="pic">
|
||
|
|
<img src="[$field.imgsrc]" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/fox:imageslist}
|
||
|
|
</div>
|
||
|
|
<div class="swiper-button-next"></div>
|
||
|
|
<div class="swiper-button-prev"></div>
|
||
|
|
</div>
|
||
|
|
<div class="swiper thumbs-swiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{fox:imageslist name="field" calltype="parent" model="images"}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="pic">
|
||
|
|
<img src="[$field.imgsrc]" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{/fox:imageslist}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="foxui-bg-white">
|
||
|
|
<div class="foxcms-container">
|
||
|
|
<div class="article-head wow slideInUp">
|
||
|
|
<h1>[$images.title]</h1>
|
||
|
|
<p class="foxui-hidden-sm foxui-hidden-xs foxui-margin-bottom-0">
|
||
|
|
<span>日期：[$images.release_time|date='Y-m-d H:m']</span>
|
||
|
|
<span>来源：[$images.article_source]</span>
|
||
|
|
<span>作者：[$images.author]</span>
|
||
|
|
<span>浏览量：[$images.click]</span>
|
||
|
|
</p>
|
||
|
|
<div class="head-info-h5 foxui-display-none foxui-visible-sm foxui-visible-xs">
|
||
|
|
<p>
|
||
|
|
<span>日期：[$images.release_time|date='Y-m-d H:m']</span>
|
||
|
|
<span>来源：[$images.article_source]</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<span>作者：[$images.author]</span>
|
||
|
|
<span>浏览量：[$images.click]</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="article-content wow slideInUp">
|
||
|
|
<div class="article-content-inner">
|
||
|
|
<div class="rich-text">[$images.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:images 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:images}
|
||
|
|
</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>
|
||
|
|
let thumbsSwiperH5 = new Swiper('.swiper-box-h5 .thumbs-swiper', {
|
||
|
|
loop: true,
|
||
|
|
spaceBetween: 10,
|
||
|
|
slidesPerView: 4,
|
||
|
|
freeMode: true,
|
||
|
|
watchSlidesProgress: true,
|
||
|
|
});
|
||
|
|
let mainSwiperH5 = new Swiper('.swiper-box-h5 .main-swiper', {
|
||
|
|
loop: true,
|
||
|
|
spaceBetween: 10,
|
||
|
|
navigation: {
|
||
|
|
nextEl: '.swiper-box-h5 .swiper-button-next',
|
||
|
|
prevEl: '.swiper-box-h5 .swiper-button-prev',
|
||
|
|
},
|
||
|
|
thumbs: {
|
||
|
|
swiper: thumbsSwiperH5,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
let thumbsSwiperPC = new Swiper('.swiper-box-pc .thumbs-swiper .swiper', {
|
||
|
|
speed: 300,
|
||
|
|
freeMode: true,
|
||
|
|
direction: 'vertical',
|
||
|
|
setWrapperSize: true,
|
||
|
|
spaceBetween: 10,
|
||
|
|
slidesPerView: 'auto',
|
||
|
|
grid: {
|
||
|
|
rows: 2,
|
||
|
|
fill: 'row',
|
||
|
|
},
|
||
|
|
scrollbar: {
|
||
|
|
el: '.swiper-scrollbar',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
let mainSwiperPC = new Swiper('.swiper-box-pc .main-swiper .swiper', {
|
||
|
|
loop: true,
|
||
|
|
spaceBetween: 10,
|
||
|
|
navigation: {
|
||
|
|
nextEl: '.swiper-box-pc .swiper-button-next',
|
||
|
|
prevEl: '.swiper-box-pc .swiper-button-prev',
|
||
|
|
},
|
||
|
|
thumbs: {
|
||
|
|
swiper: thumbsSwiperPC,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
new Swiper('.recommend-swiper', {
|
||
|
|
slidesPerView: 1,
|
||
|
|
spaceBetween: 30,
|
||
|
|
breakpoints: {
|
||
|
|
991: { slidesPerView: 3 },
|
||
|
|
},
|
||
|
|
pagination: {
|
||
|
|
el: '.recommend-swiper .swiper-pagination',
|
||
|
|
clickable: true,
|
||
|
|
},
|
||
|
|
navigation: {
|
||
|
|
nextEl: '.recommend-swiper .swiper-button-next',
|
||
|
|
prevEl: '.recommend-swiper .swiper-button-prev',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|