<template>
  <div class="container df fdc">
    <navbar v-if="!is" />
    <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">
              <p class="f14 tl pl20 pt30 pr20" style="color:#ff5b1d;">
                注意：鞋子要先完成配对后，才可正常使用
              </p>
              <div class="flex-1 df ai-c jc-c pr">
                <img class="a1 mt16" src="@/assets/guide/pair-1@2x.png" />
                <span class="tips pa">配对时不可接通电源</span>
              </div>
            </div>
            <p class="mt35 tl">
              1. 将充电线的两端连接到两只鞋子的充电口上并接通电源
            </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="a2" src="@/assets/guide/pair-2@2x.png" />
            </div>
            <p class="mt35 tl">
              2. 两只鞋子 白灯常亮 表示正在配对
            </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/pair-3@2x.png" />
            </div>
            <p class="mt35 tl">
              3.
              两只鞋子震动或白灯闪烁表明配对成功配对过程约耗时10秒(1小时可充满)
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useRoute } from "vue-router";
export default defineComponent({
  setup() {
    const route = useRoute();
    const is = ref(route.query.is);
    return { is };
  }
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: white;
  overflow-x: hidden;
  .block {
    width: 100%;
    height: 3.99rem * 2;
    background-color: #f5f3f3;
    border-radius: 0.08rem * 2;
  }
  p {
    line-height: 1.5;
  }
  .f14 {
    line-height: 1.5;
  }
  .a1 {
    width: 2.45rem * 2;
    height: 2.13rem * 2;
  }
  .a2,
  .a3 {
    width: 3rem * 2;
    height: 3rem * 2;
  }
  .tips {
    bottom: 0.56rem * 2;
    right: 0.3rem * 2;
    width: 0.78rem * 2;
    text-align: left;
    line-height: 1.5;
    font-size: 0.14rem * 2;
    color: #ff5b1d;
  }

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