实验面板小屏幕下样式

src/components/TestPanel.vue

@@ -4,12 +4,11 @@
     <el-container class="scrollbar"
                   id="container"
                   v-show="pannelVisible">
-      <el-header id="header">
+      <el-header class="panel-header"
-        <div class="panel-header"
              id="panelHeader">
 				<div class="project">
 					<div class="inline-center">
-              <p>实训项目</p>
+						<p class="whitespace-nowrap">实训项目</p>
 						<el-tooltip effect="dark"
 												content="点击右侧“下三角”按钮可切换实验项目"
 												placement="bottom">
@@ -45,7 +44,7 @@
 						<span class="total-score">{{grade}}</span>
 					</div>
 				</div>
-          <div>
+				<div class="actions">
 					<el-button @click="toggleReport"
 											v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
 					<el-button @click="toReport"
@@ -58,7 +57,6 @@
 											@click="confirmSubmit"
 											:disabled="isSubmit || !projectList.length">提交</el-button>
 				</div>
-        </div>
       </el-header>
       <div class="report-wrap"
            v-if="reportVisible">
@@ -1322,6 +1320,8 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
+	flex-wrap: wrap;
+	height: auto !important;
   .project {
     display: inline-flex;
     align-items: center;
@@ -1360,6 +1360,9 @@ export default {
     background-color: #202020;
   }
 }
+.whitespace-nowrap {
+	white-space: nowrap;
+}
 /deep/.des {
   font-size: 16px;
   font-family: 'Microsoft YaHei';
@@ -1483,6 +1486,7 @@ export default {
   font-size: 14px;
 }
 /deep/.select {
+	min-width: 180px;
   .el-select__caret:before {
     content: '\e78f';
     padding: 3px;
@@ -1603,4 +1607,21 @@ export default {
 .text-danger {
   color: #f56c6c;
 }
+
+@media (max-width: 1550px) {
+	.panel-header {
+		.count {
+			margin-left: 0;
+		}
+	}
+}
+@media (max-width: 1400px) {
+	.panel-header {
+		.actions {
+			position: absolute;
+			top: 70px;
+			right: 30px;
+		}
+	}
+}
 </style>