219 lines
9.7 KiB
HTML
219 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
||
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
|
||
<html lang="zh-cmn-Hans">
|
||
<head>
|
||
<!-- 声明文档使用的字符编码 -->
|
||
<meta charset="utf-8" />
|
||
<!-- 优先使用 IE 最新版本和 Chrome -->
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<!-- 网页作者 -->
|
||
<meta name="author" content="吃肉的饺子,2659004835@qq.com" />
|
||
<!-- 网站说明 -->
|
||
<meta name="description" content="卯链" />
|
||
<!-- 关键字 -->
|
||
<meta name="keywords" content="卯链" />
|
||
<!-- 防页面被转码----根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览 -->
|
||
<meta name="applicable-device" content="pc,mobile" />
|
||
<meta name="MobileOptimized" content="width" />
|
||
<meta name="HandheldFriendly" content="true" />
|
||
<!-- 限制所有的搜索引擎建立网页快照 -->
|
||
<meta name="robots" content="noarchive"/>
|
||
<!-- 为移动设备添加 viewport -->
|
||
<!-- <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> -->
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
||
<!-- 控制选项卡颜色，手机端切换软件时 -->
|
||
<meta name="theme-color" content="#db5945">
|
||
<!-- 禁止 Chrome 浏览器中自动提示翻译 -->
|
||
<meta name="google" value="notranslate">
|
||
<!-- 添加 favicon icon icon在线制作链接：（比特虫）https://www.bitbug.net/ -->
|
||
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
|
||
<!-- 网站标题 -->
|
||
<title>卯链</title>
|
||
<!-- 标签基本样式 -->
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css"/>
|
||
<!-- swiper轮播 -->
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/swiper.min.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/animate.min.css"/>
|
||
<!-- 自定义样式 -->
|
||
<link rel="stylesheet" type="text/css" href="__STATIC__/css/style.css"/>
|
||
<!-- 外部js -->
|
||
<!-- <script src="./js/jquery.js" type="text/javascript" charset="utf-8"></script> -->
|
||
<script src="__STATIC__/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="__STATIC__/js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="__STATIC__/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="__STATIC__/js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<!-- 自定义js -->
|
||
<script type="text/javascript" charset="utf-8">
|
||
jQuery(function($){
|
||
prependEv();
|
||
monitorWindow();
|
||
// 窗体改变
|
||
$(window).resize(function(){
|
||
//监听窗口大小的改变
|
||
monitorWindow();
|
||
})
|
||
})
|
||
function creatswiper(){
|
||
// banner轮播
|
||
var bannerSwiper = new Swiper('.banner-swiper',{
|
||
loop:false,
|
||
//开启循环播放
|
||
autoplay: {
|
||
//开启自动播放
|
||
delay:3000,
|
||
disableOnInteraction: false,
|
||
//触摸后不会停止自动滚动
|
||
pauseOnMouseEnter: true,
|
||
//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||
},
|
||
direction : 'vertical',
|
||
//轮播切换方向默认向左：horizontal、向右：vertical
|
||
// height: 400,//slide高度
|
||
autoHeight: true,
|
||
//高度随内容变化
|
||
slidesPerView:4,
|
||
//显示个数
|
||
pagination: {
|
||
//分页器
|
||
el: '.swiper-pagination',
|
||
type: 'bullets',
|
||
//指示点样式 bullets：圆点（默认）、fraction：分式、progressbar：进度条、custom：自定义
|
||
progressbarOpposite: false,
|
||
//水平方向切换的swiper显示的是垂直进度条而垂直方向切换的swiper显示水平进度条
|
||
dynamicBullets: false,
|
||
//当slide很多时，分页器小点的数量会部分隐藏。针对bullets
|
||
dynamicMainBullets: 2,
|
||
//主展示的数量
|
||
hideOnClick :true,
|
||
//点击时隐藏分页器
|
||
clickable :true,
|
||
//点击分页器的指示点控制Swiper切换
|
||
// bulletClass : 'my-bullet',//需设置.my-bullet样式
|
||
// bulletActiveClass: 'my-bullet-active',//当前活动块的指示小点的类名。需设置.my-bullet-active样式
|
||
renderBullet: function (index, className) {
|
||
switch(index){
|
||
case 0:text='壹';break;
|
||
case 1:text='贰';break;
|
||
case 2:text='叁';break;
|
||
case 3:text='肆';break;
|
||
case 4:text='伍';break;
|
||
case 5:text='六';break;
|
||
case 6:text='柒';break;
|
||
case 7:text='捌';break;
|
||
case 8:text='玖';break;
|
||
case 9:text='拾';break;
|
||
}
|
||
return '<span class="' + className + '">' + text + '</span>';
|
||
},
|
||
},
|
||
effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
|
||
fadeEffect: {
|
||
crossFade: true,
|
||
},
|
||
on:{
|
||
init: function(){
|
||
swiperAnimateCache(this); //隐藏动画元素
|
||
swiperAnimate(this); //初始化完成开始动画
|
||
},
|
||
slideChangeTransitionEnd: function(){
|
||
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
|
||
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
|
||
},
|
||
slideChangeTransitionStart: function(){
|
||
|
||
},
|
||
}
|
||
})
|
||
}
|
||
function monitorWindow(){
|
||
let slideHeight = '';
|
||
// 获取视图窗口的高度
|
||
let clientHeight = $(window).height();
|
||
// 获取头部的高度
|
||
let headHeight = $('.head-box img').height();
|
||
// 底部内容高度
|
||
let contentHeight = clientHeight-headHeight;
|
||
}
|
||
|
||
function prependEv(){
|
||
var couponMain = JSON.parse('{$couponMain|raw}');
|
||
for (let i = 0; i < couponMain.length; i++) {
|
||
let yspHtml = `<div class="swiper-slide slide${i}">
|
||
<div class="content-head">
|
||
<img class="coupon" src="${couponMain[i].image_url}" >
|
||
<div class="content-head-right">
|
||
|
||
<div class="qrcode" id="qrcode${couponMain[i].id}"></div>
|
||
<span>扫码领取</span>
|
||
<div class="content-head-bol">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-box">
|
||
<span>${couponMain[i].name}</span>
|
||
<span>${couponMain[i].business_subtitle}</span>
|
||
</div>
|
||
</div>`
|
||
$('.swiper-wrapper').prepend(yspHtml);
|
||
$('.slided').remove();
|
||
$(`#qrcode${couponMain[i].id}`).qrcode(`https://coupon.scdxtc.cn/coupon_info?id=${couponMain[i].id}&business_code=${couponMain[i].business_code}`);
|
||
}
|
||
setTimeout(() => {
|
||
creatswiper();
|
||
}, 300);
|
||
}
|
||
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
// 更新js文件版本，达到清除js带来的缓存
|
||
var scripts = document.getElementsByTagName("script");
|
||
for(var i = 0;i < scripts.length; i++){
|
||
if(scripts[i].src){
|
||
scripts[i].src = scripts[i].src+"?t="+new Date().getTime();
|
||
}
|
||
}
|
||
// 更新css文件版本，达到清除css带来的缓存
|
||
var csss = document.getElementsByTagName("link");
|
||
for(var i = 0;i < csss.length; i++){
|
||
if(csss[i].href){
|
||
csss[i].href = csss[i].href+"?t="+new Date().getTime();
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部 -->
|
||
<div class="head-box">
|
||
<img src="{$screenTopBanner}">
|
||
</div>
|
||
<!-- banner轮播图 -->
|
||
<div class="banner-swiper swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide slided"></div>
|
||
</div>
|
||
<!-- <div class="swiper-pagination"></div> -->
|
||
</div>
|
||
<script type="text/javascript">
|
||
</script>
|
||
<!-- 主体内容 -->
|
||
<main class="main">
|
||
|
||
</main>
|
||
</body>
|
||
</html>
|