471 lines
15 KiB
Vue
471 lines
15 KiB
Vue
<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
|
|
:alt="articleContent.heroImage.alt"
|
|
:src="articleContent.heroImage.src"
|
|
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"
|
|
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"
|
|
to="/tags"
|
|
>
|
|
{{ 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> |