前端

Appearance

商品列表 ​

效果展示 ​

商品图片1

商品名称1

商品图片2

商品名称2

商品图片3

商品名称3

商品图片4

商品名称4

商品图片5

商品名称5

商品图片6

商品名称6

商品图片7

商品名称7

商品图片8

商品名称8

商品图片9

商品名称9

商品图片10

商品名称10

示例代码 ​

vue
<template>
    <div class="main" >

        <div class="list">
            <div class="item" v-for="i in 10">
                <p class="img"><img src="" :alt="'商品图片'+i"></p>
                <p class="name">商品名称{{ i }}</p>
            </div>
        </div>
        
    </div>
</template>


<script>
import * as _ from 'lodash-es'

export default{
    data(){
        return {
            
        }
    },
    mounted(){
        
    },
    methods:{
          
    }
}
</script>

<style scoped lang="scss">

    .main{
        width: 350px;
        height: 500px;
        overflow: auto;        
        border: 1px solid red;

        .list{
            padding: 10px;            
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .item{
                width: calc(50% - 5px);
                border: 1px solid blue;

                .img{
                    width: 100%;
                    height: 100px;
                }
                .name{

                }
            }
        }
        
    }
</style>