<template>
  <view class="flex flex-col items-center">
    <view class="wifi-bg my-5">
      <u-icon name="wifi"></u-icon>
    </view>
    <view class="font-semibold mb-5 text-base">ccsens_5G</view>
    <view class="bg-white w-full flex justify-between items-center py-2 px-3">
      <text class="mr-3">WIFI名称</text>
      <u-input v-model="name" placeholder="请输入" input-align="right" class="text-base" />
    </view>
    <view class="bg-white w-full flex justify-between items-center py-2 px-3">
      <text class="mr-3">WIFI密码</text>
      <u-input type="password" v-model="password" placeholder="请输入" input-align="right" class="text-base" />
    </view>
    <view class="flex w-full px-3 pt-3">
      <Wifi :name="name" :password="password" class="w-full" />
    </view>
    <view class="flex flex-col u-font-14 w-full px-3 pt-6 text-gray-400">
      <text class="font-bold">联网说明:</text>
      <text class="mt-2">1.长按点读笔，进入配网模式</text>
      <text class="mt-2">2.切换手机wifi,连接ccsens_pen,输入密码ccsens123</text>
      <text class="mt-2">3.输入wifi名和密码，点击确定</text>
      <text class="mt-2">4.配网成功后，点读笔有灯闪烁</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return { name: '', password: '', show: false };
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: $uni-bg-color-grey;
}

.wifi-bg {
  width: 8rem;
  height: 8rem;
  line-height: 8rem;
  font-size: 5rem;
  color: $uni-text-color-inverse;
  background: $uni-bg-color-blue;
  border-radius: 50%;
  text-align: center;
}
</style>
