样式优化

src/page/Home/Index/index.module.scss

@@ -152,4 +152,20 @@
       letter-spacing: 0;
     }
   }
+}
+
+.createRoom {
+  >div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+
+    >span {
+      color: white;
+      flex-shrink: 0;
+      font-size: 14px;
+      text-align: right;
+      width: 70px;
+    }
+  }
 }

src/page/Home/Index/index.tsx

@@ -345,79 +345,91 @@ const Index: React.FC = () => {
       </div>
       <Modal title={isCreateRoom ? '新建会议室' : '修改会议信息'} open={createRoomModal} footer={null} closable={false} centered width={'400px'}>
         <div>
-          <div>
+          <div className={styles.createRoom}>
-            {isCreateRoom ? <Input
+            {isCreateRoom ? <div>
-              placeholder="请输入房间号"
+              <span>房间号：</span>
-              style={{ marginBottom: '14px' }}
+              <Input
-              className={styles.letterSpacing}
+                placeholder="请输入房间号"
-              showCount
+                style={{ flexGrow: 1 }}
-              maxLength={8}
+                className={styles.letterSpacing}
-              value={createRoomFrom.roomNum}
+                showCount
-              onChange={(e) => {
+                maxLength={8}
-                const regex = /^[0-9]*$/;
+                value={createRoomFrom.roomNum}
-                if (regex.test(e.target.value)) {
+                onChange={(e) => {
-                  setCreateRoomFrom({
+                  const regex = /^[0-9]*$/;
-                    ...createRoomFrom,
+                  if (regex.test(e.target.value)) {
-                    roomNum: e.target.value
-                  })
-                }
-              }}
-              suffix={
-                <span
-                  style={{ color: '#47D3D0', cursor: 'pointer' }}
-                  onClick={() => {
-                    function generateTimestampWithRandom(): string {
-                      const timestamp = new Date().getTime();
-                      const lastSixDigits = timestamp.toString().slice(-6);
-                      const randomTwoDigits = ('0' + Math.floor(Math.random() * 100)).slice(-2);
-                      return lastSixDigits + randomTwoDigits;
-                    }
                     setCreateRoomFrom({
                       ...createRoomFrom,
-                      roomNum: generateTimestampWithRandom(),
+                      roomNum: e.target.value
                     })
-                  }}
+                  }
-                >获取随机房间号
+                }}
-                </span>
+                suffix={
-              }
+                  <span
-            /> : null}
+                    style={{ color: '#47D3D0', cursor: 'pointer' }}
-            <Input.TextArea
+                    onClick={() => {
-              placeholder="请输入房间名字"
+                      function generateTimestampWithRandom(): string {
-              style={{ marginBottom: '14px' }}
+                        const timestamp = new Date().getTime();
-              showCount
+                        const lastSixDigits = timestamp.toString().slice(-6);
-              maxLength={30}
+                        const randomTwoDigits = ('0' + Math.floor(Math.random() * 100)).slice(-2);
-              value={createRoomFrom.roomName}
+                        return lastSixDigits + randomTwoDigits;
-              onChange={(e) => {
+                      }
-                setCreateRoomFrom({
+                      setCreateRoomFrom({
-                  ...createRoomFrom,
+                        ...createRoomFrom,
-                  roomName: e.target.value
+                        roomNum: generateTimestampWithRandom(),
-                })
+                      })
-              }}
+                    }}
-              autoSize />
+                  >获取随机房间号
-            <Input
+                  </span>
-              placeholder="请输入届"
+                }
-              style={{ marginBottom: '14px' }}
+              />
-              value={createRoomFrom.year}
+            </div> : null}
-              onChange={(e) => {
+            <div>
-                const regex = /^[0-9]*$/;
+              <span>房间名字：</span>
-                if (regex.test(e.target.value)) {
+              <Input.TextArea
+                placeholder="请输入房间名字"
+                style={{ flexGrow: 1 }}
+                showCount
+                maxLength={30}
+                value={createRoomFrom.roomName}
+                onChange={(e) => {
                   setCreateRoomFrom({
                     ...createRoomFrom,
-                    year: e.target.value
+                    roomName: e.target.value
                   })
-                }
+                }}
-              }}
+                autoSize />
-            />
+            </div>
-            <Select
+            <div>
-              placeholder='请选择学科'
+              <span>届：</span>
-              style={{ width: '100%', marginBottom: '14px' }}
+              <Input
-              options={subjectList}
+                placeholder="请输入届"
-              value={createRoomFrom.subject} onChange={(e) => {
+                style={{ flexGrow: 1 }}
-                setCreateRoomFrom({
+                value={createRoomFrom.year}
-                  ...createRoomFrom,
+                onChange={(e) => {
-                  subject: e
+                  const regex = /^[0-9]*$/;
-                })
+                  if (regex.test(e.target.value)) {
-              }} />
+                    setCreateRoomFrom({
+                      ...createRoomFrom,
+                      year: e.target.value
+                    })
+                  }
+                }}
+              />
+            </div>
+            <div>
+              <span>学科：</span>
+              <Select
+                placeholder='请选择学科'
+                style={{ flexGrow: 1 }}
+                options={subjectList}
+                value={createRoomFrom.subject} onChange={(e) => {
+                  setCreateRoomFrom({
+                    ...createRoomFrom,
+                    subject: e
+                  })
+                }} />
+            </div>
           </div>
           <div style={{
             display: 'flex', justifyContent: 'center'