lee first

master
Lee 2022-09-02 09:42:59 +08:00
parent 78ee899096
commit a707bbe801
3 changed files with 87 additions and 25 deletions

View File

@ -15,6 +15,7 @@ body {
max-width: 750px; max-width: 750px;
margin: 0 auto; margin: 0 auto;
font-size: 0.14rem; font-size: 0.14rem;
line-height: 1.5;
color: #262626; color: #262626;
} }

View File

@ -1,4 +1,4 @@
.header{ .header {
align-items: center; align-items: center;
width: 7.5rem; width: 7.5rem;
height: .94rem; height: .94rem;
@ -10,16 +10,19 @@
z-index: 999; z-index: 999;
transform: translateX(-50%); transform: translateX(-50%);
} }
.header-back{
.header-back {
justify-content: center; justify-content: center;
width: .6rem; width: .6rem;
height: .4rem; height: .4rem;
} }
.header-back>img{
.header-back>img {
width: .4rem; width: .4rem;
height: .4rem; height: .4rem;
} }
.header-title{
.header-title {
width: calc(100% - 1.2rem); width: calc(100% - 1.2rem);
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
@ -28,39 +31,48 @@
} }
/* 轮播图 */ /* 轮播图 */
.banner{ .banner {
width: 100%; width: 100%;
height: 3.64rem; height: 3.64rem;
margin-top: .94rem; margin-top: .94rem;
overflow: hidden; overflow: hidden;
} }
.banner img{
.banner img {
width: 100%; width: 100%;
min-height: 3.64rem; min-height: 3.64rem;
} }
/* 首页内容区 */ /* 首页内容区 */
.index-content{ .index-content {
background-color: #fed7b0; background-color: #fed7b0;
padding: .45rem .2rem; padding: .45rem .2rem;
border-top: .02rem solid #eeb94f; border-top: .02rem solid #eeb94f;
} }
/* 活动 */ /* 活动 */
.index-activity{ .index-content .section {
padding: .1rem;
background-image: linear-gradient(to top, #fec44b, #fff8b4);
position: relative;
}
.section-box {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
padding: .48rem .32rem; width: 100%;
border: .1rem solid #fff0a3; padding: .48rem .36rem;
background-color: #ffffff; background-color: #ffffff;
} }
.envelopes{
.activity .envelopes {
width: 2.8rem; width: 2.8rem;
height: 3.66rem; height: 3.66rem;
background-image: url(../images/envelopes.png); background-image: url(../images/envelopes.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
.envelopes>span{
.activity .envelopes>span {
display: block; display: block;
font-size: .64rem; font-size: .64rem;
text-align: center; text-align: center;
@ -68,17 +80,51 @@
margin-top: 1.7rem; margin-top: 1.7rem;
color: #ffebac; color: #ffebac;
} }
.envelopes>a{
.activity .envelopes>a {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: calc(100% - .52rem); width: calc(100% - .52rem);
height: .58rem; height: .58rem;
background-image: linear-gradient(to top,#fed383,#fdf0c2); background-image: linear-gradient(to top, #fed383, #fdf0c2);
margin: .15rem auto 0; margin: .15rem auto 0;
color: #ec294c; color: #ec294c;
font-weight: bold;
animation: scale_name 1s linear alternate infinite; animation: scale_name 1s linear alternate infinite;
} }
@keyframes scale_name{
from{transform: scale(.95);} @keyframes scale_name {
to{transform: scale(1.05);} from {
} transform: scale(.95);
}
to {
transform: scale(1.05);
}
}
.activity .txt {
width: 100%;
line-height: 1.7;
}
.activity .txt>p {
margin-top: .25rem;
}
.recommend-title{
justify-content: center;
align-items: center;
width: 3.2rem;
height: .88rem;
background-color: #ff353f;
border: .1rem solid #ffde77;
border-radius: .44rem;
color: #ffffff;
text-indent: .04rem;
letter-spacing: .04rem;
position: absolute;
left: 50%;
top: -0.49rem;
transform: translateX(-50%);
}

View File

@ -53,14 +53,29 @@
<!-- 内容区 --> <!-- 内容区 -->
<div class="index-content border-box"> <div class="index-content border-box">
<!-- 活动 --> <!-- 活动 -->
<div class="index-activity radius40 border-box flex"> <div class="section radius50 border-box">
<div class="envelopes"> <div class="section-box activity radius40 border-box flex">
<span>17:00</span> <div class="envelopes">
<a href="" class="font26 radius20 flex">立即开枪</a> <span>17:00</span>
<a href="" class="font26 radius20 flex">立即开抢</a>
</div>
<div class="envelopes">
<span>18:00</span>
<a href="" class="font26 radius20 flex">立即开抢</a>
</div>
<div class="txt font30">
<p><strong>活动时间:</strong>2022年8月31日-2022年9月1日</p>
<p><strong>主办方:</strong>四川天府新区万安街道办事处</p>
<p>
<strong>活动介绍:</strong><br /> 1用户关注公众号才可以参与活动<br /> 2通过抽奖活动每人每天可以获得一张随机面额的消费券<br /> 3参与本次活动的万安商家详见商家列表。
</p>
</div>
</div> </div>
<div class="envelopes"> </div>
<span>18:00</span> <div class="section radius50 border-box" style="margin-top: .76rem;">
<a href="" class="font26 radius20 flex">立即开枪</a> <div class="recommend-title font38 border-box flex">商家推荐</div>
<div class="section-box recommend radius40 border-box flex">
</div> </div>
</div> </div>
</div> </div>