9 changed files with 265 additions and 7 deletions
@ -0,0 +1,77 @@
|
||||
<div class="box" id="createtestscore"> |
||||
<div class="topbox"> |
||||
<app-tabbar></app-tabbar> |
||||
</div> |
||||
<div class="contant"> |
||||
<div class="main"> |
||||
<div class="leftDiv"> |
||||
<div class="title"> |
||||
<div> |
||||
单位列表 |
||||
</div> |
||||
<div> |
||||
总分: <span class="colorspan">120</span> |
||||
</div> |
||||
</div> |
||||
<div class="unitList"> |
||||
<table> |
||||
<tr> |
||||
<td>单位名称</td> |
||||
<td>总分</td> |
||||
</tr> |
||||
<tr> |
||||
<td>富力华大酒店</td> |
||||
<td class="colorspan">80</td> |
||||
</tr> |
||||
<tr> |
||||
<td>富力华大酒店</td> |
||||
<td class="colorspan">80</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<div class="rightDiv"> |
||||
<div class="tabsbox"> |
||||
<div [ngClass]="{selectedTab: selectedTab == 1}" (click)="selectTab(1)"> |
||||
基本信息 |
||||
</div> |
||||
<div [ngClass]="{selectedTab: selectedTab == 2}" (click)="selectTab(2)"> |
||||
作战部署 |
||||
</div> |
||||
</div> |
||||
<div class="maincontantbox"> |
||||
<div class="basicinfodiv" *ngIf="selectedTab == 1"> |
||||
<div> |
||||
<!-- 选择的单位名称 --> |
||||
<p class="colorspan" style="margin: 0 0 12px 6px;">宇宙无敌酒店</p> |
||||
<mat-accordion> |
||||
<mat-expansion-panel style="box-shadow: 0 0 black;"> |
||||
<mat-expansion-panel-header collapsedHeight ='40px' expandedHeight='40px' style="position: relative;padding-left:20px;background: #F5FDFE;"> |
||||
<mat-panel-title> |
||||
基本信息<span class="colorspan" style="margin-left: 20px;">30分</span> |
||||
</mat-panel-title> |
||||
</mat-expansion-panel-header> |
||||
|
||||
<div style="box-sizing: border-box;padding: 10px 20px;"> |
||||
xxxxx |
||||
</div> |
||||
</mat-expansion-panel> |
||||
</mat-accordion> |
||||
</div> |
||||
</div> |
||||
<div class="fightdeploydiv" *ngIf="selectedTab == 2"> |
||||
作战部署 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="btnbox"> |
||||
<div class="btn"> |
||||
上一步 |
||||
</div> |
||||
<div class="btn"> |
||||
完成 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,125 @@
|
||||
table,table tr th, table tr td { border-bottom: 1px solid #EEF1F5; } |
||||
table { text-align: center; border-collapse: collapse; padding:2px;} |
||||
*{ |
||||
-webkit-touch-callout: none; |
||||
-webkit-user-select: none; |
||||
-khtml-user-select: none; |
||||
-moz-user-select: none; |
||||
-ms-user-select: none; |
||||
user-select: none; |
||||
scrollbar-width: none; /* Firefox */ |
||||
} |
||||
::-webkit-scrollbar { |
||||
display: none; /* Chrome Safari */ |
||||
} |
||||
|
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #F2F5F6; |
||||
display: flex; |
||||
flex-direction: column; |
||||
box-sizing: border-box; |
||||
.contant{ |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.colorspan{ |
||||
color: #07CDCF; |
||||
} |
||||
.main{ |
||||
flex: 1; |
||||
display: flex; |
||||
div{ |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
border-radius: 13px; |
||||
} |
||||
.leftDiv{ |
||||
width: 18%; |
||||
margin: 20px; |
||||
margin-bottom: 0; |
||||
padding: 18px; |
||||
.title{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
font-size: 16px; |
||||
} |
||||
.unitList{ |
||||
margin-top: 12px; |
||||
table{ |
||||
width: 100%; |
||||
font-size: 15px; |
||||
tr{ |
||||
height: 35px; |
||||
td:nth-child(1){ |
||||
width: 60%; |
||||
} |
||||
} |
||||
tr:nth-child(1){ |
||||
background: #F5FDFE; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.rightDiv{ |
||||
margin: 20px; |
||||
margin-left: 0; |
||||
flex: 1; |
||||
margin-bottom: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.tabsbox{ |
||||
height: 46px; |
||||
border-radius: 0; |
||||
background: #F2F5F6; |
||||
div{ |
||||
float: left; |
||||
height: 46px; |
||||
line-height: 46px; |
||||
width: 100px; |
||||
text-align: center; |
||||
color: #1E2323; |
||||
border-radius: 0; |
||||
border-top: 2px solid #fff; |
||||
cursor: pointer; |
||||
} |
||||
// div:nth-child(1){ |
||||
// border-radius:13px 0 0 0 ; |
||||
// } |
||||
//选中选项卡 |
||||
.selectedTab{ |
||||
color: #07CDCF; |
||||
border-top: 2px solid #07CDCF; |
||||
} |
||||
} |
||||
.maincontantbox{ |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
padding: 18px; |
||||
} |
||||
} |
||||
} |
||||
.btnbox{ |
||||
width: 100%; |
||||
height: 70px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
.btn{ |
||||
width: 100px; |
||||
height: 33px; |
||||
background: #01CFD5; |
||||
opacity: 1; |
||||
border-radius: 8px; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
line-height: 33px; |
||||
font-size: 16px; |
||||
font-family: Source Han Sans CN; |
||||
margin: 0 15px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CreateTestScoreComponent } from './create-test-score.component'; |
||||
|
||||
describe('CreateTestScoreComponent', () => { |
||||
let component: CreateTestScoreComponent; |
||||
let fixture: ComponentFixture<CreateTestScoreComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CreateTestScoreComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CreateTestScoreComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,18 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-create-test-score', |
||||
templateUrl: './create-test-score.component.html', |
||||
styleUrls: ['./create-test-score.component.scss'] |
||||
}) |
||||
export class CreateTestScoreComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
selectedTab:number = 1 //选中的选项卡
|
||||
selectTab(index){ |
||||
this.selectedTab = index |
||||
} |
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue