<template>
  <div class="container df fdc">
    <navbar />
    <div class="flex-1 df ai-c jc-c">
      <van-swipe :loop="false">
        <van-swipe-item>
          <div class="tc pl30 pr30 pt16 pb30">
            <h3 class="f22 fw">查看电量</h3>
            <div class="block mt35 df fdc ai-c">
              <img class="a1" src="@/assets/guide/power-1@2x.png" />
            </div>
            <p class="mt35 tl">
              方式一：穿鞋状态下脚尖着地维持踮脚动作 3 s 可查看电量
            </p>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="tc pl30 pr30 pt16 pb30">
            <h3 class="f22 fw">查看电量</h3>
            <div class="block df ai-c pr mt35">
              <img class="a2" src="@/assets/guide/power-2@2x.png" />
              <div class="tips pa tl f14">
                <div>
                  <i class="dot" style="background-color: #67D23C;"></i
                  ><span class="ml6">绿灯：电量充足</span>
                </div>
                <div class="mt8">
                  <i class="dot" style="background-color: #FB5353;"></i
                  ><span class="ml6">红灯：需要及时充电</span>
                </div>
                <div class="line pa"></div>
              </div>
            </div>
            <p class="mt35 tl">
              方式二：空鞋状态下翻转鞋子使鞋底朝上 3s 可查看电量
            </p>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="tc pl30 pr30 pt16 pb30">
            <h3 class="f22 fw">查看电量</h3>
            <div class="block df ai-c jc-c mt35">
              <img class="a3" src="@/assets/guide/power-3@2x.png" />
            </div>
            <p class="mt35 tl">
              方式三：连接APP查看详细电量
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    return {};
  }
});
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: white;
  overflow-x: hidden;
  .block {
    width: 100%;
    height: 399px;
    background-color: #f5f3f3;
    border-radius: 8px;
  }
  p {
    line-height: 1.5;
  }
  .f14 {
    line-height: 1.5;
  }
  .a1 {
    width: 264px;
    height: 288px;
  }
  .a2 {
    width: 290px;
    height: 290px;
  }
  .a3 {
    width: 312px;
    height: 399px;
  }
  .tips {
    background-color: white;
    padding: 12px;
    border-radius: 6px;
    top: 20px;
    left: 20px;
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
    }
    .line {
      width: 2px;
      height: 42px;
      bottom: -42px;
      left: 62px;
      border-left: 2.2px dashed #c1c1c1;
    }
  }

  ::v-deep .van-swipe__indicator {
    background-color: #dcdcdc;
    opacity: 0.8;
  }
  ::v-deep .van-swipe__indicator--active {
    background-color: #ffc400;
  }
}
</style>
