Commit 573a530b authored by liujiangnan's avatar liujiangnan

feat: 完成

parent 3fb3f0a6
...@@ -48,11 +48,11 @@ ...@@ -48,11 +48,11 @@
} }
.hot-zone-container { .hot-zone-container {
margin-top: 25px; margin: 10px 15px 10px 15px;
margin-bottom: 25px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
position: relative; /* 相对定位以放置绝对定位的删除按钮 */
} }
.toggle-button { .toggle-button {
...@@ -63,7 +63,21 @@ ...@@ -63,7 +63,21 @@
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
float: right; }
.delete-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #dc3545;
cursor: pointer;
font-size: 16px;
}
.delete-button:hover {
color: #c82333;
} }
.hot-zone-content { .hot-zone-content {
...@@ -84,3 +98,7 @@ ...@@ -84,3 +98,7 @@
height: 60px; height: 60px;
display: inline-block; display: inline-block;
} }
.time-text {
color: #0beb40;
user-select: text; /* 确保文本可以被选中 */
}
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
[audioUrl]="item.bg_audio_url" [audioUrl]="item.bg_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)"> (audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
</app-audio-recorder> </app-audio-recorder>
<div class="current-time-display">当前播放时间: [<span style="color: #0beb40;">{{ currentTime }}</span>]毫秒</div> <div class="current-time-display">当前播放时间: [<span class="time-text">{{ currentTime }}</span>]毫秒</div>
</div> </div>
<div id="waveform"></div> <div id="waveform"></div>
<div *ngIf="item.bg_audio_url"> <div *ngIf="item.bg_audio_url">
...@@ -29,6 +29,9 @@ ...@@ -29,6 +29,9 @@
<button (click)="toggleCollapse(i)" class="toggle-button"> <button (click)="toggleCollapse(i)" class="toggle-button">
第【{{i+1}}】页 &nbsp;&nbsp;&nbsp; <span style="color: #04f1dd;">{{ isCollapsed[i] ? '点击展开' : '点击折叠' }}</span> 第【{{i+1}}】页 &nbsp;&nbsp;&nbsp; <span style="color: #04f1dd;">{{ isCollapsed[i] ? '点击展开' : '点击折叠' }}</span>
</button> </button>
<button (click)="deleteHotZone(i)" class="delete-button">
X
</button>
<div *ngIf="!isCollapsed[i]" class="hot-zone-content"> <div *ngIf="!isCollapsed[i]" class="hot-zone-content">
<app-custom-hot-zone <app-custom-hot-zone
[bgItem]="hotZone.bgItem" [bgItem]="hotZone.bgItem"
......
...@@ -104,6 +104,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -104,6 +104,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.isCollapsed = this.isCollapsed.map((collapsed, i) => i === index ? false : true); this.isCollapsed = this.isCollapsed.map((collapsed, i) => i === index ? false : true);
} }
} }
deleteHotZone(index: number) {
this.hotZones.splice(index, 1);
this.isCollapsed.splice(index, 1);
}
/** /**
* 储存图片数据 * 储存图片数据
......
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