前端完成
commit
8524393dd4
|
|
@ -0,0 +1,31 @@
|
|||
<!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="bind-content border-box">
|
||||
<!-- 标题 -->
|
||||
<div class="bind-phone-title font36">手机号绑定</div>
|
||||
<!-- 手机号 -->
|
||||
<div class="phone">
|
||||
<div class="sub-title color-99 font30">手机号</div>
|
||||
<input class="phone-input font30" type="number" placeholder="请输入手机号">
|
||||
</div>
|
||||
<!-- 提交 -->
|
||||
<div class="bind-btn radius25 background-f35 color-ff font36 flex">立即绑定</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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 http-equiv="refresh" content="3;url=write-off.html">
|
||||
<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="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>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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="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" style="width: .42rem;">
|
||||
<img src="../images/icon/icon-my-01.png" alt="已核销卡券" style="width: .39rem;height: .36rem;">
|
||||
</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>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!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="card-list border-box">
|
||||
<div class="item card-item radius30 border-box">
|
||||
<div class="info flex">
|
||||
<div class="price color-f35 font62"><em class="font28">￥</em>1000</div>
|
||||
<div class="used-txt">
|
||||
<span class="font36">满10万减1000元</span>
|
||||
<p class="font24 color-af">使用日期：2022年1月12日</p>
|
||||
<p class="font24 color-af clips1">使用用户：creep</p>
|
||||
<p class="copy font24 color-af flex">
|
||||
券码后6位：asdfgh
|
||||
<span class="copy-btn color-83">复制完整劵码<em>asdfgh</em></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item card-item radius30 border-box">
|
||||
<div class="info flex">
|
||||
<div class="price color-f35 font62"><em class="font28">￥</em>1000</div>
|
||||
<div class="used-txt">
|
||||
<span class="font36">满10万减1000元</span>
|
||||
<p class="font24 color-af">使用日期：2022年1月12日</p>
|
||||
<p class="font24 color-af clips1">使用用户：creep</p>
|
||||
<p class="copy font24 color-af flex">
|
||||
券码后6位：asdfgh
|
||||
<span class="copy-btn color-83">复制完整劵码<em>asdfgh</em></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item card-item radius30 border-box">
|
||||
<div class="info flex">
|
||||
<div class="price color-f35 font62"><em class="font28">￥</em>1000</div>
|
||||
<div class="used-txt">
|
||||
<span class="font36">满10万减1000元</span>
|
||||
<p class="font24 color-af">使用日期：2022年1月12日</p>
|
||||
<p class="font24 color-af clips1">使用用户：creep</p>
|
||||
<p class="copy font24 color-af flex">
|
||||
券码后6位：asdfgh
|
||||
<span class="copy-btn color-83">复制完整劵码<em>asdfgh</em></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item card-item radius30 border-box">
|
||||
<div class="info flex">
|
||||
<div class="price color-f35 font62"><em class="font28">￥</em>1000</div>
|
||||
<div class="used-txt">
|
||||
<span class="font36">满10万减1000元</span>
|
||||
<p class="font24 color-af">使用日期：2022年1月12日</p>
|
||||
<p class="font24 color-af clips1">使用用户：creep</p>
|
||||
<p class="copy font24 color-af flex">
|
||||
券码后6位：asdfgh
|
||||
<span class="copy-btn color-83">复制完整劵码<em>asdfgh</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>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!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="write-off border-box">
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">核销码后6位</div>
|
||||
<input type="text" value="20930s" disabled>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">购车合同<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">车辆登记证<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">发票<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 核销按钮 -->
|
||||
<div class="write-off-btns font36 border-box">
|
||||
<div class="btn confirm-btn radius30 background-f35 flex">立即核销</div>
|
||||
<a href="index.html" class="btn back-btn radius30 background-ae flex">重新扫码</a>
|
||||
</div>
|
||||
|
||||
<!-- 尾部 -->
|
||||
<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>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "微软雅黑", Helvetica, STHeiTi, sans-serif;
|
||||
-webkit-text-size-adjust: 100% !important; /*禁止IOS调整字体大小*/
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: .96rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 1.5;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
ul,ol,li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
em,ins{
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
|
||||
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
||||
text-decoration: none;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0; /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
||||
vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ① */
|
||||
object-fit: cover; /* 取消图片底侧有空白缝隙的问题 ② */
|
||||
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
button,input,select,textarea {
|
||||
border: 0; /* 去掉边框 */
|
||||
background: none; /* 去掉背景 */
|
||||
-webkit-appearance: none; /*去掉webkit默认的表单样式*/
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
|
||||
outline: none; /* 去掉获取焦点时边框 */
|
||||
}
|
||||
|
||||
/* flex布局 */
|
||||
.flex {display: flex;}
|
||||
|
||||
/* 盒模型 */
|
||||
.border-box{box-sizing: border-box;}
|
||||
|
||||
/* 圆角 */
|
||||
.radius10{border-radius: .10rem;}
|
||||
.radius15{border-radius: .15rem;}
|
||||
.radius20{border-radius: .20rem;}
|
||||
.radius25{border-radius: .25rem;}
|
||||
.radius30{border-radius: .30rem;}
|
||||
.radius35{border-radius: .35rem;}
|
||||
.radius40{border-radius: .40rem;}
|
||||
.radius45{border-radius: .45rem;}
|
||||
.radius50{border-radius: .50rem;}
|
||||
.radius100{border-radius: 100%;}
|
||||
|
||||
/* 字体 */
|
||||
.font18{ font-size: .18rem;}
|
||||
.font20{ font-size: .20rem;}
|
||||
.font22{ font-size: .22rem;}
|
||||
.font24{ font-size: .24rem;}
|
||||
.font26{ font-size: .26rem;}
|
||||
.font28{ font-size: .28rem;}
|
||||
.font30{ font-size: .30rem;}
|
||||
.font32{ font-size: .32rem;}
|
||||
.font34{ font-size: .34rem;}
|
||||
.font36{ font-size: .36rem;}
|
||||
.font38{ font-size: .38rem;}
|
||||
.font40{ font-size: .40rem;}
|
||||
.font42{ font-size: .42rem;}
|
||||
.font44{ font-size: .44rem;}
|
||||
.font46{ font-size: .46rem;}
|
||||
.font48{ font-size: .48rem;}
|
||||
.font50{ font-size: .50rem;}
|
||||
.font60{ font-size: .60rem;}
|
||||
.font62{ font-size: .62rem;}
|
||||
.font70{ font-size: .70rem;}
|
||||
.font80{ font-size: .80rem;}
|
||||
.font90{ font-size: .90rem;}
|
||||
.font100{ font-size: 1.0rem;}
|
||||
.font110{ font-size: 1.1rem;}
|
||||
.font120{ font-size: 1.2rem;}
|
||||
|
||||
/* 文字颜色 */
|
||||
.color-ff{ color: #ffffff;}
|
||||
.color-af{ color: #afafaf;}
|
||||
.color-99{ color: #999999;}
|
||||
.color-93{ color: #939393;}
|
||||
.color-ae{ color: #aeaeae;}
|
||||
.color-83{ color: #838383;}
|
||||
.color-86{ color: #868686;}
|
||||
.color-66{ color: #666666;}
|
||||
.color-2c{ color: #2c2c2c;}
|
||||
.color-00{ color: #000000;}
|
||||
.color-f35{ color: #f35b00;}
|
||||
|
||||
/* 背景颜色 */
|
||||
.background-00{ background-color: #000000;}
|
||||
.background-ff{ background-color: #ffffff;}
|
||||
.background-f35{ background-color: #f35b00;}
|
||||
.background-ae{ background-color: #aeaeae;}
|
||||
|
||||
/* 文字行数 */
|
||||
.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
|
||||
|
|
@ -0,0 +1,857 @@
|
|||
/* 轮播图 */
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 3.64rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.banner img {
|
||||
width: 100%;
|
||||
min-height: 3.64rem;
|
||||
}
|
||||
|
||||
/* 首页内容区 */
|
||||
.index-content {
|
||||
background-color: #fed7b0;
|
||||
padding: .45rem .2rem;
|
||||
border-top: .02rem solid #eeb94f;
|
||||
}
|
||||
|
||||
/* 活动 */
|
||||
.index-content .section {
|
||||
padding: .1rem;
|
||||
background-image: linear-gradient(to top, #fec44b, #fff8b4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-box {
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.index-content .section:nth-of-type(1) .section-box,
|
||||
.index-content .section:nth-of-type(2) .section-box {
|
||||
padding: .62rem .36rem .3rem;
|
||||
}
|
||||
|
||||
.index-content .section:nth-of-type(3) .section-box {
|
||||
padding: .48rem .36rem;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.activity-time .envelopes {
|
||||
width: 5.03rem;
|
||||
height: 3.95rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.activity-time .envelopes>img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activity-time .envelopes>p {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.25rem;
|
||||
height: .58rem;
|
||||
background-image: linear-gradient(to top, #fed383, #fdf0c2);
|
||||
color: #ec294c;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: calc(50% - 1.125rem);
|
||||
bottom: .7rem;
|
||||
z-index: 1;
|
||||
animation: scale_name 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes scale_name {
|
||||
from {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-info .txt {
|
||||
width: 100%;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.activity-info .survey>p {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.activity-info .introduce {
|
||||
line-height: 1.7;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
/* 商家推荐 */
|
||||
.recommend-title {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 3.2rem;
|
||||
height: .88rem;
|
||||
background-color: #ff353f;
|
||||
border: .1rem solid #ffde77;
|
||||
border-radius: .44rem;
|
||||
text-indent: .04rem;
|
||||
letter-spacing: .04rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: -0.49rem;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.recommend .item {
|
||||
width: calc(33.33% - .16rem);
|
||||
margin: .25rem .24rem 0 0;
|
||||
}
|
||||
|
||||
.recommend .item:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.recommend .item>.img {
|
||||
width: 100%;
|
||||
height: 1.9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recommend .item>.img img {
|
||||
width: 100%;
|
||||
min-height: 1.9rem;
|
||||
}
|
||||
|
||||
.recommend .item>.txt {
|
||||
margin: .2rem 0 .1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 领券 */
|
||||
.luck-draw {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 0.96rem);
|
||||
background-image: url(../images/luck-draw-bg.jpg);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: .45rem .2rem;
|
||||
}
|
||||
|
||||
.card-list .item {
|
||||
align-items: center;
|
||||
height: 1.76rem;
|
||||
margin-bottom: .45rem;
|
||||
}
|
||||
|
||||
.card-list .item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-txt {
|
||||
width: calc(100% - 2.36rem);
|
||||
height: 100%;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
|
||||
.card-txt p {
|
||||
margin-top: .13rem;
|
||||
}
|
||||
|
||||
.card-txt strong {
|
||||
display: block;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.card-txt span {
|
||||
display: block;
|
||||
margin-top: .02rem;
|
||||
}
|
||||
|
||||
.card-btn,
|
||||
.use-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.36rem;
|
||||
height: 100%;
|
||||
border-radius: 0 .08rem .08rem 0;
|
||||
background-image: url(../images/card-btn.png);
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-btn strong,
|
||||
.use-btn strong {
|
||||
display: block;
|
||||
text-indent: .18rem;
|
||||
}
|
||||
|
||||
.grayscale-btn {
|
||||
background-image: url(../images/grayscale-btn.png);
|
||||
}
|
||||
|
||||
.card-btn img,
|
||||
.use-btn img {
|
||||
height: .84rem;
|
||||
margin-left: .13rem;
|
||||
}
|
||||
|
||||
/* 已核销列表 */
|
||||
.card-list .card-item {
|
||||
height: auto;
|
||||
padding: .25rem;
|
||||
box-shadow: 0 0 .16rem rgba(243, 91, 0, .17);
|
||||
}
|
||||
|
||||
.card-item .info {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-item .price {
|
||||
width: 2.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-item .used-txt {
|
||||
width: calc(100% - 2.6rem);
|
||||
}
|
||||
|
||||
.card-item .used-txt>span {
|
||||
display: block;
|
||||
margin-bottom: .04rem;
|
||||
}
|
||||
|
||||
.card-item .used-txt>p:last-child {
|
||||
margin-top: .08rem;
|
||||
}
|
||||
|
||||
.card-item>.info .copy {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-item .copy-btn>em {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: -5rem;
|
||||
right: -5rem;
|
||||
}
|
||||
|
||||
|
||||
/* 商户展示 */
|
||||
.search {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - .5rem);
|
||||
height: .86rem;
|
||||
margin: .3rem auto 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-select-bg {
|
||||
width: 1.94rem;
|
||||
border: .02rem solid #868686;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 .3rem;
|
||||
color: #868686;
|
||||
}
|
||||
|
||||
.search-select-bg>img {
|
||||
display: block;
|
||||
width: .14rem;
|
||||
height: .3rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: .15rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.search-input-bg {
|
||||
align-items: center;
|
||||
width: calc(100% - 2.1rem);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
line-height: .8rem;
|
||||
border-radius: .25rem 0 0 .25rem;
|
||||
border: .02rem solid #868686;
|
||||
border-right: 0;
|
||||
padding: 0 .3rem;
|
||||
-webkit-appearance: none;
|
||||
color: #868686;
|
||||
}
|
||||
|
||||
.search-input::-webkit-input-placeholder {
|
||||
color: #868686;
|
||||
}
|
||||
|
||||
.search-input::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: .96rem;
|
||||
height: 100%;
|
||||
border-radius: 0 .25rem .25rem 0;
|
||||
}
|
||||
|
||||
.search-btn>img {
|
||||
width: .4rem;
|
||||
height: .4rem;
|
||||
filter: grayscale(100%) brightness(100);
|
||||
}
|
||||
|
||||
/* 商户列表 */
|
||||
.business-list {
|
||||
padding: 0 .25rem .3rem;
|
||||
}
|
||||
|
||||
.business-list .item {
|
||||
justify-content: space-between;
|
||||
border: .04rem solid #ffb285;
|
||||
padding: .18rem;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
.business-list .item .img {
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.business-list .item .img img {
|
||||
width: 100%;
|
||||
min-height: 1.9rem;
|
||||
}
|
||||
|
||||
.business-list .item .txt {
|
||||
width: calc(100% - 2.15rem);
|
||||
}
|
||||
|
||||
.business-list .item .txt>a {
|
||||
display: block;
|
||||
height: 1.4rem;
|
||||
}
|
||||
|
||||
.business-list .item .txt p {
|
||||
margin-top: .1rem;
|
||||
}
|
||||
|
||||
.business-tips {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.navigation-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1.9rem;
|
||||
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 {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.85rem;
|
||||
background-image: url(../images/my-bg.jpg);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.my-info {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-info .cover {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1.9rem;
|
||||
height: 1.9rem;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-info .cover img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.my-info .nick-name {
|
||||
margin: .12rem 0;
|
||||
}
|
||||
|
||||
/* 内容 */
|
||||
.my-content {
|
||||
padding: 0 .5rem .3rem;
|
||||
margin-top: .12rem;
|
||||
}
|
||||
|
||||
.my-content .item {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: .92rem;
|
||||
border-bottom: .02rem solid #d6d6d6;
|
||||
}
|
||||
|
||||
.my-content .item>span {
|
||||
justify-content: center;
|
||||
width: .6rem;
|
||||
}
|
||||
|
||||
.my-content .item>p {
|
||||
width: calc(100% - .74rem);
|
||||
}
|
||||
|
||||
.my-content .item>img {
|
||||
width: .14rem;
|
||||
}
|
||||
|
||||
/* 绑定手机号 */
|
||||
.bind-content {
|
||||
padding: 0 .4rem;
|
||||
}
|
||||
|
||||
.bind-phone-title {
|
||||
margin: .7rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
width: 100%;
|
||||
height: .76rem;
|
||||
border-bottom: .02rem solid #d6d6d6;
|
||||
}
|
||||
|
||||
.phone-input::-webkit-input-placeholder {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.bind-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 5.6rem;
|
||||
height: .96rem;
|
||||
margin: .7rem auto 0;
|
||||
}
|
||||
|
||||
/* 待使用&已使用 */
|
||||
.use-txt {
|
||||
box-shadow: 0 0 .16rem rgba(243, 91, 0, .17);
|
||||
}
|
||||
|
||||
/* 复制成功提示 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 核销 */
|
||||
.pull-bg {
|
||||
display: none;
|
||||
width: 7.5rem;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
z-index: 666;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.pull-bg.show,
|
||||
.submit-btn.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-window {
|
||||
display: none;
|
||||
width: 6.5rem;
|
||||
padding: .48rem .48rem .6rem;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.card-window.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-code {
|
||||
width: 2.8rem;
|
||||
margin: .48rem auto;
|
||||
}
|
||||
|
||||
.card-code>img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: .98rem;
|
||||
}
|
||||
|
||||
/* 扫码 */
|
||||
#qr-canvas {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
/* 导航弹窗 */
|
||||
.navigation-box {
|
||||
width: 7.5rem;
|
||||
height: 0;
|
||||
border-radius: .3rem .3rem 0 0;
|
||||
box-shadow: 0 0 .5rem rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.navigation-box.show {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.navigation-box .item {
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
border-bottom: .02rem solid #e1e1e1;
|
||||
}
|
||||
|
||||
.navigation-box .item:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 核销数据 */
|
||||
.write-off {
|
||||
padding: .5rem .5rem 0;
|
||||
}
|
||||
|
||||
.write-off .item {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.write-off .item .title {
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.write-off .item:first-child {
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
|
||||
.write-off .item:first-child .title {
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
.write-off .item:first-child input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: .4rem;
|
||||
font-size: .3rem;
|
||||
}
|
||||
|
||||
.write-off .item .title>em {
|
||||
margin-left: .2rem;
|
||||
}
|
||||
|
||||
.write-off .item .img {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.write-off .item .img>div {
|
||||
width: 1.72rem;
|
||||
height: 1.72rem;
|
||||
border: 1px solid #080808;
|
||||
margin-top: .3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.write-off .item .img>div:nth-of-type(1),
|
||||
.write-off .item .img>div:nth-of-type(2),
|
||||
.write-off .item .img>div:nth-of-type(3){
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.upload-img {
|
||||
margin-right: .3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-img .del-btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: .36rem;
|
||||
height: .36rem;
|
||||
font-style: normal;
|
||||
background-color: #ec294c;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.upload-img .del-btn>em{
|
||||
font-size: .24rem;
|
||||
color: #ffffff;
|
||||
transform: scaleX(1.36) rotateZ(-2deg);
|
||||
}
|
||||
|
||||
.upload-img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-btn img {
|
||||
width: .54rem;
|
||||
}
|
||||
|
||||
.upload-btn em {
|
||||
display: block;
|
||||
margin: .25rem 0 .14rem;
|
||||
}
|
||||
|
||||
.upload-btn>input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 核销按钮 */
|
||||
.write-off-btns {
|
||||
width: 5.6rem;
|
||||
margin: 0 auto;
|
||||
padding: .6rem 0 .3rem;
|
||||
}
|
||||
|
||||
.write-off-btns>.btn {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
/* 领券弹窗 */
|
||||
.collect-coupons{
|
||||
display: none;
|
||||
width: calc(100% - 1rem);
|
||||
height: 88vh;
|
||||
transform: translate(-50%,-50%);
|
||||
background-color: #ffffff;
|
||||
border-radius: .3rem;
|
||||
padding-bottom: .5rem !importants;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
.collect-coupons.show{
|
||||
display: block;
|
||||
}
|
||||
.collect-coupons-list{
|
||||
width: 100%;
|
||||
max-height: calc(88vh - 1rem);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
.collect-coupons-list>.item:first-child{
|
||||
margin-bottom: .2rem !important;
|
||||
}
|
||||
|
||||
.collect-coupons-list .code-btn{
|
||||
width: 3.6rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 尾部 */
|
||||
.footer {
|
||||
width: 7.5rem;
|
||||
height: .96rem;
|
||||
box-shadow: 0 0 .4rem rgba(243, 91, 0, .4);
|
||||
padding: 0 .2rem;
|
||||
overflow-x: hidden;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.foot {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: .96rem;
|
||||
}
|
||||
|
||||
.foot>.item {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.foot-business>.item {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.foot>.item img {
|
||||
height: .34rem;
|
||||
margin-top: .06rem;
|
||||
}
|
||||
|
||||
.foot>.item img:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.foot>.item span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: .02rem;
|
||||
}
|
||||
|
||||
.foot>.item.active img:nth-of-type(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.foot>.item.active img:nth-of-type(2) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.foot>.item.active span {
|
||||
color: #f35b00;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,13 @@
|
|||
!(function(win, doc, orw) {
|
||||
var docEle = doc.documentElement;
|
||||
fnResetHtmlFontSize();
|
||||
function fnResetHtmlFontSize() {
|
||||
var width = docEle.clientWidth;
|
||||
if (width >= orw) {
|
||||
docEle.style.fontSize = '100px';
|
||||
} else {
|
||||
docEle.style.fontSize = (width / orw) * 100 + 'px';
|
||||
}
|
||||
}
|
||||
win.addEventListener('resize', fnResetHtmlFontSize, false);
|
||||
})(window, document, 750);
|
||||
|
|
@ -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})
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,378 @@
|
|||
jQuery(function ($) {
|
||||
// 轮播
|
||||
if ($('.banner-swiper').length) {
|
||||
var bannerSwiper = new Swiper('.banner-swiper', {
|
||||
loop: true,//开启循环播放
|
||||
autoplay: {//开启自动播放
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,//触摸后不会停止自动滚动
|
||||
pauseOnMouseEnter: true,//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 抽奖
|
||||
var turntableFlag = true;
|
||||
if ($('.pointer').length) {
|
||||
// 开始抽奖
|
||||
$('body').on('click', '.pointer', function () {
|
||||
if (turntableFlag) {
|
||||
turntableFlag = false;
|
||||
if ($('.pointer').hasClass('pointer-handle')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$('.pointer').addClass('pointer-handle');
|
||||
$.post('/coupon/getResult', function (res) {
|
||||
if (res.code === 0) {
|
||||
let couponPosition = 0;
|
||||
let btnMsg = res.data.position === 0 ? '关闭' : '收入卡包';
|
||||
let notice = res.data.msg;
|
||||
switch (res.data.position) {
|
||||
case 0:
|
||||
couponPosition = 360 * 4 - 120;
|
||||
break;
|
||||
case 1:
|
||||
couponPosition = 360 * 4 - 60;
|
||||
break;
|
||||
case 2:
|
||||
couponPosition = 360 * 4 - 180;
|
||||
break;
|
||||
case 3:
|
||||
couponPosition = 360 * 4 - 240;
|
||||
break;
|
||||
case 4:
|
||||
couponPosition = 360 * 4 - 300;
|
||||
break;
|
||||
case 5:
|
||||
couponPosition = 360 * 4;
|
||||
break;
|
||||
}
|
||||
|
||||
$('.turntable').css({transition: 'all 3s'});
|
||||
$('.turntable').css({transform: 'rotate(' + couponPosition + 'deg)'});
|
||||
$('.tips-btn').text(btnMsg);
|
||||
$('.tips-msg').text(notice);
|
||||
|
||||
setTimeout(function () {
|
||||
showMsg();
|
||||
}, 3000)
|
||||
} else if (res.code === 6001) {
|
||||
window.location.href = '/login/index';
|
||||
} else {
|
||||
if (res.code === 4028) {
|
||||
turntableFlag = true;
|
||||
} else {
|
||||
$('.tips-btn').text('关闭');
|
||||
showMsg(res.msg);
|
||||
}
|
||||
}
|
||||
// console.log(res, '结果');
|
||||
// $('.pointer').removeClass('pointer-handle');
|
||||
});
|
||||
setTimeout(function () {
|
||||
$('.pointer').removeClass('pointer-handle');
|
||||
turntableFlag = true;
|
||||
}, 3000)
|
||||
}
|
||||
});
|
||||
// 关闭弹窗
|
||||
$('.tips-btn-game').click(function () {
|
||||
$('.turntable').css({transition: 'all 0s'});
|
||||
$('.turntable').css({transform: 'rotate(0)'});
|
||||
closeMsg();
|
||||
turntableFlag = true;
|
||||
});
|
||||
}
|
||||
|
||||
function showMsg(msg = '') {
|
||||
if (msg !== '') {
|
||||
$('.tips-msg').text(msg);
|
||||
}
|
||||
$('.pull-bg').addClass('show');
|
||||
$('.result-tips').addClass('show');
|
||||
}
|
||||
|
||||
function closeMsg() {
|
||||
$('.pull-bg').removeClass('show');
|
||||
$('.result-tips').removeClass('show');
|
||||
}
|
||||
|
||||
$('.tips-btn').click(function () {
|
||||
closeMsg();
|
||||
});
|
||||
|
||||
let lon = '';
|
||||
let lat = '';
|
||||
let addr = '';
|
||||
// 打开导航弹窗
|
||||
if($('.navigation-btn').length){
|
||||
//打开弹窗
|
||||
$('body').on('click','.navigation-btn',function(){
|
||||
// debugger;
|
||||
lon = $(this).data('lon');
|
||||
lat = $(this).data('lat');
|
||||
addr = $(this).data('addr');
|
||||
console.log(lon,'lon')
|
||||
console.log(lat,'lat')
|
||||
console.log(addr,'addr')
|
||||
$('.pull-bg').addClass('show');
|
||||
$('.navigation-box').addClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// 开始导航
|
||||
if($('.navigation-box').length){
|
||||
// console.log(`https://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${lon};addr:${addr};&referer=webtest`, '腾讯地图');
|
||||
// console.log(`http://api.map.baidu.com/marker?location=${lat},${lon}&title=${addr}&output=html`, '百度地图');
|
||||
// console.log(`https://uri.amap.com/marker?position=${lon},${lat}&name=${addr}`, '高德地图');
|
||||
// 腾讯地图
|
||||
$('.tx-navigation').click(function(){ // (lng,lat)
|
||||
window.open(`https://apis.map.qq.com/uri/v1/marker?marker=coord:${lat},${lon};addr:${addr};&referer=webtest`)
|
||||
});
|
||||
// 百度地图
|
||||
$('.bd-navigation').click(function(){ // (lng,lat)
|
||||
window.open(`http://api.map.baidu.com/marker?location=${lat},${lon}&title=${addr}&output=html`)
|
||||
});
|
||||
// 高德地图
|
||||
$('.gd-navigation').click(function(){ // (lat,lng)
|
||||
window.open(`https://uri.amap.com/marker?position=${lon},${lat}&name=${addr}`)
|
||||
});
|
||||
}
|
||||
// 关闭导航弹窗
|
||||
if($('.pull-bg-navigation,.pull-bg').length){
|
||||
$('.pull-bg-navigation,.pull-bg').click(function(){
|
||||
$('.pull-bg').removeClass('show');
|
||||
$('.navigation-box').removeClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// 领券
|
||||
if ($('.card-btn').length) {
|
||||
// 打开弹窗
|
||||
$('body').on('click', '.card-btn',function () {
|
||||
$('.pull-bg').addClass('show');
|
||||
$('.collect-coupons').addClass('show');
|
||||
});
|
||||
// 关闭弹窗
|
||||
$('.pull-bg, .code-btn').click(function () {
|
||||
$('.pull-bg').removeClass('show');
|
||||
$('.collect-coupons').removeClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// 使用卡券
|
||||
if ($('.use-btn').length) {
|
||||
// 打开弹窗
|
||||
$('body').on('click', '.use-btn',function () {
|
||||
$('.pull-bg').addClass('show');
|
||||
$('.card-window').addClass('show');
|
||||
});
|
||||
// 关闭弹窗
|
||||
$('.pull-bg, .code-btn').click(function () {
|
||||
$('.pull-bg').removeClass('show');
|
||||
$('.card-window').removeClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// 复制完整券码
|
||||
if ($('.copy-btn').length) {
|
||||
$('body').on('click','.copy-btn',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)
|
||||
})
|
||||
}
|
||||
|
||||
// 入口判断
|
||||
if ($('.game-entry').length) {
|
||||
function checkTime(t) {
|
||||
return t >= 10 ? t : "0" + t;
|
||||
}
|
||||
|
||||
$('.game-entry').click(function () {
|
||||
let t = $(this).data('time');
|
||||
let now = new Date();
|
||||
let nowTime = checkTime(now.getHours()) + ':' + checkTime(now.getMinutes());
|
||||
|
||||
// console.log(t, '活动时间')
|
||||
// console.log(nowTime, '当前时间')
|
||||
|
||||
if (nowTime < t) {
|
||||
showMsg('活动还未开始');
|
||||
return false;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 定义state
|
||||
var state = true;
|
||||
var page = 2;
|
||||
|
||||
// 查询数据
|
||||
function getData(url){
|
||||
let keyword = $('.search-keyword').val();
|
||||
let areaId = $('.search-area').val();
|
||||
areaId = areaId ? areaId : 0;
|
||||
console.log(areaId,'sss');
|
||||
$.get('/coupon/businessList.html?area_id='+areaId+'&page='+page+'&keyword='+keyword, function (res) {
|
||||
if (res.code !== 0) {
|
||||
showMsg(res.mag);
|
||||
return false;
|
||||
}
|
||||
state = true;
|
||||
let html = ``;
|
||||
if (res.data.list.length > 0) {
|
||||
res.data.list.forEach(function (item, index) {
|
||||
html += `
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="/coupon/businessInfo.html?id=${item.id}"><img src="${item.cover}" alt="${item.name}"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="/coupon/businessInfo.html?id=${item.id}">
|
||||
<h2 class="font30 clips1">${item.name}</h2>
|
||||
<p class="font24 color-86 clips2">${item.address}</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex" data-lon="${item.lon}" data-lat="${item.lat}" data-addr="${item.name}">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
if (page === 1) {
|
||||
$('.business-list').html(html);
|
||||
} else {
|
||||
$('.business-list').append(html);
|
||||
}
|
||||
page++;
|
||||
} else {
|
||||
state = false;
|
||||
if (page === 1) {
|
||||
$('.business-list').html(html);
|
||||
} else {
|
||||
$('.business-list').append(html);
|
||||
}
|
||||
$('.bottom-msg').css('display', 'block');
|
||||
setTimeout(function () {
|
||||
$('.bottom-msg').css('display', 'none');
|
||||
},1500)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 触底
|
||||
if($('.business-body').length){
|
||||
$(window).scroll(function () {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var windowHeight = $(window).height();
|
||||
var scrollHeight = $(document).height()-50;
|
||||
// console.log(scrollTop + windowHeight,scrollHeight);
|
||||
if (scrollTop + windowHeight > scrollHeight) {
|
||||
if(state){
|
||||
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
|
||||
// console.log("到底了,发起请求");
|
||||
state = false;
|
||||
getData();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 点击搜索
|
||||
$('.business-search').click(function () {
|
||||
// 获取数据
|
||||
page = 1;
|
||||
getData();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 表单搜索
|
||||
$('.search-form').on('submit',function(){
|
||||
// 获取数据
|
||||
page = 1;
|
||||
getData();
|
||||
return false;
|
||||
})
|
||||
}
|
||||
|
||||
if($('.bind-btn').length){
|
||||
$('.bind-btn').click(function () {
|
||||
$.post('/login/bind', {phone: $('#bind-phone').val()}, function (res) {
|
||||
if (res.code !== 0) {
|
||||
showMsg(res.msg)
|
||||
return false;
|
||||
}
|
||||
|
||||
window.location.href=res.data.url;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 图片上传
|
||||
if($('.file-input').length){
|
||||
$('.file-input').on('change', function(e) {
|
||||
var imgFile = []; //文件流
|
||||
var imgSrc = []; //图片路径
|
||||
var imgName = []; //图片名字
|
||||
var imgSize = this.files[0].size;
|
||||
if (imgSize > 1024 * 1024 * 1) { //1M
|
||||
return alert("上传图片不能超过1M");
|
||||
};
|
||||
if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
|
||||
return alert("图片上传格式不正确");
|
||||
}
|
||||
var imgBox = $(this).parents(".img");;
|
||||
var fileList = this.files;
|
||||
for (var i = 0; i < fileList.length; i++) {
|
||||
if(imgSrc.length < 1) { //判断多图上传只显示前几个，直到一共四个图片
|
||||
var imgSrcI = getObjectURL(fileList[i]);
|
||||
imgName.push(fileList[i].name);
|
||||
imgSrc.push(imgSrcI);
|
||||
imgFile.push(fileList[i]);
|
||||
if (imgFile.length > 1) { //显示上传按钮
|
||||
$('.content-img .file').hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
// 动态添加html元素
|
||||
addNewContent(imgBox,imgSrc);
|
||||
this.value = null; //允许上传相同图片
|
||||
});
|
||||
|
||||
// 图片展示
|
||||
function addNewContent(imgBox,imgSrc) {
|
||||
if(imgBox.find('.upload-img').length){
|
||||
imgBox.find('.upload-img').remove();
|
||||
}
|
||||
for (var a = 0; a < imgSrc.length; a++) {
|
||||
var picHtml = '<div class="upload-img radius20 border-box"><img src="' + imgSrc[a] + '" alt=""></div>';
|
||||
$(imgBox).prepend(picHtml);
|
||||
}
|
||||
}
|
||||
|
||||
// 建立可存取到file的url
|
||||
function getObjectURL(file) {
|
||||
var url = null;
|
||||
if (window.createObjectURL != undefined) { // basic
|
||||
url = window.createObjectURL(file);
|
||||
} else if (window.URL != undefined) { // mozilla(firefox)
|
||||
url = window.URL.createObjectURL(file);
|
||||
} else if (window.webkitURL != undefined) { // webkit or chrome
|
||||
url = window.webkitURL.createObjectURL(file);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
}
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,152 @@
|
|||
<!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 class="business-body">
|
||||
<!-- 商户搜索 -->
|
||||
<div class="search flex">
|
||||
<form action="" class="search-form flex">
|
||||
<div class="search-select-bg radius25 border-box">
|
||||
<select class="search-select font24">
|
||||
<option value="全部区域">全部区域</option>
|
||||
<option value="区域A">区域A</option>
|
||||
<option value="区域B">区域B</option>
|
||||
<option value="区域C">区域C</option>
|
||||
<option value="区域D">区域D</option>
|
||||
<option value="区域E">区域E</option>
|
||||
</select>
|
||||
<img src="../images/icon/icon-arrow.png" alt="区域选择">
|
||||
</div>
|
||||
|
||||
<div class="search-input-bg flex">
|
||||
<input class="search-input font24" type="search" placeholder="商户搜索" autocomplete="off">
|
||||
<div class="search-btn background-f35 flex">
|
||||
<img src="../images/icon/icon-search.png" alt="搜索">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- 商户列表 -->
|
||||
<div class="business-list">
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item radius50 border-box flex">
|
||||
<div class="img radius40">
|
||||
<a href="detail.html"><img src="../images/recommend.jpg" alt="华阳周大福珠宝店"></a>
|
||||
</div>
|
||||
<div class="txt">
|
||||
<a href="detail.html">
|
||||
<h2 class="font30 clips1">华阳周大福珠宝店</h2>
|
||||
<p class="font24 color-86 clips2">四川省成都市天府新区华阳镇</p>
|
||||
</a>
|
||||
<div class="navigation-btn font24 color-ff background-f35 radius25 flex">立即导航</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="business-tips font24 color-99">~ <span>下拉显示更多</span> ~</div>
|
||||
</div>
|
||||
<!-- 弹窗背景 -->
|
||||
<div class="pull-bg pull-bg-navigation"></div>
|
||||
<!-- 导航弹窗 -->
|
||||
<div class="navigation-box background-ff font32">
|
||||
<div class="item tx-navigation border-box">腾讯地图</div>
|
||||
<div class="item bd-navigation border-box">百度地图</div>
|
||||
<div class="item gd-navigation border-box">高德地图</div>
|
||||
</div>
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex active">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!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="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="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 navigation-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="pull-bg pull-bg-navigation"></div>
|
||||
<!-- 导航弹窗 -->
|
||||
<div class="navigation-box background-ff font32">
|
||||
<div class="item bd-navigation border-box">百度地图</div>
|
||||
<div class="item gd-navigation border-box">高德地图</div>
|
||||
<div class="item tx-navigation border-box">腾讯地图</div>
|
||||
</div>
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex active">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
<!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">
|
||||
<link rel="stylesheet" href="../css/swiper-bundle.min.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/swiper-bundle.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 轮播图 -->
|
||||
<div class="banner">
|
||||
<div class="banner-swiper swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<a href=""><img src="../images/banner.jpg" alt="轮播图"></a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""><img src="../images/banner.jpg" alt="轮播图"></a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href=""><img src="../images/banner.jpg" alt="轮播图"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容区 -->
|
||||
<div class="index-content border-box">
|
||||
<!-- 限时领券 -->
|
||||
<div class="section radius50 border-box" style="margin-top: .34rem;">
|
||||
<div class="recommend-title font38 color-ff border-box flex">限时领券</div>
|
||||
<div class="section-box activity-time radius40 border-box flex">
|
||||
<a href="luck-draw.html" class="envelopes">
|
||||
<img src="../images/envelopes.png" alt="满减券">
|
||||
<p class="font26 radius20 flex">立即领取</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 活动介绍 -->
|
||||
<div class="section radius50 border-box" style="margin-top: .8rem;">
|
||||
<div class="recommend-title font38 color-ff border-box flex">活动介绍</div>
|
||||
<div class="section-box activity-info radius40 border-box flex">
|
||||
<div class="txt">
|
||||
<div class="survey font28">
|
||||
<p><strong>活动时间：</strong>2022年8月31日-2022年9月1日</p>
|
||||
<p><strong>主办方：</strong>四川天府新区万安街道办事处</p>
|
||||
</div>
|
||||
<div class="introduce font30">
|
||||
<div class="rich-text">
|
||||
<p>
|
||||
<span class="radius20 background-f35 flex" style="justify-content: center;align-items:center;height: .62rem;margin-bottom: .2rem;">消费券领取及兑换规则 </span>
|
||||
1.抢券时间为5天 上午开抢时间上午10：00整和下午15：00整。<br />
|
||||
2.每天发放20元面值20张、30元面值40张、50元面值40张、80元面值30张、100元面值20张，此券拆分上午和下午准时定点发放。<br />
|
||||
3.消费券每人每天可参加一次抽奖活动领取。
|
||||
</p>
|
||||
<p style="margin-top: .3rem;">
|
||||
<span class="radius20 background-f35 flex" style="justify-content: center;align-items:center;height: .62rem;margin-bottom: .2rem;">消费券使用规则</span>
|
||||
1.使用此券可与店内活动同享。<br />
|
||||
2.此券在活动期内使用，如未在活动期内使用视为作废。<br />
|
||||
3.此消费券不找零，不兑换现金。<br />
|
||||
4.消费券可叠加使用。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 板块推荐 -->
|
||||
<div class="section radius50 border-box" style="margin-top: .8rem;">
|
||||
<div class="recommend-title font38 color-ff border-box flex">板块推荐</div>
|
||||
<div class="section-box recommend radius40 border-box flex">
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
<a class="item" href="detail.html">
|
||||
<div class="img radius25">
|
||||
<img src="../images/recommend.jpg" alt="商家">
|
||||
</div>
|
||||
<div class="txt font24 clips1">周大福</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex active">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<!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="luck-draw">
|
||||
<div class="card-list">
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="card-btn flex">
|
||||
<span class="font36 color-ff"><strong>立即领取</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="card-btn grayscale-btn flex">
|
||||
<span><img src="../images/icon/icon-nothing.png" alt="已抢光"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="card-btn flex">
|
||||
<span><img src="../images/icon/icon-received.png" alt="已领取"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗背景 -->
|
||||
<div class="pull-bg pull-bg-navigation"></div>
|
||||
<!-- 上传资料弹窗 -->
|
||||
<div class="write-off collect-coupons border-box">
|
||||
<div class="collect-coupons-list">
|
||||
<div class="item font30 color-99">
|
||||
<em class="upload-tips font24 color-f35">注释：图片不得大于1.5M</em>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">身份证正面<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">身份证反面<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">购车合同<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item font30 color-99">
|
||||
<div class="title">支付记录<em class="color-f35">(必填)</em></div>
|
||||
<div class="img flex">
|
||||
<div class="upload-btn radius20 border-box flex">
|
||||
<span>
|
||||
<img src="../images/icon/icon-upload.png" alt="选择图片">
|
||||
<em class="font24">选择图片</em>
|
||||
</span>
|
||||
<input type="file" class="file-input" name="file" id="fileInput" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-btn background-f35 font36 radius30 flex">立即领取</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex active">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!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="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</div>
|
||||
<div class="bind-phone font24">绑定手机：13438123836</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 个人中心内容 -->
|
||||
<div class="my-content border-box">
|
||||
<a href="not-used.html" class="item flex">
|
||||
<span class="flex">
|
||||
<img src="../images/icon/icon-my-02.png" alt="待使用卡券" style="width: .43rem;height: .43rem;">
|
||||
</span>
|
||||
<p class="font24">待使用卡券</p>
|
||||
<img src="../images/icon/icon-arrow-right.png" alt="更多">
|
||||
</a>
|
||||
<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 font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!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="card-list">
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn flex">
|
||||
<span class="font36 color-ff"><strong>立即使用</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn flex">
|
||||
<span class="font36 color-ff"><strong>立即使用</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn flex">
|
||||
<span class="font36 color-ff"><strong>立即使用</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn flex">
|
||||
<span class="font36 color-ff"><strong>立即使用</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗背景 -->
|
||||
<div class="pull-bg"></div>
|
||||
<!-- 核销二维码 -->
|
||||
<div class="card-window radius20 background-ff border-box">
|
||||
<div class="window-title font30">扫码使用</div>
|
||||
<div class="card-code">
|
||||
<img src="../images/code.png" alt="二维码">
|
||||
</div>
|
||||
<div class="code-btn radius30 background-f35 color-ff font36 flex">确认</div>
|
||||
</div>
|
||||
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!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="card-list">
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn grayscale-btn flex">
|
||||
<span class="font36 color-ff"><strong>已过期</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn grayscale-btn flex">
|
||||
<span class="font36 color-ff"><strong>已过期</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn grayscale-btn flex">
|
||||
<span class="font36 color-ff"><strong>已过期</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item border-box flex">
|
||||
<div class="card-txt use-txt background-ff">
|
||||
<p class="font28 color-93">满10万减1000元</p>
|
||||
<strong class="font62 color-f35"><em class="font28">￥</em>1000</strong>
|
||||
<span class="font20 color-2c">有效期:2022-10-01-2022-10-31</span>
|
||||
</div>
|
||||
<div class="use-btn grayscale-btn flex">
|
||||
<span class="font36 color-ff"><strong>已过期</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 尾部 -->
|
||||
<div class="footer background-ff border-box">
|
||||
<div class="foot font24 flex">
|
||||
<a href="index.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-01.png" alt="首页">
|
||||
<img src="../images/icon/icon-active-01.png" alt="首页">
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="luck-draw.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-02.png" alt="领券">
|
||||
<img src="../images/icon/icon-active-02.png" alt="领券">
|
||||
<span>领券</span>
|
||||
</a>
|
||||
<a href="business.html" class="item flex">
|
||||
<img src="../images/icon/icon-tabbar-03.png" alt="商家">
|
||||
<img src="../images/icon/icon-active-03.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>
|
||||
Loading…
Reference in New Issue