大赛训练第一个页面

src/views/contest/contestList.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="trainingPlatform" :style="'padding-left:'+(widthLeft)+'px'">
+  <div class="contestPlatform" :style="'padding-left:'+(widthLeft)+'px'">
-    <div class="trainingPubMapList" :style="{width: widthLeft+'px'}">
+    <div class="contestPaperList" :style="{width: widthLeft+'px'}">
       <paper-list ref="paperList" @changeModuleData="changeModuleData" />
       <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
     </div>
-    <div>
+    <div class="module-box">
-      <div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;">{{ paperName }}</div>
+      <div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;color: #fff;">{{ paperName }}</div>
       <el-tabs v-model="activeModuleName" class="tabs-box" type="border-card" @tab-click="handleTabClick">
         <template v-for="(mod, modIndex) in moduleList">
           <el-tab-pane :key="modIndex" :label="mod.moduleName" :name="mod.customModuleId+''">
@@ -37,7 +37,9 @@
                 <el-table-column label="评分标准" prop="criteria" />
               </el-table>
             </el-card>
-            <el-button type="primary" size="medium" style="margin-top: 10px;" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
+            <div style="display: flex; justify-content: center;margin-top: 10px;">
+              <el-button type="primary" size="medium" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
+            </div>
           </el-tab-pane>
         </template>
       </el-tabs>
@@ -157,32 +159,60 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    .trainingPlatform {
+    .contestPlatform {
         position: relative;
         height: 100%;
         width: 100%;
         overflow: hidden;
+		.contestPaperList {
+			position:absolute;
+			left:0;
+			top:0;
+			height: 100%;
+			background: #00172E;
+		}
+		.module-box{
+			height: 100%;
+			width: 100%;
+			padding-bottom: 20px;
+			background: #00172E;
+			.tabs-box{
+				height: calc(100% - 30px);
+				margin: 0 10px;
+				overflow-y: auto;
+				background: transparent;
+				&::-webkit-scrollbar{
+					background: #06284a;
+				}
+				&::-webkit-scrollbar-thumb{
+					background: #0c0909;
+				}
+				&::-webkit-scrollbar-track{
+					background: #06284a;
+			}
+		}
     }
-    .trainingPubMapList {
+}
-        position:absolute;
+/deep/{
-        left:0;
+	.el-tabs__nav-scroll{
-        top:0;
-        height: 100%;
 		background: #00172E;
-    }
-	.tabs-box{
-	height: calc(100% - 30px);
-	margin: 0 10px;
-	overflow-y: auto;
-	background: transparent;
-	&::-webkit-scrollbar{
-		background: #06284a;
 	}
-	&::-webkit-scrollbar-thumb{
+	.el-tabs--border-card>.el-tabs__header .el-tabs__item{
-		background: #0c0909;
+		color: #fff;
+		border: solid 1px #01468B;
 	}
-	&::-webkit-scrollbar-track{
+	.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
-		background: #06284a;
+		background: #01468B;
+	}
+	.el-tabs--border-card{
+		border: solid 1px #01468B;
+	}
+	.el-table th.el-table__cell{
+		background-color: #01468B;
+		color: #fff;
+	}
+	.el-table--border, .el-table--group{
+		border-width: 0;
 	}
 }
 </style>

src/views/contest/paperList.vue

@@ -3,8 +3,8 @@
     <div id="trainingMapTree" class="left-paper-list">
       <div class="paperListName">
         <el-form :inline="true" :model="formModel" class="demo-form-inline">
-          <el-form-item label="组别" :label-style="{ color: 'red' }">
+          <el-form-item label="组别">
-            <el-select v-model="formModel.group" placeholder="请选择" clearable>
+            <el-select v-model="formModel.group" placeholder="请选择" clearable style="width: 200px;" @change="queryPaper">
               <el-option
                 v-for="item in groupOption"
                 :key="item.value"
@@ -14,7 +14,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="赛季">
-            <el-select v-model="formModel.seasonId" placeholder="请选择" clearable>
+            <el-select v-model="formModel.seasonId" placeholder="请选择" clearable style="width: 200px;" @change="filterPaper">
               <el-option
                 v-for="item in seasonOptions"
                 :key="item.id"
@@ -22,9 +22,6 @@
                 :value="item.id"
               />
             </el-select>
-            <el-form-item>
-              <el-button type="primary" size="medium" @click="queryPaper">查询</el-button>
-            </el-form-item>
           </el-form-item>
         </el-form>
       </div>
@@ -35,7 +32,7 @@
         active-text-color="#ffd04b"
       >
         <template v-for="(paper,paperIndex) in paperList">
-          <el-menu-item :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
+          <el-menu-item v-show="!formModel.seasonId||paper.seasonId==formModel.seasonId" :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
             {{ paper.name }}
           </el-menu-item>
         </template>
@@ -70,21 +67,34 @@ export default {
     },
     mounted() {
         this.loading = false;
-        queryContestSeasonPaged({pageSize:999}).then((res) => {
-            this.seasonOptions = res.data.list;
-        });
         getPaperList({ group:'GZ', pageSize:999}).then((res) => {
             this.paperList = res.data.list;
             this.defaultIndex = this.paperList[0].id + '';
             this.$emit('changeModuleData', this.paperList[0]);
         });
+        this.querySeason();
     },
     methods: {
         queryPaper() {
-            const data = Object.assign({pageSize:999}, this.formModel);
+            getPaperList({ group:this.formModel.group, pageSize:999}).then((res) => {
-            getPaperList(data).then((res) => {
                 this.paperList = res.data.list;
             });
+            this.querySeason();
+        },
+        querySeason() {
+            queryContestSeasonPaged({pageSize:999, group:this.formModel.group }).then((res) => {
+                this.seasonOptions = res.data.list;
+            });
+        },
+        filterPaper() {
+            if (this.formModel.seasonId) {
+                const paper = this.paperList.find(paper=>paper.seasonId == this.formModel.seasonId);
+                this.defaultIndex = paper.id + '';
+                this.$emit('changeModuleData', paper);
+            } else {
+                this.defaultIndex = this.paperList[0].id + '';
+                this.$emit('changeModuleData', this.paperList[0]);
+            }
 
         },
         showPaperDetail(paper) {