dxtc
/
coupon-admin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
coupon-admin/view/page/screen.html

231 lines
10 KiB
HTML
Raw Normal View History

setter
2022-01-20 05:56:21 +00:00
<!DOCTYPE html>
setter
2022-01-20 11:39:57 +00:00
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
<html lang="zh-cmn-Hans">
setter
2022-01-20 05:56:21 +00:00
<head>
setter
2022-01-20 11:39:57 +00:00
<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 网页作者 -->
<meta name="author" content="吃肉的饺子,2659004835@qq.com" />
<!-- 网站说明 -->
setter
2022-05-06 06:05:57 +00:00
<meta name="description" content="卯链" />
setter
2022-01-20 11:39:57 +00:00
<!-- 关键字 -->
setter
2022-05-06 06:05:57 +00:00
<meta name="keywords" content="卯链" />
setter
2022-01-20 11:39:57 +00:00
<!-- 防页面被转码----根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览 -->
<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" />
<!-- 网站标题 -->
setter
2022-05-06 06:05:57 +00:00
<title>卯链</title>
setter
2022-01-20 11:39:57 +00:00
<!-- 标签基本样式 -->
<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 -->
setter
2022-01-20 12:12:22 +00:00
<script type="text/javascript" charset="utf-8">
jQuery(function($){
setter
2022-05-06 07:56:43 +00:00
prependEv();
setter
2022-05-06 06:24:37 +00:00
monitorWindow();
setter
2022-01-20 12:12:22 +00:00
// 窗体改变
$(window).resize(function(){
//监听窗口大小的改变
monitorWindow();
setter
2022-05-06 07:56:43 +00:00
})
setter
2022-01-20 12:12:22 +00:00
})
function creatswiper(){
// banner轮播
var bannerSwiper = new Swiper('.banner-swiper',{
setter
2022-05-06 06:14:39 +00:00
loop:false,
setter
2022-01-20 12:12:22 +00:00
//开启循环播放
autoplay: {
//开启自动播放
delay:3000,
setter
2022-05-06 06:24:37 +00:00
disableOnInteraction: false,
setter
2022-01-20 12:12:22 +00:00
//触摸后不会停止自动滚动
setter
2022-05-06 06:24:37 +00:00
pauseOnMouseEnter: true,
setter
2022-01-20 12:12:22 +00:00
//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
},
setter
2022-05-13 02:42:59 +00:00
simulateTouch: false,//禁止鼠标模拟
allowTouchMove: false,
setter
2022-01-20 12:12:22 +00:00
direction : 'vertical',
//轮播切换方向默认向左：horizontal、向右：vertical
// height: 400,//slide高度
autoHeight: true,
//高度随内容变化
slidesPerView:4,
//显示个数
setter
2022-05-06 06:24:37 +00:00
pagination: {
setter
2022-01-20 12:12:22 +00:00
//分页器
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>';
},
setter
2022-05-06 06:24:37 +00:00
},
effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
setter
2022-01-20 12:12:22 +00:00
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>
setter
2022-05-06 06:01:48 +00:00
<span>${couponMain[i].business_subtitle}</span>
setter
2022-01-20 12:12:22 +00:00
</div>
</div>`
$('.swiper-wrapper').prepend(yspHtml);
$('.slided').remove();
setter
2022-01-21 01:30:53 +00:00
$(`#qrcode${couponMain[i].id}`).qrcode(`https://coupon.scdxtc.cn/coupon_info?id=${couponMain[i].id}&business_code=${couponMain[i].business_code}`);
setter
2022-01-20 12:12:22 +00:00
}
setter
2022-05-06 07:56:43 +00:00
setTimeout(() => {
creatswiper();
}, 300);
setter
2022-01-20 12:12:22 +00:00
}
</script>
setter
2022-01-20 11:39:57 +00:00
<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>
setter
2022-05-13 02:42:59 +00:00
<style>
.body-box{
overflow: hidden;
}
.body-box::-webkit-scrollbar {
width: 0 !important;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
</style>
setter
2022-01-20 05:56:21 +00:00
</head>
setter
2022-05-13 02:42:59 +00:00
<body class="body-box">
setter
2022-01-20 11:39:57 +00:00
<!-- 顶部 -->
<div class="head-box">
<img src="{$screenTopBanner}">
setter
2022-01-20 05:56:21 +00:00
</div>
setter
2022-01-20 11:39:57 +00:00
<!-- banner轮播图 -->
<div class="banner-swiper swiper">
<div class="swiper-wrapper">
setter
2022-01-20 12:12:22 +00:00
<div class="swiper-slide slided"></div>
setter
2022-01-20 11:39:57 +00:00
</div>
<!-- <div class="swiper-pagination"></div> -->
</div>
setter
2022-01-20 12:12:22 +00:00
<script type="text/javascript">
</script>
setter
2022-01-20 11:39:57 +00:00
<!-- 主体内容 -->
<main class="main">
</main>
setter
2022-01-20 05:56:21 +00:00
</body>
setter
2022-01-20 11:39:57 +00:00
</html>