显示优化

vueHomilyLink/src/assets/main.css

@@ -1,35 +1,9 @@
 @import './base.css';
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
+html,body{
+  margin:0px;
+  height: 100%;
 }
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+#app{
+  height: 100%;
 }

vueHomilyLink/src/views/LiveView.vue

@@ -24,10 +24,9 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- 卡片 -->
-    <div class="card-container">
+
+        <!-- 卡片 -->
         <div class="card">
             <div class="cover-image" style="position:relative;">
                 <img src="../assets/live.jpg" alt="节目1">
@@ -51,10 +50,8 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- 卡片 -->
-    <div class="card-container">
+        <!-- 卡片 -->
         <div class="card">
             <div class="cover-image" style="position:relative;">
                 <img src="../assets/live.jpg" alt="节目1">
@@ -78,10 +75,8 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- 卡片 -->
-    <div class="card-container">
+        <!-- 卡片 -->
         <div class="card">
             <div class="cover-image" style="position:relative;">
                 <img src="../assets/live.jpg" alt="节目1">
@@ -105,10 +100,8 @@
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- 卡片 -->
-    <div class="card-container">
+        <!-- 卡片 -->
         <div class="card">
             <div class="cover-image" style="position:relative;">
                 <img src="../assets/live.jpg" alt="节目1">
@@ -136,7 +129,7 @@
 
 </template>
 <style scoped>
-body {
+.card-container {
     /*居中显示*/
     margin-left: auto;
     margin-right: auto;
@@ -149,17 +142,6 @@ body {
     background-color: #f4f4f4;
     display: flex;
     align-items: center;
-    /* 垂直居中整个页面内容 */
-
-}
-
-.card-container {
-    display: flex;
-    flex-wrap: wrap;
-    /*超出自动换行*/
-    justify-content: center;
-    /* 卡片水平居中 */
-    padding: 0px;
 }
 
 .card {