42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import {CssType, HtmlPanel} from '@deep/engine';
|
|
|
|
/**
|
|
* 岩爆标签面板
|
|
*/
|
|
export class RockBurstLabelHtmlPanel extends HtmlPanel {
|
|
constructor(type: CssType = CssType.CSS2D) {
|
|
super(type);
|
|
this.initContent();
|
|
}
|
|
|
|
private initContent(): void {
|
|
const content = `
|
|
<div style="display:flex; flex-direction:column; align-items:center; pointer-events:none;transform: translate(0%, -50%)">
|
|
<div style="
|
|
padding:6px 12px;
|
|
border-radius:8px;
|
|
border:1px solid rgba(255,255,255,0.35);
|
|
background:linear-gradient(135deg, rgba(111,0,0,0.9) 0%, rgba(170,0,0,0.9) 100%);
|
|
color:#ffffff;
|
|
font-size:13px;
|
|
font-weight:700;
|
|
letter-spacing:1px;
|
|
box-shadow:0 4px 14px rgba(0,0,0,0.35);
|
|
white-space:nowrap;
|
|
">岩爆</div>
|
|
<div style="
|
|
width:0;
|
|
height:0;
|
|
margin-top:4px;
|
|
border-left:8px solid transparent;
|
|
border-right:8px solid transparent;
|
|
border-top:14px solid rgba(170,0,0,0.95);
|
|
filter:drop-shadow(0 2px 3px rgba(0,0,0,0.35));
|
|
"></div>
|
|
</div>
|
|
`;
|
|
|
|
this.updateContent(content);
|
|
}
|
|
}
|