ct/app/pages/sharedSolutions/scooter.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/new_index.css'}
  ],
  script: [
    {src: '/js/index.js'},
    {src: '/js/gopcOm.js'}
  ]
})

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

<template>

  <view>

    <div class="container-fluid scootbanner">
      <div class="scootbanner-info">
        <div class="head">共享电动滑板车，重塑共享出行智能形象</div>
        <div class="min-head">小巧省力时髦，真正解决最后一公里</div>
        <div class="conter">拥有多个共享类项目成功案例，成熟优质的解决方案提供商——创特科技</div>
        <a href="http://p.qiao.baidu.com//im/index?siteid=8233756&amp;ucid=7539873" target="_blank">立即咨询</a>
      </div>
    </div>

    <!-- item1 -->
    <div class="container">
      <div class="row scoot-item1">
        <div class="col-xs-6 col-md-3 scoot-item1-grop">
          <div class="row">
            <div class="col-md-4"><img alt="" src="/img/scooter/icon_1.png"></div>
            <div class="col-md-8"><span>轻松省力</span>站上去即可启动，电动助力，速度最高可达 25 km/h，更快更轻松</div>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-6 col-md-3 scoot-item1-grop">
          <div class="row">
            <div class="col-md-4"><img alt="" src="/img/scooter/icon_2.png"></div>
            <div class="col-md-8"><span>小巧便携</span>和自行车相比，滑板车更小更轻便，占地面积小，停放更方便</div>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-6 col-md-3 scoot-item1-grop">
          <div class="row">
            <div class="col-md-4"><img alt="" src="/img/scooter/icon_3.png"></div>
            <div class="col-md-8"><span>便宜又快</span>通勤的最后几公里，打车太贵，且高峰期打车难，拥堵的问题较多，滑板车相比成本更低
            </div>
          </div>
        </div>
        <!--  -->
        <div class="col-xs-6 col-md-3 scoot-item1-grop">
          <div class="row">
            <div class="col-md-4"><img alt="" src="/img/scooter/icon_4.png"></div>
            <div class="col-md-8"><span>年轻时髦</span>滑板车更代表一种年轻的生活态度，比自行车更酷</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 好行业、好项目、坐享收益  -->
    <div class="scooter-introduction" style="background: #F8F8F8;">
      <div class="container text-center" style="background: #F8F8F8;">
        <div class="col-md-3 introductions">
          <img alt="" class="center-block img-responsive" src="/img/scooter/item1.png">
          <h4>市场优势</h4>
          <p>支持GPRS定位，随时监控滑板车位置，记录用户骑行轨迹</p>
        </div>

        <div class="col-md-3 introductions">
          <img alt="" class="center-block img-responsive" src="/img/scooter/item2.png">
          <h4>模式优势</h4>
          <p>GPRS远程开锁，蓝牙近距离开锁，满足多种场景开锁需求</p>
        </div>

        <div class="col-md-3 introductions">
          <img alt="" class="center-block img-responsive" src="/img/scooter/item3.png">
          <h4>技术优势</h4>
          <p>通通过电子围栏规范用户停放，降低维护成本</p>
        </div>

        <div class="col-md-3 introductions">
          <img alt="" class="center-block img-responsive" src="/img/scooter/item4.png">
          <h4>运营优势</h4>
          <p>支持多种第三方支付，常用的银联支付、微信支付、支付宝支付、PayPal等都有对接经验</p>
        </div>
      </div>
    </div>

    <!-- 提供一站式解决方案 -->
    <div class="container text-center">
      <div class="row oneStep">
        <div class="row step-head">提供一站式解决方案</div>
        <div class="row step-min-head">APP+小程序+管理后台+智能锁+电动滑板车</div>
        <div class="step-tips"><span>APP</span></div>

        <div class="col-md-4 step-group">
          <img alt="" class="center-block img-responsive" src="/img/scooter/1.png">
          <h4>扫码开锁，说走就走</h4>
          <p>扫码开锁可以选择蓝牙，GPS、GPRS进行开锁，锁开之后踏上滑板车即可出发</p>
        </div>

        <div class="col-md-4 step-group">
          <img alt="" class="center-block img-responsive" src="/img/scooter/2.png">
          <h4>邀请好友，骑行免费</h4>
          <p>把邀请码发送给好友，与好友共享免费骑行</p>
        </div>

        <div class="col-md-4 step-group">
          <img alt="" class="center-block img-responsive" src="/img/scooter/3.png">
          <h4>个人信息，清晰可查</h4>
          <p>骑行记录/钱包管理等清晰简要，随时可以查询</p>
        </div>
      </div>
    </div>

    <!-- 管理后台 -->
    <div style="background: #f8f8f8">
      <div class="container text-center">
        <div class="row oneStep">
          <div class="step-tips"><span>管理后台</span></div>
          <div class="step-group">
            <img alt="" class="center-block img-responsive" src="/img/scooter/ht1.png">
            <h4>数据总览，助力运营</h4>
            <p>统计数据信息，查询每个数据来去记录</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 滑板车 -->
    <div class="container text-center">
      <div class="row oneStep">
        <div class="step-tips"><span>滑板车</span></div>
        <div class="step-group">
          <img alt="" class="center-block img-responsive" src="/img/scooter/hbc.png">
          <h4 style="margin-top: 40px;">防水防盗，支持定制</h4>
          <p>共享滑板车防水能力强，并采用电机锁，骑行结束后自动锁住电机，防止雨后损坏或被用户占用</p>
        </div>
      </div>
    </div>


    <!-- 行业优势 -->
    <div class="in-advantage" style="background: #f8f8f8;">
      <div class="container">
        <div class="row">
          <div class="in-advantage-head text-center">行业优势</div>

          <div class="col-sm-12 col-md-6 advant-gro">
            <div class="col-xs-3" style="margin-left: 10px;"><img
                alt=""
                class="center-block img-responsive" src="/img/scooter/advan1.png"></div>
            <div class="col-xs-7"><span>高效的需求分析</span>将想法快速落地成操作方案，呈现高效率高质量成果</div>
            <div class="serial">1</div>
          </div>
          <!--  -->
          <div class="col-sm-12 col-md-6 advant-gro">
            <div class="col-xs-3" style="margin-left: 10px;"><img
                alt=""
                class="center-block img-responsive" src="/img/scooter/advan2.png"></div>
            <div class="col-xs-7"><span>满意的视觉呈现</span>行业UI设计精英，助您达到满意的视觉效果</div>
            <div class="serial">2</div>
          </div>
          <!--  -->
          <div class="col-sm-12 col-md-6 advant-gro">
            <div class="col-xs-3" style="margin-left: 10px;"><img
                alt=""
                class="center-block img-responsive" src="/img/scooter/advan3.png"></div>
            <div class="col-xs-7"><span>实时的效果监控</span>专业项目经理负责制，全方位监控开发环节，确保准时交付</div>
            <div class="serial">3</div>
          </div>
          <!--  -->
          <div class="col-sm-12 col-md-6 advant-gro">
            <div class="col-xs-3" style="margin-left: 10px;"><img
                alt=""
                class="center-block img-responsive" src="/img/scooter/advan4.png"></div>
            <div class="col-xs-7"><span>省心的售后服务</span>交付协助项目上架，售后问题高效全面解决</div>
            <div class="serial">4</div>
          </div>

        </div>
      </div>
    </div>


    <!-- 为您创造价值，是我们坚定不移的宗旨 -->
    <div class="container-fluild text-center industry">
      <div class="row industry-head">为您创造价值，是我们坚定不移的宗旨</div>
      <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1829668236&amp;site=qq&amp;menu=yes" target="_blank">立即咨询</a>
    </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>