hangtag/hangtag-ui/hangtag-ui-front/index.html

206 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="keywords"
content="东莞嘉晋OMS下单系统"
/>
<title>%VITE_APP_TITLE%</title>
<script src="/js/dom-to-image.js"></script>
<style>
/* 新增Edge推荐样式 */
.edge-recommend {
position: fixed;
top: 100px;
left: 20px;
align-items: center;
display: none;
gap: 8px;
padding: 8px 16px;
background-color: #f3f4f6;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
cursor: pointer;
z-index: 9999;
text-decoration: none;
color: #111827;
font-size: 14px;
transition: background-color 0.2s ease;
}
.edge-recommend:hover {
background-color: #e5e7eb;
}
.edge-icon {
width: 48px;
height: 48px;
}
.edge-recommend.show {
display: flex; /* 非Edge时显示 */
}
.edge-text {
line-height: 1;
font-size: 1.2rem;
}
.app-loading {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
background: #f0f2f5;
}
.app-loading .app-loading-wrap {
position: absolute;
top: 50%;
left: 50%;
display: flex;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
justify-content: center;
align-items: center;
flex-direction: column;
}
.app-loading .app-loading-title {
margin-bottom: 30px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.app-loading .app-loading-logo {
width: 100px;
margin: 0 auto 15px auto;
}
.app-loading .app-loading-item {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
vertical-align: middle;
border-radius: 50%;
}
.app-loading .app-loading-outter {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid #2d8cf0;
border-bottom: 0;
border-left-color: transparent;
border-radius: 50%;
animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
.app-loading .app-loading-inner {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
width: 40px;
height: 40px;
border: 4px solid #87bdff;
border-right: 0;
border-top-color: transparent;
border-radius: 50%;
animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
@-webkit-keyframes loader-outter {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-outter {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-inner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes loader-inner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<a id="showDownBrowser" href="/download/MicrosoftEdgeSetup.exe" class="edge-recommend" target="_blank">
<img src="data:image/png;base64,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" class="edge-icon" alt="Edge图标" />
<div>
<div class="edge-text">推荐使用Edge浏览器<br/>Recommend using Edge browser</div>
<div class="edge-text" style="margin-top: 6px">点击下载 Click Download</div>
</div>
</a>
<div id="app">
<div class="app-loading">
<div class="app-loading-wrap">
<div class="app-loading-title">
<!-- <img src="/logo.gif" class="app-loading-logo" alt="Logo" />-->
<!-- <div class="app-loading-title">%VITE_APP_TITLE%</div>-->
</div>
<div class="app-loading-item">
<div class="app-loading-outter"></div>
<div class="app-loading-inner"></div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts">
</script>
<script>
// 检测是否为Edge浏览器包含Chromium内核Edge和传统Edge
function isEdgeBrowser() {
const userAgent = navigator.userAgent.toLowerCase();
// 匹配Chromium内核EdgeEdge/xxx或传统Edgeedg/xxx
return /edg(e)?\/\d+/.test(userAgent);
}
if (!isEdgeBrowser()) {
setTimeout(()=>{
const elementById = document.getElementById("showDownBrowser");
console.log("222",elementById)
if(elementById){
elementById.style.display= 'flex';
}
},600)
}
</script>
</body>
</html>