yxt_group
/
safe
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改

master
dimengzhe 1 month ago
commit
ff821cf41c
38 changed files with 13325 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      about.html
  2. 198
      css/about.css
  3. 33
      css/footer.css
  4. 115
      css/header.css
  5. 125
      css/home.css
  6. 383
      css/network.css
  7. 356
      css/secure.css
  8. 604
      css/serve.css
  9. 13
      footer.html
  10. 46
      header.html
  11. BIN
      images/bg.jpg
  12. BIN
      images/bg1.jpg
  13. BIN
      images/bg2.jpg
  14. BIN
      images/bg3.jpg
  15. BIN
      images/bg4.jpg
  16. BIN
      images/bg5.jpg
  17. BIN
      images/close.png
  18. BIN
      images/code.png
  19. BIN
      images/home-bg-mobile.jpg
  20. BIN
      images/home-bg.jpg
  21. BIN
      images/img.png
  22. BIN
      images/img1.jpg
  23. BIN
      images/img2.png
  24. BIN
      images/img3.jpg
  25. BIN
      images/img4.jpg
  26. BIN
      images/img5-mobile.png
  27. BIN
      images/img5.png
  28. BIN
      images/logo-1.png
  29. BIN
      images/logo-2.png
  30. BIN
      images/logo-2原版.png
  31. BIN
      images/phone-2.png
  32. BIN
      images/radio.png
  33. BIN
      images/serve-mobile.png
  34. 44
      index.html
  35. 10704
      js/jquery.js
  36. 147
      network.html
  37. 169
      secure.html
  38. 250
      serve.html

138
about.html
View File

@ -0,0 +1,138 @@
<!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>

198
css/about.css
View File

@ -0,0 +1,198 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
.secure {
width: 100%;
height: 100%;
min-height: 100vh;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
background: url("../images/bg5.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.secure-content {
max-width: 75%;
margin: 1.5rem auto 0;
}
.secure-content--desc {
display: flex;
align-items: start;
justify-content: space-between;
}
.secure-content--desc__title {
font-size: 2.25rem;
font-weight: 400;
color: #333333;
width: 12rem;
}
.secure-content--desc__detail {
/* width: 61rem; */
flex: 1;
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 1.875rem;
text-align: justify;
}
.secure-content--images {
width: 100%;
height: auto;
margin-top: 2rem;
margin-bottom: 2.5rem;
text-align: center;
}
.secure-content--images__image {
width: 100%;
height: 100%;
}
.secure-content--tab {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.secure-content--tab__item {
cursor: pointer;
color: #777677;
}
.secure-content--tab__item--line{
width: 271px;
height: 3px;
background: #777677;
}
.secure-content--tab__item--title {
font-size: 1.5rem;
font-weight: 400;
line-height: 3.875rem;
}
.secure-content--tab__item--desc {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.875rem;
}
#footer{
margin-top: 1rem;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配1400*1050的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* 样式 */
/* CSS 样式 */
.secure-content {
max-width: 60rem;
}
.secure-content--desc__detail {
width: 48rem!important;
}
.secure-content--desc__detail{
font-size: 1rem;
}
.secure-content--images{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.secure-content--tab__item--title{
line-height: 3.5rem;
}
.secure-content{
margin: 0 auto;
}
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.secure-content {
max-width: 50rem;
margin-top: 1rem;
}
.secure-content--desc__title {
font-size: 2rem;
}
.secure-content--desc__detail {
font-size: 1rem;
width: 40rem!important;
}
.secure-content--images {
width: 100%;
height: 20rem;
}
.secure-content--tab {
flex-wrap: nowrap;
max-width: 45rem;
margin: auto;
}
.secure-content--tab__item--line {
width: 210px;
}
.secure-content--tab__item--title {
font-size: 22px;
}
.secure-content--tab__item--desc {
font-size: 15px;
}
.secure-popup {
top: 3rem!important;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.secure-content {
margin: 0!important;
}
.secure-content--desc__title{
text-align: center;
width: 100%;
font-size: 1.5rem;
}
.network--content__left {
width: 100%!important;
}
.secure-content--images {
width: 100%;
height: 100%;
}
#image {
width: 100%;
height: 100%;
}
.secure-content--desc {
flex-wrap: wrap;
padding: 0 1rem;
padding-top: 1rem;
}
.secure-content--desc__detail{
font-size: 1rem;
margin-top: .5rem;
text-align: justify;
}
.secure-content--tab {
margin-bottom: 3rem!important;
flex-wrap: wrap;
}
.secure-content--tab__item {
margin-bottom: 2rem;
min-width: 273px;
}
.secure-content--tab__item--line {
width: 200px!important;
}
.secure-content--tab__item--title{
font-size: 1.25rem;
line-height: 3;
}
.secure-content--tab__item--desc{
font-size: 1rem;
line-height: 1.5;
}
}

33
css/footer.css
View File

@ -0,0 +1,33 @@
#footer{
/* position: fixed; */
height: 3.125rem;
line-height: 3.125rem;
/* bottom: 0;
left: 0;
right: 0; */
}
.home--local {
text-align:right;
}
.home--local__text {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
padding: 0 1rem 0 0;
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
#footer{
height: auto !important;
line-height: 1.5 !important;
padding: 1rem 0 !important;
background: rgb(237, 242, 250);
}
.home--local__text{
font-size: .75rem;
}
}

