Identification/pages/login/login.vue

<template>
  <view style="font-size: 16px">
    <loginNavbar></loginNavbar>
    <view class="flex box">
      <view>
        <view class="inputCom">
          <text>设备编号</text>
          <input type="number" class="uni-input"/>
          <button size="mini" class="comButton">登录设备</button>
        </view>
        <view class="inputCom">
          <text>设备密码</text>
          <input type="number" class="uni-input"/>
          <button size="mini" class="comButton">修改密码</button>
        </view>
        <view class="inputCom">
          <text>服务器IP</text>
          <kuan-ip-input v-model="ip"></kuan-ip-input>
          <button size="mini" class="comButton">热点设置</button>
        </view>
      </view>
      <view>
        <view class="inputCom">
          <button size="mini" class="comButton">开始游戏</button>
          <button size="mini" class="comButton">结束游戏</button>
          <button size="mini" class="comButton">重启设备</button>
        </view>
        <view class="inputCom">
          <uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"></uni-data-checkbox>
        </view>
        <view class="inputCom">
          <view style="display: flex; align-items: center">
            <text style="color:#939393">电机转动时间</text>
            <uni-number-box v-model="vModelValue" @change="changeValue" style="margin: 0 5rpx"/>
            <button size="mini" class="comButton">确认</button>
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="DividingLine"></view>
      <view class="flex M40" style="color:#939393">
        <text> APP版本：V5.19</text>
        <text> 软件版本</text>
      </view>
    </view>
  </view>
</template>

<script>
import UniNumberBox from "../../uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";
import UniDataCheckbox from "../../uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
import loginNavbar from '../../components/loginNavbar.vue'
import kuanIpInput from '@/components/kuan-ip-input/kuan-ip-input.vue'

export default {
  components: {UniNumberBox, UniDataCheckbox, loginNavbar, kuanIpInput},
  data() {
    return {
      checkbox1: [],
      vModelValue: 0,
      ip: '',
      hobby: [{
        text: '光控计数',
        value: 0
      }, {
        text: '推头复位',
        value: 1
      }],
    };
  },
  methods: {
    changeValue() {
      console.log(this.vModelValue)

    },

  }
}
</script>

<style lang="scss">
.box {
  margin-top: 20px;
}

.inputCom {
  width: 42vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin: 20rpx 5rpx;

  .uni-input {
    padding: 2rpx 0;
    margin: 0 4rpx;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
}

.M40 {
  margin-top: 40px;
}

.flex {
  padding: 0 20px;
  display: flex;
  justify-content: space-between
}

.comButton {
  margin-right: 20rpx;
  width: 100rpx;
}

.DividingLine {
  border-top: 1px solid #cccccc;
  width: 100%;
}

.kuan-ip-input {
  width: 120rpx;
}
</style>