增加登录样式

Signed-off-by: Caner <5658514@qq.com>

src/assets/icons/password.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录页/小尺寸适配" transform="translate(-521.000000, -507.000000)" fill="#D7DAE2">
+            <g id="编组-3" transform="translate(521.000000, 489.000000)">
+                <g id="icon/密码" transform="translate(0.000000, 18.000000)">
+                    <g id="icon/面性/用户" transform="translate(2.750000, 0.000000)">
+                        <path d="M15.1687329,9.22631696 L13.6419037,9.22631696 L13.6419037,5.56573705 C13.6484598,2.5 11.234721,0.00872880628 8.24939907,0 C5.26508568,0.00939825704 2.85177162,2.49860241 2.85570897,5.56330236 L2.85570897,9.2226649 L1.33125064,9.2226649 C0.97703587,9.22363176 0.637720577,9.36914422 0.388031427,9.62715641 C0.138342276,9.8851686 -0.00124277274,10.2345199 8.33833201e-06,10.5982736 L8.33833201e-06,20.6243913 C8.33833201e-06,21.3840195 0.596286273,22 1.33125064,22 L15.1687329,22 C15.5229477,21.9990331 15.862263,21.8535207 16.1119521,21.5955085 C16.3616413,21.3374963 16.5012263,20.9881449 16.4999752,20.6243913 L16.4999752,10.5994909 C16.5002813,10.2357374 16.3597909,9.88677169 16.1094351,9.62944486 C15.8590793,9.37211803 15.5193905,9.22753418 15.1651767,9.22753432 L15.1675475,9.22753432 L15.1687329,9.22631696 Z M8.99740312,15.8742807 L8.99740312,18.0642983 C8.99740532,18.163329 8.91957674,18.2437974 8.82314545,18.2444666 L7.67920898,18.2444666 C7.58192352,18.2444666 7.50269216,18.1641951 7.50139501,18.0642983 L7.50139501,15.8742807 C6.81469059,15.5187423 6.45549943,14.7255585 6.63324412,13.9571866 C6.81098881,13.1888147 7.47917077,12.6462632 8.24821363,12.645861 C9.01510474,12.6498092 9.67994094,13.19175 9.85772301,13.9578514 C10.0355051,14.7239528 9.6801348,15.5155677 8.99740312,15.8742807 L8.99740312,15.8742807 Z M11.5733347,9.22753432 L4.92783235,9.22753432 L4.92783235,5.65582117 C4.92586377,3.76741513 6.41289775,2.2337964 8.25176991,2.22775566 C10.0888693,2.23446601 11.5741215,3.76679864 11.5721492,5.65338645 L11.5721492,9.22753432 L11.5733347,9.22753432 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/username.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录页/小尺寸适配" transform="translate(-521.000000, -438.000000)" fill="#D7DAE2">
+            <g id="编组-3" transform="translate(521.000000, 420.000000)">
+                <g id="icon/yonghuguanli" transform="translate(0.000000, 18.000000)">
+                    <path d="M5.69990867,6.45706457 C5.73170921,7.95572849 6.24834193,9.20579289 7.2498068,10.2072578 C8.25127168,11.2087226 9.50133608,11.7253554 11,11.7571559 C12.4986639,11.7253554 13.7487283,11.2087226 14.7501932,10.2072578 C15.7516581,9.20579289 16.2682908,7.95572849 16.3000913,6.45706457 C16.2682908,4.95840065 15.7516581,3.70833625 14.7501932,2.70687137 C13.7487283,1.7054065 12.4986639,1.18877379 11,1.15697324 C9.50133608,1.18877379 8.25127168,1.7054065 7.2498068,2.70687137 C6.24834193,3.70833625 5.73170921,4.95840065 5.69990867,6.45706457 Z M18.571559,20.8430268 L2.67128505,20.8430268 C2.45019552,20.8430268 2.26873049,20.7721065 2.12688995,20.630266 C1.98504941,20.4884254 1.91412914,20.3069604 1.91412914,20.0858709 L1.91412914,17.8144031 C1.94592969,16.7417656 2.3166837,15.8505931 3.02639117,15.1408856 C3.73609863,14.4311782 4.62727113,14.0604242 5.69990867,14.0286236 L16.3000913,14.0286236 C17.3727289,14.0604242 18.2639014,14.4311782 18.9736088,15.1408856 C19.6833163,15.8505931 20.0540703,16.7417656 20.0858709,17.8144031 L20.0858709,20.0858709 C20.0858709,20.3069604 20.0149506,20.4884254 19.87311,20.630266 C19.7312695,20.7721065 19.5498045,20.8430268 19.328715,20.8430268 L18.571559,20.8430268 Z" id="形状"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/icon.vue

