Lee
/
consumer-coupon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

前端完成，扫码待优化

master
Lee 2022-09-03 18:14:57 +08:00
parent 263421326a
commit 6003bcc555
26 changed files with 10839 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
user/bind-phone.html → bind-phone.html
View File

@ -7,21 +7,16 @@
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<!-- css加载 --> <!-- css加载 -->
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="./css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="./js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="./js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="./js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">手机号绑定</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">手机号绑定</div>
</div>
<!-- 内容 --> <!-- 内容 -->
<div class="bind-content border-box"> <div class="bind-content border-box">
<!-- 标题 --> <!-- 标题 -->

44
business/index - 副本.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>活动领券</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript"></script>
<script src="../js/jsQR.js" type="text/javascript"></script>
</head>
<body>
<!-- 头部 -->
<div class="header background-00 color-ff font38 flex">活动领券</div>
<!-- 扫码 -->
<canvas id="qr-canvas"></canvas>
<video id="v" autoplay></video>
<script src="../js/qrcode.js" type="text/javascript"></script>
<script src="../js/scan.js" type="text/javascript"></script>
<!-- 尾部 -->
<div class="footer background-ff border-box">
<div class="foot foot-business font24 flex">
<a href="index.html" class="item flex active">
<img src="../images/icon/icon-tabbar-05.png" alt="核销">
<img src="../images/icon/icon-active-05.png" alt="核销">
<span>核销</span>
</a>
<a href="my.html" class="item flex">
<img src="../images/icon/icon-tabbar-04.png" alt="我的">
<img src="../images/icon/icon-active-04.png" alt="我的">
<span>我的</span>
</a>
</div>
</div>
</body>
</html>

44
business/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>活动领券</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript"></script>
<script src="../js/jsQR.js" type="text/javascript"></script>
</head>
<body>
<!-- 头部 -->
<div class="header background-00 color-ff font38 flex">活动领券</div>
<!-- 扫码 -->
<canvas id="qr-canvas"></canvas>
<video id="v" autoplay></video>
<script src="../js/qrcode.js" type="text/javascript"></script>
<script src="../js/scan.js" type="text/javascript"></script>
<!-- 尾部 -->
<div class="footer background-ff border-box">
<div class="foot foot-business font24 flex">
<a href="index.html" class="item flex active">
<img src="../images/icon/icon-tabbar-05.png" alt="核销">
<img src="../images/icon/icon-active-05.png" alt="核销">
<span>核销</span>
</a>
<a href="my.html" class="item flex">
<img src="../images/icon/icon-tabbar-04.png" alt="我的">
<img src="../images/icon/icon-active-04.png" alt="我的">
<span>我的</span>
</a>
</div>
</div>
</body>
</html>

55
business/my.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>我的</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript"></script>
</head>
<body>
<!-- 头部 -->
<div class="header background-00 color-ff font38 flex">我的</div>
<!-- 个人中心简介 -->
<div class="my-info-bg flex">
<div class="my-info color-ff">
<div class="cover radius100 background-ff flex"><img src="../images/logo.png" alt="头像"></div>
<div class="nick-name font30">CREEP <span>(商家)</span></div>
<div class="bind-phone font24">绑定手机：13438123836</div>
</div>
</div>
<!-- 个人中心内容 -->
<div class="my-content border-box">
<a href="used.html" class="item flex">
<span class="flex">
<img src="../images/icon/icon-my-03.png" alt="已使用卡券" style="width: .52rem;height: .39rem;">
</span>
<p class="font24">已使用卡券</p>
<img src="../images/icon/icon-arrow-right.png" alt="更多">
</a>
</div>
<!-- 尾部 -->
<div class="footer background-ff border-box">
<div class="foot foot-business font24 flex">
<a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-05.png" alt="核销">
<img src="../images/icon/icon-active-05.png" alt="核销">
<span>核销</span>
</a>
<a href="my.html" class="item flex active">
<img src="../images/icon/icon-tabbar-04.png" alt="我的">
<img src="../images/icon/icon-active-04.png" alt="我的">
<span>我的</span>
</a>
</div>
</div>
</body>
</html>

