Commit 732bff8a authored by 李维's avatar 李维

Dev commit

parent 9f3a2900
...@@ -5,7 +5,7 @@ import {MyErrorHandler} from './MyError'; ...@@ -5,7 +5,7 @@ import {MyErrorHandler} from './MyError';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; 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 { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
...@@ -16,7 +16,8 @@ import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-ti ...@@ -16,7 +16,8 @@ import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-ti
import {BackgroundImagePipe} from './pipes/background-image.pipe'; import {BackgroundImagePipe} from './pipes/background-image.pipe';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; 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 {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 {UploadVideoComponent} from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe'; import {TimePipe} from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe'; import {ResourcePipe} from './pipes/resource.pipe';
...@@ -25,6 +26,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso ...@@ -25,6 +26,7 @@ import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontaweso
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
registerLocaleData(zh); registerLocaleData(zh);
@NgModule({ @NgModule({
...@@ -35,12 +37,12 @@ registerLocaleData(zh); ...@@ -35,12 +37,12 @@ registerLocaleData(zh);
LessonTitleConfigComponent, LessonTitleConfigComponent,
AudioRecorderComponent, AudioRecorderComponent,
UploadImageWithPreviewComponent, UploadImageWithPreviewComponent,
BackgroundUploadComponent,
BackgroundImagePipe, BackgroundImagePipe,
ResourcePipe, ResourcePipe,
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
CustomHotZoneComponent, // CustomHotZoneComponent,
PlayerContentWrapperComponent PlayerContentWrapperComponent
], ],
...@@ -50,7 +52,8 @@ registerLocaleData(zh); ...@@ -50,7 +52,8 @@ registerLocaleData(zh);
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FontAwesomeModule FontAwesomeModule,
ReactiveFormsModule
], ],
providers: [ providers: [
{provide: ErrorHandler, useClass: MyErrorHandler}, {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 @@ ...@@ -11,73 +11,66 @@
.type-row{ .type-row{
margin: 0;padding-top: 1rem; margin: 0;padding-top: 1rem;
} }
} }
@font-face
{ // BerlinSansFB
@font-face {
font-family: 'BRLNSDB'; 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'; 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'; 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'; 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'; 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'; 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'; 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'; 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'; 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'; 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'; font-family: 'MMTextBook-Italic';
src: url("../../../assets/font/MMTextBook-Italic.otf") ; src: url("../../../assets/default/font/MMTextBook/MMTextBook-Italic.otf") ;
} }
@mixin tool-btn { @mixin tool-btn {
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
...@@ -88,6 +81,7 @@ ...@@ -88,6 +81,7 @@
border-radius: 6px; border-radius: 6px;
color: #555; color: #555;
} }
.d-flex{ .d-flex{
display: flex; display: flex;
} }
...@@ -95,12 +89,13 @@ ...@@ -95,12 +89,13 @@
.position-relative { .position-relative {
position: relative; position: relative;
} }
.flex-fill {
-webkit-box-flex: 1; .flex-fill {
flex: 1 1 auto; -webkit-box-flex: 1;
justify-content: center; flex: 1 1 auto;
display: flex; justify-content: center;
} display: flex;
}
.i-dropdown-menu{ .i-dropdown-menu{
width: 15px; width: 15px;
......
@import '../../style/common_mixin.css'; @import '../../style/common_mixin';
.cmp-player-content-wrapper{ .cmp-player-content-wrapper{
max-height: 100%; max-height: 100%;
......
import { import {
AfterViewInit, AfterViewInit,
Component, Component,
ElementRef, ElementRef,
Input, Input,
OnChanges, OnChanges,
OnDestroy, OnDestroy,
OnInit, OnInit,
ViewChild ViewChild
} from '@angular/core'; } from '@angular/core';
@Component({ @Component({
...@@ -24,15 +24,15 @@ export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestr ...@@ -24,15 +24,15 @@ export class PlayerContentWrapperComponent implements OnInit, OnChanges, OnDestr
@Input() ratio; @Input() ratio;
_w: string; _w: string;
_h: string; _h: string;
constructor() { constructor() {
if (window.innerHeight < window.innerWidth) { if (window.innerHeight < window.innerWidth) {
this._h = '100%'; this._h = '100%';
this._w = 'auto'; this._w = 'auto';
} else { } else {
this._w = '100%'; this._w = '100%';
this._h = 'auto'; this._h = 'auto';
} }
} }
ngOnInit() { ngOnInit() {
if (!this.ratio) { if (!this.ratio) {
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content"> <div class="model-content">
<div class="card-config">
<div class="card-item">
<div class="card-item-content" style="min-width: 900px;">
<div class="title">
模板设置
</div>
<div class="section" style="padding: 1rem;">
<nz-form-item>
<nz-form-label [nzSpan]="2">题号</nz-form-label>
<nz-form-control [nzSpan]="2">
<input type="text" nz-input placeholder="" [(ngModel)]="title.NO" (blur)="saveItem()" />
</nz-form-control>
<nz-form-label [nzSpan]="2">课件标题</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="title.mainText" (blur)="saveItem()" />
</nz-form-control>
<nz-form-label [nzSpan]="2">标题发音</nz-form-label>
<nz-form-control [nzSpan]="4">
<app-audio-recorder id="index_audio_1" [audioUrl]="title.mainTextAudio_url" (audioUploaded)="onAudioUploadSuccess($event, 'mainTextAudio_url', title)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">长音频</nz-form-label>
<nz-form-control [nzSpan]="4">
<app-audio-recorder id="index_audio_1" [audioUrl]="long_audio.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', long_audio)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div class="section" style="padding: 1rem;">
<div *ngIf="dataArray.length==0" style="font-style: italic;">
请新建单词
</div>
<div ngfor *ngFor="let item of dataArray; let i = index" class="section-content" style="border-bottom: 1px dashed #ccc; padding-bottom: 5px; display: flex;">
<div style="flex:1">
<div class="form-item" style="margin-bottom: 10px;">
<p>
<span>序号</span>
<strong>{{i+1}}</strong>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px;">
<p>
<span>音频-左</span>
<app-audio-recorder [audioUrl]="item.audio_url_left"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_left',item)">
</app-audio-recorder>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>单词-左</span>
<input type="text" nz-input placeholder="" maxlength="3" [(ngModel)]="item.text_left" (blur)="saveItem()" />
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>图片-左</span>
<app-upload-image-with-preview [picUrl]="item.image_url_left"
(imageUploaded)="onImageUploadSuccess($event, 'image_url_left', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>反转后图片</span>
<app-upload-image-with-preview [picUrl]="item.image_url_back" (imageUploaded)="onImageUploadSuccess($event, 'image_url_back', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
<div style="flex:1">
<div class="form-item" style="margin-bottom: 10px;">
<p>
<span>卡片颜色</span>
<nz-select [(ngModel)]="item.bgColorType" style="width: 150px;" (ngModelChange)="saveItem()">
<nz-option nzValue="g_g" nzLabel="左绿色-右绿色"></nz-option>
<nz-option nzValue="g_p" nzLabel="左绿色-右粉色"></nz-option>
<nz-option nzValue="p_p" nzLabel="左粉色-右粉色"></nz-option>
<nz-option nzValue="p_g" nzLabel="左粉色-右绿色"></nz-option>
</nz-select>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px;">
<p>
<span>音频-右</span>
<app-audio-recorder [audioUrl]="item.audio_url_right"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_right',item)">
</app-audio-recorder>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>单词-右</span>
<input type="text" nz-input placeholder="" maxlength="3" [(ngModel)]="item.text_right" (blur)="saveItem()" />
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>图片-右</span>
<app-upload-image-with-preview [picUrl]="item.image_url_right"
(imageUploaded)="onImageUploadSuccess($event, 'image_url_right', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>反转后音频</span>
<app-audio-recorder [audioUrl]="item.audio_url_back" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_back', item)" ></app-audio-recorder>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;"></div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div class="card-item" style="padding: 0.5vw; width: 500px;">
<button nz-button [disabled]="dataArray.length>=8" nzType="primary" class="add-btn" (click)="addItem()">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建词组
</button>
</div>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
</div> </div>
</div>
</div> \ No newline at end of file
\ No newline at end of file
@import "../style/common_mixin";
.model-content {
margin: 10px;
.card-config {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{
flex:1;
margin: 1rem;
.card-item-content{
.title {
font-size: 24px;
width: 100%;
text-align: center;
}
.section{
border-top: 1px solid ;
padding: 10px 0;
.section-title{
font-size: 24px;
width: 100%;
}
.section-content{
display: flex;
margin: 5px 0 10px 0;
}
}
.pic-sound-box {
width: 50%;
display: flex;
flex-direction: column;
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
height: 20vw;
padding: 10px;
padding-top: 5vw;
}
}
}
}
}
.border {
border-radius: 20px;
border-style: dashed;
padding:20px;
width: 100%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.form-item p{
padding-left: 100px;
position: relative;
span {
position: absolute;
left: 0;
font-weight: bold;
}
}
.highLight {
background-color: #ff0;
}
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.
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