flex骰子布局
2020-11-09 本文已影响0人
海晏河清_富贵荣华
image.png
用的是uniapp进行的开发，样式统一整理在最后
1
image.png
<view class="box circle1">
<view class="pip"></view>
</view>
2
image.png
<view class="box circle2">
<view class="pip"></view>
<view class="pip"></view>
</view>
3
image.png
<view class="box circle3">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
4
image.png
<view class="box circle4">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
5
image.png
<view class="box circle5">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
6
image.png
<view class="box circle6">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<view class="box circle6">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
7
image.png
<view class="box circle7">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
8
image.png
<view class="box circle8">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
9
image.png
<view class="box circle9">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
代码统一整理如下
<template>
<view class="content">
<!-- 1 -->
<view class="box circle1">
<view class="pip"></view>
</view>
<!-- 2 -->
<view class="box circle2">
<view class="pip"></view>
<view class="pip"></view>
</view>
<!-- 3 -->
<view class="box circle3">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<!-- 4 -->
<view class="box circle4">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<!-- 5 -->
<view class="box circle5">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<!-- 6 -->
<!-- <view class="box circle6">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
</view> -->
<view class="box circle6">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<!-- 7 -->
<view class="box circle7">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<!-- 8 -->
<view class="box circle8">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
<!-- 9 -->
<view class="box circle9">
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
<view class="pip1">
<view class="pip"></view>
<view class="pip"></view>
<view class="pip"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
page{
height: 100%;
}
.content{
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.box{
width: 250rpx;
height: 250rpx;
background-color: #F0AD4E;
border-radius: 10%;
padding: 10px;
box-sizing: border-box;
.pip{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
background-color: #FFFFFF;
}
&.circle1{
display: flex;
// justify-content: center;
// justify-content: flex-end;
// align-items: center;
}
&.circle2{
display: flex;
justify-content: space-between;
// align-items: center;
.pip:nth-child(2){
align-self: flex-end;
}
}
&.circle3{
display: flex;
justify-content: space-between;
.pip:nth-child(2){
align-self: center;
}
.pip:nth-child(3){
align-self: flex-end;
}
}
&.circle4{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
&.circle5{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pip1:nth-child(2){
align-self: center;
}
}
// &.circle6{
// display: flex;
// flex-direction: column;
// justify-content: space-between;
// .pip1{
// display: flex;
// justify-content: space-between;
// }
// }
&.circle6{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
&.circle7{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pip1:nth-child(2){
// justify-content: center;
align-self: center;
}
}
&.circle8{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
&.circle9{
display: flex;
justify-content: space-between;
.pip1{
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
</style>
