program/src/components/device/connected.vue

<template>
  <div>
    <van-row class="padding">
      <van-col span="5">
        <div class="device_bg flex flex-direction align-center justify-center">
          <img src="https://img.shuimuai.com/web/phone.png" alt="" class="device_phone">
          <view>
            <text class="text-gray device_text"> 我的手机</text>
          </view>
        </div>
      </van-col>
      <van-col span="3" offset="1">
        <div class="dot_container flex align-center">
          <div class="dot_wait">
            <img src="https://img.shuimuai.com/m_sign_gou%402x.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">
          <!--          <text>{{ device_power }}%</text>-->
          <img src="https://img.shuimuai.com/web/sign_green.png" alt="" class="sign_green" v-if="device_bg == true">
          <img src="https://img.shuimuai.com/web/sign_red.png" class="sign_green" alt="" v-else>
          <img src="https://img.shuimuai.com/web/brain.png" alt="" class="device_brain">
          <view>
            <text class="text-gray device_text second_device_text"> 水母智脑环</text>
          </view>
        </div>
      </van-col>
    </van-row>
    <!--        按钮组合-->
    <van-row>
      <van-col span="9" offset="1">
        <button class="cu-btn bg-red lg text-white" @click="change_status(0)">
          <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
          <text class="padding-lr cut_text">断开脑环</text>
        </button>
      </van-col>

      <van-col span="12" offset="1">
        <button class="cu-btn bg-red lg cu-btn-primary" @click="open_choose_toy">
          <img src="https://img.shuimuai.com/m_xuanzewanju.png" alt="" class="cut_brain_icon">
          <text class="padding-lr cut_text">选择玩具</text>
        </button>
      </van-col>
    </van-row>
    <div class="boy_session padding">
      <text class="boy_session_text">点击选择你喜欢 的玩具类别就可 以开始玩囖！</text>
    </div>
    <img src="https://img.shuimuai.com/web/boy.png" alt="" class="connected_boy">
  </div>
</template>

<script>
export default {
  name: "connected",
  props: ['device_bg', 'device_power'],
  methods: {
    open_choose_toy() {
      this.$emit('open_choose_toy')
    },
    change_status($status) {
      this.$emit('change_brain_status', $status)
    }
  }
}
</script>

<style scoped>
.cut_text {
  padding: 0px 5px;
  font-size: 11px;
}
</style>