文章页面和文章跳转
This commit is contained in:
WindowBird
parent
9ab546d5bb
commit
6a4800acbb
|
|
@ -18,17 +18,16 @@
|
|||
<h2 class="text-xl font-semibold text-default">解决方案</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<div
|
||||
v-for="article in articles.solutions"
|
||||
:key="article.id"
|
||||
class="group cursor-pointer"
|
||||
@click="handleArticleClick(article.link)"
|
||||
>
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2 line-clamp-2">
|
||||
创特景区SaaS平台 打造专业景区共享出行综合解决方案
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2025-07-08 12:40</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
||||
为什么说景区共享代步车的未来发展空间巨大?
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2023-05-08 11:25</p>
|
||||
<p class="text-sm text-muted">{{ article.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,17 +38,16 @@
|
|||
<h2 class="text-xl font-semibold text-default">开发知识</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<div
|
||||
v-for="article in articles.knowledge"
|
||||
:key="article.id"
|
||||
class="group cursor-pointer"
|
||||
@click="handleArticleClick(article.link)"
|
||||
>
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
||||
共享电动车为何能在共享经济中独树一帜?
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2023-06-29 12:26</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
||||
景区共享智能代步车运营方案有哪些?
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2023-05-10 10:23</p>
|
||||
<p class="text-sm text-muted">{{ article.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,17 +58,16 @@
|
|||
<h2 class="text-xl font-semibold text-default">行业动态</h2>
|
||||
</div>
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="group cursor-pointer">
|
||||
<div
|
||||
v-for="article in articles.trends"
|
||||
:key="article.id"
|
||||
class="group cursor-pointer"
|
||||
@click="handleArticleClick(article.link)"
|
||||
>
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
||||
景区共享电动代步车如何引领景区发展趋势?
|
||||
{{ article.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2024-12-11 23:53</p>
|
||||
</div>
|
||||
<div class="group cursor-pointer">
|
||||
<h3 class="text-lg font-medium text-default group-hover:text-primary transition-colors mb-2">
|
||||
景区共享观光代步车为何如此火爆?
|
||||
</h3>
|
||||
<p class="text-sm text-muted">2023-07-13 15:42</p>
|
||||
<p class="text-sm text-muted">{{ article.date }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,35 +81,53 @@
|
|||
const articles = {
|
||||
solutions: [
|
||||
{
|
||||
id: 1,
|
||||
title: "创特景区SaaS平台 打造专业景区共享出行综合解决方案",
|
||||
date: "2025-07-08 12:40"
|
||||
date: "2025-07-08 12:40",
|
||||
link: "/new"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "为什么说景区共享代步车的未来发展空间巨大?",
|
||||
date: "2023-05-08 11:25"
|
||||
date: "2023-05-08 11:25",
|
||||
link: "/news/scenic-shared-vehicle-future"
|
||||
}
|
||||
],
|
||||
knowledge: [
|
||||
{
|
||||
id: 3,
|
||||
title: "共享电动车为何能在共享经济中独树一帜?",
|
||||
date: "极 2023-06-29 12:26"
|
||||
date: "2023-06-29 12:26",
|
||||
link: "/news/shared-ebike-unique-position"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "景区共享智能代步车运营方案有哪些?",
|
||||
date: "2023-05-10 10:23"
|
||||
date: "2023-05-10 10:23",
|
||||
link: "/news/scenic-smart-vehicle-operations"
|
||||
}
|
||||
],
|
||||
trends: [
|
||||
{
|
||||
id: 5,
|
||||
title: "景区共享电动代步车如何引领景区发展趋势?",
|
||||
date: "2024-12-11 23:53"
|
||||
date: "2024-12-11 23:53",
|
||||
link: "/news/scenic-ebike-trend-leadership"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "景区共享观光代步车为何如此火爆?",
|
||||
date: "2023-07-13 15:42"
|
||||
date: "2023-07-13 15:42",
|
||||
link: "/news/scenic-sightseeing-vehicle-popularity"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 处理文章点击事件
|
||||
const handleArticleClick = (articleLink) => {
|
||||
// 使用Nuxt的navigateTo进行路由跳转
|
||||
navigateTo(articleLink)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
470
app/components/news/new.vue
Normal file
470
app/components/news/new.vue
Normal file
|
|
@ -0,0 +1,470 @@
|
|||
<script lang="ts" setup>
|
||||
// 文章头部信息
|
||||
const articleHeader = {
|
||||
title: '共享烘干机APP方案开发与制作',
|
||||
date: '2019年05月22日 15:36',
|
||||
category: '共享解决方案'
|
||||
}
|
||||
|
||||
// 文章主要内容
|
||||
const articleContent = {
|
||||
headline: '共享干衣机方案开发',
|
||||
description: '解决用户出差旅行时衣服换洗烘干、衣服消毒去味、衣服熨烫等问题，使出行更加方便和快捷，让出差更简单。',
|
||||
heroImage: {
|
||||
src: 'https://picsum.photos/600/400?random=shared-dryer',
|
||||
alt: '共享干衣机',
|
||||
overlayText: '方案开发'
|
||||
},
|
||||
paragraphs: [
|
||||
'根据中国酒店行业市场报告调查显示，随着旅游业的快速发展，酒店行业也迎来了新的发展机遇。共享经济模式在酒店行业的应用越来越广泛，从共享酒店到共享空气净化器，再到共享烘干机，各种共享项目层出不穷。',
|
||||
'共享烘干机解决的痛点主要是酒店住宿人群的一个共享烦恼。在酒店住宿时，衣服洗完后很难快速晾干，特别是在潮湿的天气或者没有阳台的房间。共享烘干机通过手机扫码支付，提供便捷、快速、卫生的烘干服务，让用户在旅途中也能轻松处理衣物问题。'
|
||||
],
|
||||
tags: [
|
||||
'共享烘干机方案开发',
|
||||
'共享自助干衣机软件硬件方案'
|
||||
]
|
||||
}
|
||||
|
||||
// 热门标签
|
||||
const popularTags = [
|
||||
'景区单车',
|
||||
'政务平台',
|
||||
'共享经济',
|
||||
'共享汽车APP开发',
|
||||
'共享雨伞APP开发',
|
||||
'共享充电宝APP开发',
|
||||
'共享按摩椅APP开发',
|
||||
'共享洗衣机APP开发',
|
||||
'共享烘干机APP开发'
|
||||
]
|
||||
|
||||
// 解决方案文章列表
|
||||
const solutionsArticles = [
|
||||
{
|
||||
id: 1,
|
||||
title: '共享烘干机APP方案开发与制作',
|
||||
date: '2019-05-22',
|
||||
link: '/news/shared-dryer-solution'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '怎么样找合适的共享解决方案开发公司?',
|
||||
date: '2019-05-22',
|
||||
link: '/news/how-to-find-shared-solution-company'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '玉屏无人售货机系统软硬件一体化方案',
|
||||
date: '2019-05-21',
|
||||
link: '/news/unmanned-vending-machine-solution'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '共享充电线凭什么这么火?',
|
||||
date: '2019-05-20',
|
||||
link: '/news/why-shared-charging-cable-popular'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '玉犀无人售货机系统软硬件一体化方案',
|
||||
date: '2019-05-19',
|
||||
link: '/news/yuxi-unmanned-vending-machine'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '共享经济下的新商业模式探索',
|
||||
date: '2019-05-18',
|
||||
link: '/news/shared-economy-business-model'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '物联网技术在共享设备中的应用',
|
||||
date: '2019-05-17',
|
||||
link: '/news/iot-in-shared-devices'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '智能硬件开发的技术难点解析',
|
||||
date: '2019-05-16',
|
||||
link: '/news/smart-hardware-development-challenges'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '移动支付在共享经济中的重要性',
|
||||
date: '2019-05-15',
|
||||
link: '/news/mobile-payment-in-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '用户体验设计在共享APP中的关键作用',
|
||||
date: '2019-05-14',
|
||||
link: '/news/ux-design-in-shared-app'
|
||||
}
|
||||
]
|
||||
|
||||
// 开发知识文章列表
|
||||
const devKnowledgeArticles = [
|
||||
{
|
||||
id: 1,
|
||||
title: '怎么样找合适的共享解决方案开发公司?',
|
||||
date: '2019-05-22',
|
||||
link: '/news/how-to-find-shared-solution-company'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '共享APP开发的技术架构选择',
|
||||
date: '2019-05-21',
|
||||
link: '/news/shared-app-tech-architecture'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '移动端开发的最佳实践',
|
||||
date: '2019-05-20',
|
||||
link: '/news/mobile-development-best-practices'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '云服务在共享经济中的应用',
|
||||
date: '2019-05-19',
|
||||
link: '/news/cloud-services-in-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '数据库设计在共享系统中的考虑',
|
||||
date: '2019-05-18',
|
||||
link: '/news/database-design-shared-system'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'API设计的最佳实践',
|
||||
date: '2019-05-17',
|
||||
link: '/news/api-design-best-practices'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '前端框架选择指南',
|
||||
date: '2019-05-16',
|
||||
link: '/news/frontend-framework-selection'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '后端技术栈推荐',
|
||||
date: '2019-05-15',
|
||||
link: '/news/backend-tech-stack-recommendation'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'DevOps在项目开发中的应用',
|
||||
date: '2019-05-14',
|
||||
link: '/news/devops-in-project-development'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '代码质量保证的方法',
|
||||
date: '2019-05-13',
|
||||
link: '/news/code-quality-assurance'
|
||||
}
|
||||
]
|
||||
|
||||
// 行业动态文章列表
|
||||
const industryTrendsArticles = [
|
||||
{
|
||||
id: 1,
|
||||
title: '酒店共享烘干机 引领共享经济新革命',
|
||||
date: '2019-05-22',
|
||||
link: '/news/hotel-shared-dryer-revolution'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '玉犀科技浅析共享碾米机方案开发的发展潜力',
|
||||
date: '2019-05-21',
|
||||
link: '/news/shared-rice-mill-development-potential'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '共享经济市场规模持续增长',
|
||||
date: '2019-05-20',
|
||||
link: '/news/shared-economy-market-growth'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '物联网技术推动共享设备智能化',
|
||||
date: '2019-05-19',
|
||||
link: '/news/iot-promotes-shared-device-intelligence'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '移动支付普及加速共享经济发展',
|
||||
date: '2019-05-18',
|
||||
link: '/news/mobile-payment-accelerates-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '人工智能在共享服务中的应用',
|
||||
date: '2019-05-17',
|
||||
link: '/news/ai-in-shared-services'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '区块链技术为共享经济带来新机遇',
|
||||
date: '2019-05-16',
|
||||
link: '/news/blockchain-opportunities-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '5G技术将如何改变共享经济',
|
||||
date: '2019-05-15',
|
||||
link: '/news/5g-changes-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: '可持续发展理念在共享经济中的体现',
|
||||
date: '2019-05-14',
|
||||
link: '/news/sustainability-in-shared-economy'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: '共享经济监管政策的最新动态',
|
||||
date: '2019-05-13',
|
||||
link: '/news/shared-economy-regulation-updates'
|
||||
}
|
||||
]
|
||||
|
||||
// 分页导航
|
||||
const pagination = {
|
||||
previous: {
|
||||
title: '共享充电线凭什么这么火?',
|
||||
link: '/news/why-shared-charging-cable-popular'
|
||||
},
|
||||
next: {
|
||||
title: '玉犀无人售货机系统软硬件一体化方案',
|
||||
link: '/news/yuxi-unmanned-vending-machine'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<!-- 页面布局 -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<div class="lg:col-span-3">
|
||||
<!-- 文章头部 -->
|
||||
<header class="mb-8">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
{{ articleHeader.title }}
|
||||
</h1>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between text-gray-600 dark:text-gray-400">
|
||||
<span class="text-lg mb-2 sm:mb-0">{{ articleHeader.date }}</span>
|
||||
<span class="text-lg">分类: {{ articleHeader.category }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<article class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 md:p-8">
|
||||
<!-- 文章标题 -->
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">
|
||||
{{ articleContent.headline }}
|
||||
</h2>
|
||||
|
||||
<!-- 文章描述 -->
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-8 leading-relaxed">
|
||||
{{ articleContent.description }}
|
||||
</p>
|
||||
|
||||
<!-- 主图展示 -->
|
||||
<div class="relative mb-8">
|
||||
<div class="relative overflow-hidden rounded-xl">
|
||||
<img
|
||||
:src="articleContent.heroImage.src"
|
||||
:alt="articleContent.heroImage.alt"
|
||||
class="w-full h-64 md:h-80 object-cover"
|
||||
>
|
||||
<!-- 红色覆盖按钮 -->
|
||||
<div class="absolute bottom-4 right-4">
|
||||
<div class="bg-red-600 text-white px-4 py-2 rounded-lg font-semibold shadow-lg">
|
||||
{{ articleContent.heroImage.overlayText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章段落 -->
|
||||
<div class="space-y-6 mb-8">
|
||||
<p
|
||||
v-for="(paragraph, index) in articleContent.paragraphs"
|
||||
:key="index"
|
||||
class="text-gray-700 dark:text-gray-300 leading-relaxed"
|
||||
>
|
||||
{{ paragraph }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 文章标签 -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in articleContent.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页导航 -->
|
||||
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
||||
<div class="flex flex-col sm:flex-row sm:justify-between gap-4">
|
||||
<div v-if="pagination.previous" class="flex-1">
|
||||
<NuxtLink
|
||||
:to="pagination.previous.link"
|
||||
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
|
||||
>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
|
||||
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div v-if="pagination.next" class="flex-1">
|
||||
<NuxtLink
|
||||
:to="pagination.next.link"
|
||||
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
|
||||
>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
|
||||
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="space-y-8">
|
||||
|
||||
<!-- 热门标签 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
热门标签
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<NuxtLink
|
||||
v-for="tag in popularTags"
|
||||
:key="tag"
|
||||
to="/tags"
|
||||
class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
|
||||
>
|
||||
{{ tag }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 解决方案 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
解决方案
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<NuxtLink
|
||||
v-for="article in solutionsArticles"
|
||||
:key="article.id"
|
||||
:to="article.link"
|
||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||
>
|
||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||
{{ article.title }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ article.date }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开发知识 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
开发知识
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<NuxtLink
|
||||
v-for="article in devKnowledgeArticles"
|
||||
:key="article.id"
|
||||
:to="article.link"
|
||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||
>
|
||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||
{{ article.title }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ article.date }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 行业动态 -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
行业动态
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<NuxtLink
|
||||
v-for="article in industryTrendsArticles"
|
||||
:key="article.id"
|
||||
:to="article.link"
|
||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||
>
|
||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||
{{ article.title }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
{{ article.date }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 文本截断样式 */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1024px) {
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.hover\:bg-gray-50:hover {
|
||||
background-color: rgb(249 250 251);
|
||||
}
|
||||
|
||||
.dark .hover\:bg-gray-50:hover {
|
||||
background-color: rgb(55 65 81);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
background-color: rgb(243 244 246);
|
||||
}
|
||||
|
||||
.dark .hover\:bg-gray-100:hover {
|
||||
background-color: rgb(75 85 99);
|
||||
}
|
||||
</style>
|
||||
11
app/components/news/solution.vue
Normal file
11
app/components/news/solution.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
app/pages/new.vue
Normal file
13
app/pages/new.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<NewsNew/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user