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

商家推荐新增

master
Lee1203 2022-09-02 10:12:21 +08:00
parent a707bbe801
commit cfa694470c
3 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/style.css
View File

@ -59,12 +59,13 @@
.section-box { .section-box {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
width: 100%; width: 100%;
padding: .48rem .36rem; padding: .48rem .36rem;
background-color: #ffffff; background-color: #ffffff;
} }
.activity{
justify-content: space-between;
}
.activity .envelopes { .activity .envelopes {
width: 2.8rem; width: 2.8rem;
height: 3.66rem; height: 3.66rem;
@ -112,6 +113,7 @@
margin-top: .25rem; margin-top: .25rem;
} }
/* 商家推荐 */
.recommend-title{ .recommend-title{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -128,3 +130,23 @@
top: -0.49rem; top: -0.49rem;
transform: translateX(-50%); 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;
text-align: center;
}

BIN
images/recommend.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

38
index.html
View File

@ -72,10 +72,46 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 商家推荐 -->
<div class="section radius50 border-box" style="margin-top: .76rem;"> <div class="section radius50 border-box" style="margin-top: .76rem;">
<div class="recommend-title font38 border-box flex">商家推荐</div> <div class="recommend-title font38 border-box flex">商家推荐</div>
<div class="section-box recommend radius40 border-box flex"> <div class="section-box recommend radius40 border-box flex">
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
<a class="item" href="">
<div class="img radius25">
<img src="images/recommend.jpg" alt="商家">
</div>
<div class="txt font24">周大福</div>
</a>
</div> </div>
</div> </div>
</div> </div>