100
business/used.html Normal file
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>已使用卡券</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript"></script>
</head>
<body>
<!-- 头部 -->
<div class="header background-00 color-ff font38 flex">已使用卡券</div>
<!-- 待使用卡券 -->
<div class="card-list card-list-business border-box">
<div class="item radius30 border-box flex">
<div class="info flex">
<div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt">
<span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p>
<p class="font24 color-af clips1">使用商家：掌中宝串串</p>
<p class="copy font24 color-af flex">
券码后6位：asdfgh
<span class="copy-btn color-83">复制完整劵码<em>111</em></span>
</p>
</div>
</div>
</div>
<div class="item radius30 border-box flex">
<div class="info flex">
<div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt">
<span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p>
<p class="font24 color-af clips1">使用商家：无</p>
<p class="copy font24 color-af flex">
券码后6位：asdfgh
<span class="copy-btn color-83">复制完整劵码<em>222</em></span>
</p>
</div>
</div>
</div>
<div class="item radius30 border-box flex">
<div class="info flex">
<div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt">
<span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p>
<p class="font24 color-af clips1">使用商家：无</p>
<p class="copy font24 color-af flex">
券码后6位：asdfgh
<span class="copy-btn color-83">复制完整劵码<em>333</em></span>
</p>
</div>
</div>
</div>
<div class="item radius30 border-box flex">
<div class="info flex">
<div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt">
<span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p>
<p class="font24 color-af clips1">使用商家：无</p>
<p class="copy font24 color-af flex">
券码后6位：asdfgh
<span class="copy-btn color-83">复制完整劵码<em>444</em></span>
</p>
</div>
</div>
</div>
</div>
<!-- 弹窗背景 -->
<div class="pull-bg"></div>
<!-- 复制成功提示 -->
<div class="copy-tips font24 background-ff radius20">复制成功</div>
<!-- 尾部 -->
<div class="footer background-ff border-box">
<div class="foot foot-business font24 flex">
<a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-05.png" alt="核销">
<img src="../images/icon/icon-active-05.png" alt="核销">
<span>核销</span>
</a>
<a href="my.html" class="item flex active">
<img src="../images/icon/icon-tabbar-04.png" alt="我的">
<img src="../images/icon/icon-active-04.png" alt="我的">
<span>我的</span>
</a>
</div>
</div>
</body>
</html>

3
css/common.css
View File

