ct/app/components/news/new.vue

<script lang="ts" setup>
import {onMounted, ref} from "vue";


// 文章数据
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>
    <!-- 顶部 -->
    <nav class="navbar navbar-default navbar-fixed-top" style="background: rgba(255,255,255,1);">
      <div class="container">

        <div class="navbar-header">
          <button class="navbar-toggle" data-target="#mynav" data-toggle="collapse">
            <span>玉犀科技</span>
          </button>
          <a href="/"><img
              class="img-responsive"
              src="/news/top_logo.png"
              style='margin-top:4px'></a>
        </div>

        <div id="mynav" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="hidden-xs hidden-sm"><a href="/">首页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" role="button">解决方案 <span class="caret"/></a>
              <ul class="dropdown-menu">
                <li><a class="menu-group" href="javascript:void(0);">共享</a></li>
                <li><a href="/sharedSolutions/bike">共享单车</a></li>
                <li><a href="/sharedSolutions/carShare">共享汽车</a></li>
                <li><a href="/sharedSolutions/sharedbed">共享陪护床</a></li>
                <li><a href="/sharedSolutions/scooter">共享滑板车</a></li>
                <li><a href="/sharedSolutions/eBike">共享助力车</a></li>

              </ul>
            </li>

            <li class="dropdown">
              <a
                  aria-expanded="false" aria-haspopup="true" class="dropdown-toggle"
                  data-toggle="dropdown" href="https://www.yuxiit.com/news/news_437.html#" role="button">定制开发 <span
                  class="caret"/></a>
              <ul class="dropdown-menu">

                <li><a href="/softwareDevelopment/app">APP开发</a></li>
                <li class="divider" role="separator"/>
                <li><a href="/softwareDevelopment/miniprogram">小程序开发</a></li>

              </ul>
            </li>
            <li><a href="/about">关于玉犀 </a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/">电话：0755-85225123
              <!-- <span class="hidden-xs hidden-sm"> 0755-85225123 / </span> 18123752516 --></a></li>
          </ul>
        </div><!-- /.navbar-collapse -->

      </div>
    </nav>
    <!-- 文章正文 -->
    <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>