首页布局样式修改

master
Lee 2022-09-18 21:56:47 +08:00
parent ac4a658ff3
commit fef3a0d8f0
2 changed files with 48 additions and 18 deletions

View File

@ -85,22 +85,29 @@
.section-box {
flex-wrap: wrap;
width: 100%;
padding: .48rem .36rem;
background-color: #ffffff;
}
.activity {
.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: space-between;
}
.activity .envelopes {
.activity-time .envelopes {
width: 2.8rem;
height: 3.66rem;
background-image: url(../images/envelopes.png);
background-size: 100% 100%;
}
.activity .envelopes>span {
.activity-time .envelopes>span {
display: block;
font-size: .64rem;
text-align: center;
@ -109,7 +116,7 @@
color: #ffebac;
}
.activity .envelopes>p {
.activity-time .envelopes>p {
justify-content: center;
align-items: center;
width: calc(100% - .52rem);
@ -131,13 +138,18 @@
}
}
.activity .txt {
.activity-info .txt {
width: 100%;
line-height: 1.7;
}
.activity .txt>p {
margin-top: .25rem;
.activity-info .survey>p{
line-height: 3;
}
.activity-info .introduce{
line-height: 1.68;
margin-top: .1rem;
}
/* 商家推荐 */

View File

@ -35,9 +35,10 @@
</div>
<!-- 内容区 -->
<div class="index-content border-box">
<!-- 活动 -->
<div class="section radius50 border-box">
<div class="section-box activity radius40 border-box flex">
<!-- 活动时间 -->
<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">
<span>17:00</span>
<p class="font26 radius20 flex">立即开抢</p>
@ -46,17 +47,34 @@
<span>18:00</span>
<p class="font26 radius20 flex">立即开抢</p>
</a>
<div class="txt font30">
</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 font24">
<p><strong>活动时间:</strong>2022年8月31日-2022年9月1日</p>
<p><strong>主办方:</strong>四川天府新区万安街道办事处</p>
</div>
<div class="introduce font30">
<p>
<strong>活动介绍:</strong><br /> 1用户关注公众号才可以参与活动<br /> 2通过抽奖活动每人每天可以获得一张随机面额的消费券<br /> 3参与本次活动的万安商家详见商家列表。
<span class="radius20 background-f35 flex" style="justify-content: center;align-items:center;height: .62rem; margin-bottom: .2rem;">消费券领取及兑换规则 </span>
1.抢券时间为5天 上午开抢时间上午1000整和下午1500整。<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 class="section radius50 border-box" style="margin-top: .76rem;">
<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">