第三章作业

二、分析题 

#cal.wxml 中的代码

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

#app.json 中window 的配置

{
 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "简易计算器",
    "navigationBarBackgroundColor": "#A18B8D"
  }
}

#app.wxss 中的代码  （注：在cal.wxss 中设定的页面样式呈现优先级大于 app.wxss 的，所以 app.wxss 中写的样式如果与cal.wxss 中的有异，则优先展示cal.wxss 中的样式效果）

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
 
  /* column：主轴为垂直方向，起点在顶端 */
  /* flex-direction: column; */
  align-items: center;
 
  /* 定义项目在主轴的对齐方式；space-between：项目之间的间隔相等 */
  justify-content: space-between;
  padding: 200rpx 0;
} 

#cal.wxss 中的代码

.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%;
}
.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;
}
.btnGroup{
  display: flex;
 
  /* 使用flex-direction元素设置布局为主轴方向，row为水平方向，起点在左端 */
  flex-direction: row;  
 
  /* 因为元素设置了flex布局，所以主轴默认为row */
  flex: 1;
  width: 100%;
  height: 4rem;
  background-color: #fff;
}
.item{
 
  /* 每个格子占比25% */
  width: 25%;
  display: flex;
 
  /* 指定项目在交叉轴中线对齐，即文字居中显示 */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 1px;
  margin-right: 1px;
}
.zero{
  
  /* 单独占比两倍，即50% */
  width: 50%;
}
.orange{
  color: #fef4e9;
  background: #f78d1d;
  font-weight: bold;
}
.blue{
  color: #d9eef7;
  background-color: #0095cd;
}

三、操作题 

#app.json 中window 的配置 

{
"window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "趋势",
    "navigationBarBackgroundColor": "#A18B8D"
  }
}

#qs.wxml 中的代码 

<view class="content">
  <view class="shang">
    <view class="item">行业趋势指南</view>
    <view class="item">年度趋势指南</view>
  </view>
  <view class="zhong">
    <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="xia">
      <image src="../images/bandian.jpg"  mode="" />
      <image src="../images/niuzai.jpg" mode="" />
      <image src="../images/suihua.jpg" mode="" />
      <image src="../images/caihong.jpg" mode="" />
      <image src="../images/zhezi.jpg" mode="" />
      <image src="../images/yundong.jpg" mode="" />
  </view>
</view>

#qs.wxss 中的代码 

.content{
height: 100%;
font-family: "黑体";
 
/* 页面整体是灰色 */
background-color: #cccccc;
}
.shang{
  width: 100%;
  height: 25px;
  display: flex;
 
  /* “趋势指南”部分的字体大小为10px */
  font-size: 10px;
  flex-direction: row;
  justify-content: space-around;
  background-color: #fff;
 
  /* 第一个模块底外边距为2px，留出灰色区域 */
  margin-bottom: 2px;
}
.zhong{
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
 
  /* 定义项目在主轴的对齐方式，space-around:每个项目两侧的间隔相同 */
  justify-content: space-around;
  background-color: #fff;
  margin-bottom: 5px;
}
.item{
  display: flex;
  align-items: center;
 
  /* 字体加粗 */
  font-weight: bold;
  justify-content: center;
}
.xia{
  width: 100%;
  height: 100%;
  background-color: #fff;
}
image{
  width: 150px;
  height: 150px;
 
  /* 图片上下左右内边距皆设置5px */
  padding: 5px;
}