media

src/views/train/testPaper/index.vue

 <template>
   <div class="testpaper">
-    <div class="title">{{title}}
-    <span style="position: absolute;right: 40px;;font-size: 14px;font-weight: 300;">{{`剩余时间:${parseInt(remaining/(60*1000))}分钟${parseInt((remaining%(60*1000))/1000)}秒`}}</span>
+    <div ref="title"  class="title">{{title}}
+    <span style="position: absolute;right: 36px;;font-size: 13px;font-weight: 300;">{{`剩余时间:${parseInt(remaining/(60*1000))}分钟${parseInt((remaining%(60*1000))/1000)}秒`}}</span>
     </div>
     <div class="info">
       <div class="infoItem">
@@ -29,6 +29,7 @@
   export default{
     mounted() {
       this.getRemain()
+      /* 获取*/
     },
     components:{
       Subject
@@ -238,7 +239,27 @@
       font-size: 18px;
       font-weight: 800;
     }
-    padding-left: 111px;
-    padding-right: 111px;
+    @media screen and (min-width: 800px) {
+      & {
+         --mode:'normal';
+        padding-left: 11rem;
+        padding-right: 11rem;
+     
+      }
+    }
+    @media screen and (max-width: 800px) {
+      & {
+        --mode:'mini';
+        padding-left: 2rem;
+        padding-right: 2rem;
+        .info{
+          display: none;
+        }
+        .title{
+          display: none;
+        }
+      }
+    }
+
   }
 </style>