![](https://i-blog.csdnimg.cn/blog_migrate/f895ee399e303e9741307fd5fb84f838.png)
<view class ="content">
<view class="layout -top">
<view class="screen" >3x8</view>
</view >
<view class="layout-bottom">
<view class="btnGroup" >
<view class ="item orange" >C</view>
<view class="item orange" >←</view>
<view class ="item orange" >#</view>
<view class="item orange">+</view>
</view >
<view class ="btnGroup">
<view class="item blue" >9</view>
<view class ="item blue" >8 </view>
<view class ="item blue" >7 </view>
<view class="item orange" >-</view>
</view >
<view class ="btnGroup">
<view class ="item blue" >6</view>
<view class ="item blue" >5 </view>
<view class ="item blue" >4</view>
<view class ="item orange" >x</view>
</view >
<view class ="btnGroup" >
<view class ="item blue" >3</view>
<view class ="item blue" >2 </view>
<view class ="item blue" >l</view>
<view class="item orange">÷</view>
</view >
<view class ="btnGroup">
<view class ="item blue zero">0</view>
<view class ="item blue" >.</view>
<view class ="item orange">=</view>
</view>
</view>
</view >
.content{
height:100%;
display: flex;
flex-direction:column;
align-items:center;
background-color:#ccc;
font-family:"Microsoft YaHei";
overflow-x:hidden;
}
.layout-top{
width:100%;
margin-bottom:30rpx
}
.layout-bottom{
width: 100%;
}
.btnGroup {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
height: 4rem;
background-color: #fff;
}
.screen{
text-align:right;
width:100%;
line-height:130rpx;
padding:0 10rpx;
font-weight:bold;
font-size:60px;
box-sizing: border-box;
border-top: 1px solid #fff;
}
.item{
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 1px ;
margin-right: 1px;
}
.zero {
width: 50%;
}
.orange {
color: #fef4e9;
background-color: #0095cd;
}
![](https://i-blog.csdnimg.cn/blog_migrate/b135d289bd7f00c7856a7d66404c22a4.png)
<view class="buju1">
<view class="to">行业趋势指南</view>
<view class="to">年度趋势指南</view>
</view>
<view class="buju2">
<view class="one ynag">最新发布</view>
<view class="ynag">单品</view>
<view class="ynag">色彩</view>
<view class="ynag">风格</view>
<view class="ynag">细节</view>
<view class="ynag">面料</view>
</view>
<view class="buju3">
<view class="tu">第一个</view>
<view class="tu">第二个</view>
<view class="tu">第三个</view>
<view class="tu">第四个</view>
<view class="tu">第五个</view>
<view class="tu">第六个</view>
</view>
.buju1{
justify-content: space-around;
display: flex;
border-bottom: 1.5px solid #d1c8c8;
}
.to{
text-align: center;
height: 40px;
line-height: 40px;
}
.buju2{
display: flex;
justify-content: space-around;
height: 40px;
line-height: 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
}
.one{
border-bottom:2px solid red ;
/* padding: 0 5px; */
}
.ynag{
text-align: center;
}
.buju3{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.tu{
margin-top: 10px ;
width: 200px;
border: 1px solid red;
text-align: center;
height: 200px;
line-height: 200px;
}