ct/app/pages/sharedSolutions/carShare.vue

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

// 使用 Nuxt 3 的 useHead 来管理头部资源
useHead({
  link: [
    {rel: 'stylesheet', href: '/css/bootstrap.min.css'},
    {rel: 'stylesheet', href: '/css/main2.css'},
    {rel: 'stylesheet', href: '/css/yuxi2019.css'},
    {rel: 'stylesheet', href: '/css/Internet_Things.css'}
  ],
  script: [
 
    {src: '/js/index.js'},
    {src: '/js/gopcOm.js'}
  ]
})

onMounted(() => {
  // 页面挂载后的初始化逻辑可以在这里添加
  // 资源已经通过 useHead 预加载，无需动态加载
})
</script>

<template>

  <view>


    <!-- 页面主体 -->
    <!-- 页面主体 -->
    <div class="internet_Things_car">
      <div class="item12">
        <img alt="景区共享出行" src="/img/internet_thinks/banner7.jpg">
      </div>

      <div class="container" style="margin:0 auto; padding:0;">
        <!-- item1 景区共享出行解决方案 -->
        <div class="row item12 text-center" style="margin:0; padding:0 10px;">
          <h2>景区共享出行</h2>
          <h4>通过智能硬件及软件系统，为景区提供内部智慧出行解决方案</h4>
        </div>
        <div class="container text-center">
          <div class="col-xs-6 col-sm-3">
            <img alt="设备" class="center-block img-responsive case_img" src="/img/internet_thinks/device.png">
            <span class="case_text">设备</span>
          </div>
          <!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;" >+</div> -->
          <div class="col-xs-6 col-sm-3">
            <img alt="控制器" class="center-block img-responsive case_img" src="/img/internet_thinks/pilot.png">
            <span class="case_text">控制器</span>
          </div>
          <!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;">+</div> -->
          <div class="col-xs-6 col-sm-3">
            <img alt="小程序/APP" class="center-block img-responsive case_img" src="/img/internet_thinks/phone.png">
            <span class="case_text">小程序/APP</span>
          </div>
          <!-- <div class="col-md-1 hidden-xs" style="font-size: 40px; line-height: 168px; color: #333333;">+</div> -->
          <div class="col-xs-6 col-sm-3">
            <img alt="智能管理后台" class="center-block img-responsive case_img" src="/img/internet_thinks/admin.png">
            <span class="case_text">智能管理后台</span>
          </div>
        </div>

        <!--item2  景区电瓶车款式多样化 -->
        <div class="row item12 text-center" style="margin:80px 0 0 0; padding:0 10px;">
          <h2>景区出行方式多样化</h2>
        </div>
        <div class="container text-center">
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-4.png">
            <!-- <h4 style="margin-top: 38px;">款式1</h4> -->
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-5.png">
            <!-- <h4 style="margin-top: 38px;">款式2</h4> -->
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-6.png">
            <!-- <h4 style="margin-top: 38px;">款式3</h4> -->
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-7.png">
            <!-- <h4 style="margin-top: 38px;">款式4</h4> -->
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-8.png">
            <!-- <h4 style="margin-top: 38px;">款式5</h4> -->
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4" style="margin-bottom: 30px;">
            <img alt="设备" class="center-block img-responsive" src="/img/internet_thinks/car_model-9.png">
            <!-- <h4 style="margin-top: 38px;">款式6</h4> -->
          </div>
        </div>

        <!--item5  用户端小程序/APP -->
        <div class="row item12 text-center" style="margin:50px 0 0 0; padding:0 10px;">
          <h2>用户端小程序/APP</h2>
        </div>
        <div class="container">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="border:1px solid #ddd; margin-bottom:10px;">
              <img alt="扫码自助借车" src="/img/internet_thinks/user_1.png" style="width: 100%;">
              <div style="font-size:21px; padding: 32px 8px 16px 8px;">扫码自助借车</div>
              <div style="font-size:14px; padding: 0 8px;">小程序扫景区代步车上设有的二维码即可解锁使用</div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="border:1px solid #ddd; margin-bottom:10px;">
              <img alt="精准计费" src="/img/internet_thinks/user_2.png" style="width: 100%;">
              <div style="font-size:21px; padding: 32px 8px 16px 8px;">精准计费&查询行驶</div>
              <div style="font-size:14px;padding: 0 8px;">小程序可以进行精准计费，查看行驶时间与里程</div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="border:1px solid #ddd; margin-bottom:10px;">
              <img alt="超出服务区提示" src="/img/internet_thinks/user_3.png" style="width: 100%;">
              <div style="font-size:21px; padding: 32px 8px 16px 8px;">超出服务区提示</div>
              <div style="font-size:14px;padding: 0 8px;">车身喇叭会进行多次提醒，若骑出服务区后将断电</div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div style="border:1px solid #ddd; margin-bottom:10px;">
              <img alt="定点自助借还车" src="/img/internet_thinks/user_4.png" style="width: 100%;">
              <div style="font-size:21px; padding: 32px 8px 16px 8px;">定点自助借还车</div>
              <div style="font-size:14px;padding: 0 8px;">小程序可以进行精准计费，查看行驶时间与里程</div>
            </div>
          </div>
        </div>

        <!--item6 运维端小程序/APP -->
        <div class="row item12 text-center" style="margin:70px 0 0 0; padding:0 10px;">
          <h2>运维端小程序</h2>
        </div>
        <div class="container text-center">
          <div class="col-xs-6 col-sm-3">
            <img alt="车辆监控" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_1.png">
            <span class="opera_text">车辆监控</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="绑定中控" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_2.png">
            <span class="opera_text">绑定中控</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="低电筛选" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_3.png">
            <span class="opera_text">低电筛选</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="轨迹查询" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_4.png">
            <span class="opera_text">轨迹查询</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="开锁关锁" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_5.png">
            <span class="opera_text">开锁关锁</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="车辆仓库" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_6.png">
            <span class="opera_text">车辆仓库</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="车辆管理" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_7.png">
            <span class="opera_text">车辆管理</span>
          </div>
          <div class="col-xs-6 col-sm-3">
            <img alt="订单管理" class="center-block img-responsive opera_img" src="/img/internet_thinks/op_8.png">
            <span class="opera_text">订单管理</span>
          </div>
        </div>

        <!--item10  景区管理端 -->
        <div class="row item12 text-center" style="margin:40px 0 0 0; padding:0 10px;">
          <h2>智能管理后台</h2>
        </div>
        <div class="container text-center">
          <div class="col-md-7">
            <img alt="" class="center-block img-responsive" src="/img/internet_thinks/iMac-27.png">
          </div>
          <div class="col-md-5">
            <div class="right_list">
              <img alt="" src="/img/internet_thinks/admin_1.png">
              <span>设置定点还车区域</span>
            </div>
            <div class="right_list" style="margin-top: 20px;">
              <img alt="" src="/img/internet_thinks/admin_2.png">
              <span>骑行费用设置</span>
            </div>
            <div class="right_list" style="margin-top: 20px;">
              <img alt="" src="/img/internet_thinks/admin_2.png">
              <span>景区智能管理</span>
            </div>
            <div class="right_list" style="margin-top: 20px;">
              <img alt="" src="/img/internet_thinks/admin_2.png">
              <span>智能监控车辆</span>
            </div>
          </div>
        </div>

        <!--item7  方案优势 -->
        <div class="row item12 text-center" style="margin:80px 0 0 0; padding:0 10px;">
          <h2>方案优势</h2>
        </div>
        <div class="container text-center" style="margin-bottom: 32px;">
          <div class="col-sm-4" style="margin-bottom: 32px;">
            <img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_1.png">
            <div class="advantage_title">区域封闭，电子围栏设置</div>
            <div class="advantage_tips">方便运营管理</div>
          </div>
          <div class="col-sm-4" style="margin-bottom: 32px;">
            <img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_2.png">
            <div class="advantage_title">定点自助租借/归还</div>
            <div class="advantage_tips">降低人工成本，规范管理便于维护</div>
          </div>
          <div class="col-sm-4" style="margin-bottom: 32px;">
            <img alt="" class="center-block img-responsive advantage_img" src="/img/internet_thinks/case_3.png">
            <div class="advantage_title">多城市、多景区</div>
            <div class="advantage_tips">高效管理运营</div>
          </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>