RuralDatabase/apps/web/pages/news.vue

67 lines
3.1 KiB
Vue
Raw Normal View History

2024-07-05 02:07:18 +08:00
<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>