第三章作业

<view class ="content">
<view class ="layout -top">
<view class ="screen">250 </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" >1 </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>

.container{ 

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%
}
.screen{
text-align:right;
width:100%;
line-height: 130rpx;
padding: 0 10rpx;
font-weight: bola;
font-size: 60px;
box-sizing:border-box;
border-top:1px solid #fff;
}
.btnGroup{
display:flex;
flex-direction:row;
flex:1;
width:100% ;
height:4rem;
background-color: #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:#f78d1d;
font-weight:bold;
}
.blue{
color:#d9eef7;
background-color: #0095cd;
}

.th{
  margin-top: 10px;
  text-align: left;
}
.sh{
  margin-top: -15px;
  text-align: right;
}
.yt{
display: flex;
flex-direction: row;
width:100% ;

}
.ty{
font-weight: bold;
padding: 20rpx;
}
.c{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tp{
  display: flex;
  flex: 1;
  width: 90%;
}
.tpp{
  display: flex;
    flex: 1;
    width: 90%;
    margin-top: 10px;
}

<view class="one">
<view class="th">行业趋势指南</view>
<view class="sh">年度趋势指南</view>
</view>
<view class="yt">
<view class="ty">最新发布</view>
<view class="ty">单品</view>
<view class="ty">色彩</view>
<view class="ty">风格</view>
<view class="ty">细节</view>
<view class="ty">面料</view>
</view>
<view class="c">
<view class="tp">
<image src="../images/1.jpg" mode="aspectFill"></image>
<image src="../images/2.jpg" mode="aspectFill"></image>
<image src="../images/3.jpg" mode="aspectFill"></image>
</view>
<view class="tpp">
<image src="../images/4.jpg" mode="aspectFill"></image>
<image src="../images/1.jpg" mode="aspectFill"></image>
<image src="../images/1.jpg" mode="aspectFill"></image>
</view>
</view>