login css

src/assets/icon/a-b.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_84_00891"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_84_00891)"><g><path d="M7.5,22.5L7.5,25.5C7.5,27.081,8.925,28.5,10.5,28.5L15,28.5L15,31.5L10.5,31.5C7.18629,31.5,4.5,28.8137,4.5,25.5L4.5,22.5L7.5,22.5ZM27,15L33.6,31.5L30.3675,31.5L28.566,27L22.431,27L20.6325,31.5L17.4015,31.5L24,15L27,15ZM25.5,19.3275L23.6295,24L27.3675,24L25.5,19.3275ZM4.5,4.5L13.5,4.5C15.2743,4.500631213,16.8826,5.5437899999999996,17.6066,7.16361C18.3307,8.783439999999999,18.0354,10.677520000000001,16.8525,12C18.0354,13.32248,18.3307,15.2166,17.6066,16.836399999999998C16.8826,18.456200000000003,15.2743,19.4994,13.5,19.5L4.5,19.5L4.5,4.5ZM13.5,13.5L7.5,13.5L7.5,16.5L13.5,16.5C14.32843,16.5,15,15.8284,15,15C15,14.17157,14.32843,13.5,13.5,13.5ZM25.5,4.5C28.8137,4.5,31.5,7.18629,31.5,10.5L31.5,13.5L28.5,13.5L28.5,10.5C28.5,8.84315,27.1569,7.5,25.5,7.5L21,7.5L21,4.5L25.5,4.5ZM13.5,7.5L7.5,7.5L7.5,10.5L13.5,10.5C14.32843,10.5,15,9.82843,15,9C15,8.17157,14.32843,7.5,13.5,7.5Z" fill="#0F0F0F" fill-opacity="1"/></g></g></svg>

src/assets/icon/lock-2-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="37.20000076293945" height="36" viewBox="0 0 37.20000076293945 36"><defs><clipPath id="master_svg0_70_658"><rect x="0" y="0" width="37.20000076293945" height="36" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_70_658)"><g><path d="M27.900146484375,12L31.000146484375,12C31.856146484375,12,32.550146484375,12.6716,32.550146484375,13.5L32.550146484375,31.5C32.550146484375,32.3284,31.856146484375,33,31.000146484375,33L6.200146484375,33C5.3441054843749995,33,4.650146484375,32.3284,4.650146484375,31.5L4.650146484375,13.5C4.650146484375,12.6716,5.3441054843749995,12,6.200146484375,12L9.300146484375,12L9.300146484375,10.5C9.300146484375,5.52944,13.463896484375,1.5,18.600146484375,1.5C23.736346484375,1.5,27.900146484375,5.52944,27.900146484375,10.5L27.900146484375,12ZM17.050146484375,23.598L17.050146484375,27L20.150146484375,27L20.150146484375,23.598C21.819346484375,22.6654,22.213846484375,20.5004,20.974846484375,19.0716C19.735946484375,17.6427,17.464346484375,17.6427,16.225446484375,19.0716C14.986446484375,20.5004,15.380946484375,22.6654,17.050146484375,23.598ZM24.800146484375,12L24.800146484375,10.5C24.800146484375,7.18629,22.024346484375,4.5,18.600146484375,4.5C15.175946484375,4.5,12.400146484375,7.18629,12.400146484375,10.5L12.400146484375,12L24.800146484375,12Z" fill="#050505" fill-opacity="1"/></g></g></svg>

src/assets/icon/user-3-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><clipPath id="master_svg0_70_654"><rect x="0" y="0" width="36" height="36" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_70_654)"><g><path d="M29.999755859375,33L5.999755859375,33L5.999755859375,30C5.999755859375,25.8579,9.357615859375,22.5,13.499755859375,22.5L22.499755859375,22.5C26.641855859375,22.5,29.999755859375,25.8579,29.999755859375,30L29.999755859375,33ZM17.999755859375,19.5C13.029195859375001,19.5,8.999755859375,15.4706,8.999755859375,10.5C8.999755859375,5.52944,13.029195859375001,1.5,17.999755859375,1.5C22.970355859375,1.5,26.999755859375,5.52944,26.999755859375,10.5C26.999755859375,15.4706,22.970355859375,19.5,17.999755859375,19.5Z" fill="#1B1B1B" fill-opacity="1"/></g></g></svg>

