第三章作业

分析下列代码，实现下列页面布局：

wxml:

<view class="content">
<view class="layout-top">
<view class="screen">3*8</view>
</view>
<view class="layout-buttom">
<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 blue">-</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">*</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>

app.wxss: 

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
}

wxss:

.content{
  height: 100%;
  display: flex;   /* 设置块级flex布局 */
  flex-direction: column;   /* 设置主轴的方向为垂直 */
  align-items: center;     /* 项目在交叉轴中线对齐 */
  background-color: #ccc;   /* 设置背景颜色为#ccc */
  font-family: "Microsoft YaHei";   /* 设置字体为"Microsoft YaHei" */
  overflow-x: hidden;    /* 溢出x轴的部分被隐藏 */
}
.layout-top{
  width: 100%;
  margin-bottom: 30rpx;   /*外下边距为30rpx*/
}
.layout-buttom{
  width: 100%;
}
.screen{
  text-align: right;    /* 文本右对齐 */
  width: 100%;    
  line-height:130rpx;   /* 行间距130rpx */
  padding: 0 10rpx;    /* 上下内边距为0，左右内边距为10 */
  font-weight: bold;    /* 文字加粗 */
  font-size: 60px;  /* 字体大小为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;  /*设置字体颜色为#fef4e9*/
  background: #f78d1d;
  font-weight: bold;
}
.blue{
  color: #d9eef7;   /*设置字体颜色为#d9eef7*/
  background-color: #0095cd;
}

 运行示例：

操作题：分析页面结构，实现所示的布局效果：

 wxml:

<view class="beijing">
<view class="shou">
<view class="hanye">行业趋势指南v</view>
<view class="hanye">年度趋势指南v</view>
</view>
<view class="daohang">
<view class="item">最新发布</view>
<view class="item">单品</view>
<view class="item">色彩</view>
<view class="item">风格</view>
<view class="item">细节</view>
<view class="item">面料</view>
</view>
<view class="tu">
<view class="han">
<view class="ge"><image src="/image/tu1.png"></image></view>
<view class="ge"><image src="/image/tu2.png"></image></view>
</view>
<view class="han">
<view class="ge"><image src="/image/tu3.png"></image></view>
<view class="ge"><image src="/image/tu4.png"></image></view>
</view>
<view class="han">
<view class="ge"><image src="/image/tu5.png"></image></view>
<view class="ge"><image src="/image/tu6.png"></image></view>
</view>
</view>
</view>

wxss:

.beijing{
  height: 100%;
  display: flex;   /* 设置块级flex布局 */
  background-color: #ccc;   /* 设置背景颜色为#ccc */
  flex-direction: column;   /* 设置主轴的方向为垂直 */
  align-items: center;     /* 项目在交叉轴中线对齐 */
  background-color: #ccc;   /* 设置背景颜色为#ccc */
  font-family: "Microsoft YaHei";   /* 设置字体为"Microsoft YaHei" */
  overflow-x: hidden;    /* 溢出x轴的部分被隐藏 */
}
.shou{
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid #000;
}
.hanye{
height: 2rem;
flex: 1;
padding-top: 0.5rem;
text-align:center;
}
.daohang{
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #000;
}
.xin{
  border-bottom:2px solid #000;
}
.item{
height: 1.5rem;
flex: 1;
font-size: 13px;
padding-top: 0.3rem;
text-align:center;
}
.han{
  width: 100%;
  display: flex;
  flex-direction: row;
  padding-left: 5px;
}
.ge{
  flex: 1;
  width: 170px;
  height: 170px;
  overflow-x: hidden;   
  margin-right: 10px;
  margin-top: 8px;
}

运行结果：