<template>
  <div>
    <van-row class="padding">
      <van-col span="5" offset="4">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
          <text class="text-gray device_text"> 我的手机</text>
        </div>
      </van-col>
      <van-col span="3" offset="1">
        <div class="dot_container flex align-center">
          <div class="dot_wait">
            <img v-if="status == 1" src="https://img.shuimuai.com/web/dot.png" alt="" class="moving_dot"
                 :class="{moving:status==1}"
            />
            <img v-if="status == 2" src="https://img.shuimuai.com/m_sign_gou%402x.png" alt="" class="moving_dot">
            <img v-if="status == 3" src="https://img.shuimuai.com/fail.png" alt="" class="moving_dot">
          </div>
        </div>
      </van-col>
      <van-col span="5" offset="0">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
          <text class="text-gray device_text"> 水母智能脑环</text>
        </div>
      </van-col>
    </van-row>
    <van-row class="text-center">
      <text class="text-gray text-lg">
        <template v-if="status == 1">
          连接中...
        </template>
        <template v-if="status == 2">
          连接成功
        </template>
        <template v-if="status == 3">
          连接失败
        </template>
      </text>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "connecting",
  props:['status']
}
</script>

<style scoped>

</style>