src/pages/login/login.jsx

@@ -6,6 +6,8 @@ import Taro from '@tarojs/taro';
 import ws from '@/api/websocket'
 import './login.scss'
 import { fetchOpMap } from '@/api/api'
+import iconUser from '@/assets/icon/user-3-fill.svg'
+import iconLock from '@/assets/icon/lock-2-fill.svg'
 
 /*
   登录 -> 大厅 -> 新桌面 -> 进桌面 -> profile(弹窗)
@@ -52,20 +54,25 @@ function Login(props, ref) {
     }
     return (
       <View className='login'>
-        <Text>Hello Login Page!</Text>
+        <View className='ceiling'></View>
+        <View className='title-line'><Text className='title-1'>Player</Text></View>
+        <View className='title-line'><Text className='title-1'>Infomation</Text></View>
+        <View className='title-line'><Text className='title-2'>Easily add new account or login the current one.</Text></View>
         {/* <Progress percentage="33" /> */}
-        <View>
+        <View className='input-wrap'>
-          <Input name="username" type="text" defaultValue={state.username}  placeholder="文本" leftIcon="dongdong"
+          <Image className='input-icon' src={iconUser} />
+          <Input className="input-1" name="username" type="text" defaultValue={state.username}  placeholder="account" leftIcon="dongdong"
               onChange={usernameChange}/>
         </View>
-        <View className='input-1'>
+        <View className='input-wrap'>
-          <Input name="password" type="password" defaultValue={state.password}  placeholder="文本"
+          <Image className='input-icon' src={iconLock} />
+          <Input className='input-1' name="password" type="password" defaultValue={state.password}  placeholder="password"
             onChange={passwordChange}/>
         </View>
-        <View className='input-1'>
+        <View >
           <Image src={capatcha.src} width="107" height="36" onClick={() => setCapatcha({...capatcha, src: capatcha.origin + '?t=' + Math.random()})} />
         </View>
-        <View className='input-1'>
+        <View>
           <Button type="primary" style={{width: '160px'}} onClick={handleSubmit}>提交</Button>
           <Button type="primary" style={{width: '160px'}} onClick={() => {Taro.navigateTo({url:'/pages/lobby/lobby'})}}>跳转</Button>
         </View>

src/pages/login/login.scss

@@ -1,10 +1,42 @@
 .login {
     height: 100vh;
-    background-color:goldenrod;
+    background-color:#fff;
 
+    .ceiling {
+        height: 75px;
+    }
+    .title-line {
+        padding: 6px 39px;
+    }
+    .title-1 {
+        font-size: 36px;
+        color: #EE914E;
+        font-weight: bold;
+    }
+    .title-2 {
+        font-size: 14px;
+    }
+    
+    .input-wrap {
+        display: flex;
+        justify-content: center;
+        // align-items: center;
+        margin: 37.5px 0;
+    }
+    .input-icon {
+        margin-right: 16px;
+        height: 36px;
+        width: 36px;
+        padding: 4px 0;
+    }
     .input-1 {
-        width: 560px;
+        box-sizing: border-box;
+        width: 307px;
+        height: 42px;
         border-radius: 16px;
-        text-align: center;
+        border: 1px solid #000;
+        font-size: 18px;
+        padding: 5px 20px;
+        box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3);
     }
 }

src/store/conn.js

@@ -1,3 +1,4 @@
+import { createSlice } from '@reduxjs/toolkit';
 
 const connSlice = createSlice({
   name: 'conn',