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
151 lines (150 loc) • 33.2 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;">
<div class="features-group" style="position:absolute;top:20px;left:20px; display:flex;gap:40px;align-items: center;z-index:2">
<label for="upload-image" class="btn-upload-image" style="width: 25px; height: 25px;display:none;cursor: pointer;">
<input type="file" multiple="true" accept=".jpg,.jpeg,.ico,.gif,.svg,.webp,.png,.bmp" 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="26" height="26" 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 t="1750226515166" class="icon btn-flash-not-support" style="display:none;cursor: not-allowed;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1476" id="mx_n_1750226515166" width="26.96" height="28"><path d="M835.191816 695.808947h-40.216176L611.078034 1023.753585h43.506591l56.302647-104.196457h114.067699l13.161658 104.196457h39.119371l-42.409785-327.944638z m-104.562058 188.650427c31.441738-57.765053 50.818623-93.228409 57.399452-106.390066s12.796056-25.957714 18.645681-39.119371c0.731203 26.323315 2.924813 52.281029 6.580829 78.604344l8.043235 67.270695h-90.669197z" p-id="1477" fill="#707070"></path><path d="M833.363808 448.296663a22.301698 22.301698 0 0 0-14.989665-5.484024h-252.996309a22.082337 22.082337 0 0 1-21.204893-28.882527L678.714331 28.586024a21.278013 21.278013 0 0 0-13.892861-27.42012 23.032901 23.032901 0 0 0-24.129706 6.215227L151.882422 543.718681c-8.043235 9.14004-7.312032 22.667299 2.19361 30.710535 4.021618 3.290414 9.14004 5.484024 14.624064 5.484024h245.684276c12.430454 0 22.301698 9.505642 22.301698 21.570494 0 2.19361 0 4.387219-1.096805 6.215227L316.768744 995.967863c-3.656016 11.33365 3.290414 23.764104 14.989666 27.054518 8.408837 2.559211 17.548877 0 23.398503-6.580829l480.034903-537.434355c8.043235-9.14004 7.312032-22.667299-2.193609-30.710534z" p-id="1478" fill="#707070"></path></svg>
<svg t="1750144490614" class="icon btn-flash-auto" style="display:none;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1672" id="mx_n_1750144490615" width="26.96" height="28"><path d="M835.191816 695.808947h-40.216176L611.078034 1023.753585h43.506591l56.302647-104.196457h114.067699l13.161658 104.196457h39.119371l-42.409785-327.944638z m-104.562058 188.650427c31.441738-57.765053 50.818623-93.228409 57.399452-106.390066s12.796056-25.957714 18.645681-39.119371c0.731203 26.323315 2.924813 52.281029 6.580829 78.604344l8.043235 67.270695h-90.669197z" p-id="1673" fill="#ffffff"></path><path d="M833.363808 448.296663a22.301698 22.301698 0 0 0-14.989665-5.484024h-252.996309a22.082337 22.082337 0 0 1-21.204893-28.882527L678.714331 28.586024a21.278013 21.278013 0 0 0-13.892861-27.42012 23.032901 23.032901 0 0 0-24.129706 6.215227L151.882422 543.718681c-8.043235 9.14004-7.312032 22.667299 2.19361 30.710535 4.021618 3.290414 9.14004 5.484024 14.624064 5.484024h245.684276c12.430454 0 22.301698 9.505642 22.301698 21.570494 0 2.19361 0 4.387219-1.096805 6.215227L316.768744 995.967863c-3.656016 11.33365 3.290414 23.764104 14.989666 27.054518 8.408837 2.559211 17.548877 0 23.398503-6.580829l480.034903-537.434355c8.043235-9.14004 7.312032-22.667299-2.193609-30.710534z" p-id="1674" fill="#ffffff"></path></svg>
<svg t="1750144510458" class="icon btn-flash-open" style="display:none;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1841" width="26.96" height="28"><path d="M836.654223 443.17824h-252.996309a22.082337 22.082337 0 0 1-21.204893-28.882526L696.994411 28.586024a21.278013 21.278013 0 0 0-13.892861-27.42012 23.032901 23.032901 0 0 0-24.129706 6.215227L170.162502 543.718681c-8.043235 9.14004-7.312032 22.667299 2.19361 30.710535 4.021618 3.290414 9.14004 5.484024 14.624064 5.484024h245.684276c12.430454 0 22.301698 9.505642 22.301698 21.570494 0 2.19361 0 4.387219-1.096805 6.215227L335.048825 995.967863c-3.656016 11.33365 3.290414 23.764104 14.989665 27.054518 8.408837 2.559211 17.548877 0 23.398503-6.580829l480.034903-537.434355c8.043235-9.14004 7.312032-22.667299-2.193609-30.710534a22.301698 22.301698 0 0 0-14.989666-5.484024z" p-id="1842" fill="#ffffff"></path></svg>
<svg t="1750144024203" class="icon btn-flash-close" style="display:none;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1146" width="26.96" height="28"><path d="M43.875153 33.637617L0 76.050265l979.878415 944.412666 43.875153-42.412647L43.875153 33.637617zM157.219298 543.320644c-8.043778 9.140657-6.946899 23.034455 2.559384 31.078233 4.021889 3.290636 9.140657 5.118768 14.259425 5.118768h247.163361c12.79692 0.731253 23.034455 11.334415 22.303203 23.765708 0 1.462505 0 2.92501-0.731253 4.387515L323.213626 995.965971c-3.656263 11.334415 3.290636 23.765708 14.990678 27.056344 8.409404 2.559384 17.915687 0 23.765708-6.581273l242.044593-269.466564-336.376172-324.310505-110.784761 120.656671zM844.596694 478.604793c8.043778-9.140657 7.312525-22.668829-2.193758-30.712607a24.314147 24.314147 0 0 0-14.990677-5.484394h-254.475887c-12.79692-0.731253-23.034455-11.334415-22.303203-23.765708 0-1.828131 0.365626-3.290636 0.731253-5.118768L687.377396 28.153223c3.656263-11.700041-3.290636-23.765708-15.356304-27.056344-8.043778-2.193758-16.818809 0-22.668829 5.85002l-252.282129 274.950958 334.913667 322.482374 112.978519-125.775438z" p-id="1147" fill="#ffffff"></path></svg>
<div class="camera-control" style="display:none;position:relative;font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;">
<svg t="1750145221648" class="icon btn-camera-switch-control" style="cursor: pointer;" viewBox="0 0 1260 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2090" width="32" height="26"><path d="M1132.266052 163.383314h-185.036525c-9.842368 0-19.291042-5.118032-25.196463-13.385621l-22.834294-32.676663C845.656286 42.519031 816.522876 0 762.193003 0h-264.562861c-53.936178 0-83.069589 42.519031-135.430988 115.746251l-24.409073 34.645137c-5.905421 7.873895-14.9604 12.991926-24.802768 13.385621H127.163399C21.65321 163.777009 0 226.374471 0 279.916955v619.281815c0 82.282199 46.455978 124.80123 130.312957 124.80123h998.803537c83.069589 0 130.706651-42.519031 130.706651-124.80123V279.52326c0-53.148789-22.4406-116.139946-127.557093-116.139946zM1181.084198 870.459054c0 51.180315-25.590158 75.195694-81.888504 75.195694H159.446367c-55.904652 1.574779-83.463283-17.716263-83.463284-68.896578V307.475586c0-35.038831 9.842368-66.928105 77.951558-66.928104h177.162629c22.4406 0 43.700115-18.897347 57.085737-37.401l23.227989-32.282968c47.243368-67.715494 65.74702-92.518262 94.093041-92.518262h249.208766c28.739715 0 46.849673 24.015379 95.66782 92.518262l22.046905 30.708189c13.385621 18.109958 34.251442 40.550557 56.692041 40.550558h174.013072c70.077662 0 77.951557 31.889273 77.951557 66.928104V870.065359z" p-id="2091" fill="#ffffff"></path><path d="M897.230296 483.850827a27.952326 27.952326 0 0 0-37.401-3.936948l-98.817378 70.471357a29.9208 29.9208 0 0 0-7.086505 40.944253c9.054979 13.385621 27.164937 16.535179 40.156863 7.4802l44.8812-31.889274c-1.574779 96.848904-66.928105 184.249135-161.021146 207.477124-70.077662 16.928874-142.123799-3.936947-193.304114-55.904652-14.9604-15.354095-39.369473-14.9604-53.936178 0-14.9604 15.354095-14.566705 40.550557 0 55.510958 53.936178 54.723568 125.194925 84.250673 198.422145 84.250672 22.046905 0 44.09381-2.755863 66.140715-7.873894 121.651672-29.9208 207.870819-138.186851 218.894272-261.413303l23.227989 25.590158c5.511726 6.299116 13.385621 9.448674 20.865821 9.448673 7.086505 0 14.17301-2.755863 19.684736-7.873894 11.810842-11.023453 12.204537-29.9208 1.574779-41.731642l-82.282199-90.943483zM411.017301 668.493656l88.581315-66.53441a30.708189 30.708189 0 0 0 6.299116-41.337946 28.149173 28.149173 0 0 0-40.156863-6.299116l-49.605536 37.400999c-2.755863-45.274894 7.873895-91.337178 30.708189-130.312956 29.9208-50.786621 79.132641-87.793925 135.430988-101.179546a202.752787 202.752787 0 0 1 202.752787 66.140715c14.17301 16.535179 38.188389 17.716263 53.936179 3.543252s17.322568-39.369473 3.149557-55.510957c-69.290273-80.70742-175.981546-115.746251-277.948481-90.549789-75.983083 18.503652-142.517493 68.502884-183.068051 137.005767a309.995233 309.995233 0 0 0-42.125336 150.391388l-28.346021-36.219915a28.42476 28.42476 0 0 0-40.550557-4.330642c-12.204537 10.236063-14.17301 28.739715-4.330642 41.337947l84.644367 107.872357c5.511726 7.086505 14.17301 11.023453 22.4406 11.023452 5.905421 0 11.810842-1.968474 16.928873-5.905421l12.598232-9.448674c3.149558-1.968474 5.905421-3.936947 8.267589-6.299115z" p-id="2092" fill="#ffffff"></path></svg>
<div class="camera-list" style="position:absolute;color:#ffffff;width: 220px;max-height:249px;overflow-y:auto;display: none;"></div>
</div>
</div>
<svg t="1756970971971" class="resume" style="position:absolute;top:20px;left:20px;z-index:2;display:none;cursor: pointer;" viewBox="0 0 1445 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1469" width="25" height="25"><path d="M1350.649885 471.551065H183.240025l340.356908-340.294583A54.160438 54.160438 0 0 0 447.061814 54.721363L14.526209 487.630919a56.092514 56.092514 0 0 0-11.779428 17.637979 54.659038 54.659038 0 0 0 0 41.321485 56.092514 56.092514 0 0 0 11.779428 17.63798l432.535605 432.660255a54.160438 54.160438 0 1 0 76.597444-76.597443L183.240025 579.684967h1167.40986a54.098113 54.098113 0 1 0 0-108.133902" p-id="1470" fill="#ffffff"></path></svg>
<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="26" height="26" 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>