<template>
    <div class="article-block">
        <div class="article-block-title">
            <div>{{title}}</div>
            <div>{{more}}</div>
        </div>
        <div v-for="item in data">
        <fx-article-item :data="item" :direction="direction" :height="height"></fx-article-item>
    </div>
    </div>
    
</template>
    <script lang="ts">
        export default {
          name: 'FxArticle',
        };
    </script>
    <script setup lang="ts">
        import { onMounted, reactive, ref, nextTick, onUnmounted } from 'vue';
        import fxArticleItem from '../fxArticleItem/index.vue';
    
        const props = defineProps({
            title : { 
                type: String,
                default: () => {
                    return '导航名称' 
                },
            },
            data: {
                type: Array,
                default: () => {
                    return []
                },
            },
            direction : { // 呈现方式 横向 和 竖向 默认横向
                type: String,
                default: () => {
                    return 'horizontal' // vertical
                },
            }
        });
        const { data, direction} = props
    </script>
    <style lang="less">
    
    </style>