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

新增页面

master
Lee1203 2022-09-02 16:10:54 +08:00
parent 6b35a9e5fc
commit 7e33532056
15 changed files with 501 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/common.css
View File

@ -17,7 +17,7 @@ body {
padding: .94rem 0 .96rem; padding: .94rem 0 .96rem;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 1.5; line-height: 1.5;
color: #262626; color: #000000;
} }
ul,ol,li { ul,ol,li {
@ -25,10 +25,10 @@ ul,ol,li {
} }
a { a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
-webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
text-decoration: none; text-decoration: none;
color: #262626; color: #000000;
} }
img { img {
@ -44,15 +44,8 @@ button,input,select,textarea {
border: 0; /* 去掉边框 */ border: 0; /* 去掉边框 */
background: none; /* 去掉背景 */ background: none; /* 去掉背景 */
-webkit-appearance: none; /*去掉webkit默认的表单样式*/ -webkit-appearance: none; /*去掉webkit默认的表单样式*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去掉点击时的蓝色外边框和灰色半透明背景*/
} outline: none; /* 去掉获取焦点时边框 */
input::-webkit-input-placeholder {
color: #ccc; /*修改webkit中input的planceholder样式*/
}
input:focus::-webkit-input-placeholder {
color: #f00; /*修改webkit中focus状态下input的planceholder样式*/
} }
/* flex布局 */ /* flex布局 */

219
css/style.css
View File

@ -1,3 +1,4 @@
/* 头部 */
.header { .header {
align-items: center; align-items: center;
width: 7.5rem; width: 7.5rem;
@ -26,8 +27,55 @@
width: calc(100% - 1.2rem); width: calc(100% - 1.2rem);
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
letter-spacing: .04rem; }
text-indent: .04rem;
/* 尾部 */
.footer{
width: 7.5rem;
height: .96rem;
box-shadow: 0 0 .4rem rgba(243,91,0,.4);
padding: 0 .2rem;
background-color: #ffffff;
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>.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: .06rem;
}
.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;
} }
/* 轮播图 */ /* 轮播图 */
@ -150,51 +198,148 @@
text-align: center; text-align: center;
} }
/* 尾部 */ /* 商户展示 */
.footer{ .search{
width: 7.5rem; justify-content: space-between;
height: .96rem; align-items: center;
box-shadow: 0 0 .4rem rgba(243,91,0,.4); width: calc(100% - .5rem);
padding: 0 .2rem; height: .86rem;
background-color: #ffffff; margin: .3rem auto 0;
overflow-x: hidden; padding: 0 .3rem 0 .4rem;
position: fixed; border: .02rem solid #868686;
left: 50%;
bottom: 0;
z-index: 99;
transform: translateX(-50%);
} }
.foot{
.search-input{
width: calc(100% - .6rem);
line-height: .8rem;
}
.search-input::-webkit-input-placeholder {
color: #868686;
}
.search img{
width: .4rem;
height: .4rem;
}
/* 商户列表 */
.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{
color: #868686;
margin-top: .1rem;
}
.navigation-btn{
justify-content: center;
align-items: center;
width: 1.9rem;
height: .5rem;
background-color: #f35b00;
color: #ffffff;
}
/* 我的 */
.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%;
color: #ffffff;
text-align: center;
}
.my-info .cover{
justify-content: center;
align-items: center;
width: 1.9rem;
height: 1.9rem;
background-color: #ffffff;
margin: 0 auto;
}
.my-info .cover img{
max-width: 100%;
}
.my-info .nick-name{
margin: .12rem 0;
}
/* 内容 */
.my-content{
padding: 0 .5rem .3rem;
margin-top: .12rem;
}
.my-content .item{
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: .96rem; height: .92rem;
border-bottom: .02rem solid #d6d6d6;
} }
.my-content .item>span{
.foot>.item{
flex-wrap: wrap;
justify-content: center; justify-content: center;
width: 25%; width: .6rem;
} }
.foot>.item img{ .my-content .item>p{
height: .34rem; width: calc(100% - .74rem);
margin-top: .06rem;
} }
.foot>.item img:nth-of-type(2){ .my-content .item>img{
display: none; width: .14rem;
}
.foot>.item span{
width: 100%;
text-align: center;
margin-top: .06rem;
} }
.foot>.item.active img:nth-of-type(1){ /* 绑定手机号 */
display: none; .bind-content{
padding: 0 .4rem;
} }
.foot>.item.active img:nth-of-type(2){ .bind-phone-title{
display: block; margin: .7rem 0;
text-align: center;
} }
.foot>.item.active span{ .bind-content .sub-title{
color: #f35b00; color: #868686;
}
.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;
background-color: #f35b00;
color: #ffffff;
margin: .7rem auto 0;
} }

