Bug fixed

src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
-    <div id="ball"></div>
     <div class="container">
+        <div id="ball" class="pconly"></div>
         <div id="main">
             <div id="title"> WordIn</div>
             <div class="colbox">
@@ -92,11 +92,8 @@ export default {
     .button {
         margin-top: 30px;
     }
-    #ball{
-        width: 750px;
-        height: 750px;
-        top: -20%;
-        right: -90%;
+    .container{
+        overflow: hidden;
     }
 }
 

src/components/Recite.vue

@@ -27,7 +27,8 @@
                 </el-checkbox-group>
             </div>
         </div>
-        <div id="rangeselect" class="card item">
+        <div class="rowbox item">
+            <div id="rangeselect" class="card">
                 <div class="title" style="font-size: 35px;">在线词库</div>
                 <el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
                     @change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
@@ -47,6 +48,7 @@
                 </el-checkbox-group>
             </div>
         </div>
+    </div>
     <div id="test" class="colbox" v-if="mode === 1">
         <div style="flex-grow: 1;" class="card">
             <div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
@@ -468,9 +470,16 @@ export default {
         min-height: 50px;
         height: 55px;
     }
+
     .card {
         box-shadow: none;
     }
+
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+        margin-right: 15px;
+    }
 }
 
 @media screen and (min-width: 500px) {
@@ -526,6 +535,11 @@ export default {
         min-height: 100px;
         height: 100px;
     }
+
+    .checkbox {
+        font-size: 30px;
+        margin-bottom: 10px;
+    }
 }
 
 .subtitle {
@@ -535,11 +549,6 @@ export default {
     font-weight: 800;
 }
 
-.checkbox {
-    font-size: 30px;
-    margin-bottom: 10px;
-}
-
 #status {
     font-size: 20px;
 }
@@ -574,4 +583,5 @@ export default {
 #online-set-container {
     height: auto;
     overflow-y: auto;
-}</style>
+}
+</style>