hongze_yb_xcx/pages/positionAnalysis/components/indexContent.vue

<template>
    <view class="list-content-wrap">
        <view class="top-box">
            <text style="margin-right:20rpx">4品种</text>
            <text>2023-2-06 13:30:30</text>
        </view>
        <view class="list-wrap">
            <view class="flex item" v-for="item in 4" :key="item">
                <view class="label">动力煤</view>
                <view style="flex:1">
                    <view class="opt">zc</view>
                    <view class="opt">zcccccc</view>
                    <view class="opt">zc</view>
                    <view class="opt">zcccccc</view>
                </view>
            </view>
        </view>
    </view>
      
</template>

<script>
const dayjs=require('@/utils/dayjs.min')
export default {
    name:'IndexContent',
    
}
</script>

<style lang="scss" scoped>
.list-content-wrap{
    .top-box{
        background: rgba(207, 192, 159, 0.1);
        padding: 15rpx 45rpx;
    }
    .list-wrap{
        padding: 34rpx 0 34rpx 34rpx;
        .item{
            margin-bottom: 40rpx;

            .label{
                color: #666;
                width: 150rpx;
                padding-top: 15rpx;
            }
            .opt{
                padding: 15rpx 10rpx;
                width: 28%;
                text-align: center;
                display: inline-block;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                background: #F5EFE2;
                font-size: 24rpx;
            }
        }
    }
}
</style>