tangning
/
caseEditor
forked from bill/public-fuse


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面兼容性提示</title>
  <style>
    /* 基础重置与布局 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color: #999;
    }

    /* 容器与文本样式 */
    .container {
      text-align: center;
      padding-bottom: 100px;
    }

    .tipsImg {
      width: 240px;
      height: 240px;
      margin-bottom: 20px;
    }

    .tips {
      padding: 10px 0;
      line-height: 1.6;
    }

    /* 浏览器图标区域布局 */
    .browser-icons {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 20px;
      flex-wrap: wrap;
      /* 适配小屏幕换行 */
    }

    .browser-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.2s ease;
      width: 130px;
    }

    .browser-item:hover {
      transform: scale(1.05);
    }

    .browser-item img {
      width: 80px;
      height: 80px;
      margin-bottom: 18px;
    }

    .browser-item span {
      font-size: 14px;
    }

    /* 国产系统专属提示（可选样式） */
    .domestic-os-tip {
      color: #ff6600;
      font-weight: bold;
      margin-top: 20px;
    }

    .icon-area {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 20px;
    }

    /* 单个图标及文字的样式 */
    .browser-icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .browser-icon img {
      width: 80px;
      height: 80px;
      margin-bottom: 18px;
    }

    .browser-icon span {
      font-size: 14px;
    }

    /* 顶部提示文字样式 */
    .tips {
    }
    .downImg{
      width: 16px !important;
      height: 16px !important;
      margin-bottom: 0 !important;
      margin-right: 10px;
    }
    .browser-bottom{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 通用提示文案 -->
    <img class="tipsImg" src="./images/pic_update.png" alt="">
    <p class="tips" style="margin-top: 0;">无法打开页面，请升级或更换浏览器后重新打开</p>
    <p class="tips">建议使用以下浏览器</p>

    <!-- 浏览器图标区 -->
    <div class="browser-icons" id="Domestic">
    </div>
  </div>

  <script>
    // 识别国产操作系统逻辑（示例覆盖常见标识，可根据需要补充）
    function isDomesticOS() {
      const userAgent = navigator.userAgent.toLowerCase();
      const platform = navigator.platform.toLowerCase();
      console.log(userAgent, platform, '浏览器标识')
      // 统信 UOS、银河麒麟、深度 Deepin、中标麒麟等标识
      return /uos|kylin|deepin|neokylin/.test(userAgent)
        || /linux/.test(platform) || /国产|中国/.test(userAgent);
    }
    // 非国产浏览器
    const browsers = [
      {
        name: 'Firefox',
        icon: 'fa-firefox',
        color: 'bg-orange-500',
        src: './images/browser_Firefox.png',
        downloadUrl: './images/browser_Firefox.png'
      },
      {
        name: 'Microsoft Edge',
        icon: 'fa-edge',
        color: 'bg-blue-500',
        src: './images/browser_Edge.png',
        downloadUrl: './images/browser_Edge.png'
      },
      {
        name: 'Chrome',
        icon: 'fa-chrome',
        color: 'bg-red-500',
        src: './images/browser_Chrome.png',
        downloadUrl: './images/browser_Chrome.png'
      }
    ];
    // 国产浏览器
    const browsersList = [
      {
        name: 'Chromiun',
        icon: 'fa-firefox',
        color: 'bg-orange-500',
        src: './images/browser_Chromium.png',
        downloadUrl: './images/browser_Chromium.png'
      },
      {
        name: '奇安信可信浏览器',
        icon: 'fa-edge',
        color: 'bg-blue-500',
        src: './images/browser_Qianxin.png',
        downloadUrl: './images/browser_Qianxin.png'
      },
      {
        name: '360安全浏览器',
        icon: 'fa-chrome',
        color: 'bg-red-500',
        src: './images/browser_360.png',
        downloadUrl: './images/browser_360.png'
      },
      {
        name: '火狐',
        icon: 'fa-chrome',
        color: 'bg-red-500',
        src: './images/browser_Firefox.png',
        downloadUrl: './images/browser_Firefox.png'
      }
    ];
    // 获取容器元素
    const container = document.getElementById('Domestic');
    const isDomestic = isDomesticOS();
    let list = !isDomestic ? browsers : browsersList;
    console.log('isDomestic',isDomestic, 'list', list);
    // 动态遍历数组生成DOM元素
    list.forEach(browser => {
      // 创建浏览器卡片容器
      const browserCard = document.createElement('div');
      browserCard.className = 'browser-item';

      // 创建链接元素
      const link = document.createElement('a');
      // link.href = browser.downloadUrl;
      // link.target = '_blank';
      link.href = '#';
      link.rel = 'noopener noreferrer';
      link.className = 'flex flex-col items-center';
      link.style = 'color: #909090';

      // 创建图标容器
      const iconContainer = document.createElement('div');
      iconContainer.className = `browser-icon ${browser.color} mb-3 text-white`;

      // 创建图标元素
      const icon = document.createElement('img');
      icon.className = `fa ${browser.icon} text-2xl`;
      icon.src = browser.src;

      // 创建名称元素
      const name = document.createElement('span');
      name.className = 'text-sm text-gray-600 group-hover:text-primary transition-colors';
      name.textContent = browser.name;

      // 创建下载图标
      // const downloadIcon = document.createElement('img');
      // downloadIcon.src = './images/down.png';
      // downloadIcon.className = 'downImg';

      // const textDiv = document.createElement('div');
      // textDiv.className = `browser-bottom`;
      // textDiv.appendChild(downloadIcon);
      // textDiv.appendChild(name);
      
      // 组装元素
      iconContainer.appendChild(icon);
      iconContainer.appendChild(name);
      link.appendChild(iconContainer);
      // link.appendChild(downloadIcon);
      // link.appendChild(textDiv);
      browserCard.appendChild(link);
      container.appendChild(browserCard);
    });
    // 执行检测
    // const domestic = document.getElementById('domestic');
    // const noDomestic = document.getElementById('noDomestic');

    // if (isDomestic) {
    //   domestic.style.display = 'flex';
    //   noDomestic.style.display = 'none';
    // } else {
    //   // 非国产系统可隐藏或自定义提示
    //   domestic.style.display = 'none';
    //   noDomestic.style.display = 'flex';
    // }
  </script>
</body>

</html>