ct/app/pages/sharedSolutions/sharebank.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/main.css'},
    {rel: 'stylesheet', href: '/css/yuxi2019.css'}
  ]
})

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

<template>

  <view>

    <div class="container-fluid">
      <div class="row">
        <!-- 焦点巨幕布图 -->
        <img alt="" class="img-responsive center-block" src="/img/sharabank/banner.jpg">
        <!-- 充电宝使用流程 -->
        <div class="text-center layer">
          <h2>充电宝使用流程</h2>

          <div class="col-md-2 col-md-offset-2 tip-user">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/location.png">
            <span class="userbank">地图找充电宝</span>
          </div>

          <div class="col-md-2 tip-user">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/wecode.png">
            <span class="userbank">扫描充电宝柜机上的二维码</span>
          </div>
          <div class="col-md-2 tip-user">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/select.png">
            <span class="userbank">选择充电接口</span>
          </div>
          <div class="col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/reback.png">
            <span class="userbank">使用完后扫码归还</span>
          </div>
          <!-- -->
          <div class="clearfix"/>
          <div style="margin: 110px 0;">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/sharabank.png">
          </div>
        </div><!-- 充电宝使用流程 over -->


        <!-- 共享充电宝类型-->
        <div class="layer layer-2 clearfix" style="background: #F6F6F6;">
          <h2>共享充电宝类型</h2>
          <div class="col-xs-12 col-md-4 col-md-offset-2">
            <p style="margin-top: 160px; display: block;"><img
                alt=""
                class="img-responsive center-block" src="/img/sharabank/2.png"></p>
            <p style="margin-top: 100px; display: none;"><img
                alt=""
                class="img-responsive center-block" src="/img/sharabank/3.png"></p>
            <p><img alt="" class="img-responsive center-block" src="/img/sharabank/1.png"></p>
          </div>
          <ul class="col-xs-12 col-md-4 col-md-offset-1">
            <div id="sanjiao"><img alt="" src="/img/sharabank/left.png"></div>
            <li>
              <span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">桌面型单台充电宝</span>
              <span style="font-size: 12px; color: #999999;">线机一体，成本低，固定使用，促进商家消费</span>
            </li>
            <li>
              <span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">桌面小型柜机</span>
              <span style="font-size: 12px; color: #999999;">用户使用更自由，人工维护成本低，更符合生活使用场景</span>
            </li>
            <li>
              <span style="font-size: 16px; color: #484D55; margin-bottom: 15px; display: block; font-weight: 700">立式大型柜机</span>
              <span
                  style="font-size: 12px; color: #999999;">匹配人流较大的公共场所，便于用户准确找到设备，快速解决充电需求</span>
            </li>
          </ul>
        </div><!-- 共享充电宝类型 over-->


        <!-- 我们的服务 -->
        <div class="text-center container layer" style="border-bottom: 1px solid #E3E3E3; line-height: 3">
          <h2>我们的服务优势</h2>
          <div class="col-xs-12 col-md-2 col-md-offset-1">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/APP.png">
            APP
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/wecata.png">
            微信
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/xiao.png">
            小程序
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/admnaoan.png">
            智能终端
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/setting.png">
            管理后台
          </div>
        </div><!-- 我们的服务 over-->


        <!-- 我们的售后 -->
        <div class="text-center container layer">
          <h2>我们的售后</h2>
          <div class="col-xs-12 col-md-2 col-md-offset-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/fadeback.png"><br>
            <span style="font-size: 14px; color: #333333;">技术支持<br></span>
            <span style="font-size: 12px; color: #999999;">技术问题随时咨询</span>
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/kefu.png"><br>
            <span style="font-size: 14px; color: #333333;">客服服务<br></span>
            <span style="font-size: 12px; color: #999999;">24小时咨询，答复疑问</span>
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/lopt.png"><br>
            <span style="font-size: 14px; color: #333333;">系统维护<br></span>
            <span style="font-size: 12px; color: #999999;">时刻关注系统运维情况</span>
          </div>
          <div class="col-xs-12 col-md-2">
            <img alt="" class="img-responsive center-block" src="/img/sharabank/updata.png"><br>
            <span style="font-size: 14px; color: #333333;">系统升级<br></span>
            <span style="font-size: 12px; color: #999999;">针对企业发展需求，按需升级</span>
          </div>
        </div><!-- 我们的售后 over-->

        <!--  footer  info -->
        <!-- <div class="footer">
          <iframe src="gwFooter.html" width="100%" height="340" scrolling="no" style="border:0; min-width: 1210px;"></iframe>
        </div> -->
        <!-- footer  info over-->
      </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>