hongshan
/
voiceMate-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>请升级您的浏览器</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta name="renderer" content="webkit">
    <base target="_blank" />
    <style type="text/css">
      html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
      a{text-decoration:none;color:#0072c6;}a:hover{text-decoration:none;color:#004d8c;}
      body{margin:0 auto;padding:0px;font-size:14px;line-height:24px;color:#454545;font-family: 'PingFang SC','Microsoft YaHei UI','Microsoft YaHei',DengXian,SimSun,'Segoe UI',Tahoma,Helvetica,sans-serif;overflow-y:scroll; background: #f1f5f4;}
      h1{font-size:40px;line-height:80px;font-weight:100;margin-bottom:10px;}
      h2{font-size:20px;line-height:25px;font-weight:100;margin:10px 0;}
      em{color:red}
      a {color: #333}
      a:hover {
        color: #333;
      }
      hr{margin:20px 0;border:0;border-top:1px solid #dadada}
      span{display:block;font-size:12px;line-height:12px;}
      .clean{clear:both;}
      .browser .browser-firefox{background-position:0 -34px}
      .browser .browser-ie{background-position:0 -68px;margin-left:0px}
      .browser .browser-360{background-position:0 -170px;margin-left: -27px}
      
      .brower{
        width: 100vw;
        height: 100vh;
        padding:10px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .img-card {
        width: 374px;
        height: 374px;
        margin-right: 40px;
      }
      .img-card .img {
        width: 100%;
        height: 100%;
      }
      .top {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px dashed rgba(134, 144, 156, 0.60);
      }
      .top p:nth-child(1) {
        color: #FF5836;
        font-size: 24px;
        font-weight: bold;
        line-height: 40px;
      }
      .top p:nth-child(2) {
        color: #1D2129;
        font-size: 24px;
        font-weight: bold;
        line-height: 40px;
      }
      .top p:nth-child(3) {
        color: #656F88;
        font-size: 18px;
        line-height: 26px;
      }
      .bottom .title{
        color: #1D2129;
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
      }
      .bottom .sub-title{
        color: #333;
        font-size: 14px;
        line-height: 22px;
      }
      .list {
        display: flex;
        align-items: center;
      }
      .list li a{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        width: 156px;
        height: 156px;
        margin-right: 20px;
        border-radius: 16px;
        background: #FFF;
      }
      .list li span {
        padding-top: 12px;
      }
  </style>
</head>
<body>
  <div class="brower">
    <div class="img-card">
      <img src="./img/img-rocker.png" alt="" class="img">
    </div>
    <div class="text-card">
      <div class="top">
        <p class="">非常抱歉!</p>
        <p>需要更新您的浏览器才能继续使用AI语音客服系统</p>
        <p>您当前的浏览器不支持AI语音客服，建议您更换其他浏览器，更换后就可以继续使用AI语音客服了</p>
      </div>
      <div class="bottom">
        <div style="padding-bottom: 30px">
          <p class="title">访问AI语音客服</p>
          <p class="sub-title">请下载或使用一下任意浏览器的最新版本:</p>
        </div>
        <ul class="list">
          <li>
            <a href="http://se.360.cn/" target="_blank">
              <img src="./img/icon-360.svg" alt="">
              <span>360安全浏览器</span>
            </a>
          </li>
          <li>
            <a href="https://www.google.cn/chrome/browser/desktop/index.html?hl=zh-CN&standalone=1" target="_blank">
              <img src="./img/icon-chrome.svg" alt="">
              <span>谷歌浏览器</span>
            </a>
          </li>
          <li>
            <a href="https://www.mozilla.org/zh-CN/firefox/new/" target="_blank">
              <img src="./img/icon-firefox.svg" alt="">
              <span>火狐浏览器</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>