实验面板小屏幕下样式

src/components/TestPanel.vue

@@ -4,61 +4,59 @@
     <el-container class="scrollbar"
                   id="container"
                   v-show="pannelVisible">
-      <el-header id="header">
-        <div class="panel-header"
+      <el-header class="panel-header"
              id="panelHeader">
-          <div class="project">
-            <div class="inline-center">
-              <p>实训项目</p>
-              <el-tooltip effect="dark"
-                          content="点击右侧“下三角”按钮可切换实验项目"
-                          placement="bottom">
-                <i class="info el-icon-warning"
-                   style="margin-left: 10px"></i>
-              </el-tooltip>
-            </div>
-            <el-select v-model="projectId"
-                       placeholder="请选择"
-                       class="select"
-                       :disabled="projectPermissions != 0"
-                       @change="selectProject"
-                       style="flex: 1">
-              <el-option v-for="(item, i) in projectList"
-                         :key="item.projectId"
-                         :label="i + 1 + '. ' + item.projectName"
-                         :value="item.projectId"></el-option>
-            </el-select>
-          </div>
-          <div class="item">
-            <div class="count">
-              实训{{text}}时间
-              <span>{{day}}</span>天
-              <span>{{hour}}</span>小时
-              <span>{{minutes}}</span>分
-              <span>{{seconds}}</span>秒
-            </div>
-          </div>
-          <div v-if="!competitionId"
-               class="item">
-            <div>
-              总得分：
-              <span class="total-score">{{grade}}</span>
-            </div>
-          </div>
-          <div>
-            <el-button @click="toggleReport"
-                       v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
-            <el-button @click="toReport"
-                       v-if="isSubmit && !competitionId">查看实验报告</el-button>
-            <el-button class="reload"
-                       @click="reloadConfirm"
-                       v-show="projectPermissions == 0">重新开始</el-button>
-            <el-button type="primary"
-                       class="submit btn"
-                       @click="confirmSubmit"
-                       :disabled="isSubmit || !projectList.length">提交</el-button>
-          </div>
-        </div>
+				<div class="project">
+					<div class="inline-center">
+						<p class="whitespace-nowrap">实训项目</p>
+						<el-tooltip effect="dark"
+												content="点击右侧“下三角”按钮可切换实验项目"
+												placement="bottom">
+							<i class="info el-icon-warning"
+									style="margin-left: 10px"></i>
+						</el-tooltip>
+					</div>
+					<el-select v-model="projectId"
+											placeholder="请选择"
+											class="select"
+											:disabled="projectPermissions != 0"
+											@change="selectProject"
+											style="flex: 1">
+						<el-option v-for="(item, i) in projectList"
+												:key="item.projectId"
+												:label="i + 1 + '. ' + item.projectName"
+												:value="item.projectId"></el-option>
+					</el-select>
+				</div>
+				<div class="item">
+					<div class="count">
+						实训{{text}}时间
+						<span>{{day}}</span>天
+						<span>{{hour}}</span>小时
+						<span>{{minutes}}</span>分
+						<span>{{seconds}}</span>秒
+					</div>
+				</div>
+				<div v-if="!competitionId"
+							class="item">
+					<div>
+						总得分：
+						<span class="total-score">{{grade}}</span>
+					</div>
+				</div>
+				<div class="actions">
+					<el-button @click="toggleReport"
+											v-if="$parent.language && !isSubmit && !competitionId">填写实验报告</el-button>
+					<el-button @click="toReport"
+											v-if="isSubmit && !competitionId">查看实验报告</el-button>
+					<el-button class="reload"
+											@click="reloadConfirm"
+											v-show="projectPermissions == 0">重新开始</el-button>
+					<el-button type="primary"
+											class="submit btn"
+											@click="confirmSubmit"
+											:disabled="isSubmit || !projectList.length">提交</el-button>
+				</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>