dynamsoft-barcode-reader-bundle
Version:
Dynamsoft Barcode Reader JS is a recognition SDK which enables you to embed barcode reading functionality in your web, desktop, and mobile applications. With a few lines of JavaScript code, you can develop a robust application to scan a linear barcode, QR
140 lines (139 loc) • 23.9 kB
text/xml
<template>
<div class="barcode-scanner-container" style="position: fixed; top: 0; left: 0; width: 100%;height: 100%;">
<div class="scanner-view-container" style="width: 100%;height: 100%;position: relative;">
<label for="upload-image" class="btn-upload-image" style="width: 25px; height: 25px;position: absolute;top:20px;left:20px;z-index:2;display:none;cursor: pointer;">
<input type="file" style="display: none;" id="upload-image"></input>
<svg id="upload-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 26 26">
<g id="Group_2679" data-name="Group 2679">
<path id="Path_8287" data-name="Path 8287" d="M10.348,8.3a3.087,3.087,0,1,0-3.087,3.087A3.091,3.091,0,0,0,10.348,8.3m-4.174,0A1.087,1.087,0,1,1,7.261,9.391,1.089,1.089,0,0,1,6.174,8.3" fill="#fff" />
<path id="Path_8288" data-name="Path 8288" d="M8.434,16.031a1,1,0,0,0,1.7,0l2.348-3.756.242.386a1,1,0,0,0,1.7-1.06l-.648-1.036a1.576,1.576,0,0,0-2.581,0l-1.9,3.048-.275-.439a1.575,1.575,0,0,0-2.581,0L3.282,18.206a1,1,0,0,0,.848,1.53H9.348a1,1,0,1,0,0-2H5.934l1.784-2.852Z" fill="#fff" />
<path id="Path_8289" data-name="Path 8289" d="M11.435,24,2,23.957,2.044,2l13.9.013,3.881,3.9v4.479a1,1,0,0,0,2,0V5.912a2.03,2.03,0,0,0-.6-1.445L17.36.6A2.026,2.026,0,0,0,15.915,0H2.044A2.046,2.046,0,0,0,0,2.043V23.957A2.046,2.046,0,0,0,2.044,26h9.391a1,1,0,0,0,0-2" fill="#fff" />
<path id="Path_8290" data-name="Path 8290" d="M18.739,11.479A7.26,7.26,0,1,0,26,18.739a7.269,7.269,0,0,0-7.261-7.26m0,12.521A5.26,5.26,0,1,1,24,18.739,5.267,5.267,0,0,1,18.739,24" fill="#fff" />
<path id="Path_8291" data-name="Path 8291" d="M21.87,17.739H19.74v-2.13a1,1,0,1,0-2,0v2.13H15.609a1,1,0,0,0,0,2H17.74v2.13a1,1,0,0,0,2,0v-2.13h2.13a1,1,0,0,0,0-2" fill="#fff" />
</g>
</svg>
</label>
<svg class="btn-close" style="position: absolute;top:20px;right:20px;z-index:2;display:none;cursor: pointer;" id="closed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<g id="Group_2681" data-name="Group 2681">
<path id="Path_8292" data-name="Path 8292" d="M12,0h0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0m0,1.914A10.086,10.086,0,1,1,1.914,12,10.1,10.1,0,0,1,12,1.914" fill="#fff" />
<path id="Path_8293" data-name="Path 8293" d="M7.416,16.578a.985.985,0,0,0,1.351,0L12,13.35l3.21,3.208a.958.958,0,0,0,1.665-.6.988.988,0,0,0-.3-.738L13.351,12l3.226-3.226a.959.959,0,0,0,0-1.353l0,0a.959.959,0,0,0-1.353,0L12,10.647,8.755,7.4A.957.957,0,0,0,7.42,8.774L10.646,12,7.421,15.227a.956.956,0,0,0-.005,1.351" fill="#fff" />
</g>
</svg>
<div class="no-camera-view" style="width: 100%;height: 100%;background-color: #202020;position: absolute;top: 0;left: 0;z-index: 1;display: none;flex-direction: column;align-items: center;justify-content: center;font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;">
<div class="no-camera-title" style="width: 50%;color: #AAAAAA;font-size: 16px;text-align: center;margin-bottom: 10px;">No camera detected</div>
<div class="no-camera-hint" style="width: 50%;color: #888888;font-size: 14px;text-align: center;line-height: 20px;">Please grant camera access and reload the page, or upload an image for decoding.</div>
</div>
</div>
<div class="result-view-container" style="width: 100%;height: 100%;background-color: #323234;display: none;position: relative;">
<div class="result-view-header" style="width: 100%; height: 30px;background-color: #2E2E2E;color: #AAAAAA;line-height: 30px;font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif"><span style="margin-left: 20px;">Results:</span></div>
<div class="unique-result-list" style="width: 100%;height: calc(100% - 80px);overflow-x: hidden;overflow-y:auto;position: relative;">
<svg class="no-result-svg" id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 236.65 39" style="width:60%;position:absolute; top:50%;left:50%;transform: translate(-50%, -50%);">
<defs>
<style>
.cls-1 {
fill: #555;
stroke-width: 0px;
}
</style>
</defs>
<g id="Layer_1-2">
<path class="cls-1" d="m67.61,23.73h-2.96v11.42h1.33v-4.49h1.34c1.47,0,2.6-.31,3.39-.93s1.18-1.51,1.18-2.67c0-2.22-1.43-3.33-4.28-3.33Zm2.12,5.22c-.53.38-1.38.57-2.55.57h-1.2v-4.64h1.48c1.05,0,1.82.18,2.31.55.49.37.74.93.74,1.69,0,.84-.26,1.45-.79,1.83Z" />
<path class="cls-1" d="m77.56,26.44c-1.24,0-2.21.39-2.91,1.17-.7.78-1.05,1.87-1.05,3.26,0,.9.16,1.69.48,2.36.32.67.78,1.19,1.38,1.55s1.27.54,2.04.54c1.24,0,2.21-.39,2.91-1.18s1.05-1.87,1.05-3.27-.35-2.44-1.06-3.23c-.71-.8-1.66-1.2-2.86-1.2Zm1.91,6.93c-.44.57-1.08.86-1.93.86s-1.49-.29-1.93-.86-.66-1.41-.66-2.5.22-1.93.65-2.49c.43-.56,1.07-.84,1.92-.84s1.51.28,1.95.85c.44.57.66,1.39.66,2.48s-.22,1.93-.66,2.5Z" />
<path class="cls-1" d="m91.68,32.9c-.09.39-.15.68-.17.87h-.06c-.1-.61-.3-1.36-.59-2.26l-1.53-4.91h-1.41l-1.57,4.91c-.09.28-.2.65-.33,1.12-.13.47-.22.86-.28,1.15h-.06c-.04-.39-.21-1.15-.5-2.27s-.71-2.76-1.26-4.91h-1.36l2.34,8.56h1.5l1.62-5.01c.16-.5.34-1.2.55-2.11h.06c.27,1.09.46,1.79.55,2.09l1.57,5.02h1.54l2.37-8.56h-1.34c-1,3.81-1.54,5.91-1.63,6.3Z" />
<path class="cls-1" d="m99.48,26.44c-1.15,0-2.06.41-2.74,1.22s-1.02,1.91-1.02,3.29.37,2.44,1.1,3.21c.73.77,1.73,1.16,3,1.16.58,0,1.07-.04,1.48-.13.41-.09.84-.23,1.3-.43v-1.16c-.9.39-1.81.58-2.73.58s-1.55-.26-2.04-.78c-.48-.52-.74-1.28-.76-2.29h5.9v-.82c0-1.16-.31-2.09-.94-2.79s-1.47-1.06-2.55-1.06Zm-2.38,3.62c.07-.79.31-1.41.72-1.86.41-.45.96-.67,1.64-.67s1.2.22,1.56.65c.36.43.55,1.06.55,1.88h-4.48Z" />
<path class="cls-1" d="m107.6,26.89c-.45.3-.83.73-1.15,1.29h-.06l-.15-1.59h-1.07v8.56h1.3v-4.59c0-.84.25-1.54.74-2.1s1.08-.84,1.78-.84c.27,0,.58.04.94.12l.18-1.2c-.3-.06-.64-.09-1.02-.09-.54,0-1.03.15-1.48.45Z" />
<path class="cls-1" d="m114.99,26.44c-1.15,0-2.06.41-2.74,1.22s-1.02,1.91-1.02,3.29.37,2.44,1.1,3.21c.73.77,1.73,1.16,3,1.16.58,0,1.07-.04,1.48-.13.41-.09.84-.23,1.3-.43v-1.16c-.9.39-1.81.58-2.73.58s-1.55-.26-2.04-.78c-.48-.52-.74-1.28-.76-2.29h5.9v-.82c0-1.16-.31-2.09-.94-2.79s-1.47-1.06-2.55-1.06Zm-2.38,3.62c.07-.79.31-1.41.72-1.86.41-.45.96-.67,1.64-.67s1.2.22,1.56.65c.36.43.55,1.06.55,1.88h-4.48Z" />
<path class="cls-1" d="m126.44,26.48l.03.6.05.62h-.1c-.62-.84-1.51-1.27-2.67-1.27s-1.98.39-2.61,1.17-.94,1.88-.94,3.29.31,2.5.93,3.27c.62.77,1.49,1.15,2.61,1.15,1.19,0,2.09-.43,2.69-1.3h.07l.17,1.15h1.05v-12.16h-1.3v3.48Zm0,4.69c0,1.07-.2,1.85-.6,2.33s-1.04.72-1.93.72c-.78,0-1.36-.28-1.77-.84-.4-.56-.6-1.38-.6-2.48s.2-1.91.61-2.5c.4-.59.99-.89,1.75-.89.88,0,1.53.26,1.93.78.4.52.61,1.38.61,2.6v.27Z" />
<path class="cls-1" d="m138.63,26.45c-1.19,0-2.08.43-2.69,1.28h-.06c.04-.53.06-1.12.06-1.78v-2.95h-1.3v12.16h.93l.27-1.1h.09c.31.43.7.74,1.16.95s.97.31,1.53.31c1.11,0,1.99-.39,2.61-1.17.63-.78.94-1.87.94-3.28s-.31-2.49-.93-3.26c-.62-.77-1.5-1.15-2.62-1.15Zm1.62,6.9c-.39.58-.98.87-1.78.87-.89,0-1.53-.26-1.93-.78-.4-.52-.6-1.38-.6-2.58s.2-2.06.59-2.57,1.03-.76,1.91-.76c.82,0,1.42.27,1.81.82s.59,1.38.59,2.49-.2,1.92-.59,2.5Z" />
<path class="cls-1" d="m147.61,32.53c-.22.64-.36,1.1-.43,1.36h-.06c-.1-.5-.35-1.3-.77-2.41l-1.88-4.88h-1.39l3.45,8.61-.48,1.22c-.38,1-1.02,1.5-1.91,1.5-.35,0-.67-.03-.96-.09v1.04c.38.09.78.13,1.17.13.71,0,1.31-.2,1.79-.61.49-.4.91-1.09,1.28-2.05l3.68-9.75h-1.39c-1.2,3.31-1.91,5.29-2.12,5.93Z" />
<path class="cls-1" d="m160.36,23.73h-3.5v11.42h3.16c1.92,0,3.39-.5,4.42-1.5s1.54-2.44,1.54-4.32c0-1.77-.49-3.14-1.48-4.12s-2.37-1.48-4.14-1.48Zm3.02,9.11c-.8.78-1.99,1.17-3.57,1.17h-1.62v-9.12h1.93c1.47,0,2.58.38,3.33,1.13.75.75,1.12,1.88,1.12,3.37s-.4,2.68-1.2,3.46Z" />
<path class="cls-1" d="m171.49,32.53c-.22.64-.36,1.1-.43,1.36h-.06c-.1-.5-.35-1.3-.77-2.41l-1.88-4.88h-1.39l3.45,8.61-.48,1.22c-.38,1-1.02,1.5-1.91,1.5-.35,0-.67-.03-.96-.09v1.04c.38.09.78.13,1.17.13.71,0,1.31-.2,1.79-.61.49-.4.91-1.09,1.28-2.05l3.68-9.75h-1.39c-1.2,3.31-1.91,5.29-2.12,5.93Z" />
<path class="cls-1" d="m180.44,26.44c-.59,0-1.12.12-1.6.35-.48.23-.85.56-1.12.98h-.06l-.21-1.17h-1.05v8.56h1.3v-4.49c0-1.11.21-1.91.62-2.4.42-.48,1.07-.73,1.97-.73.68,0,1.17.17,1.49.52.32.34.48.86.48,1.56v5.54h1.3v-5.59c0-1.09-.26-1.89-.78-2.39-.52-.5-1.3-.75-2.33-.75Z" />
<path class="cls-1" d="m189.43,26.45c-.51,0-1.01.07-1.51.2-.5.13-.96.31-1.39.54l.4.99c.9-.44,1.71-.66,2.42-.66.63,0,1.1.16,1.39.48s.43.82.43,1.49v.53l-1.45.05c-2.77.08-4.15.99-4.15,2.72,0,.81.24,1.43.72,1.87.48.44,1.15.66,2,.66.63,0,1.17-.09,1.59-.29.42-.19.85-.55,1.28-1.09h.06l.26,1.22h.96v-5.84c0-1-.25-1.73-.74-2.18s-1.25-.68-2.27-.68Zm1.71,5.27c0,.8-.23,1.42-.69,1.86s-1.1.66-1.9.66c-.51,0-.91-.12-1.19-.37-.28-.25-.43-.6-.43-1.07,0-.6.23-1.04.68-1.32.46-.28,1.2-.44,2.23-.48l1.3-.05v.77Z" />
<path class="cls-1" d="m204.42,26.44c-.62,0-1.17.13-1.66.39s-.85.61-1.11,1.06h-.06c-.41-.97-1.29-1.45-2.62-1.45-.55,0-1.05.12-1.5.35s-.79.56-1.04.98h-.06l-.21-1.17h-1.05v8.56h1.3v-4.49c0-1.11.19-1.91.57-2.39.38-.49.97-.73,1.79-.73.62,0,1.08.17,1.37.51.29.34.44.85.44,1.54v5.57h1.3v-4.78c0-.96.19-1.68.58-2.14.38-.46.98-.7,1.79-.7.61,0,1.07.17,1.36.51.29.34.44.85.44,1.54v5.57h1.3v-5.59c0-1.09-.24-1.89-.72-2.39-.48-.5-1.21-.75-2.18-.75Z" />
<path class="cls-1" d="m212.92,30.29c-.74-.28-1.24-.49-1.5-.63-.26-.15-.45-.3-.57-.46s-.18-.36-.18-.59c0-.34.16-.6.47-.8s.78-.29,1.39-.29c.7,0,1.48.18,2.34.53l.46-1.05c-.88-.38-1.78-.56-2.7-.56-.99,0-1.77.2-2.34.61-.57.4-.85.95-.85,1.65,0,.39.08.73.25,1.01s.41.53.75.75.9.48,1.7.78c.84.32,1.4.6,1.69.84s.43.52.43.86c0,.44-.18.77-.55.99-.37.22-.89.32-1.56.32-.44,0-.89-.06-1.36-.18-.47-.12-.91-.28-1.32-.49v1.2c.63.36,1.52.54,2.66.54,1.07,0,1.91-.22,2.5-.65s.89-1.05.89-1.84c0-.57-.18-1.04-.54-1.41-.36-.38-1.04-.75-2.06-1.12Z" />
<path class="cls-1" d="m221.1,26.44c-1.24,0-2.21.39-2.91,1.17-.7.78-1.05,1.87-1.05,3.26,0,.9.16,1.69.48,2.36.32.67.78,1.19,1.38,1.55s1.27.54,2.04.54c1.24,0,2.21-.39,2.91-1.18s1.05-1.87,1.05-3.27-.35-2.44-1.06-3.23c-.71-.8-1.66-1.2-2.86-1.2Zm1.91,6.93c-.44.57-1.08.86-1.93.86s-1.49-.29-1.93-.86-.66-1.41-.66-2.5.22-1.93.65-2.49c.43-.56,1.07-.84,1.92-.84s1.51.28,1.95.85c.44.57.66,1.39.66,2.48s-.22,1.93-.66,2.5Z" />
<path class="cls-1" d="m228.97,26.04c0-.72.12-1.24.35-1.57s.6-.49,1.09-.49c.35,0,.78.08,1.28.24l.34-1.04c-.61-.18-1.14-.27-1.59-.27-1.84,0-2.76,1.05-2.76,3.16v.48l-1.53.47v.59h1.53v7.55h1.3v-7.55h2.18v-1.01h-2.18v-.55Z" />
<path class="cls-1" d="m236.14,34.19c-.21.03-.44.05-.66.05-.43,0-.76-.14-1.01-.41-.25-.28-.37-.67-.37-1.19v-5.04h2.48v-1.01h-2.48v-1.98h-.75l-.55,1.83-1.23.54v.62h1.23v5.09c0,1.75.83,2.62,2.48,2.62.22,0,.46-.02.74-.07s.48-.1.62-.17v-.99c-.12.04-.29.07-.51.11Z" />
<path class="cls-1" d="m6.16,36.59h-3.75c-.77,0-1.41-.63-1.41-1.41v-3.75c0-.28-.22-.5-.5-.5s-.5.22-.5.5v3.75c0,1.33,1.08,2.41,2.41,2.41h3.75c.28,0,.5-.22.5-.5s-.22-.5-.5-.5Z" />
<path class="cls-1" d="m6.16.39h-3.75C1.08.39,0,1.47,0,2.8v3.75c0,.28.22.5.5.5s.5-.22.5-.5v-3.75c0-.78.63-1.41,1.41-1.41h3.75c.28,0,.5-.22.5-.5s-.22-.5-.5-.5Z" />
<path class="cls-1" d="m38.67,1.39h3.75c.77,0,1.4.63,1.4,1.41v3.75c0,.28.22.5.5.5s.5-.22.5-.5v-3.75c0-1.33-1.08-2.41-2.4-2.41h-3.75c-.28,0-.5.22-.5.5s.22.5.5.5Z" />
<path class="cls-1" d="m44.33,30.94c-.28,0-.5.22-.5.5v3.75c0,.77-.63,1.41-1.41,1.41h-3.75c-.28,0-.5.22-.5.5s.22.5.5.5h3.75c1.33,0,2.41-1.08,2.41-2.41v-3.75c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m15.74,6.39h-5.72c-.28,0-.5.22-.5.5v5.72c0,.28.22.5.5.5h5.72c.28,0,.5-.22.5-.5v-5.72c0-.28-.22-.5-.5-.5Zm-.5,5.72h-4.72v-4.72h4.72v4.72Z" />
<path class="cls-1" d="m29.08,13.1h5.72c.28,0,.5-.22.5-.5v-5.72c0-.28-.22-.5-.5-.5h-5.72c-.28,0-.5.22-.5.5v5.72c0,.28.22.5.5.5Zm.5-5.72h4.72v4.72h-4.72v-4.72Z" />
<path class="cls-1" d="m17.58,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m25.27,6.39h-5.72c-.28,0-.5.22-.5.5v4.76c0,.28.22.5.5.5s.5-.22.5-.5v-4.26h5.22c.28,0,.5-.22.5-.5s-.22-.5-.5-.5Z" />
<path class="cls-1" d="m25.27,11.12c-.28,0-.5.22-.5.5v6.67c0,.28.22.5.5.5s.5-.22.5-.5v-6.67c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m21.4,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m15.74,16.84h-5.72c-.28,0-.5.22-.5.5s.22.5.5.5h5.72c.28,0,.5-.22.5-.5s-.22-.5-.5-.5Z" />
<path class="cls-1" d="m29.08,17.84h5.72c.28,0,.5-.22.5-.5s-.22-.5-.5-.5h-5.72c-.28,0-.5.22-.5.5s.22.5.5.5Z" />
<path class="cls-1" d="m22.99,16.84h-3.73c-.28,0-.5.22-.5.5s.22.5.5.5h3.73c.28,0,.5-.22.5-.5s-.22-.5-.5-.5Z" />
<path class="cls-1" d="m10.11,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m13.92,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m28.73,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m31.61,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m25.06,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m34.82,21.72c-.28,0-.5.22-.5.5v9.41c0,.28.22.5.5.5s.5-.22.5-.5v-9.41c0-.28-.22-.5-.5-.5Z" />
<path class="cls-1" d="m69.96,6.17v-.08c.72-.13,1.27-.42,1.65-.86.38-.44.57-1,.57-1.68,0-.98-.34-1.7-1.02-2.15-.68-.45-1.77-.68-3.29-.68h-3.23v11.42h3.98c1.24,0,2.2-.29,2.89-.86.69-.57,1.04-1.37,1.04-2.39,0-1.53-.87-2.44-2.6-2.73Zm-3.98-4.29h1.95c1,0,1.73.14,2.19.43.46.28.69.75.69,1.39,0,.7-.21,1.19-.62,1.49-.41.29-1.09.44-2.02.44h-2.19V1.88Zm4.46,8.61c-.47.36-1.16.54-2.08.54h-2.38v-4.27h2.27c.97,0,1.7.17,2.18.5s.71.85.71,1.56c0,.76-.23,1.32-.7,1.68Z" />
<path class="cls-1" d="m76.9,12.31c.64,0,1.17-.09,1.59-.29.42-.19.85-.55,1.28-1.09h.06l.26,1.22h.96v-5.84c0-1-.25-1.73-.74-2.18s-1.25-.68-2.27-.68c-.51,0-1.01.07-1.51.2-.5.13-.96.31-1.39.54l.4.99c.9-.44,1.71-.66,2.42-.66.64,0,1.1.16,1.39.48s.43.82.43,1.49v.53l-1.45.05c-2.77.08-4.15.99-4.15,2.72,0,.81.24,1.43.72,1.87.48.44,1.15.66,2,.66Zm-.68-3.83c.46-.28,1.2-.44,2.23-.48l1.3-.05v.77c0,.8-.23,1.42-.69,1.86s-1.1.66-1.9.66c-.51,0-.91-.12-1.19-.37-.28-.25-.43-.6-.43-1.07,0-.6.23-1.04.68-1.32Z" />
<path class="cls-1" d="m85.02,7.56c0-.84.25-1.54.74-2.1s1.08-.84,1.78-.84c.27,0,.58.04.94.12l.18-1.2c-.3-.06-.64-.09-1.02-.09-.54,0-1.03.15-1.48.45-.45.3-.83.73-1.15,1.29h-.06l-.15-1.59h-1.07v8.56h1.3v-4.59Z" />
<path class="cls-1" d="m93.67,12.31c.87,0,1.59-.15,2.16-.45v-1.15c-.75.31-1.48.46-2.2.46-.83,0-1.46-.28-1.89-.84-.42-.56-.64-1.37-.64-2.42,0-2.22.87-3.33,2.61-3.33.26,0,.56.04.9.11.34.08.65.17.94.29l.4-1.1c-.23-.12-.56-.22-.97-.31-.41-.09-.82-.13-1.23-.13-1.28,0-2.26.39-2.95,1.17-.69.78-1.04,1.89-1.04,3.32s.34,2.48,1.02,3.24,1.64,1.14,2.88,1.14Z" />
<path class="cls-1" d="m104.2,4.63c-.71-.8-1.66-1.2-2.86-1.2s-2.21.39-2.91,1.17c-.7.78-1.05,1.87-1.05,3.26,0,.9.16,1.69.48,2.36.32.67.78,1.19,1.38,1.55s1.27.54,2.04.54c1.24,0,2.21-.39,2.91-1.18s1.05-1.87,1.05-3.27-.35-2.44-1.06-3.23Zm-.95,5.74c-.44.57-1.08.86-1.93.86s-1.49-.29-1.93-.86-.66-1.41-.66-2.5.22-1.93.65-2.49c.43-.56,1.07-.84,1.92-.84s1.51.28,1.95.85c.44.57.66,1.39.66,2.48s-.22,1.93-.66,2.5Z" />
<path class="cls-1" d="m113.29,11.01h.07l.17,1.15h1.05V0h-1.3v3.48l.03.6.05.62h-.1c-.62-.84-1.51-1.27-2.67-1.27s-1.98.39-2.61,1.17-.94,1.88-.94,3.29.31,2.5.93,3.27c.62.77,1.49,1.15,2.61,1.15,1.19,0,2.09-.43,2.69-1.3Zm-2.52.22c-.78,0-1.36-.28-1.77-.84-.4-.56-.6-1.38-.6-2.48s.2-1.91.61-2.5c.4-.59.99-.89,1.75-.89.89,0,1.53.26,1.93.78.4.52.61,1.38.61,2.6v.27c0,1.07-.2,1.85-.6,2.33s-1.04.72-1.93.72Z" />
<path class="cls-1" d="m120.96,12.31c.58,0,1.07-.04,1.48-.13.41-.09.84-.23,1.3-.43v-1.16c-.9.39-1.81.58-2.73.58s-1.55-.26-2.04-.78c-.48-.52-.74-1.28-.76-2.29h5.9v-.82c0-1.16-.31-2.09-.94-2.79s-1.47-1.06-2.55-1.06c-1.15,0-2.06.41-2.74,1.22s-1.02,1.91-1.02,3.29.37,2.44,1.1,3.21c.73.77,1.73,1.16,3,1.16Zm-2-7.12c.41-.45.96-.67,1.64-.67s1.2.22,1.56.65c.36.43.55,1.06.55,1.88h-4.48c.07-.79.31-1.41.72-1.86Z" />
<path class="cls-1" d="m137.11,9.12c0-.78-.23-1.42-.68-1.91-.45-.49-1.28-.95-2.47-1.38-.71-.25-1.24-.49-1.59-.7-.35-.21-.59-.44-.74-.7-.15-.25-.22-.58-.22-.97,0-.54.2-.96.59-1.26.4-.3.95-.45,1.65-.45.89,0,1.81.2,2.75.59l.41-1.16c-.95-.42-2-.62-3.13-.62s-1.96.26-2.62.78c-.66.52-.99,1.22-.99,2.1s.23,1.52.68,2.04c.46.52,1.21.97,2.28,1.35.76.27,1.33.51,1.7.73.37.21.64.45.8.7.16.25.24.58.24.97,0,.6-.22,1.07-.67,1.4-.45.34-1.12.5-2,.5-.54,0-1.09-.06-1.64-.17-.55-.11-1.06-.27-1.53-.47v1.28c.73.35,1.77.52,3.12.52,1.25,0,2.24-.28,2.97-.84.73-.56,1.09-1.35,1.09-2.35Z" />
<path class="cls-1" d="m144.84,10.72c-.75.31-1.48.46-2.2.46-.83,0-1.46-.28-1.89-.84-.42-.56-.64-1.37-.64-2.42,0-2.22.87-3.33,2.61-3.33.26,0,.56.04.9.11.34.08.65.17.94.29l.4-1.1c-.23-.12-.56-.22-.97-.31-.41-.09-.82-.13-1.23-.13-1.28,0-2.26.39-2.95,1.17-.69.78-1.04,1.89-1.04,3.32s.34,2.48,1.02,3.24,1.64,1.14,2.88,1.14c.87,0,1.59-.15,2.16-.45v-1.15Z" />
<path class="cls-1" d="m150.09,3.45c-.51,0-1.01.07-1.51.2-.5.13-.96.31-1.39.54l.4.99c.9-.44,1.71-.66,2.42-.66.63,0,1.1.16,1.39.48s.43.82.43,1.49v.53l-1.45.05c-2.77.08-4.15.99-4.15,2.72,0,.81.24,1.43.72,1.87.48.44,1.15.66,2,.66.63,0,1.17-.09,1.59-.29.42-.19.85-.55,1.28-1.09h.06l.26,1.22h.96v-5.84c0-1-.25-1.73-.74-2.18s-1.25-.68-2.27-.68Zm1.71,5.27c0,.8-.23,1.42-.69,1.86s-1.1.66-1.9.66c-.51,0-.91-.12-1.19-.37-.28-.25-.43-.6-.43-1.07,0-.6.23-1.04.68-1.32.46-.28,1.2-.44,2.23-.48l1.3-.05v.77Z" />
<path class="cls-1" d="m157.06,7.66c0-1.11.21-1.91.62-2.4.42-.48,1.07-.73,1.97-.73.68,0,1.17.17,1.49.52.32.34.48.86.48,1.56v5.54h1.3v-5.59c0-1.09-.26-1.89-.78-2.39-.52-.5-1.3-.75-2.33-.75-.59,0-1.12.12-1.6.35-.48.23-.85.56-1.12.98h-.06l-.21-1.17h-1.05v8.56h1.3v-4.49Z" />
<path class="cls-1" d="m169.48,4.54c.68,0,1.17.17,1.49.52.32.34.48.86.48,1.56v5.54h1.3v-5.59c0-1.09-.26-1.89-.78-2.39-.52-.5-1.3-.75-2.33-.75-.59,0-1.12.12-1.6.35-.48.23-.85.56-1.12.98h-.06l-.21-1.17h-1.05v8.56h1.3v-4.49c0-1.11.21-1.91.62-2.4.42-.48,1.07-.73,1.97-.73Z" />
<path class="cls-1" d="m180.51,12.18c.41-.09.84-.23,1.3-.43v-1.16c-.9.39-1.81.58-2.73.58s-1.55-.26-2.04-.78c-.48-.52-.74-1.28-.76-2.29h5.9v-.82c0-1.16-.31-2.09-.94-2.79s-1.47-1.06-2.55-1.06c-1.15,0-2.06.41-2.74,1.22s-1.02,1.91-1.02,3.29.37,2.44,1.1,3.21c.73.77,1.73,1.16,3,1.16.58,0,1.07-.04,1.48-.13Zm-3.48-6.99c.41-.45.96-.67,1.64-.67s1.2.22,1.56.65c.36.43.55,1.06.55,1.88h-4.48c.07-.79.31-1.41.72-1.86Z" />
<path class="cls-1" d="m185.68,7.56c0-.84.25-1.54.74-2.1s1.08-.84,1.78-.84c.27,0,.58.04.94.12l.18-1.2c-.3-.06-.64-.09-1.02-.09-.54,0-1.03.15-1.48.45-.45.3-.83.73-1.15,1.29h-.06l-.15-1.59h-1.07v8.56h1.3v-4.59Z" />
</g>
</svg>
<div class="main-list" style="width: 100%;height: 100%;"></div>
</div>
<div class="toolbar-btns" style="width: 100%;height: 50px;display: flex;justify-content: space-between; align-items: center;background-color: #000000;">
<div class="btn-clear" style="cursor: pointer;width: 30%;height: 70%;display: flex;justify-content: center;align-items: center;color: #FE8E14;font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;font-size: 18px;">Clear</div>
<div class="btn-done" style="cursor: pointer;width: 30%;height: 70%;display: flex;justify-content: center;align-items: center;color: #FE8E14;font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;font-size: 18px;">Done</div>
</div>
</div>
</div>
<div class="result-item" style="width: 100%; height: 60px; border-bottom: 1px solid #232323; padding: 7px 0px 7px 20px; font-size: 14px; display: flex; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; position: relative;box-sizing: border-box;">
<div class="decode-result" style="width: calc(100% - 80px); display: flex;justify-content: space-around;flex-direction: column;">
<div class="format-string" style="color: rgb(144, 148, 149); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"></div>
<div class="text-string" style="color: rgb(255, 255, 255); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"></div>
</div>
<div class="decode-count" style="width: 80px;position: relative;">
<div class="result-count" style="position: absolute; top: 50%; right: 45px; transform: translateY(-50%);color: #6AC4BB;">x1</div>
<div class="delete-icon" style="position: absolute; top: 50%;right:15px;transform: translateY(-50%);cursor: pointer">
<svg id="delete" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" style="vertical-align: middle;">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_2735" data-name="Rectangle 2735" width="16" height="16" fill="#aaa" />
</clipPath>
</defs>
<g id="Group_523" data-name="Group 523" clip-path="url(#clip-path)">
<path id="Path_1447" data-name="Path 1447" d="M15.667,2.667H11.333V1a1,1,0,0,0-1-1H5.667a1,1,0,0,0-1,1V2.667H.333a.333.333,0,0,0,0,.667H1.7L2.876,14.507A1.663,1.663,0,0,0,4.533,16h6.933a1.663,1.663,0,0,0,1.657-1.493L14.3,3.333h1.367a.333.333,0,0,0,0-.667M5.333,1A.333.333,0,0,1,5.667.667h4.667A.333.333,0,0,1,10.667,1V2.667H5.333Zm7.127,13.438a1,1,0,0,1-.994.9H4.533a1,1,0,0,1-.995-.9L2.37,3.333H13.63Z" fill="#aaa" />
<path id="Path_1448" data-name="Path 1448" d="M11.833,8.5a.333.333,0,0,0-.333.333v7a.333.333,0,1,0,.667,0v-7a.333.333,0,0,0-.333-.333" transform="translate(-3.833 -2.833)" fill="#aaa" />
<path id="Path_1449" data-name="Path 1449" d="M15.833,8.817l-.333,7a.333.333,0,0,0,.317.349h.016a.334.334,0,0,0,.333-.317l.333-7a.333.333,0,1,0-.666-.032" transform="translate(-5.166 -2.833)" fill="#aaa" />
<path id="Path_1450" data-name="Path 1450" d="M7.317,8.5A.334.334,0,0,0,7,8.849l.333,7a.333.333,0,0,0,.333.318h.017A.332.332,0,0,0,8,15.817l-.333-7A.333.333,0,0,0,7.317,8.5" transform="translate(-2.333 -2.833)" fill="#aaa" />
</g>
</svg>
</div>
</div>
</div>
<div class="loading-page" style="width: 100%;height: 100%;background-color: #202020;position: absolute;left: 0;top: 0;z-index: 10;color: gray;display: flex;justify-content: center;align-items: center;">
<div class="loading-spinner" style="width:15px;height:15px;border: 3px solid #ccc;border-top-color: #FE8E14;border-radius: 50%;animation: spin 1s linear infinite;margin-right: 10px;"></div>
<span style="font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;">Loading...</span>
</div>
<style>
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</template>