@ -90,12 +90,15 @@ button,input,select,textarea {
.font90{ font-size: .90rem;} .font90{ font-size: .90rem;}
.font100{ font-size: 1.0rem;} .font100{ font-size: 1.0rem;}
.font110{ font-size: 1.1rem;} .font110{ font-size: 1.1rem;}
.font120{ font-size: 1.2rem;}
/* 文字颜色 */ /* 文字颜色 */
.color-ff{ color: #ffffff;} .color-ff{ color: #ffffff;}
.color-af{ color: #afafaf;} .color-af{ color: #afafaf;}
.color-99{ color: #999999;} .color-99{ color: #999999;}
.color-93{ color: #939393;}
.color-ae{ color: #aeaeae;} .color-ae{ color: #aeaeae;}
.color-83{ color: #838383;}
.color-86{ color: #868686;} .color-86{ color: #868686;}
.color-66{ color: #666666;} .color-66{ color: #666666;}
.color-00{ color: #000000;} .color-00{ color: #000000;}

137
css/style.css
View File

@ -1,5 +1,6 @@
/* 头部 */ /* 头部 */
.header { .header {
justify-content: center;
align-items: center; align-items: center;
width: 7.5rem; width: 7.5rem;
height: .94rem; height: .94rem;
@ -9,24 +10,6 @@
z-index: 99; z-index: 99;
transform: translateX(-50%); transform: translateX(-50%);
} }
.header-back {
justify-content: center;
width: .6rem;
height: .4rem;
}
.header-back>img {
width: .4rem;
height: .4rem;
}
.header-title {
width: calc(100% - 1.2rem);
line-height: 1.2;
text-align: center;
}
/* 尾部 */ /* 尾部 */
.footer { .footer {
width: 7.5rem; width: 7.5rem;
@ -54,6 +37,10 @@
width: 25%; width: 25%;
} }
.foot-business>.item{
width: 50%;
}
.foot>.item img { .foot>.item img {
height: .34rem; height: .34rem;
margin-top: .06rem; margin-top: .06rem;
@ -66,7 +53,7 @@
.foot>.item span { .foot>.item span {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: .06rem; margin-top: .02rem;
} }
.foot>.item.active img:nth-of-type(1) { .foot>.item.active img:nth-of-type(1) {
@ -148,11 +135,11 @@
@keyframes scale_name { @keyframes scale_name {
from { from {
transform: scale(.95); transform: scale(.9);
} }
to { to {
transform: scale(1.05); transform: scale(1.1);
} }
} }
@ -372,6 +359,68 @@
height: .5rem; height: .5rem;
} }
/* 商家详情 */
.detail-info{
justify-content: space-between;
align-items: center;
padding: .3rem .5rem;
border-top: .16rem solid #ffd6ac;
border-bottom: .16rem solid #ffd6ac;
}
.detail-info>.cover{
width: 1.3rem;
height: 1.3rem;
overflow: hidden;
}
.detail-info>.cover img{
width: 100%;
min-height: 1.3rem;
}
.detail-info>.txt{
width: calc(100% - 1.65rem);
}
.detail-info>.txt p{
margin-top: .15rem;
}
/* 标题 */
.detail-title{
padding: .2rem .4rem;
margin-top: .2rem;
}
/* 介绍 */
.detail{
padding: 0 .4rem;
}
.detail img{
max-width: 100%;
margin: .1rem auto;
}
/* 地址 */
.address{
padding: 0 .4rem;
}
.addr-map{
width: 100%;
height: 4rem;
}
.addr-txt{
margin: .3rem 0;
}
.addr-txt .item{
justify-content: space-between;
align-items: center;
width: 100%;
height: .64rem;
}
.addr-txt .item p{
width: calc(100% - 0.48rem);
}
.addr-txt .item span{
justify-content: center;
align-items: center;
width: .38rem;
height: .38rem;
}
/* 我的 */ /* 我的 */
.my-info-bg { .my-info-bg {
@ -478,6 +527,41 @@
.card-list .item>.info { .card-list .item>.info {
width: calc(100% - 1.12rem); width: calc(100% - 1.12rem);
} }
.card-list-business .item{
padding: .3rem .25rem;
}
.card-list-business .item>.info {
width: 100%;
}
.card-list-business .item>.info .txt{
min-width: 3.78rem;
}
.card-list-business .item>.info .copy{
justify-content: space-between;
}
.card-list-business .item .copy-btn>em{
display: block;
width: 0;
height: 0;
overflow: hidden;
position: fixed;
top: -5rem;
right: -5rem;
}
/* 复制成功提示 */
.copy-tips{
display: none;
padding: .15rem .3rem;
position: fixed;
left: 50%;
top: 50%;
z-index: 999;
transform: translate(-50%,-50%);
}
.copy-tips.show{
display: block;
}
.card-list .item>.info .price { .card-list .item>.info .price {
margin-right: .3rem; margin-right: .3rem;
@ -572,3 +656,14 @@
align-items: center; align-items: center;
height: .98rem; height: .98rem;
} }
/* 扫码 */
#qr-canvas{
width: 6rem;
height: 6rem;
position: fixed;
left: 50%;
top: 50%;
z-index: 9;
transform: translate(-50%,-50%);
}

BIN
images/detail-01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 KiB

BIN
images/detail-02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
images/icon/icomap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
images/icon/icon-active-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
images/icon/icon-addr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
images/icon/icon-phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/icon/icon-tabbar-05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

136
js/bdmap.js Normal file
View File

@ -0,0 +1,136 @@
//先要加载接口，要在函数外，保证先加载
document.write('<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=O4aFVMSLVl1aiTX2sF40aVfC"></script>');
//显示地图
//参数：显示容器ID，属性(city,addr,title,lawfirm,tel,user,mapx,pic,ismove,piobj,zoom)
function ShowMap(objname,options){
if(options){
this._city = options.city ? options.city : ""; //城市
this._addr = options.addr ? options.addr : ""; //地址
this._title = options.title ? options.title : ""; //信息窗口标题
this._lawfirm = options.lawfirm ? options.lawfirm : ""; //律所
this._tel = options.tel ? options.tel : ""; //电话
this._user = options.user ? options.user : ""; //主任
this._mapx = options.mapx ? options.mapx : ""; //地图坐标
this._pic = options.pic ? options.pic : ""; //图片
this._ismove = options.ismove ? options.ismove : "0"; //是否拖动，1为拖动为设置标注，0为显示。默认0
this._piobj = options.piobj ? options.piobj : ""; //接收拖动坐标的表单ID
this._zoom = options.zoom ? options.zoom : "14"; //放大级别，默认14
}
//设定初始坐标
var point=new BMap.Point(113.63156,34.83794);
//范围为3-18级
var zoom=this._zoom;
//创建地图
var map = new BMap.Map(objname);
//map.enableScrollWheelZoom();
var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM};
map.addControl(new BMap.NavigationControl(opts));
map.centerAndZoom(point, zoom);//设初始化地图。
//设置版权控件位置
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});
map.addControl(cr); //添加版权控件
var bs = map.getBounds(); //返回地图可视区域
//坐标不为空时按坐标显示
if (this._mapx != ""){
var mx=this._mapx.substr(0,this._mapx.indexOf(","));
var my=this._mapx.substr(this._mapx.indexOf(",")+1);
point=new BMap.Point(mx,my);
map.centerAndZoom(point, zoom); //重新调整位置
}
//否则按地址显示
else if (this._addr != ""){
//创建地址解析器实例
var myGeo = new BMap.Geocoder();
//将地址解析结果显示在地图上，并调整地图视野。此过程为异步，所以要重设标注
myGeo.getPoint(this._addr, function(poi){
map.centerAndZoom(poi, zoom);
marker.setPosition(poi); //重调标注位置
}, this._city);
}
//否则按城市显示
else if (this._city != ""){
map.setCenter(this._city); //设置地图中心点。
//此定位无具体坐标，所以显示模式时要清除标注。要延时处理
if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
}
//都为空按IP定位
else{
//创建一个获取本地城市位置的实例
var myCity = new BMap.LocalCity();
//获取城市
myCity.get(function(result){map.setCenter(result.name);});
if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}
}
var icowidth = 20;
var icoheight = 27;
var myIcon = new BMap.Icon("../images/icon/icomap.png", new BMap.Size(icowidth,icoheight));
//创建标注
var marker = new BMap.Marker(point,{icon:myIcon});
//var marker = new BMap.Marker(point);
map.addOverlay(marker); // 将标注添加到地图中
//设置标注时
if (this._ismove=="1"){
marker.enableDragging(); //可拖拽
var label = new BMap.Label("拖拽到您的位置",{offset:new BMap.Size(20,-15)});
label.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
marker.setLabel(label);
var poj=this._piobj; //过程里不支持this，要传给变量
//拖拽设置位置
marker.addEventListener("dragend", function(e){
try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
});
//点击设置位置
map.addEventListener("click", function(e){
marker.setPosition(e.point); //重调标注位置
try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}
});
}
//显示标注时
if (this._ismove=="0"){
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//显示窗口设置
var opts = {width:250,height:110,title : "<font color=#de0011 size=3>" + this._title + "</font>"} //窗口标题
var infotxt="<table border='0'><tr><td valign='top'>"; //窗口内容
if (this._pic != ""){infotxt += "<img src='"+this._pic+"' id='picid' style='float:left;margin-right:5px;padding-top:8px; width=50>";}
infotxt += "</td><td><p style='font-size:12px;line-height:16px;padding-top:8px;'>";
// if (this._lawfirm !=""){infotxt += "<b>公司：</b>" + this._lawfirm + "<br/>";};
if (this._addr !=""){infotxt += "<b>地址：</b>" + this._addr + "<br/>";};
if (this._tel !=""){infotxt += "<b>电话：</b>" + this._tel + "<br/>";};
if (this._user !=""){infotxt += "<b>联系人：</b>" + this._user + "<br/>";};
infotxt += "</p></td></tr></table>";
//显示文本标题
var label2 = new BMap.Label(this._title,{offset:new BMap.Size(20,-15)});
label2.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });
//marker.setLabel(label2);
//创建信息窗口
var infoWindow = new BMap.InfoWindow(infotxt,opts);
marker.addEventListener("mouseover", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow。防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
document.getElementById('picid').onload = function (){infoWindow.redraw();}
});
}
}
//获取地理位置,间隔符
//百度查询接口为异步，所以这里要用异步回调方式
function getBDAddress(callBackFun,spStr){
if (!spStr){spStr="";} //分隔符，默认空
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var point = new BMap.Point(r.point.lng,r.point.lat);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
var addVal = addComp.province + spStr + addComp.city + spStr + addComp.district + spStr + addComp.street + spStr + addComp.streetNumber;
callBackFun(addVal);
});
}
},{enableHighAccuracy: true})
}

