<script setup lang="tsx">
const data = [
  {
    title: '农村有机物',
    description: '有关于农村有机物的新闻',
    image: 'https://picsum.photos/id/10/640/360',
  },
  {
    title: '农村有机肥',
    description: '有关于农村有机肥的新闻',
    image: 'https://picsum.photos/id/13/640/360',
  },
  {
    title: '农村化肥',
    description: '有关于农村化肥的新闻',
    image: 'https://picsum.photos/id/12/640/360',
  },
  {
    title: '农村农药',
    description: '有关于农村农药的新闻',
    image: 'https://picsum.photos/id/11/640/360',
  },
  {
    title: '农村种子',
    description: '有关于农村种子的新闻',
    image: 'https://picsum.photos/id/14/640/360',
  },

]
</script>

<template>
  <section class="">
    <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6">
      <div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
        <h2 class="mb-4 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
          有关于农村废弃物特征的诸多诸多新闻
        </h2>
        <p class="mb-4 font-light">
          远程办理、智慧农业、直播带货……如今的乡村变得越来越“硬核”！手机成为了新农具，网络成为了新农资，直播成为了新农活。数字技术在为经济增长提供强大动力的同时，也正以多种形式助力乡村振兴。
        </p>
        <p class="mb-4 font-medium">
          2018年，中共中央、国务院印发的《乡村振兴战略规划（2018-2022）》指出，大力发展数字农业，实施智慧农业工程和“互联网+”现代农业行动，建设具有广泛性的农村电子商务发展基础设施，加快建立健全适应农产品电商发展的标准体系等。

          <br>在政策的指引下，近年来，浙江、江苏、山东、福建等地，一批批的专业“淘宝村”纷纷涌现。在浙江丽水，通过一系列政策保障，以农村青年、大学毕业生为主要服务群体，以优质农特产品网上销售为工作重点的农村电子商务，这几年如雨后春笋般冒了出来。
        </p>
        <a href="#" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
          查看更多
          <svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
        </a>
      </div>
    </div>
  </section>

  <div class="grid grid-cols-2 gap-4 pt-10 mx-auto px-[500px] md:grid-cols-3 lg:grid-cols-4">
    <Card v-for="item in data" :key="item.title" class="overflow-hidden">
      <CardContent class="p-0">
        <img :src="item.image" alt="news" class="w-full">
      </CardContent>
      <CardHeader>
        <CardTitle>{{ item.title }}</CardTitle>
        <CardDescription>{{ item.description }}</CardDescription>
      </CardHeader>
    </Card>
  </div>
</template>
