138 lines
3.9 KiB
HTML
138 lines
3.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="欢迎使用唱作网音乐软件，你的音乐制作必将特别方便、愉快！" />
|
|
<meta
|
|
name="keywords"
|
|
content="唱作魔方,唱作魔方Windows,唱作魔方Android,唱作魔方专业版,唱作魔方iOS,唱作网,唱作,原创音乐,原创,伴奏"
|
|
/>
|
|
<title>唱作网</title>
|
|
|
|
<!-- 百度统计 -->
|
|
<script>
|
|
var _hmt = _hmt || [];
|
|
(function () {
|
|
var hm = document.createElement("script");
|
|
hm.src = "https://hm.baidu.com/hm.js?f62e0194ca03f4c06a9a69fa752c812f";
|
|
var s = document.getElementsByTagName("script")[0];
|
|
s.parentNode.insertBefore(hm, s);
|
|
})();
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<!--加载动画-->
|
|
<div class="mesh-loader">
|
|
<div class="set-one">
|
|
<div class="circle"></div>
|
|
<div class="circle"></div>
|
|
</div>
|
|
<div class="set-two">
|
|
<div class="circle"></div>
|
|
<div class="circle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
|
|
<!-- 检查浏览器是否支持VUE -->
|
|
<script type="text/javascript">
|
|
(function (window) {
|
|
var theUA = window.navigator.userAgent.toLowerCase();
|
|
console.log(theUA);
|
|
if (
|
|
(theUA.indexOf("trident") > -1 && theUA.indexOf("rv:11.0") > -1) ||
|
|
(theUA.indexOf("compatible") > -1 && theUA.indexOf("msie") > -1)
|
|
) {
|
|
var str = "你的浏览器版本不受支持，请及时更新";
|
|
var str2 =
|
|
"推荐使用:<a style='color:#fff;'>谷歌</a>," +
|
|
"<a style='color:#fff;'>Edge</a>," +
|
|
"<a style='color:#fff;'>火狐</a>," +
|
|
"或其他双核极速模式浏览器";
|
|
document.writeln(
|
|
"<pre style='text-align:center;color:#fff;background-color:#1890FF; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
|
|
"<h2 style='padding-top:200px;margin:0'><strong>" +
|
|
str +
|
|
"<br/></strong></h2><h2>" +
|
|
str2 +
|
|
"</h2><h2 style='margin:0'><strong>如果你的使用的是双核浏览器,请切换到极速模式访问<br/></strong></h2></pre>"
|
|
);
|
|
console.log("浏览器不合格");
|
|
document.execCommand("Stop");
|
|
} else {
|
|
console.log("浏览器合格");
|
|
}
|
|
})(window);
|
|
</script>
|
|
<style>
|
|
html,
|
|
body,
|
|
#app {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mesh-loader {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mesh-loader .circle {
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin: -12.5px;
|
|
background: #03a9f4;
|
|
border-radius: 50%;
|
|
animation: mesh 3s ease-in-out infinite -1.5s;
|
|
}
|
|
|
|
.mesh-loader > div .circle:last-child {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.mesh-loader > div {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
|
|
.mesh-loader > div:last-child {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
@keyframes mesh {
|
|
0% {
|
|
transform: rotate(0);
|
|
transform-origin: 50% -100%;
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(360deg);
|
|
transform-origin: 50% -100%;
|
|
}
|
|
|
|
50.00001% {
|
|
transform: rotate(0deg);
|
|
transform-origin: 50% 200%;
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
transform-origin: 50% 200%;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|