10100
js/jsQR.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
js/qrcode.js Normal file
View File

File diff suppressed because one or more lines are too long

92
js/scan.js Normal file
View File

@ -0,0 +1,92 @@
//是否成功调用getUserMedia标识
var gUM = false;
//画布getContext对象
var gCtx = null;
// 数据流对象
var imageData = null;
//视频展示对象
var v = document.getElementById("v");
var n = navigator;
// 画布元素
var gCanvas = document.getElementById("qr-canvas");
gCtx = gCanvas.getContext('2d');
qrcode.callback = function(e) {
//结果回调
alert(e);
}
//不同getUserMedia处理
if (n.getUserMedia) {
// 移动设备打开后置摄像头【 facingMode: "environment"】
n.getUserMedia({
video: {
facingMode: "environment"
}
}, success, error);
} else if (n.mediaDevices.getUserMedia) {
n.mediaDevices.getUserMedia({
video: {
facingMode: "environment"
},
audio: false
})
.then(success)
.catch(error);
} else if (n.webkitGetUserMedia) {
webkit = true;
n.webkitGetUserMedia({
video: {
facingMode: "environment"
}
}, success, error);
} else if (n.mozGetUserMedia) {
moz = true;
n.mozGetUserMedia({
video: {
facingMode: "environment"
}
}, success, error);
}
//getUserMedia调用成功
function success(stream) {
v = document.getElementById("v");
try {
v.srcObject = stream;
} catch {
//这里是兼容写法
let compatibleURL = window.URL || window.webkitURL;
v.src = compatibleURL.createObjectURL(stream);
}
gUM = true;
setTimeout(captureToCanvas, 500);
}
//getUserMedia调用失败
function error(error) {
alert(error)
gUM = false;
return;
}
//将视频流放到画布
function captureToCanvas() {
if (gUM) {
gCtx.drawImage(v, 0, 0);
setTimeout(captureToCanvas, 500);
imageData = gCtx.getImageData(0, 0, 600, 600);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
alert('code.data:' + code.data);
if (code) {
window.location.href = code.data;
} else {
alert("识别错误")
}
}
}

