xmhjc-web/src/components/NewsCom/NewsType0.vue

<template>
    <!-- 自定义组件 图片展示 -->
    <div class="AboutUs">
        <div v-for="item in datalist" :key="item.id">
            <imgItem :title="item.title" :imgurlList="item.imgurlList" />
        </div>
    </div>
</template>

<script setup>
import {onMounted,ref,reactive,watch} from 'vue'
import imgItem from './base/imgItem.vue'

const datalist = ref([
    {   
        imgurlList:[
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            },
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            }
        ],
        id:1,
        title:'研发中心'
    },
    {   
        imgurlList:[
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            },
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            },
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            }
        ],
        id:2,
        title:'实验基地'
    },
    {   
        imgurlList:[
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            },
            {
                url:'/public/img/index/img_jingcship1@3x.png',
            }
        ],
        id:3,
        title:'发酵实验基地'
    },
])

</script>

<style scoped>
.AboutUs{
    padding: 20px;
    background-color: #fff;
    width: 70vw;
    margin: 0 auto;
}
.AboutUsbox{
    min-height: 300px;
}
.boximg{
    width: 280px;
    height: 300px;
    float: left;
}
.boximg_img{
    width: 240px;
    height: 300px;
}
</style>