tangning
/
4dkk_mp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title><%= title %></title>
  <link rel="icon" href="/favicon.ico" />
  <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;
    }
    .tips {
      margin: 8px 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;
    }
    .browser-item:hover {
      transform: scale(1.05);
    }
    .browser-item img {
      width: 60px;
      height: 60px;
      margin-bottom: 8px;
    }
    .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: 60px;
      height: 60px;
      margin-bottom: 8px;
    }

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

    /* 顶部提示文字样式 */
    .tips {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 通用提示文案 -->
    <p class="tips">无法打开页面，请升级或更换浏览器后重新打开</p>
    <p class="tips">建议使用以下浏览器</p>
    
    <!-- 浏览器图标区 -->
    <div class="browser-icons" id="noDomestic">
      <div class="browser-item">
        <!-- 可替换为 Firefox 官方图标地址或本地资源 -->
        <span style="font-size: 60px; color: #FF7B00;">🦊</span> 
        <span>Firefox</span>
      </div>
      <div class="browser-item">
        <!-- Edge 图标 -->
        <span style="font-size: 60px; color: #0078D7;">🌊</span> 
        <span>Microsoft Edge</span>
      </div>
      <div class="browser-item">
        <!-- Chrome 图标 -->
        <span style="font-size: 60px; color: #000;">🍎</span> 
        <span>Chrome</span>
      </div>
    </div>
    <!-- 国产系统检测结果展示区 -->
    <div class="icon-area" id="domestic">
      <div class="browser-icon">
        <!-- 这里用文字简单模拟图标，实际可替换为 Firefox 浏览器图标的路径 -->
        <span style="font-size: 60px; color: #FF7B00;">🦊</span> 
        <span>火狐</span>
      </div>
      <div class="browser-icon">
        <!-- 同理，替换为 Edge 浏览器图标的路径 -->
        <span style="font-size: 60px; color: #0078D7;">🌊</span> 
        <span>奇安信可浏览器</span>
      </div>
      <div class="browser-icon">
        <!-- 替换为 Safari 浏览器图标的路径 -->
        <span style="font-size: 60px; color: #000;">🍎</span> 
        <span>360安全浏览器</span>
      </div>
      <div class="browser-icon">
        <!-- 替换为 Chrome 浏览器图标的路径 -->
        <span style="font-size: 60px; color: #4285F4;">🔴</span> 
        <span>Chromeium</span>
      </div>
    </div>
  </div>

  <script>
    // 识别国产操作系统逻辑（示例覆盖常见标识，可根据需要补充）
    function isDomesticOS() {
      const userAgent = navigator.userAgent.toLowerCase();
      const platform = navigator.platform.toLowerCase();
      // 统信 UOS、银河麒麟、深度 Deepin、中标麒麟等标识
      return /uos|kylin|deepin|neokylin/.test(userAgent) 
          || /linux/.test(platform) && /国产|中国/.test(userAgent); 
    }

    // 执行检测
    const isDomestic = isDomesticOS();
    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>