33
js/script.js
View File

@ -50,8 +50,17 @@ jQuery(function($){
if($('.navigation-btn').length){ if($('.navigation-btn').length){
// 打开弹窗 // 打开弹窗
$('.navigation-btn').click(function(){ $('.navigation-btn').click(function(){
// 高德地图 // 百度地图(纬度，经度)
window.open('http://uri.amap.com/marker?position=104.098515,30.763954&name=万圣家园B区&coordinate=gaode&callnative=1') window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
});
}
// 详情页导航
if($('.addr-item-btn').length){
// 打开弹窗
$('.addr-item-btn').click(function(){
// 百度地图(纬度，经度)
window.open('http://api.map.baidu.com/marker?location=30.763954,104.098515&title=万圣家园B区&content=居民小区&output=html')
}); });
} }
@ -68,4 +77,24 @@ jQuery(function($){
$('.card-window').removeClass('show'); $('.card-window').removeClass('show');
}); });
} }
// 复制完整券码
if($('.copy-btn').length){
$('.copy-btn').click(function() {
var copyText = $(this).find('em').text(); //获取对象
var oInput = document.createElement('input');//创建一个input标签
oInput.value = copyText;//设置value属性
document.body.appendChild(oInput);//挂载到body下面
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
$('.pull-bg').addClass('show');
$('.copy-tips').addClass('show');
setTimeout(function(){
$('.pull-bg').removeClass('show');
$('.copy-tips').removeClass('show');
},1000)
})
}
}) })

15
user/business.html
View File

@ -11,18 +11,13 @@
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">商家展示</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">商家展示</div>
</div>
<!-- 商户搜索 --> <!-- 商户搜索 -->
<div class="search radius25 border-box flex"> <div class="search radius25 border-box flex">
<input class="search-input font24" type="text" placeholder="商户搜索"> <input class="search-input font24" type="text" placeholder="商户搜索">
@ -105,7 +100,7 @@
</div> </div>
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

