第三章，小程序作业

云·长·空

已于 2024-03-17 20:17:36 修改

阅读量198

点赞数 3

文章标签：小程序 apache

于 2024-03-17 17:17:49 首次发布

本文链接：https://blog.csdn.net/m0_73769384/article/details/136785387

版权

第一题：计算机界面

代码：

wxml

<view class = "content" >
<view class = "layouttop">
<view clasg = "screen">3×8 </view>
</view>

<view class = "layoutbottom" >
<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 orange" > = </view>
</view>
</view>
</view>

wxss

.content{
  height: 100%;
  display: flex;
flex-direction: column;
align-items: center;
background-color: #ccc;
font-family: "Microsoft YaHei";
overflow-x: hidden;
}
.layouttop{
 width:100%;
  margin-bottom: 30rpx;}
.layoutbottom{
  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: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;}

结果：

第二题：

代码

wxml

<!--pages/zuo/zuo.wxml-->
<view class="p3">
<view>行业趋势指南</view>
<view>年度趋势指南</view>
</view>
<view class="p4">
<view>最新发布</view>
<view>单品</view>
<view>色彩</view>
<view>风格</view>
<view>细节</view>
<view>面料</view>
</view>
<view class="p2">
<view class="p1">
<view>波尔卡圆点</view>
<view>2018/04/11</view>
</view>
<view class="p1">
  <view>牛仔夹克</view>
<view>2018/04/11</view></view>


</view>
<view class="p2">
  <view class="p1">
  <view>印花裙</view>
<view>2018/04/11</view>
</view>
<view class="p1">
  <view>彩虹</view>
<view>2018/04/11</view>
</view></view>
<view class="p2">
  <view class="p1">
  <view>褶皱褶饰</view>
<view>2018/04/11</view>
</view>
<view class="p1">
  <view>运动套装</view>
<view>2018/04/11</view>
</view></view>

wxss

/* pages/zuo/zuo.wxss */
.p1{
  width:180px;
  height: 180px;
  background-color: antiquewhite;
  font-size: small;
  /* border:1px solid black; */
  display: inline;
}
.p2{
  padding: 10px;
  /* border:1px solid black; */
  width: 400px;
  height:180px;
  display: inline-flex;
  justify-content:space-between;
}
.p3{
  padding: 5px;
  /* border:1px solid black; */
  width: 100%;
  height:20px;
  display: inline-flex;
  justify-content:space-around;
}
.p4{
  padding: 5px;
  /* border:1px solid black; */
  width: 100%;
  height:20px;
  display: inline-flex;
  justify-content:space-around;
}