113 lines
4.5 KiB
JavaScript
113 lines
4.5 KiB
JavaScript
import { attributeElm } from '../../Element/elm_html'
|
|
|
|
function html(that) {
|
|
return `
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">名称</span>
|
|
<input class="input" maxlength="40" type="text" @model="name">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">颜色</span>
|
|
<div class="color"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">旋转角度</span>
|
|
<input type="range" max="360" min="0" step="0.1" @model="angle">
|
|
<div class="input-number input-number-unit" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
|
<input class="input" type="number" title="" min="0" max="360" step="0.1" @model="angle">
|
|
<span class="unit">°</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col x-scale">
|
|
<span class="label">X 轴大小</span>
|
|
<input type="range" max="200" min="0.001" step="0.001">
|
|
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
|
<input class="input" type="number" title="" min="0.001" max="200" step="0.001">
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col y-scale">
|
|
<span class="label">Y 轴大小</span>
|
|
<input type="range" max="200" min="0.001" step="0.001">
|
|
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
|
|
<input class="input" type="number" title="" min="0.001" max="200" step="0.001">
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col" style="flex: 5;">
|
|
<span class="label">文字内容</span>
|
|
<input class="input" type="text" @model="textValue" maxlength="30">
|
|
</div>
|
|
<div class="col">
|
|
<button class="btn" @click="textPosPick">设置位置</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">文字开关</span>
|
|
<input class="btn-switch" type="checkbox" @model="textShow">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">字体颜色</span>
|
|
<div class="textColor"></div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">字体大小</span>
|
|
<div class="input-number input-number-unit-2">
|
|
<input class="input" type="number" title="" min="1" max="99" @model="textFontSize">
|
|
<span class="unit">px</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">视野缩放</span>
|
|
<input class="btn-switch" type="checkbox" @model="textScaleByDistance">
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">最近距离</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="1" max="99999999" @model="textNear">
|
|
<span class="unit">m</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<span class="label">最远距离</span>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" min="1" max="99999999" @model="textFar">
|
|
<span class="unit">m</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item attribute-info">
|
|
<div class="row">
|
|
${attributeElm(that)}
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
export { html } |