66
user/detail.html
View File

@ -3,29 +3,75 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title> <title>商家详情</title>
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<!-- css加载 --> <!-- css加载 -->
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">商家详情</div>
<div class="header-back flex"> <!-- 商家概况 -->
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> --> <div class="detail-info flex">
<div class="cover radius30"><img src="../images/recommend.jpg" alt="商家详情"></div>
<div class="txt">
<h1 class="font30">深夜食堂-万安店</h1>
<p class="font24 color-93">营业时间：07：30-22：00</p>
</div> </div>
<div class="header-title font38">商家详情</div>
</div> </div>
<!-- 标题 -->
<div class="detail-title font36 border-box"><strong>商家介绍</strong></div>
<!-- 商家介绍 -->
<div class="detail border-box">
<div class="detail-txt font30">
<p><img src="../images/detail-01.jpg" alt="商家介绍"></p>
<p>黄山菜饭骨头汤(虹桥公馆店)位于苏州市昆山市商银路与溪桥路交汇处北标签: 餐饮 黄焖鸡店 快餐 中式快餐 餐馆 小吃 小吃快餐店 小吃快餐 推荐菜: 统一冰红茶 荷包蛋 卤蛋分类</p>
<p><img src="../images/detail-02.jpg" alt="商家介绍"></p>
</div>
</div>
<!-- 标题 -->
<div class="detail-title font36 border-box"><strong>商家地址</strong></div>
<!-- 商家地址 -->
<div class="address border-box">
<div class="addr-map" id="addr-map"></div>
<div class="addr-txt">
<div class="item addr-item-btn flex">
<p class="font24"><strong>地址：四川省成都市天府新区华阳镇</strong></p>
<span class="radius100 background-f35 flex">
<img src="../images/icon/icon-addr.png" alt="导航" style="width: .26rem; height: .26rem;">
</span>
</div>
<a class="item flex" href="tel:028-203029302">
<p class="font24"><strong>联系电话：028-203029302</strong></p>
<span class="radius100 background-f35 flex">
<img src="../images/icon/icon-phone.png" alt="电话" style="width: .22rem; height: .22rem;">
</span>
</a>
</div>
</div>
<script src="../js/bdmap.js" type="text/javascript"></script>
<script type="text/javascript">
ShowMap("addr-map",{
city:'四川省',
addr:'四川省成都市天府新区华阳镇',
title:'深夜食堂-万安店',
lawfirm:'深夜食堂-万安店',
tel:'028-203029302',
mapx:'',
ismove:'0',
piobj:'nxp',
zoom:10
});
</script>
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

17
user/index.html
View File

@ -11,19 +11,14 @@
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css"> <link rel="stylesheet" href="../css/swiper-bundle.min.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
<script src="../js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/swiper-bundle.min.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">活动领券</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">活动领券</div>
</div>
<!-- 轮播图 --> <!-- 轮播图 -->
<div class="banner"> <div class="banner">
<div class="banner-swiper swiper"> <div class="banner-swiper swiper">
@ -107,7 +102,7 @@
</div> </div>
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex active"> <a href="index.html" class="item flex active">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

15
user/luck-draw.html
View File

@ -10,18 +10,13 @@
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">抽奖</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">抽奖</div>
</div>
<!-- 内容 --> <!-- 内容 -->
<div class="luck-draw"> <div class="luck-draw">
<div class="turntable-title"> <div class="turntable-title">
@ -43,7 +38,7 @@
</div> </div>
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

24
user/my.html
View File

@ -3,25 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title> <title>我的</title>
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<!-- css加载 --> <!-- css加载 -->
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">我的</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">我的</div>
</div>
<!-- 个人中心简介 --> <!-- 个人中心简介 -->
<div class="my-info-bg flex"> <div class="my-info-bg flex">
<div class="my-info color-ff"> <div class="my-info color-ff">
@ -32,13 +27,6 @@
</div> </div>
<!-- 个人中心内容 --> <!-- 个人中心内容 -->
<div class="my-content border-box"> <div class="my-content border-box">
<a href="bind-phone.html" class="item flex">
<span class="flex">
<img src="../images/icon/icon-my-01.png" alt="绑定手机" style="width: .25rem;height: .38rem;">
</span>
<p class="font24">手机号绑定</p>
<img src="../images/icon/icon-arrow-right.png" alt="更多">
</a>
<a href="not-used.html" class="item flex"> <a href="not-used.html" class="item flex">
<span class="flex"> <span class="flex">
<img src="../images/icon/icon-my-02.png" alt="待使用卡券" style="width: .43rem;height: .43rem;"> <img src="../images/icon/icon-my-02.png" alt="待使用卡券" style="width: .43rem;height: .43rem;">
@ -57,7 +45,7 @@
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

