add breakpoints.

src/oj/problem/detail.vue

@@ -2,9 +2,10 @@
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
 import Editor from "./components/editor.vue"
-import { getProblem } from "../api"
 import ProblemContent from "./components/problem-content.vue"
 import ProblemInfo from "./components/problem-info.vue"
+import { getProblem } from "../api"
+import { isDesktop, isMobile } from "../../utils/breakpoints"
 
 const route = useRoute()
 const contestID = route.params.contestID as string
@@ -33,19 +34,25 @@ onMounted(() => {
 
 <template>
   <el-row v-if="problem._id">
-    <el-col :span="12">
+    <el-col :span="isDesktop ? 12 : 24">
       <el-tabs type="border-card">
-        <el-tab-pane label="题目描述">
-          <ProblemContent :problem="problem" />
+        <el-tab-pane label="题目描述" lazy>
+          <el-scrollbar v-if="isDesktop" height="calc(100vh - 171px)" noresize>
+            <ProblemContent :problem="problem" />
+          </el-scrollbar>
+          <ProblemContent v-else :problem="problem" />
         </el-tab-pane>
-        <el-tab-pane label="比赛信息" v-if="contestID"></el-tab-pane>
-        <el-tab-pane label="题目信息">
+        <el-tab-pane v-if="isMobile" label="代码编辑" lazy>
+          <Editor :problem="problem" />
+        </el-tab-pane>
+        <el-tab-pane label="比赛信息" v-if="contestID" lazy></el-tab-pane>
+        <el-tab-pane label="题目信息" lazy>
           <ProblemInfo :problem="problem" />
         </el-tab-pane>
         <el-tab-pane label="提交情况">3</el-tab-pane>
       </el-tabs>
     </el-col>
-    <el-col :span="12">
+    <el-col v-if="isDesktop" :span="12">
       <Editor :problem="problem" />
     </el-col>
   </el-row>