BIN
images/icon/icon-arrow-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/icon/icon-my-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/icon/icon-my-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
images/icon/icon-my-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
images/my-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

40
user/bind-phone.html Normal file
View File

@ -0,0 +1,40 @@
<!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" charset="utf-8"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 头部 -->
<div class="header flex">
<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-phone-title font36">手机号绑定</div>
<!-- 手机号 -->
<div class="phone">
<div class="sub-title font30">手机号</div>
<input class="phone-input font30" type="number" placeholder="请输入手机号">
</div>
<!-- 提交 -->
<div class="bind-btn radius25 font36 flex">立即绑定</div>
</div>
</body>
</html>

75
user/business.html
View File

@ -2,8 +2,9 @@
<html> <html>
<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"
<title>抽奖</title> 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="keywords" content="" />
<meta name="description" content="" /> <meta name="description" content="" />
<!-- css加载 --> <!-- css加载 -->
@ -24,8 +25,74 @@
</div> </div>
<div class="header-title font38">商家展示</div> <div class="header-title font38">商家展示</div>
</div> </div>
<!-- 商户搜索 -->
<div class="search radius25 border-box flex">
<input class="search-input font24" type="text" placeholder="商户搜索">
<img src="../images/icon/icon-search.png" alt="搜索">
</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 clips2">四川省成都市天府新区华阳镇</p>
</a>
<div class="navigation-btn font24 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 clips2">四川省成都市天府新区华阳镇和香一街 36号</p>
</a>
<div class="navigation-btn font24 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 clips2">四川省成都市天府新区华阳镇</p>
</a>
<div class="navigation-btn font24 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 clips2">四川省成都市天府新区华阳镇和香一街 36号</p>
</a>
<div class="navigation-btn font24 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 clips2">四川省成都市天府新区华阳镇</p>
</a>
<div class="navigation-btn font24 radius25 flex">立即导航</div>
</div>
</div>
</div>
<!-- 尾部 --> <!-- 尾部 -->
<div class="footer border-box"> <div class="footer border-box">
<div class="foot flex"> <div class="foot flex">

12
user/index.html
View File

@ -80,37 +80,37 @@
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
<a class="item" href="detail.html"> <a class="item" href="detail.html">
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
<a class="item" href="detail.html"> <a class="item" href="detail.html">
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
<a class="item" href="detail.html"> <a class="item" href="detail.html">
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
<a class="item" href="detail.html"> <a class="item" href="detail.html">
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
<a class="item" href="detail.html"> <a class="item" href="detail.html">
<div class="img radius25"> <div class="img radius25">
<img src="../images/recommend.jpg" alt="商家"> <img src="../images/recommend.jpg" alt="商家">
</div> </div>
<div class="txt font24">周大福</div> <div class="txt font24 clips1">周大福</div>
</a> </a>
</div> </div>
</div> </div>

33
user/my.html
View File

@ -24,7 +24,38 @@
</div> </div>
<div class="header-title font38">我的</div> <div class="header-title font38">我的</div>
</div> </div>
<!-- 个人中心简介 -->
<div class="my-info-bg flex">
<div class="my-info">
<div class="cover radius100 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="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">
<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 border-box"> <div class="footer border-box">

60
user/not-used.html Normal file
View File

@ -0,0 +1,60 @@
<!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" charset="utf-8"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 头部 -->
<div class="header flex">
<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="item flex">
</div>
</div>
<!-- 尾部 -->
<div class="footer border-box">
<div class="foot 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>

54
user/used.html Normal file
View File

@ -0,0 +1,54 @@
<!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" charset="utf-8"></script>
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/script.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 头部 -->
<div class="header flex">
<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="footer border-box">
<div class="foot 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>