vue—封装组件（列表样式）

效果图：

 主要就是需要把写的vue前端页面中的每个数据抽离出来，方便后续的引用与修改

原来的vue代码：

<template>
    <view>
        <view class="index-list">
            <view class="index-list1">
                <view class="">
                    <image src="../../static/demo/userpic/12.jpg" mode="widthFix" lazy-load></image>
                    昵称
                </view>
                <view>
                    <view class="icon iconfont icon-zengjia"></view>关注
                </view>
            </view>
            <view class="index-list2">我是标题</view>
            <view class="index-list3">
                <!-- 图片 -->
                <image src="../../static/demo/datapic/11.jpg" mode="widthFix" lazy-load></image>
                <!-- 视频 -->
                <view class="icon iconfont icon-bofang index-list-play"></view>
                <view class="index-list-playInfo">
                    20W播放 2:47
                </view>
            </view>
            <view class="index-list4">
                <!-- 左边 -->
                <view>
                    <view>
                        <view class="icon iconfont icon-icon_xiaolian-mian"></view>10
                    </view>
                    <view>
                        <view class="icon iconfont icon-kulian"></view>10
                    </view>
                </view>
                <!-- 右边 -->
                <view>
                    <view>
                        <view class="icon iconfont icon-pinglun1"></view>10
                    </view>
                    <view>
                        <view class="icon iconfont icon-zhuanfa"></view>10
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<!-- uniapp在编译的时候会把子组件和父组件合并成同一个文件，一个组件的CSS可能会污染另一个组件的CSS，所以这时候需要使用scoped限制样式的作用域 -->
<style scoped>
    /* 封装常用样式 */
    
    
    .index-list{
        padding: 20rpx;
        border-bottom: 1rpx solid #EEEEEE;
    }
    .index-list1{
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    .index-list1>view:first-child{ 
        display: flex;
        align-items: center;
        color: #989898;
    }
    .index-list1>view:first-child image{
        width: 90rpx;
        height: 90rpx;
        border-radius: 100%;
    }
    .index-list1>view:last-child{
        display: flex;
        align-items: center;
        background-color: #F4F4F4;
        border-radius: 5rpx;
        padding: 0 10rpx;
    }
    .index-list2{
        padding-top: 15rpx;
        font-size: 35rpx;
    }
    .index-list3{
        padding-top: 15rpx;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .index-list3>image{
        padding-top: 15rpx;
        width: 100%;
        border-radius: 10rpx;
    }
    .index-list-play{
        position: absolute;
        font-size: 140rpx;
        color: #FFFFFF;
    }
    .index-list-playInfo{
        position: absolute;
        /* 这里的值是透明度 （可以在下载的icon的网页图标中调）*/
        background-color: rgb(51 51 51 / 48%);
        right: 8rpx;
        bottom: 8rpx;
        border-radius: 20rpx;
        color: #FFFFFF;
        padding: 0 15rpx;
        font-size: 22rpx;
    }
    .index-list4{
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* color: #989898; */
    }
    .index-list4 view{
        color: #989898;
    }
    .index-list4>view>view{
        display: flex;
        align-items: center;
    }
    .index-list4>view>view>view{
        margin-right: 15rpx;
    }
    .index-list4>view:first-child{
        display: flex;
        align-items: center;
    }
    .index-list4>view>view:first-child{
        margin-right: 15rpx;
    }
    .index-list4>view:last-child{
        display: flex;
        align-items: center;
    }
</style>

View Code