美文网首页
flex骰子布局

flex骰子布局

作者: 海晏河清_富贵荣华 | 来源:发表于2020-11-09 22:21 被阅读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>

    相关文章

      网友评论

          本文标题：flex骰子布局

          本文链接：https://www.haomeiwen.com/subject/dewrbktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|flex骰子布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！