115
css/header.css
View File

@ -0,0 +1,115 @@
.home--nav {
width: 100%;
padding: 1em 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
/* position: fixed;
left: 0;
top: 0; */
}
.home--nav__logo {
width: 11.125rem;
height: 3.5625rem;
}
.home--nav__tab {
display: flex;
}
.home--nav__tab--item {
margin: 0 1rem;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
}
a {
text-decoration: none;
font-size: 1.125rem;
font-weight: 400;
color: #333333;
}
a:active, a:hover {
color: #1A6CE6;
}
a:visited {
text-decoration: underline;
}
.home--nav__phone {
display: flex;
align-items: center;
}
.home--nav__phone--icon {
width: 1.625rem;
height: 1.625rem;
}
.home--nav__phone--text {
font-size: 1.5rem;
font-weight: 400;
color: #333333;
padding-left: .8rem;
}
.active {
border-bottom: 3px solid #1A6CE6;
padding-bottom: .5rem;
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.home--nav__phone--text {
font-size: 1rem;
padding-left: 0.5rem;
}
.home--nav__phone--icon {
width: 1.25rem;
height: 1.25rem;
}
a {
font-size: 1rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.home--nav__tab--item{
margin: 0 .5rem;
}
/* .home--nav__tab{
display: none;
} */
/* .home--nav__phone--text{
display: none;
} */
.home--nav__logo{
width: 8rem;
height: auto;
}
.home--nav__tab {
padding: .5rem 0;
}
a {
text-decoration: none;
font-size: 0.875rem;
font-weight: 400;
color: #333333;
display: inline-block;
width: 2.8125rem;
text-align: center;
}
.home--local__text {
padding: 0!important;
text-align: center;
}
.home--nav__phone--text {
font-size: 1rem;
padding-left: 0.5rem;
}
.home--nav__phone--icon {
width: 1.25rem;
height: 1.25rem;
}
}

125
css/home.css
View File

@ -0,0 +1,125 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100%;
min-height: 100vh;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
background: url("../images/bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.home-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.home-content--bg {
width: 100%;
height: 64.8vh;
margin-top: 1.5rem;
background: url("../images/home-bg.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}
.home-content--box {
width: 100%;
}
.home-content--tip {
display: flex;
padding-left: 3rem;
margin-top: 2.625rem;
}
.home-content--tip__item {
padding-right: 1rem;
font-size: 2.5rem;
font-weight: 400;
color: #333333;
}
.home-content--line {
padding-left: 3rem;
margin-top: 2.5rem;
}
.home-content--line__block {
width: 8rem;
height: .4rem;
background: #1A6CE6;
}
.home-content--bg__mobile{
display: none;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配1400*1050的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* 样式 */
/* CSS 样式 */
.home-content--bg {
/* height: 22rem!important; */
margin-top: 0;
}
.home-content--tip{
margin-top: 2.2rem;
}
.home-content--line{
margin-top: 1.6rem;
}
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.home-content--bg {
height: 22rem!important;
margin-top: 0;
}
.home-content--tip__item {
font-size: 1.5rem!important;
}
.home-content--line {
margin-top: 1rem!important;
}
.home-content--tip{
margin-top: 1rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.home-content--bg {
padding: 3rem 0;
}
.home-content--tip__item {
padding-right: 1rem;
font-size: 1.2rem;
font-weight: 400;
color: #333333;
}
.home-content{
padding-bottom: 6rem;
}
#footer{
margin-top: 1rem;
}
.home-content--bg{
display: none;
}
.home-content--bg__mobile{
display: block;
width: 100%;
}
.home-content--bg__mobile img{
width: 100%;
height: auto;
}
}

383
css/network.css
View File

@ -0,0 +1,383 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.network {
width: 100%;
height: 100%;
min-height: 100vh;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
background: url("../images/bg3.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.network--content-wrap{
/* margin: 5rem auto; */
max-width: 80%;
margin: 3% auto;
}
.network--content {
display: flex;
align-items: center;
justify-content: space-around;
max-width: 90rem;
margin: 0 auto;
}
.network--content__left {
width: 54%;
}
.network--content__left--image {
width: 100%;
}
.network--content__left--image--mobile{
display: none;
}
.network--content__right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.network--content__right--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3.125rem;
}
.network--content__right--model {
margin-bottom: 2.2815rem;
}
.network--content__right--model__title {
font-size: 1.375rem;
font-weight: bold;
color: #333333;
line-height: 2.9375rem;
}
.network--content__right--model__desc {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 2.25rem;
}
.network--content__right--operate {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.network--content__right--operate__made {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.network--content__right--operate__connect {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: #FFFFFF;
border-radius: .25rem;
border: 3px solid rgba(38, 42, 47, 1);
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: rgba(38, 42, 47, 1);
margin-left: 2.4375rem;
cursor: pointer;
box-sizing: border-box;
}
.mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 1;
display: none;
}
.secure-popup {
background: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
border-radius: 4px;
padding: 4.375rem 3.75rem;
position: fixed;
/* top: 26%;
left: 36%;
z-index: 90; */
/* width: 32.5rem;
height: 34.375rem; */
z-index: 90;
width: 32.5rem;
left: 50%;
margin-left: -16.25rem;
height: 35rem;
top: 50%;
margin-top: -17.5rem;
box-sizing: border-box;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
}
.popup-content__btn {
width: 25rem;
height: 3.375rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #FFFFFF;
line-height: 3.375rem;
text-align: center;
cursor: pointer;
}
.secure-popup__close {
position: fixed;
position: absolute;
right: 1.375rem;
top: 1.375rem;
cursor: pointer;
}
.input {
width: 22.4rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.input.warning{
border-color: red;
}
.input.warning::placeholder{
color:red;
}
.inputCode {
width: 10rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.inputCode.warning{
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
}
#footer{
/* margin-top: 9rem; */
margin-top: 6%;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配1400*1050的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* CSS 样式 */
.network--content {
max-width: 70rem;
margin: 0 auto;
}
.network--content__right--title {
font-size: 2.45rem!important;
margin-bottom: 2.5rem!important;
}
.network--content__right--operate__connect,
.network--content__right--operate__made {
width: 13rem;
}
.network--content__right--model {
margin-bottom: 1.5rem!important;
}
/* .secure-popup {
top: 6rem!important;
} */
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.network--content {
margin: 3rem 6.75rem 2rem!important;
}
.network--content__right--title {
font-size: 1.7rem!important;
margin-bottom: 1rem!important;
}
.network--content__right--model__title {
font-size: 1.25rem!important;
}
.network--content__right--model__desc {
font-size: 1rem!important;
}
.network--content__right--model{
margin-bottom: 1rem!important;
}
.network--content__right--operate {
display: flex!important;
flex-wrap: nowrap!important;
margin-top: 0!important;
}
.network--content__right--operate__connect,
.network--content__right--operate__made {
width: 12rem!important;
height: 3rem!important;
line-height: 3rem!important;
font-size: 1rem!important;
}
.network--content__right--model {
margin-bottom: 1.5rem!important;
}
/* .secure-popup {
top: 3rem!important;
} */
.network--content__left {
width: 50%!important;
}
#footer{
margin-top: 4.5rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.network--content-wrap{
margin: 1rem 0;
}
.network--content {
margin: 0!important;
flex-wrap: wrap;
}
.network--content__left {
width: 100%!important;
height: auto!important;
margin: 2rem 0 3rem;
}
.network--content__left--image {
display: none;
width: 100%;
}
.network--content__left--image--mobile{
display: block;
width: 90%;
margin: 0 auto;
}
.network--content__right--title {
/* text-align: center; */
padding: 0 1rem;
font-size: 1.5rem!important;
margin-bottom: 1.2rem!important;
}
.network--content__right--model {
padding: 0 1rem;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.network--content__right--model__title{
font-size: 1.25rem;
line-height: 2.4;
}
.network--content__right--model__desc {
font-size: 1rem!important;
line-height: 1.6;
}
.network--content__right--operate {
padding: 0 1rem;
margin-bottom: 6rem;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.network--content__right--operate__made,
.network--content__right--operate__connect {
width: 10rem!important;
}
.network--content__right--operate__connect {
margin-left: 0!important;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
width: 18.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-content__btn {
width: 18.8rem!important;
height: 3rem!important;
line-height: 3rem!important;
}
/* .secure-popup{
padding: 2.5rem 1.5rem!important;
top: 15%!important;
left: 4%!important;
width: auto;
height: auto;
margin-left: 0;
margin-top: 0;
} */
.secure-popup {
width: 22rem;
height: 30rem;
FONT-WEIGHT: 200;
margin-left: -11rem;
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
}
.input {
width: 16.3rem!important;
height: 3rem!important;
line-height: 3rem!important;
font-size: 1rem;
}
.inputCode {
width: 6.3rem;
height: 3rem;
height: 3rem!important;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.codeImage {
width: 8rem;
height: 3rem;
}
.img {
width: 100%;
height: 100%;
}
#footer{
margin-top: 1rem;
}
}

356
css/secure.css
View File

@ -0,0 +1,356 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* 整个背景图 */
.secure {
width: 100%;
height: 100%;
min-height: 100vh;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
background: url("../images/bg4.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* 右侧图 */
/* .secure-box {
width: 100%;
min-height: 100vh;
background: url("../images/img2.png");
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
} */
.secure-content-wrap{
/* padding: 8rem 0; */
padding: 5% 0;
}
.secure-content {
max-width: 90%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 auto;
/* padding: 2rem 0; */
}
.secure-content__left{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 1rem;
}
.secure-content__right{
width: 50%;
padding: 0 1rem;
}
.secure--content__right--image{
width:100%;
}
.secure-content--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
line-height: 3.875rem;
}
.secure-content--model {
font-size: 1.375rem;
font-weight: 400;
color: #333333;
line-height: 3.25rem;
margin-top: 2rem;
margin-bottom: 5.0625rem;
}
.secure-content--model__item {
display: flex;
align-items: center;
}
.secure-content--model__round {
width: .4375rem;
height: .4375rem;
background: #333333;
border-radius: 50%;
margin-right: 1rem;
}
.secure-content--operate {
display: flex;
justify-content: center;
/* margin-top: 5rem; */
margin-top: 8%;
}
.secure-content--operate__made {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.secure-content--operate__connect {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: #FFFFFF;
border-radius: .25rem;
border: 3px solid rgba(38, 42, 47, 1);
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: rgba(38, 42, 47, 1);
margin-left: 2.4375rem;
cursor: pointer;
box-sizing: border-box;
}
.mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 1;
display: none;
}
.secure-popup {
background: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
border-radius: 4px;
padding: 4.375rem 3.75rem;
position: fixed;
/* top: 26%;
left: 36%; */
z-index: 90;
width: 32.5rem;
left: 50%;
margin-left: -16.25rem;
height: 35rem;
top: 50%;
margin-top: -17.5rem;
box-sizing: border-box;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
}
.popup-content__btn {
width: 25rem;
height: 3.375rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #FFFFFF;
line-height: 3.375rem;
text-align: center;
cursor: pointer;
}
.secure-popup__close {
position: fixed;
position: absolute;
right: 1.375rem;
top: 1.375rem;
cursor: pointer;
}
.input {
width: 22.4rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.input.warning{
border-color: red;
}
.input.warning::placeholder{
color:red;
}
.inputCode {
width: 10rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.inputCode.warning{
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
}
#footer{
/* margin-top: 12.5rem; */
margin-top: 3%;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配1400*1050的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* CSS 样式 */
/* .secure-popup {
top: 6rem!important;
} */
/* .secure-content-wrap{
padding: 2% 0;
} */
.secure-content--operate{
margin-top: 3%;
}
/* .secure-content{
max-width: 80%;
} */
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.secure-content--title {
font-size: 1.7rem;
line-height: 0rem;
}
.secure-content--model {
font-size: 1.125rem;
}
.secure-content {
max-width: 60rem;
margin: 0 auto;
}
.secure-content--model {
margin-top: 3rem;
margin-bottom: 2rem;
}
.secure-content--operate {
display: flex;
justify-content: center;
}
.secure-content--operate__made,
.secure-content--operate__connect {
width: 12rem!important;
}
/* .secure-popup {
top: 3rem!important;
} */
#footer {
margin-top: 0rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.secure-content-wrap{
padding: 1rem 0 4rem 0;
}
.secure-box {
background: none!important;
}
.secure-content {
flex-wrap: wrap;
width: auto!important;
/* margin-top: 2rem!important; */
margin-left: 0!important;
/* margin-bottom: 6rem!important; */
padding-top: 0;
}
.secure-content__right{
width: 90% !important;
margin: 0 auto;
}
.secure-content--title {
font-size: 1.5rem!important;
/* text-align: center; */
padding: 0 1rem;
}
.secure-content--model {
margin-top: 0.5rem!important;
}
.secure-content--model__item {
display: flex;
align-items: baseline!important;
padding: 0 1rem;
font-size: 1rem;
line-height: 1.5;
margin-top: 1rem;
}
.secure-content--operate {
padding: 0 1rem;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
width: 18.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-content__btn {
width: 18.8rem!important;
height: 3rem!important;
line-height: 3rem!important;
}
/* .secure-popup{
padding: 2.5rem 1.5rem!important;
top: 15%!important;
left: 4%!important;
width: auto;
height: auto;
margin-left: 0;
margin-top: 0;
} */
.secure-popup {
width: 22rem;
height: 30rem;
FONT-WEIGHT: 200;
margin-left: -11rem;
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
}
.input {
width: 16.3rem!important;
height: 3rem!important;
line-height: 3rem!important;
font-size: 1rem;
}
.inputCode {
width: 6.3rem;
height: 3rem;
height: 3rem!important;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.codeImage {
width: 8rem;
height: 3rem;
}
.img {
width: 100%;
height: 100%;
}
}

604
css/serve.css
View File

@ -0,0 +1,604 @@
body {
margin: 0;
padding: 0;
font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;
}
/* #header{
position: fixed;
left: 0;
top: 0;
right: 0;
background: rgb(237, 242, 250);
}
#footer{
background: rgb(237, 242, 250);
} */
.serve--secure {
background: url("../images/bg1.jpg");
background-repeat: no-repeat;
background-size: cover;
/* height: 100vh; */
}
.serve--secure__title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
text-align: center;
/* padding: 7.5rem 0 2.5rem; */
padding: 3% 0 2%;
}
.serve--secure__image__mobile{
display: none;
}
.serve--secure__image {
max-width: 80%;
height: auto;
margin: auto;
}
.serve--secure__image--image {
width: 100%;
height: 100%;
}
.serve--secure__desc {
width: 100%;
max-width: 70rem;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2rem;
/* padding-bottom: 7.625rem; */
padding-bottom: 3%;
}
.serve--secure__desc--item {
text-align: center;
}
.serve--secure__desc--item__title {
font-size: 1.5rem;
font-weight: bold;
color: #333333;
margin-bottom: 1rem;
}
.serve--secure__desc--item__detail {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
margin-bottom: .625rem;
}
.serve-box {
background: url("../images/bg2.jpg");
background-repeat: no-repeat;
background-size: cover;
/* height: 100vh; */
}
.serve-package-wrap{
/* padding: 10rem 0 10rem 0; */
padding: 5% 0;
}
.serve-package {
max-width: 75rem;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.serve-package__left {
width: 25rem;
background: #fff;
border: 3px solid #262A2F;
opacity: 0.8;
border-radius: 6px;
}
.serve-package__left--title {
padding: 1.2rem 0;
font-size: 1.75rem;
font-weight: bold;
color: #333333;
text-align: center;
border-bottom: 1px solid #DDDDDD;
}
.serve-package__left--desc {
padding-top: 3.5rem;
}
.serve-package__left--desc__item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-bottom: 1.2rem;
}
.serve-package__left--desc__item--text {
padding-left: 1rem;
width: 8.125rem;
text-align: justify;
font-size: 1.25rem;
}
.serve-package__left--desc__price {
width: 16.25rem;
height: 3.125rem;
line-height: 3.125rem;
background: rgba(38, 42, 47, .1);
border-radius: 2rem;
display: flex;
justify-content: center;
margin: 0 auto;
margin-bottom: 3.375rem;
margin-top: 2rem;
}
.serve-package__left--desc__price--text{
font-size: 1.25rem;
font-weight: 400;
color: #333333;
}
.serve-package__left--desc__price--num {
font-size: 1.75rem;
font-weight: 600;
color: #FF7700;
padding-left: .5rem;
}
.serve-package__right--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3rem;
}
.serve-package__right--pack {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.serve-package__right--pack__item {
min-width: 10rem;
margin-bottom: 3rem;
}
.serve-package__right--pack__item--line{
width: 3.375rem;
height: 0.125rem;
background: #666666;
margin-bottom: 1.5rem;
}
.serve-package__right--pack__item--text {
font-size: 1.25rem;
font-weight: bold;
color: #333333;
margin-bottom: .75rem;
}
.serve-package__right--pack__item--desc {
font-size: 1.125rem;
color: #333333;
margin-bottom: .3rem;
}
.serve-box--operate {
display: flex;
margin: 0 auto;
justify-content: center;
margin-top: 3rem;
}
.serve-box--operate__made {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
.serve-box--operate__connect {
width: 17.5rem;
height: 3.125rem;
line-height: 3.125rem;
background: #FFFFFF;
border-radius: .25rem;
border: 3px solid rgba(38, 42, 47, 1);
font-size: 1.125rem;
font-weight: 400;
text-align: center;
color: rgba(38, 42, 47, 1);
margin-left: 2.4375rem;
cursor: pointer;
box-sizing: border-box;
}
.mask{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 1;
display: none;
}
.secure-popup {
background: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51);
border-radius: 4px;
padding: 4.375rem 3.75rem;
position: fixed;
/* top: 26%;
left: 36%; */
z-index: 90;
width: 32.5rem;
left: 50%;
margin-left: -16.25rem;
height: 35rem;
top: 50%;
margin-top: -17.5rem;
box-sizing: border-box;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
}
.popup-content__btn {
width: 25rem;
height: 3.375rem;
background: rgba(38, 42, 47, .8);
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #FFFFFF;
line-height: 3.375rem;
text-align: center;
cursor: pointer;
}
.secure-popup__close {
position: fixed;
position: absolute;
right: 1.375rem;
top: 1.375rem;
cursor: pointer;
}
.input {
width: 22.4rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.input.warning{
border-color: red;
}
.input.warning::placeholder{
color:red;
}
.inputCode {
width: 10rem;
height: 3.375rem;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1.25rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.inputCode.warning{
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
}
/* 适配1360*768的电脑屏幕： */
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
@media screen and (min-width: 1360px) and (max-width: 1440px){
/* CSS 样式 */
.serve--secure__title{
font-size: 2rem;
padding: 1% 0;
}
.serve--secure__image{
max-width: 70%;
}
.serve-package-wrap{
padding: 5rem 0;
}
.serve-package__left--desc {
padding-top: 2rem;
}
.serve-package__left--desc__price{
margin-top: 1rem;
margin-bottom: 2rem;
}
.serve--secure__image {
max-width: 65rem;
}
.serve--secure__desc {
max-width: 55rem;
}
.serve-package {
max-width: 65rem;
}
.serve-package__left {
width: auto!important;
padding: 0 1.875rem;
}
.serve-package__left--desc__price {
width: 16rem;
}
.serve-package__left--desc__price--text{
font-size: 1.25rem;
}
.serve-package__left--desc__price--num {
font-size: 1.75rem;
}
.serve-package__right--pack {
max-width: 29rem;
}
/* .secure-popup {
top: 6rem!important;
} */
.serve-box--operate{
margin-top: 1rem;
}
.serve-package__right--pack__item{
margin-bottom: 2rem;
}
.serve-package__right--title{
margin-bottom: 2rem;
}
}
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.serve-package-wrap{
padding: 5rem 0;
}
.serve--secure__image {
max-width: 45rem;
max-height: 20rem;
}
.serve--secure__desc {
max-width: 40rem;
}
.serve-package {
max-width: 50rem;
}
.serve--secure__title {
font-size: 1.8rem;
}
.serve-package__left {
width: auto!important;
}
.serve--secure__desc--item__title {
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
.serve--secure__desc--item__detail {
font-size: .9rem;
margin-bottom: 0.5rem;
}
.serve-package__left--desc__price {
width: 15rem;
margin: 0 2rem 1.5rem;
}
.serve-package__left--desc__price--text{
font-size: 1.25rem;
}
.serve-package__left--desc__price--num {
font-size: 1.65rem;
}
.serve-box--operate__made,
.serve-box--operate__connect {
width: 12rem!important;
}
.serve-package__left--desc {
padding-top: 2rem;
}
.serve-package__right--pack {
max-width: 24rem;
}
.serve-package__right--title {
font-size: 2.15rem;
margin-bottom: 2rem;
}
.serve-package__right--pack__item {
margin-bottom: 1.5rem;
}
.serve-package__right--pack__item--text {
font-size: 1.25rem;
}
.serve-package__right--pack__item--desc {
font-size: 1rem;
}
/* .secure-popup {
top: 3rem!important;
} */
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
#header{
position: relative;
}
#footer{
height: auto !important;
line-height: 1.5 !important;
padding: 1rem 0 !important;
}
.serve--secure{
height: auto !important;
}
.serve-box--operate{
margin-top: 0;
padding: 0 1rem;
padding-bottom: 6rem;
}
.serve-box{
height: auto !important;
}
.serve--secure__title {
font-size: 1.5rem;
padding: 2rem 1rem 2rem;
}
.serve--secure__desc--item__title{
font-size: 1.25rem !important;
margin-bottom: 1rem !important;
}
.serve--secure__desc--item__detail{
font-size: 1rem;
}
.serve-package__left--title{
font-size: 1.25rem;
}
.serve-package__left--desc__item--text{
font-size: 1rem;
}
.serve--secure__image__mobile{
display: block;
width: 100%;
}
.serve--secure__image__mobile img{
width: 100%;
height: auto;
}
.serve--secure__desc {
flex-wrap: wrap;
justify-content: center;
padding-bottom: 3rem;
}
.serve--secure__desc--item {
padding: 0!important;
}
.serve--secure__image {
display: none;
}
.serve--secure__title{
padding-top: 3rem;
}
/* .serve--secure__image--image {
width: 100%;
} */
.serve-package {
padding: 3rem 0 0 0 !important;
flex-wrap: wrap;
justify-content: center;
}
.serve-package-wrap{
padding: 0 !important;
}
.serve-package__left,
.serve-package__left--desc__price{
width: auto!important;
margin: 1.625rem 0!important;
margin-top: 0 !important;
padding: 0 2rem;
}
.serve-package__left--desc {
padding-top: 1.5rem;
}
.serve-package__left {
padding: 0 1.5rem!important;
}
.serve-package__left--desc__price--text {
font-size: 1rem;
}
.serve-package__left--desc__price--num {
font-size: 1.25rem;
}
.serve-package__right {
margin-left: 0;
}
.serve-package__right--title {
font-size: 1.5rem;
/* text-align: center; */
margin-top: 2rem;
}
.serve-package__right--pack__item--text{
font-size: 1.25rem;
}
.serve-package__right--pack__item--desc{
font-size: 1rem;
}
.serve-package__right--pack {
justify-content: space-around!important;
}
.serve-package__right--pack__item {
min-width: 9.125rem;
}
.serve-package__right--operateserve-package__right--operate {
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
}
.serve-package__right--operate__made,
.serve-package__right--operate__connect {
width: 10rem!important;
}
.serve-package__right--operate__connect {
margin-left: 0!important;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
width: 18.8rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.popup-content__btn {
width: 18.8rem!important;
height: 3rem!important;
line-height: 3rem!important;
}
/* .secure-popup{
padding: 2.5rem 1.5rem!important;
top: 15%!important;
left: 4%!important;
width: auto;
height: auto;
margin-left: 0;
margin-top: 0;
} */
.secure-popup {
width: 22rem;
height: 30rem;
FONT-WEIGHT: 200;
margin-left: -11rem;
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
}
.input {
width: 16.3rem!important;
height: 3rem!important;
line-height: 3rem!important;
font-size: 1rem;
}
.inputCode {
width: 6.3rem;
height: 3rem;
height: 3rem!important;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1rem;
font-weight: 400;
color: #333333;
padding: 0 1.25rem;
}
.codeImage {
width: 8rem;
height: 3rem;
}
.img {
height: 100%;
width: 100%;
}
}

13
footer.html
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/footer.css">
</head>
<body>
<div class="home--local">
<div class="home--local__text">© 2008-2023 XXX 京ICP备09026472号</div>
</div>
</body>
</html>

46
header.html
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/header.css">
</head>
<script type="text/javascript" src = "./js/jquery.js"></script>
<body>
<div class="home--nav">
<img class="home--nav__logo" src="images/logo-2.png" />
<div class="home--nav__tab">
<div class="home--nav__tab--item">
<a href="./serve.html">安全微服务</a>
<div id="line2"></div>
</div>
<div class="home--nav__tab--item">
<a href="./secure.html">独立站安全</a>
<div id="line3"></div>
</div>
<div class="home--nav__tab--item">
<a href="./network.html">政务外网安全</a>
<div id="line4"></div>
</div>
<div class="home--nav__tab--item">
<a href="./about.html">关于我们</a>
<div id="line5"></div>
</div>
</div>
<div class="home--nav__phone">
<img class="home--nav__phone--icon" src="./images/phone-2.png">
<div class="home--nav__phone--text">400-8868-324</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".home--nav__tab--item >a").each(function () {
if ($($(this))[0].href == String(window.location))
$(this).parent().addClass('active');
console.log($(this).parent())
});
});
</script>
</html>

BIN
images/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/bg1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/bg2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/bg3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
images/bg4.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/bg5.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 515 B

BIN
images/code.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/home-bg-mobile.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
images/home-bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 176 KiB

BIN
images/img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
images/img1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/img2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/img3.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
images/img4.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
images/img5-mobile.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
images/img5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/logo-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
images/logo-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
images/logo-2原版.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
images/phone-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

BIN
images/radio.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 B

BIN
images/serve-mobile.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

44
index.html
View File

@ -0,0 +1,44 @@
<!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/home.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="home">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="home-content">
<div class="home-content--bg"></div>
<div class="home-content--bg__mobile"><img src="./images/home-bg-mobile.jpg"></div>
<div class="home-content--box">
<div class="home-content--tip">
<div class="home-content--tip__item">反诈</div>
<div class="home-content--tip__item">打击网络犯罪</div>
<div class="home-content--tip__item">关注网络安全</div>
</div>
<div class="home-content--line">
<div class="home-content--line__block"></div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
</html>

10704
js/jquery.js
View File

File diff suppressed because it is too large

147
network.html
View File

@ -0,0 +1,147 @@
<!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/network.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="network">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="network--content-wrap">
<div class="network--content">
<div class="network--content__left">
<img class="network--content__left--image" src="./images/img5.png">
<img class="network--content__left--image--mobile" src="./images/img5-mobile.png">
</div>
<div class="network--content__right">
<div class="network--content__right--title">政务外网服务器安全</div>
<div class="network--content__right--model">
<div class="network--content__right--model__title">安全运维模式转变</div>
<div class="network--content__right--model__desc">因安全运维团队不能入场，政务外网安全</div>
<div class="network--content__right--model__desc">运维转为线上</div>
</div>
<div class="network--content__right--model">
<div class="network--content__right--model__title">安全微服务套餐模式</div>
<div class="network--content__right--model__desc">模式转变，向政务外网服务器提供安</div>
<div class="network--content__right--model__desc">全微服务套餐</div>
</div>
</div>
</div>
<div class="network--content__right--operate">
<div class="network--content__right--operate__made">定制我的套餐</div>
<div class="network--content__right--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
<!-- 弹窗 -->
<div id="mask" class="mask"></div>
<div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 提交名字函数
function submitName() {
let name = $('#inputName').val();
let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function(){
if(!name){
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function(){
if(!telephone){
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function(){
if(!companyName){
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function(){
if(!captcha){
$(this).removeClass("warning");
}
});
if(!name){
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
}
if(!telephone){
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder","请输入您的电话");
}
if(!companyName){
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder","请输入公司名称");
}
if(!captcha){
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder","请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
} else {
alert(resp.message);
}
});
}
function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>

169
secure.html
View File

@ -0,0 +1,169 @@
<!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/secure.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 class="secure-box">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="secure-content-wrap">
<div class="secure-content">
<div class="secure-content__left">
<div class="secure-content--title">三种模式总有一款适合您</div>
<div class="secure-content--model">
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>如果您有独立站，可以直接购买安全微服务套餐</div>
</div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>您购买安全微服务套餐，我们送您独立站</div>
</div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>你可以只购买我们的独立站</div>
</div>
</div>
</div>
<div class="secure-content__right">
<img class="secure--content__right--image" src="./images/img2.png">
</div>
</div>
<div class="secure-content--operate">
<div class="secure-content--operate__made">定制我的套餐</div>
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
<!-- 弹窗 -->
<div id="mask" class="mask"></div>
<div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div>
<div id="subpopup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopupsub()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div id="subpopupmessage" class="popup-content__item"></div>
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div>
</div>
</div>
</div>
</body>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 提交名字函数
function submitName() {
let name = $('#inputName').val();
let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function(){
if(!name){
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function(){
if(!telephone){
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function(){
if(!companyName){
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function(){
if(!captcha){
$(this).removeClass("warning");
}
});
if(!name){
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
}
if(!telephone){
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder","请输入您的电话");
}
if(!companyName){
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder","请输入公司名称");
}
if(!captcha){
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder","请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
} else {
alert(resp.message);
}
});
}
function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>

250
serve.html
View File

@ -0,0 +1,250 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/serve.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="serve">
<!-- 头部和第一部分放一起是为了第一张背景图可以连头部一起 -->
<div class="serve--secure">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 第一部分内容 -->
<div class="serve--secure__title">保证小企业马奇诺防线内的最后一公里安全</div>
<div class="serve--secure__image">
<img class="serve--secure__image--image" src="./images/img.png">
</div>
<div class="serve--secure__image__mobile">
<img class="serve--secure__image--image2" src="./images/serve-mobile.png">
</div>
<div class="serve--secure__desc">
<div class="serve--secure__desc--item">
<div class="serve--secure__desc--item__title">
网站平台安全
</div>
<div class="serve--secure__desc--item__detail">
安全漏洞造成的服务宕机、网页
</div>
<div class="serve--secure__desc--item__detail">
篡改、数据丢失等问题
</div>
</div>
<div class="serve--secure__desc--item">
<div class="serve--secure__desc--item__title">
云防护下的安全
</div>
<div class="serve--secure__desc--item__detail">
购买了某平台提供的云防护后
</div>
<div class="serve--secure__desc--item__detail">
问题依然存在
</div>
</div>
<div class="serve--secure__desc--item">
<div class="serve--secure__desc--item__title">
法规安全
</div>
<div class="serve--secure__desc--item__detail">
由网络安全、数据安全问题
</div>
<div class="serve--secure__desc--item__detail">
被相关部门通报、处罚
</div>
</div>
</div>
</div>
<!-- 低部和第二部分放一起是为了第二张背景图可以连低部一起 -->
<div class="serve-box">
<!-- 第二部分内容 -->
<div class="serve-package-wrap">
<div class="serve-package">
<div class="serve-package__left">
<div class="serve-package__left--title">标准套餐</div>
<div class="serve-package__left--desc">
<div class="serve-package__left--desc__item">
<img src="./images/radio.png">
<div class="serve-package__left--desc__item--text">中 间 件 防 护</div>
</div>
<div class="serve-package__left--desc__item">
<img src="./images/radio.png">
<div class="serve-package__left--desc__item--text">操作系统防护</div>
</div>
<div class="serve-package__left--desc__item">
<img src="./images/radio.png">
<div class="serve-package__left--desc__item--text">业务逻辑防护</div>
</div>
<div class="serve-package__left--desc__item">
<img src="./images/radio.png">
<div class="serve-package__left--desc__item--text">应&nbsp;&nbsp;急&nbsp;&nbsp;处&nbsp;&nbsp;理</div>
</div>
<div class="serve-package__left--desc__price">
<div class="serve-package__left--desc__price--text">每月只需</div>
<div class="serve-package__left--desc__price--num">2000元</div>
</div>
</div>
</div>
<div class="serve-package__right">
<div class="serve-package__right--title">安全服务套餐 按需定制</div>
<div class="serve-package__right--pack">
<div class="serve-package__right--pack__item">
<div class="serve-package__right--pack__item--line"></div>
<div class="serve-package__right--pack__item--text">基础防护</div>
<div class="serve-package__right--pack__item--desc">操作系统防护</div>
<div class="serve-package__right--pack__item--desc">中间件防护</div>
<div class="serve-package__right--pack__item--desc">数据库防护</div>
<div class="serve-package__right--pack__item--desc">服务应用防护</div>
</div>
<div class="serve-package__right--pack__item">
<div class="serve-package__right--pack__item--line"></div>
<div class="serve-package__right--pack__item--text">专业防护</div>
<div class="serve-package__right--pack__item--desc">漏洞防护</div>
<div class="serve-package__right--pack__item--desc">木马防护</div>
<div class="serve-package__right--pack__item--desc">业务逻辑防护</div>
</div>
</div>
<div class="serve-package__right--pack">
<div class="serve-package__right--pack__item">
<div class="serve-package__right--pack__item--line"></div>
<div class="serve-package__right--pack__item--text">数据防护</div>
<div class="serve-package__right--pack__item--desc">数据库防护</div>
<div class="serve-package__right--pack__item--desc">数据安全防护</div>
</div>
<div class="serve-package__right--pack__item">
<div class="serve-package__right--pack__item--line"></div>
<div class="serve-package__right--pack__item--text">应急处理</div>
<div class="serve-package__right--pack__item--desc">应急处理</div>
</div>
</div>
</div>
</div>
<div class="serve-box--operate">
<div class="serve-box--operate__made">定制我的套餐</div>
<div class="serve-box--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
<!-- 弹窗 -->
<div id="mask" class="mask"></div>
<div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany" /></div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="inputCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div>
<!-- <div id="subpopup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopupsub()">
<img src="./images/close.png">
</div>
<div class="popup-content">
<div id="subpopupmessage" class="popup-content__item"></div>
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div>
</div> -->
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</div>
</body>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 提交名字函数
function submitName() {
let name = $('#inputName').val();
let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function(){
if(!name){
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function(){
if(!telephone){
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function(){
if(!companyName){
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function(){
if(!captcha){
$(this).removeClass("warning");
}
});
if(!name){
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
}
if(!telephone){
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder","请输入您的电话");
}
if(!companyName){
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder","请输入公司名称");
}
if(!captcha){
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder","请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
} else {
alert(resp.message);
}
});
}
function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>
Write Preview
Loading…
Cancel
Save