23
user/not-used.html
View File

@ -10,23 +10,18 @@
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">待使用卡券</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">待使用卡券</div>
</div>
<!-- 待使用卡券 --> <!-- 待使用卡券 -->
<div class="card-list border-box"> <div class="card-list border-box">
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-f35 font110">100<span class="background-f35 radius100 font24 color-ff">元</span></div> <div class="price color-f35 font120">100<span class="background-f35 radius100 font24 color-ff">元</span></div>
<div class="txt"> <div class="txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -38,7 +33,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-f35 font110">100<span class="background-f35 radius100 font24 color-ff">元</span></div> <div class="price color-f35 font120">100<span class="background-f35 radius100 font24 color-ff">元</span></div>
<div class="txt"> <div class="txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -50,7 +45,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-f35 font110">100<span class="background-f35 radius100 font24 color-ff">元</span></div> <div class="price color-f35 font120">100<span class="background-f35 radius100 font24 color-ff">元</span></div>
<div class="txt"> <div class="txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -62,7 +57,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-f35 font110">100<span class="background-f35 radius100 font24 color-ff">元</span></div> <div class="price color-f35 font120">100<span class="background-f35 radius100 font24 color-ff">元</span></div>
<div class="txt"> <div class="txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -87,7 +82,7 @@
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">

25
user/used.html
View File

@ -3,30 +3,25 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>待使用卡券</title> <title>已使用卡券</title>
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<!-- css加载 --> <!-- css加载 -->
<link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/style.css">
<!-- js加载 --> <!-- js加载 -->
<script src="../js/jquery-3.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-3.6.1.min.js" type="text/javascript"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script> <script src="../js/base.js" type="text/javascript"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script> <script src="../js/script.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<!-- 头部 --> <!-- 头部 -->
<div class="header background-00 color-ff flex"> <div class="header background-00 color-ff font38 flex">已使用卡券</div>
<div class="header-back flex">
<!-- <img src="../images/icon/icon-back.png" alt="返回" onclick="window.history.go(-1)"> -->
</div>
<div class="header-title font38">待使用卡券</div>
</div>
<!-- 待使用卡券 --> <!-- 待使用卡券 -->
<div class="card-list border-box"> <div class="card-list border-box">
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-ae font110">100<span class="background-ae radius100 font24 color-ff">元</span></div> <div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt"> <div class="txt used-txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -39,7 +34,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-ae font110">100<span class="background-ae radius100 font24 color-ff">元</span></div> <div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt"> <div class="txt used-txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -52,7 +47,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-ae font110">100<span class="background-ae radius100 font24 color-ff">元</span></div> <div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt"> <div class="txt used-txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -65,7 +60,7 @@
</div> </div>
<div class="item radius30 border-box flex"> <div class="item radius30 border-box flex">
<div class="info flex"> <div class="info flex">
<div class="price color-ae font110">100<span class="background-ae radius100 font24 color-ff">元</span></div> <div class="price color-ae font120">100<span class="background-ae radius100 font24 color-ff">元</span></div>
<div class="txt used-txt"> <div class="txt used-txt">
<span class="font48">消费券</span> <span class="font48">消费券</span>
<p class="font24 color-af">有效期至：2021.03.02</p> <p class="font24 color-af">有效期至：2021.03.02</p>
@ -80,7 +75,7 @@
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer background-ff border-box"> <div class="footer background-ff border-box">
<div class="foot flex"> <div class="foot font24 flex">
<a href="index.html" class="item flex"> <a href="index.html" class="item flex">
<img src="../images/icon/icon-tabbar-01.png" alt="首页"> <img src="../images/icon/icon-tabbar-01.png" alt="首页">
<img src="../images/icon/icon-active-01.png" alt="首页"> <img src="../images/icon/icon-active-01.png" alt="首页">