You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
6.4 KiB
138 lines
6.4 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./css/about.css">
|
|
<title>关于我们</title>
|
|
</head>
|
|
<!-- 嵌入头部 -->
|
|
<script type="text/javascript" src = "./js/jquery.js"></script>
|
|
<script>
|
|
$(function(){
|
|
$("#header").load("./header.html");
|
|
});
|
|
$(function(){
|
|
$("#footer").load("./footer.html");
|
|
});
|
|
</script>
|
|
<body>
|
|
<div class="secure">
|
|
<!-- 头部占位 -->
|
|
<div id="header"></div>
|
|
|
|
<!-- 页面内容 -->
|
|
<div class="secure-content">
|
|
<div class="secure-content--desc">
|
|
<div class="secure-content--desc__title">关于我们</div>
|
|
<div class="secure-content--desc__detail">
|
|
<div>宇信网安深进政务系统及小企安全防护多年，尤其在小型外贸企业领域有着大量的客户经验，沉淀出有效、规范、完整的小企业安全防护体系，推出套餐式安全微服务，旨在让客户以最小的成本享受到为其量身打造的安全服务。</div>
|
|
</div>
|
|
</div>
|
|
<div class="secure-content--images">
|
|
<img id="image" class="secure-content--images__image" src="./images/img1.jpg">
|
|
</div>
|
|
<div class="secure-content--tab">
|
|
<div class="secure-content--tab__item" id="tab1" onclick="tabSubmit1()">
|
|
<div class="secure-content--tab__item--line" id="row1"></div>
|
|
<div class="secure-content--tab__item--title">安全微服务</div>
|
|
<div class="secure-content--tab__item--desc">每月2000-3000元即可享用专业、</div>
|
|
<div class="secure-content--tab__item--desc">按需定制的安全服务套餐</div>
|
|
</div>
|
|
<div class="secure-content--tab__item" id="tab2" onclick="tabSubmit2()">
|
|
<div class="secure-content--tab__item--line" id="row2"></div>
|
|
<div class="secure-content--tab__item--title">独立站安全</div>
|
|
<div class="secure-content--tab__item--desc">三种安全解决方案，总有一款适</div>
|
|
<div class="secure-content--tab__item--desc">合您</div>
|
|
</div>
|
|
<div class="secure-content--tab__item" id="tab3" onclick="tabSubmit3()">
|
|
<div class="secure-content--tab__item--line" id="row3"></div>
|
|
<div class="secure-content--tab__item--title">政务外网安全</div>
|
|
<div class="secure-content--tab__item--desc">政务外网服务器安全</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 底部占位 -->
|
|
<div id="footer"></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var e = 1;
|
|
function tabSubmit1() {
|
|
e=2;
|
|
document.getElementById("image").src="./images/img1.jpg";
|
|
document.getElementById("tab1").style.color="#333333";
|
|
document.getElementById("row1").style.backgroundColor= '#1A6CE6';
|
|
document.getElementById("tab2").style.color="#777677";
|
|
document.getElementById("row2").style.backgroundColor= '#777677';
|
|
document.getElementById("tab3").style.color="#777677";
|
|
document.getElementById("row3").style.backgroundColor= '#777677';
|
|
}
|
|
function tabSubmit2() {
|
|
e=3;
|
|
document.getElementById("image").src="./images/img3.jpg";
|
|
document.getElementById("tab1").style.color = "#777677";
|
|
document.getElementById("row1").style.backgroundColor = "#777677";
|
|
document.getElementById("tab2").style.color = "#333333";
|
|
document.getElementById("row2").style.backgroundColor = "#1A6CE6";
|
|
document.getElementById("tab3").style.color = "#777677";
|
|
document.getElementById("row3").style.backgroundColor = "#777677";
|
|
}
|
|
function tabSubmit3() {
|
|
e=1;
|
|
document.getElementById("image").src="./images/img4.jpg";
|
|
document.getElementById("tab1").style.color = "#777677";
|
|
document.getElementById("row1").style.backgroundColor = "#777677";
|
|
document.getElementById("tab2").style.color = "#777677";
|
|
document.getElementById("row2").style.backgroundColor = "#777677";
|
|
document.getElementById("tab3").style.color = "#333333";
|
|
document.getElementById("row3").style.backgroundColor = "#1A6CE6";
|
|
}
|
|
function tabSubmit3() {
|
|
setTimeout(() => {
|
|
if(e==1){
|
|
e+=1;
|
|
document.getElementById("image").src="./images/img1.jpg";
|
|
document.getElementById("tab1").style.color="#333333";
|
|
document.getElementById("row1").style.backgroundColor= '#1A6CE6';
|
|
document.getElementById("tab2").style.color="#777677";
|
|
document.getElementById("row2").style.backgroundColor= '#777677';
|
|
document.getElementById("tab3").style.color="#777677";
|
|
document.getElementById("row3").style.backgroundColor= '#777677';
|
|
tabSubmit3();
|
|
}else if (e==2){
|
|
e+=1;
|
|
document.getElementById("image").src="./images/img3.jpg";
|
|
document.getElementById("tab1").style.color = "#777677";
|
|
document.getElementById("row1").style.backgroundColor = "#777677";
|
|
document.getElementById("tab2").style.color = "#333333";
|
|
document.getElementById("row2").style.backgroundColor = "#1A6CE6";
|
|
document.getElementById("tab3").style.color = "#777677";
|
|
document.getElementById("row3").style.backgroundColor = "#777677";
|
|
tabSubmit3();
|
|
}else if (e==3){
|
|
e=1;
|
|
document.getElementById("image").src="./images/img4.jpg";
|
|
document.getElementById("tab1").style.color = "#777677";
|
|
document.getElementById("row1").style.backgroundColor = "#777677";
|
|
document.getElementById("tab2").style.color = "#777677";
|
|
document.getElementById("row2").style.backgroundColor = "#777677";
|
|
document.getElementById("tab3").style.color = "#333333";
|
|
document.getElementById("row3").style.backgroundColor = "#1A6CE6";
|
|
tabSubmit3();
|
|
}
|
|
}, 2000)
|
|
}
|
|
setTimeout(() => {
|
|
document.getElementById("image").src="./images/img1.jpg";
|
|
document.getElementById("tab1").style.color="#333333";
|
|
document.getElementById("row1").style.backgroundColor= '#1A6CE6';
|
|
document.getElementById("tab2").style.color="#777677";
|
|
document.getElementById("row2").style.backgroundColor= '#777677';
|
|
document.getElementById("tab3").style.color="#777677";
|
|
document.getElementById("row3").style.backgroundColor= '#777677';
|
|
tabSubmit3();
|
|
})
|
|
|
|
</script>
|
|
</html>
|
|
|