视频直播网站源码，uni-app左右平分九宫格样式

视频直播网站源码，uni-app左右平分九宫格样式

1.template：布局

 

<template>
    <view class="content">
        <view class="cp-xiangmu" v-for="item in imgs">
            <image :src="item.imgurl" class='cp_tupian' mode='widthFix'></image>
            <text class='cp-biaoti'>{{item.title}}</text>
        </view>
    </view>
</template>

​

2.最重要的是style样式

 

<style>
    .cp_tupian {
        width: 100%;
    }
    .cp-biaoti {
        font-size: 14px;
        color: gray;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cp-xiangmu {
        width: 50%;
        display: flex;
        padding: 3px;
        box-sizing: border-box;
        flex-direction: column;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
    }
</style>

 

 以上就是 视频直播网站源码，uni-app左右平分九宫格样式，更多内容欢迎关注之后的文章