[完善] 考生考试界面完善

src/app/student/examination-details/examination-details.component.html

@@ -10,7 +10,27 @@
       </div>
     </div>
     <div class="right">
-      
+      <div class="headerRight">
+        <label (click)='togglePaperType(1)' [ngClass]="{'selectPaperType': selectPaperType == '1'}">基本信息</label>
+        <label (click)='togglePaperType(2)' [ngClass]="{'selectPaperType': selectPaperType == '2'}">作战部署</label>
+        <button (click)='uploadPaper()'>交卷</button>
+      </div>
+      <div class="centerRight">
+        <div class="paperCenter" *ngIf="selectPaperType == '1'">
+
+          <mat-accordion>
+            <mat-expansion-panel>
+              <mat-expansion-panel-header class="panelHeader">
+                <label class="mariginRight">基本信息</label>
+                <label>总分: <label class="mark"> 25</label>分, </label><label>单项<label class="mark">2</label>分</label>
+              </mat-expansion-panel-header>
+
+            </mat-expansion-panel>
+          </mat-accordion>
+
+        </div>
+        <div class="paperCenter" *ngIf="selectPaperType == '2'">作战部署</div>
+      </div>
     </div>
 
   </div>

src/app/student/examination-details/examination-details.component.scss

@@ -22,6 +22,10 @@
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      .centerRight {
+        flex: 1;
+        overflow: hidden;
+      }
     }
   }
 }
@@ -56,4 +60,54 @@
 .selectPaper {
   background-color: #07CDCF;
   color: #fff;
+}
+
+//中间内容区
+.headerRight {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  box-sizing: border-box;
+  padding-right: 10px;
+  overflow: hidden;
+  background-color: #F2F5F6;
+  button {
+    width: 80px;
+    height: 32px;
+    border-radius: 5px;
+    background-color: #07CDCF;
+    color: #fff;
+    border: none;
+    outline: none;
+    float: right;
+    margin: 9px 25px 0 0;
+  }
+  label {
+    cursor: pointer;
+    display: inline-block;
+    width: 120px;
+    text-align: center;
+    color: #1E2323;
+    opacity: 0.5;
+  }
+  .selectPaperType {
+    color: #07CDCF;
+    opacity: 1;
+    background-color: #fff;
+    border-top: 3px solid #07CDCF;
+  }
+}
+
+.mark { color: #FF8678; }
+.mariginRight { margin-right: 25px; }
+.paperCenter {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 5px;
+  overflow-y: auto;
+  .panelHeader {
+    background-color: #F5FDFE;
+    label { display: inline-block; }
+  }
 }

src/app/student/examination-details/examination-details.component.ts

@@ -20,6 +20,7 @@ export class ExaminationDetailsComponent implements OnInit {
   paperData:any //试卷信息
   paperCompanyData:any = []; //考生具体考卷
   selectPaper:any = {id:null}; //选择当前考卷
+  selectPaperType:string = '1'; //选择当前考卷内容
 
   //获取考卷
   async getTestInfo () {
@@ -56,9 +57,21 @@ export class ExaminationDetailsComponent implements OnInit {
     }
   }
 
+  //切换 选择考卷内容
+  togglePaperType (e) {
+    if (this.selectPaperType != e) {
+      this.selectPaperType = e
+    }
+  }
+
   //获得单位预案设定
   getUnitPlans(){
 
   }
 
+  //交卷
+  uploadPaper () {
+    console.log('交卷')
+  }
+
 }