@@ -8,15 +8,13 @@ const props = defineProps<{
 }>()
 const symbolId = computed(() => `#icon-${props.name}`)
 const newColor = computed(() => `${props.color ?? '#ccc'}`)
-const newSize = computed(() => `${props.size ?? 16}`)
+const newSize = computed(() => `${props.size ? (`${props.size / 100}rem`) : '0.16rem'}`)
 </script>
 <template>
   <svg
     aria-hidden="true"
-    :font-size="newSize"
-    :width="newSize"
-    :height="newSize"
     :fill="newColor"
+    :style="`width:${newSize};height:${newSize}`"
   >
 
     <use

src/components/login.vue

@@ -3,46 +3,52 @@ import { ref } from 'vue'
 
 const name = ref('')
 const roomID = ref('')
-const error = ref('')
-defineProps<{
-  err: string
-}>()
-const emit = defineEmits<{(evt: 'loginBack', value: { name: string, roomID: string }): void;
-}>()
-async function login() {
-  if (!roomID.value) {
-    error.value = '请输入房间号'
-  } else if (!name.value) {
-    error.value = '请输入昵称'
-  } else {
-    emit('loginBack', { name: name.value, roomID: roomID.value })
-  }
+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 @keydown.enter="login">
-      <div class="login-logo">
-        登陆
-      </div>
-      <input
-        v-model="roomID"
-        type="text"
-        placeholder="房间"
-        maxlength="20"
-      >
-      <input
-        v-model="name"
-        type="text"
-        placeholder="昵称"
-        maxlength="20"
-      >
-      <div class="login-err">
-        {{ err || error }}
+    <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>
-      <button @click="login">
-        加入
-      </button>
     </div>
   </div>
 </template>
@@ -54,58 +60,82 @@ async function login() {
   display: flex;
   justify-content: center;
   align-items: center;
+  background: url(../assets/img/bg.png) center center no-repeat;
+  background-size: 100% 100%;
 
-  &-logo {
-    width: 1rem;
-    height: 0.5rem;
-    margin: 0 auto;
-    text-align: center;
-  }
+  &-content {
+    width: 8rem;
+    height: 4rem;
+    background: white;
+    border-radius: 0.2rem;
+    display: flex;
+    overflow: hidden;
 
-  input {
-    display: block;
-    border: 0;
-    border-bottom: solid 0.01rem #ccc;
-    text-indent: 0.1rem;
-    margin: 0 auto;
-    margin-bottom: 0.2rem;
-    outline: none;
-    border-radius: 0;
-    background: none;
-    font-size: 0.14rem;
-  }
+    &-left {
+      width: 5rem;
+      background: url(../assets/img/login-left.png) center center no-repeat;
+      background-size: 100% 100%;
+    }
 
-  button {
-    display: block;
-    background: #79b8fa;
-    border: none;
-    color: white;
-    font-size: 0.15rem;
-    font-weight: 500;
-    border-radius: 0.05rem;
-    cursor: pointer;
-    margin: 0 auto;
-    margin-top: 0.2rem;
-    line-height: 0.3rem;
-    padding: 0.01rem 0.35rem;
-  }
+    &-right {
+      flex: 1;
+      padding: 0 0.3rem;
 
-  button:hover {
-    background: #2d8cf0;
-  }
+      &>p {
+        font-size: 0.3rem;
+        color: #5970C6;
+        text-align: left;
+        font-weight: 400;
+        text-align: center;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
 
-  &-err {
-    width: 1.75rem;
-    margin: 0 auto;
-    font-size: 0.10rem;
-    color: red;
-    text-align: left;
-    text-indent: 0.12rem;
-  }
+      &>div {
+        padding: 0.1rem 0;
+        display: flex;
+        align-items: center;
+        margin: 0.1rem 0;
 
-  input:nth-child(3) {
-    margin-bottom: 0.05rem;
-  }
+        &:not(:last-child) {
+          border-bottom: solid 1px #D2D6E7;
+        }
+
+        input {
+          border: none;
+          margin-left: 0.05rem;
+          outline: none;
+          width: 100%;
+          font-size: 0.15rem;
+          color: #666666;
 
+          &::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>