yonge
/
dy-admin-live


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
							<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <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 win = window;
      var nav = win.navigator;
      var doc = win.document;
      var ieAX = win.ActiveXObject;
      var ieMode = doc.documentMode;
      var REG_APPLE = /^Apple/;
      // var ieVer = _getIeVersion() || ieMode || 0;
      var isIe = ieAX || ieMode;
      // var chromiumType = _getChromiumType();
      /**
       * 检测 external 是否包含该字段
       * @param reg 正则
       * @param type 检测类型，0为键，1为值
       * @returns {boolean}
       * @private
       */
      function _testExternal(reg, type) {
          var external = win.external || {};

          for (var i in external) {
              if (reg.test(type ? external[i] : i)) {
                  return true;
              }
          }

          return false;
      }
      /**
       * 获取 Chromium 内核浏览器类型
       * @link http://www.adtchrome.com/js/help.js
       * @link https://ext.chrome.360.cn/webstore
       * @link https://ext.se.360.cn
       * @return {String}
       *         360ee 360极速浏览器
       *         360se 360安全浏览器
       *         sougou 搜狗浏览器
       *         liebao 猎豹浏览器
       *         chrome 谷歌浏览器
       *         ''    无法判断
       * @version 1.0
       */
      function _getChromiumType() {
        if (isIe || typeof win.scrollMaxX !== 'undefined' || REG_APPLE.test(nav.vendor || '')) {
            return '';
        }

        var _track = 'track' in document.createElement('track');
        var webstoreKeysLength = win.chrome && win.chrome.webstore ? Object.keys(win.chrome.webstore).length : 0;
        console.log(webstoreKeysLength)
        // 搜狗浏览器
        if (_testExternal(/^sogou/i, 0)) {
            return 'sogou';
        }

        // 猎豹浏览器
        if (_testExternal(/^liebao/i, 0)) {
            return 'liebao';
        }

        // chrome 由于360极速浏览器 内核也是 chrome，所以先判断360极速浏览器
        if (win.clientInformation && win.clientInformation.permissions) {
            return 'chrome';
        }

        if (_track) {
            // 360极速浏览器
            // 360安全浏览器
            return webstoreKeysLength > 1 ? '360ee' : '360se';
        }

        return '';
      }
      // 获得ie浏览器版本
      function _getIeVersion() {
          var v = 3,
              p = document.createElement('p'),
              all = p.getElementsByTagName('i');

          while (
              p.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                  all[0]);

          return v > 4 ? v : 0;
      }

      function getBrowserInfo() {
        const userAgent = navigator.userAgent.toLocaleLowerCase();
        if (userAgent.match(/chrome/) != null) {
          if (userAgent.match(/wow64/) != null) {
              return false
            } else {
              return true
            }
        }
      }
      var isChrome = getBrowserInfo()
      var isCloseBrowser = sessionStorage.getItem('isCloseBrowser')
      console.log(isChrome, isCloseBrowser)
      // 如果不是360浏览器会提示
      if((!isChrome) && !isCloseBrowser) {
        console.log(document.getElementById('notification_1').className)
        document.getElementById('notification_1').className = 'el-notification right'
        // document.getElementById('notification_1').classList.remove('hide')
        sessionStorage.removeItem('isCloseBrowser')
      }
      document.getElementById('noClose').onclick = function() {
        // document.getElementById('notification_1').classList.add('hide')
        document.getElementById('notification_1').className = 'el-notification right hide'
        sessionStorage.setItem('isCloseBrowser', 1)
      }
    </script>
  </body>
</html>