小程序骰子

xml代码如下

<!--index.wxml-->
<view class="father">


    <view class="box1">
        <view class="yuan"></view>
    </view>


    <view class="box2">
        <view class="yuan"></view>
        <view class="yuan"></view>
    </view>


    <view class="box3">
        <view class="yuan"></view>
        <view class="yuan item1"></view>
        <view class="yuan item2"></view>
    </view>


    <view class="box4">
        <view class="item3">
            <view class="yuan"></view>
            <view class="yuan"></view>
        </view>
        <view class="item3">
            <view class="yuan"></view>
            <view class="yuan"></view>
        </view>
    </view>


    <view class="box5">
        <view class="item4">
            <view class="yuan"></view>
            <view class="yuan"></view>
        </view>
        <view class="item5">
            <view class="yuan"></view>
        </view>
        <view class="item4">
            <view class="yuan"></view>
            <view class="yuan"></view>
        </view>
    </view>

    <view class="box6">
        <view class="yuan"></view>
        <view class="yuan"></view>
        <view class="yuan"></view>
        <view class="yuan"></view>
        <view class="yuan"></view>
        <view class="yuan"></view>
    </view>

</view>

js代码如下

.box1{
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father{
  display:flex;
  flex-wrap: wrap;
}
.yuan{
  margin: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.box3{
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 5px;
  display: flex;
}
.item1{
  align-self: center;
}
.item2{
  align-self: flex-end;
}
.box4{
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.item3{
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;
}
.box5{
  margin: 5px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #f0f0f0;
}
.item4{
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;
}
.item5{
  display: flex;
  justify-content: center;
}
.box6{
  margin: 5px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: space-between;
}