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

首页完成

master
Lee 2022-09-02 11:23:25 +08:00
parent cfa694470c
commit 6b35a9e5fc
15 changed files with 322 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/common.css
View File

@ -14,6 +14,7 @@ body {
-webkit-text-size-adjust: 100% !important; /*禁止IOS调整字体大小*/
max-width: 750px;
margin: 0 auto;
padding: .94rem 0 .96rem;
font-size: 0.14rem;
line-height: 1.5;
color: #262626;

54
css/style.css
View File

@ -7,7 +7,7 @@
position: fixed;
left: 50%;
top: 0;
z-index: 999;
z-index: 99;
transform: translateX(-50%);
}
@ -34,7 +34,6 @@
.banner {
width: 100%;
height: 3.64rem;
margin-top: .94rem;
overflow: hidden;
}
@ -147,6 +146,55 @@
min-height: 1.9rem;
}
.recommend .item>.txt{
margin: .2rem 0;
margin: .2rem 0 .1rem;
text-align: center;
}
/* 尾部 */
.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;
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

55
user/business.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<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 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>

55
user/detail.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<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 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>

78
index.html → user/index.html
View File

@ -7,20 +7,20 @@
<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">
<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>
<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" onclick="window.history.go(-1)">
<img src="images/icon/icon-back.png" alt="返回">
<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>
@ -29,13 +29,13 @@
<div class="banner-swiper swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/banner.jpg" alt="轮播图">
<img src="../images/banner.jpg" alt="轮播图">
</div>
<div class="swiper-slide">
<img src="images/banner.jpg" alt="轮播图">
<img src="../images/banner.jpg" alt="轮播图">
</div>
<div class="swiper-slide">
<img src="images/banner.jpg" alt="轮播图">
<img src="../images/banner.jpg" alt="轮播图">
</div>
</div>
</div>
@ -57,11 +57,11 @@
<div class="section-box activity radius40 border-box flex">
<div class="envelopes">
<span>17:00</span>
<a href="" class="font26 radius20 flex">立即开抢</a>
<a href="luck-draw.html" class="font26 radius20 flex">立即开抢</a>
</div>
<div class="envelopes">
<span>18:00</span>
<a href="" class="font26 radius20 flex">立即开抢</a>
<a href="luck-draw.html" class="font26 radius20 flex">立即开抢</a>
</div>
<div class="txt font30">
<p><strong>活动时间：</strong>2022年8月31日-2022年9月1日</p>
@ -76,47 +76,69 @@
<div class="section radius50 border-box" style="margin-top: .76rem;">
<div class="recommend-title font38 border-box flex">商家推荐</div>
<div class="section-box recommend radius40 border-box flex">
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<a class="item" href="detail.html">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
<img src="../images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
</div>
</div>
</div>
<div class="footer">
尾部信息
<!-- 尾部 -->
<div class="footer border-box">
<div class="foot 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>

55
user/luck-draw.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<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 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>

55
user/my.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>抽奖</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- css加载 -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/style.css">
<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>