ct/app/pages/industrySolutions/cabinet.vue

<script lang="ts" setup>
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_cabinet.css'}
  ],
  script: [

    {src: '/js/gopcOm.js'}
  ]
})
</script>

<template>

  <view>

    <div class="internet_Things_car ">
      <div class="item1"/>
      <!--      item2 APP/微信/小程序用户端-->
      <!-- <div class="container itemImage"> -->
      <div class="row item2 text-center">
        <h3>智慧换电柜解决方案构成</h3>
        <div style="display: flex;justify-content: space-between;margin-top: 60px;">
          <div class="text-center">
            <img alt="" src="/img/Internet_cabinet/timg.png">
            <p class="item2_p">智能换电柜</p>
            <label class="item2_lable">全自助智能换电站，快速更换电动车电池，方便快捷</label>
          </div>
          <div class="text-center">
            <img alt="" src="/img/Internet_cabinet/pexel.png">
            <p class="item2_p">系统软件</p>
            <label class="item2_lable">按期/按次自助换电，省钱省心省事</label>
          </div>
        </div>
      </div>
      <!-- </div> -->


      <!-- item3 PC管理端 -->
      <div class="text-center  item2 row">
        <h3>换电柜的优势</h3>
        <div style="display: flex;justify-content: space-between;margin-top: 50px;">
          <div class="item3_div">
            <div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg1.png);">
              市场需求大
            </div>
            <div class="item3_div_txt">
              电动车人群大，用于外卖的电动车就达到数百万辆，市场及其庞大。
            </div>
          </div>
          <div class="item3_div">
            <div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg2.png);">
              规范化管理
            </div>
            <div class="item3_div_txt">
              需要放在指定区域，所以几乎不存在乱停乱放的现象，不会恶意占用公共交通。
            </div>
          </div>
        </div>

        <div style="display: flex;justify-content: space-between;margin-top: 50px;">
          <div class="item3_div">
            <div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg3.png);">
              不易丢失
            </div>
            <div class="item3_div_txt">
              通过换电柜形式换电，不易丢失。
            </div>
          </div>
          <div class="item3_div">
            <div class="item3_div_bg" style="background:url(/img/Internet_cabinet/timg4.png);">
              收益可观
            </div>
            <div class="item3_div_txt">
              用户使用频率特别高，例如外卖人员、快递人
              员等，租金收益非常可观。
            </div>
          </div>
        </div>
      </div>

      <!--item2  APP/微信/小程序用户端 -->
      <div class="container">
        <div class="text-center  item2 row">
          <h3>换电柜系统核心功能</h3>
          <div style="height: 30px;"/>
          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_1.png">
            <h4>用户管理</h4>
            <h6>对注册小程序/app的用户进行管理。</h6>
          </div>

          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_3.png">
            <h4>换电柜管理</h4>
            <h6>可分地区、分站点查询换电柜状态，对换电柜进行管理。</h6>
          </div>

          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_4.png">
            <h4>网点/代理商管理</h4>
            <h6>对各城市、各区域代理点/网点信息
              数据进行统计分析管理。</h6>
          </div>

          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_5.png">
            <h4>订单管理</h4>
            <h6>可查询并管理换电柜的换电订单详细信息。</h6>
          </div>

          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_6.png">
            <h4>财务管理</h4>
            <h6>可根据租赁情况、财务费用生成统
              计报表。</h6>
          </div>

          <div class="col-xs-7 col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_7.png">
            <h4>运维管理</h4>
            <h6>可分站点查询充电柜的运维人员、
              运维记录、运维进度和故障情况等。</h6>
          </div>


        </div>
      </div>


      <!--item2  APP/微信/小程序用户端 -->
      <div class="container">
        <div class="text-center  item2 row">
          <h3>应用场景</h3>
        </div>
        <div class="row itemTwo text-center">
          <div class="col-xs-12 col-lg-6 ">
            <img alt="" src="/img/Internet_cabinet/item4_img1.png">
          </div>
          <div class="col-xs-12 col-lg-6 ">
            <div class="col-xs-12 col-lg-3 col-lg-offset-1 textTitle" style="text-align: left;">
              <h4><span>外卖送餐、物流快递员等电动车使用 </span></h4>
              <p>主要用户为外卖送餐、物流快递员等电动车使用，使用是刚需
                ，使用频次较高，因为他们业务繁忙，智能充电柜解决了他们
                “坐骑”日常充电麻烦的问题。</p>
            </div>
          </div>
        </div>

        <div class="row itemTwo text-center">
          <div class="col-xs-12 col-lg-6 ">
            <div class="col-xs-12 col-lg-3 textTitle col-lg-offset-1" style="text-align: left;">
              <h4><span>使用电动车作为上下班代步工具的市民 </span></h4>
              <p>该人群在小区等地方充电不便。把充电柜存放在各个
                小区、电动车维修站等地方使用频次高的地方。</p>
            </div>
          </div>
          <div class="col-xs-12 col-lg-6 ">
            <img alt="" src="/img/Internet_cabinet/item4_img2.png">
          </div>
        </div>
      </div>


    </div>
  </view>
</template>

<style scoped>
.item3_div .item3_div_bg {
  height: 110px;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 110px;
  padding-left: 40px;
}

.item3_div {
  width: 540px;
  height: 220px;
  border: 1px solid rgba(143, 143, 143, 1);
  font-family: "PingFangSC-Regular, PingFang SC";
  text-align: left;
}

.item3_div .item3_div_txt {
  height: 110px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  padding-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
  line-height: 30px;
}

.item2_p {
  margin-top: 30px;
  height: 30px;
  font-size: 22px;
  font-family: "PingFangSC-Semibold,PingFang SC";
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
}

.item2_lable {
  height: 30px;
  font-size: 16px;
  font-family: "PingFangSC-Regular,PingFang SC";
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
}
</style>