shuimu-planet/src/components/connection/brains/connected.vue

<script>
export default {
  name: "connected",
  props: ['device_bg', 'device_power'],
  methods: {
    /**
     * 修改设备连接状态
     * @param $status 设备状态 0为未连接，1：连接中，2：已连接 3：连接失败
     */
    setDeviceStatus($status = 0) {
      this.$emit("deviceStatus", $status);
    },
    /**
     * 打开教具选择
     */
    openToyList() {
      this.$emit('openToys')
    },
  }
}
</script>

<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">
          <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">水母智脑机({{device_power}}%)</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="setDeviceStatus(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="openToyList">
          <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>
</template>

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

.device_elc {
  height: 5px;
  border-radius: 2.5px;
  bottom: 1.5px;
}
</style>