第三章作业

<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;
}

<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;
}