Commit f50016c1 authored by 李维's avatar 李维

dev commit

parent 9f3a2900
......@@ -5,7 +5,7 @@ import {MyErrorHandler} from './MyError';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
......@@ -16,7 +16,8 @@ import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-ti
import {BackgroundImagePipe} from './pipes/background-image.pipe';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component';
import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component';
// import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component';
import {BackgroundUploadComponent} from './common/background-upload/background-upload.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe';
......@@ -25,6 +26,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
registerLocaleData(zh);
@NgModule({
......@@ -35,12 +37,12 @@ registerLocaleData(zh);
LessonTitleConfigComponent,
AudioRecorderComponent,
UploadImageWithPreviewComponent,
BackgroundUploadComponent,
BackgroundImagePipe,
ResourcePipe,
TimePipe,
UploadVideoComponent,
CustomHotZoneComponent,
// CustomHotZoneComponent,
PlayerContentWrapperComponent
],
......@@ -50,7 +52,8 @@ registerLocaleData(zh);
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
FontAwesomeModule
FontAwesomeModule,
ReactiveFormsModule
],
providers: [
{provide: ErrorHandler, useClass: MyErrorHandler},
......
<div class="content-border">
<nz-form-item>
<div nz-col nzSpan="22"></div>
<div nz-col nzSpan="2">
<button nz-button nzType="danger" (click)="cleanAll()">清空背景</button>
</div>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >中上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >右上</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightTop')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左中</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftMiddle')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="1" >右中</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightMiddle')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1" >左下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1" >中下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="1">右下</nz-form-label>
<nz-form-control [nzSpan]="7">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightBottom')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
\ No newline at end of file
.content-border {
width: 100%;
height: 100%;
border-radius: 0.5rem;
min-width: 1200px;
border: 2px solid #ddd;
padding: 5px;
}
\ No newline at end of file
import {Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-background-upload',
templateUrl: './background-upload.component.html',
styleUrls: ['./background-upload.component.scss']
})
export class BackgroundUploadComponent {
@Input() items = {"leftTop": '', "middleTop": '', "rightTop": '', "leftMiddle": '', "rightMiddle": '', "leftBottom": '', "middleBottom": '', "rightBottom": ''};
@Output() change = new EventEmitter();
constructor( ) { }
onImageUploadSuccess(e, items, key) {
items[key] = e.url;
this.change.emit(items)
}
cleanAll() {
if(confirm("确定清空所有背景吗?")) {
this.items = {"leftTop": '', "middleTop": '', "rightTop": '', "leftMiddle": '', "rightMiddle": '', "leftBottom": '', "middleBottom": '', "rightBottom": ''}
this.change.emit(this.items)
}
}
deletePic(key) {
this.items[key] = ""
this.change.emit(this.items)
}
}
This diff is collapsed.
<div class="p-image-children-editor">
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
<h5> add background: </h5>
<div class="bg-box">
<app-upload-image-with-preview
[picUrl]="bgItem?.url"
(imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1" class="img-box"
*ngFor="let it of hotZoneArr; let i = index">
<div
style="margin: auto; padding: 5px; margin-top: 30px; width:90%; border: 2px dashed #ddd; border-radius: 10px">
<span style="margin-left: 40%;"> item-{{i + 1}}
</span>
<button style="float: right;" nz-button nzType="danger" nzSize="small" (click)="deleteBtnClick(i)">
X
</button>
<nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div>
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div style="width: 100%; margin-top: 5px;">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()"
class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
<!--Add Image-->
Add hot zone
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
.p-image-children-editor {
width: 100%;
height: 100%;
border-radius: 0.5rem;
border: 2px solid #ddd;
.preview-box {
margin: auto;
width: 95%;
height: 35vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
text-align: center;
color: #aaa;
.preview-img {
height: 100%;
width: auto;
}
}
.bg-box{
//width: 100%;
margin-bottom: 1rem;
}
.img-box {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img-box-upload{
width: 80%;
}
.add-btn {
margin-top: 1rem;
width: 200px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
}
.save-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.save-btn {
width: 160px;
height: 40px;
//margin-top: 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
h5 {
margin-top: 1rem;
}
@font-face
{
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
......@@ -11,73 +11,66 @@
.type-row{
margin: 0;padding-top: 1rem;
}
}
@font-face
{
// BerlinSansFB
@font-face {
font-family: 'BRLNSDB';
src: url("../../../assets/font/BRLNSDB.TTF") ;
src: url("../../../assets/default/font/BerlinSansFB/BRLNSDB_1.TTF") ;
}
@font-face
{
@font-face {
font-family: 'BRLNSB';
src: url("../../../assets/font/BRLNSB.TTF") ;
src: url("../../../assets/default/font/BerlinSansFB/BRLNSB_1.TTF") ;
}
@font-face
{
@font-face {
font-family: 'BRLNSR';
src: url("../../../assets/font/BRLNSR.TTF") ;
src: url("../../../assets/default/font/BerlinSansFB/BRLNSR_1.TTF") ;
}
@font-face
{
// CenturyGothic
@font-face {
font-family: 'GOTHIC';
src: url("../../../assets/font/GOTHIC.TTF") ;
src: url("../../../assets/default/font/CenturyGothic/GOTHIC_1.TTF") ;
}
@font-face
{
@font-face {
font-family: 'GOTHICB';
src: url("../../../assets/font/GOTHICB.TTF") ;
src: url("../../../assets/default/font/CenturyGothic/GOTHICB_1.TTF") ;
}
@font-face
{
@font-face {
font-family: 'GOTHICBI';
src: url("../../../assets/font/GOTHICBI.TTF") ;
src: url("../../../assets/default/font/CenturyGothic/GOTHICBI_1.TTF") ;
}
@font-face
{
@font-face {
font-family: 'GOTHICI';
src: url("../../../assets/font/GOTHICI.TTF") ;
src: url("../../../assets/default/font/CenturyGothic/GOTHICI_1.TTF") ;
}
@font-face
{
// MMTextBook
@font-face {
font-family: 'MMTextBook';
src: url("../../../assets/font/MMTextBook.otf") ;
src: url("../../../assets/default/font/MMTextBook/MMTextBook.otf") ;
}
@font-face
{
@font-face {
font-family: 'MMTextBook-Bold';
src: url("../../../assets/font/MMTextBook-Bold.otf") ;
src: url("../../../assets/default/font/MMTextBook/MMTextBook-Bold.otf") ;
}
@font-face
{
@font-face {
font-family: 'MMTextBook-BoldItalic';
src: url("../../../assets/font/MMTextBook-BoldItalic.otf") ;
src: url("../../../assets/default/font/MMTextBook/MMTextBook-BoldItalic.otf") ;
}
@font-face
{
@font-face {
font-family: 'MMTextBook-Italic';
src: url("../../../assets/font/MMTextBook-Italic.otf") ;
src: url("../../../assets/default/font/MMTextBook/MMTextBook-Italic.otf") ;
}
@mixin tool-btn {
border: 1px solid #ddd;
display: flex;
......@@ -88,6 +81,7 @@
border-radius: 6px;
color: #555;
}
.d-flex{
display: flex;
}
......@@ -95,12 +89,13 @@
.position-relative {
position: relative;
}
.flex-fill {
.flex-fill {
-webkit-box-flex: 1;
flex: 1 1 auto;
justify-content: center;
display: flex;
}
}
.i-dropdown-menu{
width: 15px;
......
@import '../../style/common_mixin.css';
@import '../../style/common_mixin';
.cmp-player-content-wrapper{
max-height: 100%;
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment