<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import NewsItemMini from '@/components/base/newsList/NewsItemMini.vue'
import NewsItem from '@/components/base/newsList/NewsItem.vue'
import NewsItemWithTag from '@/components/base/newsList/NewsItemWithTag.vue'
const span = 12
const news = {
    title: '新闻标题-老长了老长了老长了老长了老长了老长长了老长了',
    content: '新闻内容-老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了',
    from: "2025.1.1 · 来源：中国",
    aeraTags: ['人工智能', '深海']
}
</script>

<template>
    <el-row class="wrapper layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import NewsItem from '@/components/base/newsList/NewsItem.vue'` }}
</pre>
            <news-item class="common-padding" :title="news.title" :content="news.content" :from="news.from"></news-item>
        </el-col>
        <el-col :span="span">
            <pre>
{{ `import NewsItemMini from '@/components/base/newsList/NewsItemMini.vue'` }}
</pre>
            <news-item-mini class="common-padding" :title="news.title" :content="news.content"
                :from="news.from"></news-item-mini>
        </el-col>
        <el-col :span="span">
            <pre>
{{ `import NewsItemWithTag from '@/components/base/newsList/NewsItemWithTag.vue'` }}
</pre>
            <news-item-with-tag class="common-padding" :title="news.title" :content="news.content" :from="news.from"
                :aeraTags="news.aeraTags"></news-item-with-tag>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped></style>