ct/app/pages/sharedSolutions/sharedbed.vue

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

onMounted(() => {
  // 加载CSS样式文件
  loadCSSFiles()

  // 加载JavaScript文件
  loadJSFiles()
})

const loadJSFiles = () => {
  const jsFiles = [
    '/js/jquery-1.10.2.js',
    '/js/bootstrap.min.js',
    '/js/index.js',
    '/js/news.js',
    '/js/gopcOm.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 = [
    '/css/bootstrap.min.css',
    '/css/main2.css',


    '/css/yuxi2019.css',
    '/css/new_index.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>

    <!-- banner -->
    <div class="container-fluid bedbanner">
      <div class="bedbanner-info">
        <h2>共享陪护床小程序+管理后台+智能锁+陪护床柜 = 一站式解决方案</h2>
        <p>智能租赁/无人值守/共享设备/功能实用/材质环保/人性化设计</p>
        <a href="http://p.qiao.baidu.com//im/index?siteid=8233756&amp;ucid=7539873" target="_blank">立即咨询</a>
      </div>
      <div class="row bedbanner-item">

        <div class="col-xs-6 col-md-2 col-md-offset-2 mintem-grop">
          <div class="row">
            <div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_1.png"></div>
            <div class="col-xs-8"><span>智能</span> <br> 整体设备智能化、无人化管理、故障自动上报</div>
          </div>
        </div>

        <div class="col-xs-6 col-md-2 mintem-grop">
          <div class="row">
            <div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_2.png"></div>
            <div class="col-xs-8"><span>便携</span><br>微信、支付宝扫码开锁，免押金使用，自动关锁计费</div>
          </div>
        </div>

        <div class="col-xs-6 col-md-2 mintem-grop">
          <div class="row">
            <div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_3.png"></div>
            <div class="col-xs-8"><span>安全</span> <br>精工焊接，整体防水、防尘、抗压、防破坏</div>
          </div>
        </div>

        <div class="col-xs-6 col-md-2 mintem-grop">
          <div class="row">
            <div class="col-xs-4"><img alt="" class="img-responsive" src="/img/bed/icon_4.png"></div>
            <div class="col-xs-8"><span>舒适</span> <br>优质环保皮革，高密度回弹海绵，健康、舒适</div>
          </div>
        </div>

      </div>
    </div>


    <!-- 共享经济 -->
    <div class="container text-center bedConter">
      <div class="row bed-head">实现共享床柜租赁解决方案</div>
      <div class="row bed-body" style="color: #999; font-size: 14px;">
        <div class="col-md-6 col-md-offset-3" style="line-height: 2.4;">
          可通过GPRS远程开锁+GPS定位+蓝牙近距离开锁+使用定位轨迹+实时定位PC/微信/APP/服务器连接，支持定制、二次开发，可供单锁、可供锁+柜子+床配套生产
        </div>
      </div>
    </div>


    <!-- 微信小程序 -->
    <div style="background: #F8F8F8;">
      <div class="container text-center bedConter">
        <div class="row bed-head">微信小程序</div>
        <div class="row bed-body applet">
          <div class="col-md-4">
            <div><img alt="" class="center-block img-responsive" src="/img/bed/1.png"></div>
            <h4>一键扫码，说用就用</h4>
            <p>扫码开锁可以选择蓝牙，GPS、GPRS进行开锁，锁开之后即可使用</p>
          </div>

          <div class="col-md-4">
            <div><img alt="" class="center-block img-responsive" src="/img/bed/2.png"></div>
            <h4>实时计费，随心而行</h4>
            <p>可查看使用设备，使用时长与花费情况，让您用的放心</p>
          </div>

          <div class="col-md-4">
            <div><img alt="" class="center-block img-responsive" src="/img/bed/3.png"></div>
            <h4>使用结束，关锁结算</h4>
            <p>使用结束之后需将柜子合上以防影响他人过路，关锁即结束本次使用并结算金额</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 管理后台 -->
    <div class="container bedConter">
      <div class="row bed-head text-center">管理后台</div>
      <div class="management">
        <div class="row bed-body" style="line-height: 2.4;">
          <div class="col-md-8"><img alt="" class="img-responsive" src="/img/bed/4.png"></div>
          <div class="col-md-4">
            <h4>后台管理，数据总览</h4>
            <p>统计数据信息，查询每个数据来去记录</p>
          </div>
        </div>

        <div class="row bed-body" style="line-height: 2.4;">
          <div class="col-md-4">
            <h4>设备健康，状态查询</h4>
            <p>可查看使用设备，检测平台整个活跃度</p>
          </div>
          <div class="col-md-8"><img alt="" class="img-responsive" src="/img/bed/5.png"></div>
        </div>
      </div>
    </div>


    <!-- 陪护柜 -->
    <div style="background: #F8F8F8;">
      <div class="container text-center bedConter">
        <div class="row bed-head">陪护柜</div>
        <div class="row bed-body bedgroup">
          <div class="col-md-6">
            <img alt="" class="center-block img-responsive" src="/img/bed/bed1.png">
            <h4>入柜式</h4>
            <p>入柜式共享陪护床，一柜多用</p>
          </div>

          <div class="col-md-6">
            <img alt="" class="center-block img-responsive" src="/img/bed/bed2.png">
            <h4>大数据管理</h4>
            <p>共享大数据精准分析提升陪护率</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 陪护床智能锁 -->
    <div class="container text-center bedConter">
      <div class="row bed-head">陪护床智能锁</div>
      <div class="row bed-body lockgroup">
        <div class="col-md-6">
          <img alt="智能陪护床柜锁(网络锁)" class="center-block img-responsive" src="/img/bed/lock.png">
          <h4>智能陪护床柜锁(网络锁)</h4>
          <p>内置智能锁芯，表面无销钉处理，防水、防震、防拆，GPS精准定位，低功耗方案，支持蓝牙GPS、GPRS多种方案定制 </p>
        </div>
        <div class="col-md-6">
          <img alt="智能陪护床柜锁(蓝牙锁)" class="center-block img-responsive" src="/img/bed/lock.png">
          <h4>智能陪护床柜锁(蓝牙锁)</h4>
          <p>内置智能锁芯，表面无销钉处理，防水、防震、防拆，只支持蓝牙进行开锁/椅两用</p>
        </div>
      </div>
    </div>


    <!-- 好行业、好项目、坐享收益  -->
    <div style="background: #F8F8F8;">
      <div class="container text-center bedConter">

        <div class="row bed-head">好行业、好项目、坐享收益</div>
        <div class="row bed-minhead">创特科技共享陪护床，一个站在“风口”的万亿蓝海市场</div>

        <div class="row bed-body introduction">
          <div class="col-md-3">
            <h4>市场优势</h4>
            <img alt="" class="center-block img-responsive" src="/img/bed/item1.png">
            <p>刚需高频，市场前景巨大，3万家医院空白市场有待开发</p>
          </div>

          <div class="col-md-3">
            <h4>模式优势</h4>
            <img alt="" class="center-block img-responsive" src="/img/bed/item2.png">
            <p>聚焦医院场景，模式简单可迅速复制，扩大规模</p>
          </div>

          <div class="col-md-3">
            <h4>技术优势</h4>
            <img alt="" class="center-block img-responsive" src="/img/bed/item3.png">
            <p>自主研发，物联网+云计算技术实现系统化、统一化的云平台能力</p>
          </div>

          <div class="col-md-3">
            <h4>运营优势</h4>
            <img alt="" class="center-block img-responsive" src="/img/bed/item4.png">
            <p>手机后台管理运营，无需现场管理，无需人工值守</p>
          </div>
        </div>

      </div>
    </div>


    <!-- 投放优势 -->
    <div class="advantage">
      <div class="container text-center bedConter">
        <div class="row bed-head">投放优势</div>
        <div class="row bed-minhead">创特科技共享陪护床迎合市场需求，解决用户痛点</div>

        <div class="row bed-body advantage-body">
          <div class="col-md-3">
            <img alt="" class="center-block img-responsive" src="/img/bed/t1.png">
            <p>节省空间，方便医院管理</p>
          </div>

          <div class="col-md-3">
            <img alt="" class="center-block img-responsive" src="/img/bed/t2.png">
            <p>扫码即用，方便家属陪护</p>
          </div>

          <div class="col-md-3">
            <img alt="" class="center-block img-responsive" src="/img/bed/t3.png">
            <p>科技创新，自主技术研发</p>
          </div>

          <div class="col-md-3">
            <img alt="" class="center-block img-responsive" src="/img/bed/t4.png">
            <p>实时数据，方便报表统计</p>
          </div>
        </div>
      </div>
    </div>


    <!-- 陪护柜 -->
    <div class="container text-center bedConter">
      <div class="row bed-head">支持全网开发</div>
      <div class="row bed-body development">
        <div class="col-xs-6 col-md-3">
          <img alt="" class="center-block img-responsive" src="/img/bed/weixin.png">
          <p>微信平台</p>
        </div>

        <div class="col-xs-6 col-md-3">
          <img alt="" class="center-block img-responsive" src="/img/bed/houtai.png">
          <p>管理后台</p>
        </div>

        <div class="col-xs-6 col-md-3">
          <img alt="" class="center-block img-responsive" src="/img/bed/app.png">
          <p>APP</p>
        </div>

        <div class="col-xs-6 col-md-3">
          <img alt="" class="center-block img-responsive" src="/img/bed/lanya.png">
          <p>蓝牙</p>
        </div>
      </div>
    </div>


    <!-- 联系我们 -->
    <div class="abouts">
      <div class="container text-center bedConter">
        <div class="row bed-head"><img alt="" class="center-block" src="/img/bed/logo.png"></div>

        <div class="row bed-body abouts-body">
          <div class="col-md-3">
            <img alt="" src="/img/bed/shouji.png">手机：18123752516
          </div>
          <div class="col-md-3">
            <img alt="" src="/img/bed/phone.png">电话：0755-85225123
          </div>
          <div class="col-md-3">
            <img alt="" src="/img/bed/youxiang.png">邮箱：yuxi@yuxiit.com
          </div>
          <div class="col-md-3">
            <img alt="" src="/img/bed/qq.png">QQ：1829668236
          </div>
        </div>
      </div>
    </div>


  </view>
</template>

<style scoped>
/* 自定义动画效果 */
.hover\:shadow-lg:hover {
  transform: translateY(-2px);
}

/* 响应式字体大小 */
@media (max-width: 640px) {
  .text-4xl {
    font-size: 2rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }

  .text-6xl {
    font-size: 3rem;
  }
}
</style>