小程序CSS生成2行两列，每列左边是图标，右边两行显示文字的列表样式

index.wxml

<view class="list-container">
    <view class="list-item">
        <image src="icon1.png" class="icon" />
        <view class="text">
            <text class="line1">第一行文字</text>
            <text class="line2">第二行文字</text>
        </view>
    </view>
    <view class="list-item">
        <image src="icon2.png" class="icon" />
        <view class="text">
            <text class="line1">第一行文字</text>
            <text class="line2">第二行文字</text>
        </view>
    </view>
    <view class="list-item">
        <image src="icon3.png" class="icon" />
        <view class="text">
            <text class="line1">第一行文字</text>
            <text class="line2">第二行文字</text>
        </view>
    </view>
    <view class="list-item">
        <image src="icon4.png" class="icon" />
        <view class="text">
            <text class="line1">第一行文字</text>
            <text class="line2">第二行文字</text>
        </view>
    </view>
</view>

index.wxss

/* 设置整体布局 */
.list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    background-color: #f0f0f0;
}

/* 每个列表项的样式 */
.list-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    width: 48%; /* 两列布局，每列宽度 */
}

/*标的 图样式 */
.icon {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
}

/* 文字部分的样式 */
.text {
    display: flex;
    flex-direction: column;
}

/* 每行文字的样式 */
.line1, .line2 {
    margin: 0;
    line-height: 1.5;
}