概况总览部分的思路是一个大盒子开启 flex布局,包含两个子盒子,分布设置 flex:1平均各占一份,两个子盒子里面包含 a标签开启 flex布局,竖排显示,居中。

<div class="main">
                <div class="overview">
                    <!--左边部分-->
                    <div class="left">
                        <a href="#">
                            <span><img src="./images/vip.png" alt=""></span>
                            <span>会员中心</span>
                        </a>
                        <a href="#">
                            <span><img src="./images/vip.png" alt=""></span>
                            <span>会员中心</span>
                        </a>
                        <a href="#">
                            <span><img src="./images/vip.png" alt=""></span>
                            <span>会员中心</span>
                        </a>
                    </div>
                    <!--右边部分-->
                    <div class="right">
                        <a href="#">
                            <span>12</span>
                            <span>优惠券</span>
                        </a>
                        <a href="#">
                            <span>435</span>
                            <span>金额</span>
                        </a>
                        <a href="#">
                            <span>65</span>
                            <span>消费</span>
                        </a>
                    </div>
                </div>
            </div>

样式:

 .main .overview{
    background-color: #fff;
    display: flex;
    padding: 20px 0px;
 }

 .main .overview div{
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  padding: 10px 0px 12px;
}

.main .overview .left{
  border-right: 1px solid #f4f4f4;
}


.main .overview div a{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.main .overview .left a span:nth-child(1){
  width: 40px;
  height: 32px;
  margin-bottom: 10px;
}

.main .overview div a span img{
  width: 100%;
  height: 100%;
}

.main .overview .right span:nth-child(1){
  font-size: 28px;
  color: #e05e2f;
}

效果:

概览

最后修改:2022 年 08 月 23 日
如果觉得我的文章对你有用,请随意赞赏