样式优化

src/page/Login/index.module.scss

@@ -22,7 +22,7 @@
     display: flex;
     flex-direction: column;
 
-    @for $i from 1 through 4 {
+    @for $i from 1 through 5 {
       >div:nth-child(#{$i}) {
         @if $i ==1 {
           flex-shrink: 0;
@@ -66,6 +66,28 @@
         }
 
         @else if $i ==3 {
+          flex-shrink: 0;
+          margin-bottom: 20px;
+          color: #ccc;
+          font-size: 16px;
+          display: flex;
+          align-items: center;
+
+          >div {
+            flex-grow: 1;
+            height: 1px;
+            background-color: #3F3F3F;
+          }
+
+          >span {
+            flex-shrink: 0;
+            margin: 0 4px;
+            color: #7A7A7A;
+            font-size: 12px;
+          }
+        }
+
+        @else if $i ==4 {
           display: flex;
           align-items: center;
           margin-bottom: 10px;
@@ -79,8 +101,8 @@
               @else if $i ==2 {
                 flex-shrink: 0;
                 cursor: pointer;
-                height: 36px;
-                line-height: 36px;
+                height: 44px;
+                line-height: 44px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -103,7 +125,7 @@
           }
         }
 
-        @else if $i ==4 {
+        @else if $i ==5 {
           flex-shrink: 0;
           color: #ccc;
           text-align: right;

src/page/Login/index.tsx

@@ -245,11 +245,16 @@ const Login: React.FC = () => {
               </div> : null}
             </div>
           </div>
+          <div>
+            <div></div>
+            <span>游客登录</span>
+            <div></div>
+          </div>
           <div className={`drag`}>
             <div>
               <Input
                 placeholder="输入会议号"
-                style={{ height: '36px' }}
+                style={{ height: '44px' }}
                 value={anonInfo.roomNum}
                 onChange={e => {
                   setAnonInfo({