<!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>