|
|
@@ -5,9 +5,114 @@
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
<title>管乐迷</title>
|
|
|
+ <style>
|
|
|
+ .hide {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ .el-notification {
|
|
|
+ display: flex;
|
|
|
+ width: 330px;
|
|
|
+ padding: 14px 26px 14px 13px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ transition: opacity 0.3s,transform 0.3s,left 0.3s,right 0.3s,top .4s,bottom 0.3s;
|
|
|
+ overflow-wrap: anywhere;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 16px;
|
|
|
+ z-index: 2011;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+ .el-icon {
|
|
|
+ --color: inherit;
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ line-height: 1em;
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ fill: currentColor;
|
|
|
+ color: var(--color);
|
|
|
+ font-size: inherit;
|
|
|
+ }
|
|
|
+ .el-notification .el-notification--info {
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ .el-notification .el-notification__icon {
|
|
|
+ height: 24px;
|
|
|
+ width: 24px;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .el-icon svg {
|
|
|
+ height: 1em;
|
|
|
+ width: 1em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-notification__group {
|
|
|
+ margin-left: 13px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .el-notification__title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #303133;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .el-notification__content {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 6px 0 0 0;
|
|
|
+ color: #606266;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .el-notification__content p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .el-notification .el-notification__closeBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 18px;
|
|
|
+ right: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app"></div>
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
|
+
|
|
|
+ <div id="notification_1" class="el-notification right hide" role="alert" style="top: 16px; z-index: 2011;"><i class="el-icon el-notification__icon el-notification--info"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M512 64a448 448 0 110 896.064A448 448 0 01512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 01-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 017.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"></path></svg></i><div class="el-notification__group"><h2 class="el-notification__title">提示</h2><div class="el-notification__content"><p>为了保障更好的直播体验，建议使用chrome浏览器</p></div><i id="noClose" class="el-icon el-notification__closeBtn"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg></i></div></div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ var is360ByUserActivationProperty = () => {
|
|
|
+ var navigator = window.navigator;
|
|
|
+ if(navigator.userActivation){
|
|
|
+ return false;//chrome
|
|
|
+ }else{
|
|
|
+ return true;//360极速
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var isChrome = navigator.userAgent.indexOf("Chrome") !== -1
|
|
|
+ var is360 = is360ByUserActivationProperty()
|
|
|
+
|
|
|
+ var isCloseBrowser = sessionStorage.getItem('isCloseBrowser')
|
|
|
+ console.log(isChrome, is360, isCloseBrowser)
|
|
|
+ // 如果不是360浏览器会提示
|
|
|
+ if((!isChrome || is360) && !isCloseBrowser) {
|
|
|
+ document.querySelector('#notification_1').classList.remove('hide')
|
|
|
+ sessionStorage.removeItem('isCloseBrowser')
|
|
|
+ }
|
|
|
+ document.querySelector('#noClose').onclick = function() {
|
|
|
+ document.querySelector('#notification_1').classList.add('hide')
|
|
|
+ sessionStorage.setItem('isCloseBrowser', 1)
|
|
|
+ }
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
