control/src/components/login.vue

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('')
const roomID = ref('')
defineProps<{ err: string }>()
const emit = defineEmits<{(evt: 'loginBack', value: { name: string, roomID: string }): void }>()
function login() {
  if (name.value && roomID.value) emit('loginBack', { name: name.value, roomID: roomID.value })
}
</script>
<template>
  <div class="login">
    <div class="login-content">
      <div class="login-content-left" />
      <div class="login-content-right">
        <p>Hello, 欢迎登录</p>
        <div>
          <Icon
            name="username"
            :size="25"
          />
          <input
            v-model="roomID"
            type="text"
            placeholder="请输入房间"
            maxlength="20"
          >
        </div>
        <div>
          <Icon
            name="password"
            :size="25"
          />
          <input
            v-model="name"
            type="text"
            placeholder="请输入名称"
            maxlength="20"
          >
        </div>
        <div>
          <button
            :disabled="!name && !roomID"
            :class="{ resetStyle: name && roomID }"
            @click="login"
          >
            加入
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  font-size: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../assets/img/bg.png) center center no-repeat;
  background-size: 100% 100%;

  &-content {
    width: 8rem;
    height: 4rem;
    background: white;
    border-radius: 0.2rem;
    display: flex;
    overflow: hidden;

    &-left {
      width: 5rem;
      background: url(../assets/img/login-left.png) center center no-repeat;
      background-size: 100% 100%;
    }

    &-right {
      flex: 1;
      padding: 0 0.3rem;

      &>p {
        font-size: 0.3rem;
        color: #5970C6;
        text-align: left;
        font-weight: 400;
        text-align: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }

      &>div {
        padding: 0.1rem 0;
        display: flex;
        align-items: center;
        margin: 0.1rem 0;

        &:not(:last-child) {
          border-bottom: solid 1px #D2D6E7;
        }

        input {
          border: none;
          margin-left: 0.05rem;
          outline: none;
          width: 100%;
          font-size: 0.15rem;
          color: #333;

          &::placeholder {
            color: #9DA1A8;
            font-size: 0.15rem;
          }
        }

        button {
          background: #79b8fa;
          border: none;
          outline: none;
          color: white;
          font-size: 0.16rem;
          font-weight: 500;
          border-radius: 1rem;
          margin-top: 0.5rem;
          margin-left: auto;
          line-height: 0.35rem;
          padding: 0 0.35rem;
          cursor: not-allowed;
        }
      }

      .resetStyle {
        background: #2d8cf0;
        cursor: pointer;
      }
    }
  }
}
</style>