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'}
  ],
  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-6col-lg-4">
            <img alt="" src="/img/Internet_cabinet/icon_1.png">
            <h4>用户管理</h4>
            <h6>对注册小程序/app的用户进行管理。</h6>
          </div>

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

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

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

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

          <div class="col-xs-6col-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>
/* ====== 基础布局（引用了 bootstrap/main2/yuxi2019） ====== */

/* 页面容器 */
.internet_Things_car {
  width: 100%;
}

/* 顶部横幅 */
.internet_Things_car .item1 {
  color: #fff;
  width: 100%;
  height: 560px;
  background: url('/img/internet_thinks/banner.png') no-repeat center center #000;
  background-size: auto 560px;
  margin-top: 90px;
  text-align: center;
  overflow: hidden;
}

.internet_Things_car .item1 h2 {
  font-size: 48px;
  margin: 120px 0 70px 0;
}

.internet_Things_car .item1 h4 {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.7);
}

/* Section: item2 核心组成/功能 */
.internet_Things_car .item2 {
  overflow: hidden;
  width: 1200px;
  margin: 50px auto;
}

.internet_Things_car .item2 h3 {
  font-size: 26px;
  font-family: "PingFangSC-Semibold,PingFang SC";
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 20px;
  margin-top: 25px;
}

.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;
}

/* Section: item3 换电柜的优势 */
.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_bg {
  height: 110px;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 110px;
  padding-left: 40px;
}

.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;
}

/* Section: 应用场景 itemTwo */
.internet_Things_car .itemTwo {
  overflow: hidden;
  width: 1200px;
  height: auto;
  margin: 0 auto 40px;
}

.itemTwo .col-lg-6 {
  width: 50%;
}

.itemTwo .textTitle {
  width: 80%;
}

.itemTwo .textTitle h4 {
  font-size: 20px;
}

/* ====== 响应式调整 ====== */
@media (max-width: 1199px) {
  .internet_Things_car .item2 {
  
    margin: 40px auto;
  }

  .internet_Things_car .item1 {
    height: 420px;
    background-size: cover;
  }

  .internet_Things_car .item1 h2 {
    font-size: 36px;
    margin: 100px 0 40px 0;
  }

  .internet_Things_car .item1 h4 {
    font-size: 20px;
  }

  .item3_div {
    width: 48%;
    height: auto;
    margin-bottom: 20px;
  }

  .item3_div .item3_div_bg {
    height: 80px;
    line-height: 80px;
    font-size: 20px;
  }

  .item3_div .item3_div_txt {
    height: auto;
    padding: 16px 24px;
    line-height: 26px;
  }

  .internet_Things_car .itemTwo {
    width: 90%;
  }

  .itemTwo .col-lg-6 {
    width: 100%;
  }

  .itemTwo .textTitle {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .internet_Things_car .item1 {
    height: 320px;
  }

  .internet_Things_car .item1 h2 {
    font-size: 28px;
    margin: 80px 0 20px 0;
  }

  .internet_Things_car .item1 h4 {
    font-size: 18px;
  }

  .internet_Things_car .item2 h3 {
    font-size: 22px;
  }

  .item2_p {
    font-size: 20px;
  }

  .item2_lable {
    font-size: 14px;
  }

  .item3_div {
    width: 100%;
  }

  .itemTwo .textTitle h4 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .internet_Things_car .item1 {
    height: 240px;
    margin-top: 56px;
  }

  .internet_Things_car .item1 h2 {
    font-size: 22px;
    margin: 40px 0 15px 0;
  }

  .internet_Things_car .item1 h4 {
    font-size: 15px;
  }

  .internet_Things_car .item2 {
    width: 100%;
    padding: 0 16px;
    margin: 30px auto;
  }

  .internet_Things_car .item2 h3 {
    font-size: 20px;
  }

  .internet_Things_car .item2 img {
    width: 100%;
    height: auto;
  }

  .item2_p {
    font-size: 18px;
  }

  .item2_lable {
    font-size: 13px;
    line-height: 22px;
  }

  .internet_Things_car .itemTwo {
    width: 100%;
    padding: 0 16px;
  }
}
</style>