enhance style of first run readme window

packages/ui/src/renderer/src/page/FirstRunReadme/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div ref="componentRootEl" class="first-run-readme">
+    <div class="first-run-readme__inner-outer">
       <div class="first-run-readme__inner">
         <div class="readme-title">欢迎使用GeekGeekRun！祝您求职顺利~</div>
         <div class="readme-desc">
@@ -102,13 +103,16 @@
             </ElCheckbox>
           </ElCheckboxGroup>
         </article>
-      <footer flex mt20px pb20px flex-justify-end>
+      </div>
+    </div>
+    <footer pt10px pb10px>
+      <div flex flex-justify-end w-880px ml-auto mr-auto>
         <el-button type="text" @click="handleCancel">退出程序</el-button>
         <el-button type="primary" @click="handleSubmit"
           >我已经阅读，并接受上方所提及的相关风险，并决定继续使用本程序</el-button
         >
-      </footer>
       </div>
+    </footer>
   </div>
 </template>
 
@@ -163,30 +167,27 @@ const handleReadmeItemCheckStatusListChange = (value: number[]) => {
   })
 }
 const componentRootEl = ref<HTMLElement>()
-onMounted(() => {
-  const ro = new ResizeObserver(() => {
-    electron.ipcRenderer.send('update-window-size', {
-      width: componentRootEl.value!.offsetWidth,
-      height: componentRootEl.value!.offsetHeight
-    })
-  })
-  ro.observe(componentRootEl.value!)
-  onBeforeMount(() => {
-    ro.disconnect()
-  })
-})
 </script>
 
 <style lang="scss" scoped>
 .first-run-readme {
   box-sizing: border-box;
   width: 960px;
-  height: fit-content;
+  height: 100vh;
+  overflow: auto;
   user-select: none;
-  &__inner {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .first-run-readme__inner-outer {
+    flex: 1;
+    overflow: auto;
+  }
+  .first-run-readme__inner {
     width: 880px;
     margin: 0 auto;
     padding-top: 30px;
+    padding-bottom: 30px;
     .readme-title {
     }
     .readme-desc {
@@ -222,5 +223,9 @@ onMounted(() => {
       }
     }
   }
+  footer {
+    flex: 0;
+    background-color: #f0f0f0;
+  }
 }
 </style>