379 lines
13 KiB
Vue
379 lines
13 KiB
Vue
<script lang="ts" setup>
|
||
import {onMounted, ref} from "vue";
|
||
|
||
// definePageMeta({
|
||
// layout: 'no-new'
|
||
// })
|
||
|
||
|
||
// 文章数据
|
||
const articleData = ref({
|
||
title: '玉犀景区SaaS平台 打造专业景区共享出行综合解决方案',
|
||
publishDate: '2025年07月08日 12:40',
|
||
category: '景区共享电动车',
|
||
content: `
|
||
<p class="MsoNormal">
|
||
<span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
|
||
<font face="宋体">想必有很多游客深有感触，在偌大景区实在走不动</font><font face="Calibri">?</font><font face="宋体">有老又有小，想坐观光车又要排队等待</font><font face="Calibri">?</font><font face="宋体">现在，一辆共享扫码代步观光车就能解决游客烦恼。用户只需用手机扫码，即可解锁一辆共享观光车。游客通过玉犀景区</font><font face="Calibri">SaaS</font><font face="宋体">智慧出行平台的微信、支付宝小程序扫码进入充值使用，按时计费付费并实时退费，快速完成扫、用、停、还等操作，让游客安心享受便捷、无感的共享出行服务。</font>
|
||
</span>
|
||
</p>
|
||
<p class="MsoNormal">
|
||
<img src="/news/car_model-6.png" alt="设备" style="float: none;">
|
||
</p>
|
||
<p class="MsoNormal">
|
||
<span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
|
||
<font face="宋体">玉犀景区</font><font face="Calibri">SaaS</font><font face="宋体">智慧出行平台通过"场、车、人"三大核心要素，以"为游客提供出行便利""为景区实现增值创收"为两大核心目标，实现了基于物联网硬件、云端软件系统为主体的出行解决方案，通过运营服务、运维服务、数据统计等核心模块为业务赋能。</font>
|
||
</span>
|
||
</p>
|
||
<p class="MsoNormal">
|
||
<span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
|
||
近几年来，玉犀科技研发的共享扫码代步车持续向景区渗透应用，游客扫码用车订单量增多，景区管理方不但可通过管理后台实时查看订单详情、统计分析营运情况的需求还能够为客户提供涵盖应用中心、会员管理、协议管理、订单管理、账户管理等丰富功能的一站式服务，方便客户随时随地搜索并查看车辆订单详情，统计订单数据。除此之外，还可查询使用车辆的支付流水和退款状态，付款信息、营收情况等一键清晰，辅助客户进行针对性的运营管理，进而为游客提供更智慧、便捷的服务。
|
||
</span>
|
||
</p>
|
||
<p class="MsoNormal">
|
||
<span style="mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;mso-font-kerning:1.0000pt;">
|
||
接下来，玉犀科技也将高效、智能的共享出行解决方案推广至更广阔的场景，助力景区旅游服务快速发展。
|
||
</span>
|
||
</p>
|
||
`,
|
||
prevArticle: {
|
||
title: '景区共享自行车运营方案都有哪些？',
|
||
url: 'http://www.yuxiit.com/news/news_407.html'
|
||
},
|
||
nextArticle: {
|
||
title: '暂时没有了',
|
||
url: '#'
|
||
}
|
||
})
|
||
|
||
// 热门标签
|
||
const hotTags = ref([
|
||
'景区单车', '政务平台', '共享经济', '共享汽车APP开发', '共享类',
|
||
'共享汽车软件开发', '共享雨伞APP开发', '共享雨伞软件开发', '共享货车开发'
|
||
])
|
||
|
||
// 推荐文章数据
|
||
const recommendedArticles = ref({
|
||
solutions: [
|
||
{
|
||
title: '玉犀景区SaaS平台 打造专业景区共享出行综合解决方案',
|
||
date: '2025-07-08',
|
||
url: 'http://www.yuxiit.com/news/news_437.html'
|
||
},
|
||
{title: '景区共享自行车运营方案都有哪些？', date: '2023-05-12', url: 'http://www.yuxiit.com/news/news_407.html'},
|
||
{
|
||
title: '为什么说景区共享代步车的未来发展空间巨大？',
|
||
date: '2023-05-08',
|
||
url: 'http://www.yuxiit.com/news/news_401.html'
|
||
},
|
||
{
|
||
title: '景区共享单车具备什么功能特点和收费标准？',
|
||
date: '2023-04-14',
|
||
url: 'http://www.yuxiit.com/news/news_394.html'
|
||
},
|
||
{title: '新冠疫情成为共享电单车行业新契机！', date: '2020-09-08', url: 'http://www.yuxiit.com/news/news_300.html'}
|
||
],
|
||
knowledge: [
|
||
{
|
||
title: '共享电动车为何能在共享经济中独树一帜？',
|
||
date: '2023-06-29',
|
||
url: 'http://www.yuxiit.com/news/news_426.html'
|
||
},
|
||
{title: '共享经济项目为何能受到大众的青睐？', date: '2023-05-16', url: 'http://www.yuxiit.com/news/news_409.html'},
|
||
{title: '景区共享智能代步车运营方案有哪些？', date: '2023-05-10', url: 'http://www.yuxiit.com/news/news_402.html'},
|
||
{
|
||
title: '玉犀景区共享代步车系统具备什么样的优势？',
|
||
date: '2023-04-07',
|
||
url: 'http://www.yuxiit.com/news/news_391.html'
|
||
},
|
||
{title: '做共享电动车能赚到钱吗', date: '2020-03-07', url: 'http://www.yuxiit.com/news/news_308.html'}
|
||
],
|
||
industry: [
|
||
{
|
||
title: '景区共享电动代步车如何引领景区发展趋势？',
|
||
date: '2024-12-11',
|
||
url: 'http://www.yuxiit.com/news/news_432.html'
|
||
},
|
||
{title: '景区共享电动代步车有几种合作模式?', date: '2023-07-19', url: 'http://www.yuxiit.com/news/news_431.html'},
|
||
{title: '景区共享观光代步车为何如此火爆？', date: '2023-07-13', url: 'http://www.yuxiit.com/news/news_430.html'},
|
||
{
|
||
title: '2023年了，共享电动车项目还具备投资价值吗？',
|
||
date: '2023-07-04',
|
||
url: 'http://www.yuxiit.com/news/news_428.html'
|
||
},
|
||
{title: '共享电动车项目投资大吗？', date: '2023-07-03', url: 'http://www.yuxiit.com/news/news_427.html'}
|
||
]
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 加载CSS样式文件
|
||
loadCSSFiles()
|
||
|
||
// 加载JavaScript文件
|
||
loadJSFiles()
|
||
})
|
||
|
||
const loadJSFiles = () => {
|
||
const jsFiles = [
|
||
'/news/jquery.1.11.3.min.js',
|
||
'/news/bootstrap.min.js',
|
||
'/news/float.js',
|
||
|
||
]
|
||
|
||
jsFiles.forEach(src => {
|
||
// 检查是否已经加载过该JS文件
|
||
const existingScript = document.querySelector(`script[src="${src}"]`)
|
||
if (!existingScript) {
|
||
const script = document.createElement('script')
|
||
script.src = src
|
||
script.type = 'text/javascript'
|
||
document.head.appendChild(script)
|
||
}
|
||
})
|
||
}
|
||
|
||
const loadCSSFiles = () => {
|
||
const cssFiles = [
|
||
'/news/bootstrap.min.css',
|
||
'/news/main22.css',
|
||
'/news/new_index.css',
|
||
'/news/float.css',
|
||
'/news/animate.min.css'
|
||
]
|
||
|
||
cssFiles.forEach(href => {
|
||
// 检查是否已经加载过该CSS文件
|
||
const existingLink = document.querySelector(`link[href="${href}"]`)
|
||
if (!existingLink) {
|
||
const link = document.createElement('link')
|
||
link.rel = 'stylesheet'
|
||
link.href = href
|
||
link.type = 'text/css'
|
||
document.head.appendChild(link)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view>
|
||
<!-- 文章正文 -->
|
||
<section class="container" style="margin-top: 88px;">
|
||
<div class="row">
|
||
<!-- 左边部分 -->
|
||
<div class="col-md-8 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
|
||
<!-- 文字主体 -->
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<h2>{{ articleData.title }}</h2>
|
||
<p id="label" style="border-bottom: 1px solid #ddd; margin-top: 20px;">
|
||
<span>{{ articleData.publishDate }}</span>
|
||
<span class="pull-right">分类：{{ articleData.category }}</span>
|
||
</p>
|
||
<div class="article-content" v-html="articleData.content"/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上一篇/下一篇 -->
|
||
<div class="nextorpre" style="margin-top: 38px; border-top: 1px solid #ddd; padding-top: 8px;">
|
||
<li class="pull-left">上一篇：
|
||
<a :href="articleData.prevArticle.url">{{ articleData.prevArticle.title }}</a>
|
||
</li>
|
||
<li class="pull-right">下一篇：
|
||
<a :href="articleData.nextArticle.url">{{ articleData.nextArticle.title }}</a>
|
||
</li>
|
||
</div>
|
||
<br><br><br><br>
|
||
</div><!--左边部分-->
|
||
|
||
<!-- 右边部分 -->
|
||
<aside class="col-md-4" style="border-left: 1px solid #eee; background: #fefefe;">
|
||
<!-- 热门标签 -->
|
||
<div
|
||
class="widget tags wow fadeInRight animated"
|
||
style="margin-bottom: 30px !important; visibility: visible; animation-name: fadeInRight;">
|
||
<h4>热门标签</h4>
|
||
<ul class="tag-cloud">
|
||
<li v-for="tag in hotTags" :key="tag">
|
||
<a class="btn btn-xs" href="#" @click.prevent>{{ tag }}</a>
|
||
</li>
|
||
</ul>
|
||
</div><!-- 热门标签 -->
|
||
|
||
<!-- 解决方案推荐 -->
|
||
<div
|
||
class="sy_news animated" data-wow-delay="200ms"
|
||
style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
|
||
<h4>解决方案</h4>
|
||
<ul>
|
||
<li v-for="article in recommendedArticles.solutions" :key="article.title">
|
||
<a :href="article.url" :title="article.title" target="_blank">
|
||
<span class="pull-right">{{ article.date }}</span>{{ article.title }}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 开发知识推荐 -->
|
||
<div
|
||
class="sy_news animated" data-wow-delay="200ms"
|
||
style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
|
||
<h4>开发知识</h4>
|
||
<ul>
|
||
<li v-for="article in recommendedArticles.knowledge" :key="article.title">
|
||
<a :href="article.url" :title="article.title" target="_blank">
|
||
<span class="pull-right">{{ article.date }}</span>{{ article.title }}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 行业动态推荐 -->
|
||
<div
|
||
class="sy_news animated" data-wow-delay="200ms"
|
||
style="visibility: visible; animation-delay: 200ms; animation-name: fadeInDown;">
|
||
<h4>行业动态</h4>
|
||
<ul>
|
||
<li v-for="article in recommendedArticles.industry" :key="article.title">
|
||
<a :href="article.url" :title="article.title" target="_blank">
|
||
<span class="pull-right">{{ article.date }}</span>{{ article.title }}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</aside><!-- 右边部分 -->
|
||
|
||
</div><!--/.row-->
|
||
</section><!--/#blog-->
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 文章内容样式 */
|
||
.article-content {
|
||
margin-top: 20px;
|
||
line-height: 1.8;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.article-content p {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.article-content img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
/* 文本截断样式 */
|
||
.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;
|
||
}
|
||
|
||
.col-md-8, .col-md-4 {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
/* 悬停效果 */
|
||
.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);
|
||
}
|
||
|
||
/* 标签云样式 */
|
||
.tag-cloud li {
|
||
display: inline-block;
|
||
margin: 2px;
|
||
}
|
||
|
||
.tag-cloud a {
|
||
display: inline-block;
|
||
padding: 4px 8px;
|
||
background-color: #f5f5f5;
|
||
color: #666;
|
||
text-decoration: none;
|
||
border-radius: 3px;
|
||
font-size: 12px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tag-cloud a:hover {
|
||
background-color: #ff8200;
|
||
color: #fff;
|
||
}
|
||
|
||
/* 推荐文章样式 */
|
||
.sy_news ul li {
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.sy_news ul li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.sy_news ul li a {
|
||
color: #333;
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
display: block;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.sy_news ul li a:hover {
|
||
color: #ff8200;
|
||
}
|
||
|
||
.sy_news ul li a span {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 上一篇下一篇样式 */
|
||
.nextorpre {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.nextorpre li {
|
||
list-style: none;
|
||
margin: 0;
|
||
}
|
||
|
||
.nextorpre a {
|
||
color: #ff8200;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nextorpre a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</style> |