other_project/safe
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

111

Browse Source
This commit is contained in:
myTest383
2025-04-29 14:12:09 +08:00
parent a63a5dbff2
commit afc88d3426
12 changed files with 2574 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
css/header.css
View File

@@ -1,115 +1,134 @@
.home--nav {
width: 100%;
padding: 1em 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
/* position: fixed;
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;
width: 11.125rem;
height: 3.5625rem;
}
.home--nav__tab {
display: flex;
display: flex;
}
.home--nav__tab--item {
margin: 0 1rem;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
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;
text-decoration: none;
font-size: 1.125rem;
font-weight: 400;
color: #333333;
}
a:active, a:hover {
color: #1A6CE6;
a:active,
a:hover {
color: #1A6CE6;
}
a:visited {
text-decoration: underline;
text-decoration: underline;
}
.home--nav__phone {
display: flex;
align-items: center;
display: flex;
align-items: right;
}
.home--nav__phone--icon {
width: 1.625rem;
height: 1.625rem;
width: 1.625rem;
height: 1.625rem;
}
.home--nav__phone--text {
font-size: 1.5rem;
font-weight: 400;
color: #333333;
padding-left: .8rem;
font-size: 1.0rem;
font-weight: 400;
color: #666;
padding-left: .8rem;
}
.active {
border-bottom: 3px solid #1A6CE6;
padding-bottom: .5rem;
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;
}
/* 在屏幕宽度小于等于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{
/* 移动端样式 */
.home--nav__tab--item {
margin: 0 .5rem;
}
/* .home--nav__tab{
display: none;
} */
/* .home--nav__phone--text{
/* .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;
}
}
.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;
}
}

458
css/login - 副本.css Normal file
View File

@@ -0,0 +1,458 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.login {
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/login_bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.login--content-wrap {
/* margin: 5rem auto; */
max-width: 80%;
margin: 3% auto;
display: flex;
}
.login--content {
display: flex;
align-items: center;
max-width: 90rem;
margin: 0 auto;
}
.login--content__left {
width: 54%;
}
.login--content__left--image {
width: 100%;
}
.login--content__left--image--mobile {
display: none;
}
.login--content__right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.login--content__right--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3.125rem;
}
.login--content__right--model {
margin-bottom: 2.2815rem;
}
.login--content__right--model__title {
font-size: 1.375rem;
font-weight: bold;
color: #333333;
line-height: 2.9375rem;
}
.login--content__right--model__desc {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 2.25rem;
}
.login--content__right--operate {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.login--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;
}
.login--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__item3 {
display: flex;
}
.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 样式 */
.login--content {
max-width: 70rem;
margin: 0 auto;
}
.login--content__right--title {
font-size: 2.45rem !important;
margin-bottom: 2.5rem !important;
}
.login--content__right--operate__connect,
.login--content__right--operate__made {
width: 13rem;
}
.login--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时应用以下样式 */
.login--content {
margin: 3rem 6.75rem 2rem !important;
}
.login--content__right--title {
font-size: 1.7rem !important;
margin-bottom: 1rem !important;
}
.login--content__right--model__title {
font-size: 1.25rem !important;
}
.login--content__right--model__desc {
font-size: 1rem !important;
}
.login--content__right--model {
margin-bottom: 1rem !important;
}
.login--content__right--operate {
display: flex !important;
flex-wrap: nowrap !important;
margin-top: 0 !important;
}
.login--content__right--operate__connect,
.login--content__right--operate__made {
width: 12rem !important;
height: 3rem !important;
line-height: 3rem !important;
font-size: 1rem !important;
}
.login--content__right--model {
margin-bottom: 1.5rem !important;
}
/* .secure-popup {
top: 3rem!important;
} */
.login--content__left {
width: 50% !important;
}
#footer {
margin-top: 4.5rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.login--content-wrap {
margin: 1rem 0;
display: flex;
flex-direction: row;
align-items: center;
}
.login--content {
margin: 0 !important;
flex-wrap: wrap;
}
.login--content__left {
width: 100% !important;
height: auto !important;
margin: 2rem 0 3rem;
}
.login--content__left--image {
display: none;
width: 100%;
}
.login--content__left--image--mobile {
display: block;
width: 90%;
margin: 0 auto;
}
.login--content__right--title {
/* text-align: center; */
padding: 0 1rem;
font-size: 1.5rem !important;
margin-bottom: 1.2rem !important;
}
.login--content__right--model {
padding: 0 1rem;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.login--content__right--model__title {
font-size: 1.25rem;
line-height: 2.4;
}
.login--content__right--model__desc {
font-size: 1rem !important;
line-height: 1.6;
}
.login--content__right--operate {
padding: 0 1rem;
margin-bottom: 6rem;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.login--content__right--operate__made,
.login--content__right--operate__connect {
width: 10rem !important;
}
.login--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__item3 {
width: 18.8rem;
}
.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;
}
}

458
css/login.css Normal file
View File

@@ -0,0 +1,458 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.login {
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;
}
.login--content-wrap {
/* margin: 5rem auto; */
max-width: 80%;
margin: 3% auto;
display: flex;
}
.login--content {
display: flex;
align-items: center;
max-width: 90rem;
margin: 0 auto;
}
.login--content__left {
width: 54%;
}
.login--content__left--image {
width: 100%;
}
.login--content__left--image--mobile {
display: none;
}
.login--content__right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.login--content__right--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3.125rem;
}
.login--content__right--model {
margin-bottom: 2.2815rem;
}
.login--content__right--model__title {
font-size: 1.375rem;
font-weight: bold;
color: #333333;
line-height: 2.9375rem;
}
.login--content__right--model__desc {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 2.25rem;
}
.login--content__right--operate {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.login--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;
}
.login--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__item3 {
display: flex;
}
.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 样式 */
.login--content {
max-width: 70rem;
margin: 0 auto;
}
.login--content__right--title {
font-size: 2.45rem !important;
margin-bottom: 2.5rem !important;
}
.login--content__right--operate__connect,
.login--content__right--operate__made {
width: 13rem;
}
.login--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时应用以下样式 */
.login--content {
margin: 3rem 6.75rem 2rem !important;
}
.login--content__right--title {
font-size: 1.7rem !important;
margin-bottom: 1rem !important;
}
.login--content__right--model__title {
font-size: 1.25rem !important;
}
.login--content__right--model__desc {
font-size: 1rem !important;
}
.login--content__right--model {
margin-bottom: 1rem !important;
}
.login--content__right--operate {
display: flex !important;
flex-wrap: nowrap !important;
margin-top: 0 !important;
}
.login--content__right--operate__connect,
.login--content__right--operate__made {
width: 12rem !important;
height: 3rem !important;
line-height: 3rem !important;
font-size: 1rem !important;
}
.login--content__right--model {
margin-bottom: 1.5rem !important;
}
/* .secure-popup {
top: 3rem!important;
} */
.login--content__left {
width: 50% !important;
}
#footer {
margin-top: 4.5rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.login--content-wrap {
margin: 1rem 0;
display: flex;
flex-direction: row;
align-items: center;
}
.login--content {
margin: 0 !important;
flex-wrap: wrap;
}
.login--content__left {
width: 100% !important;
height: auto !important;
margin: 2rem 0 3rem;
}
.login--content__left--image {
display: none;
width: 100%;
}
.login--content__left--image--mobile {
display: block;
width: 90%;
margin: 0 auto;
}
.login--content__right--title {
/* text-align: center; */
padding: 0 1rem;
font-size: 1.5rem !important;
margin-bottom: 1.2rem !important;
}
.login--content__right--model {
padding: 0 1rem;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.login--content__right--model__title {
font-size: 1.25rem;
line-height: 2.4;
}
.login--content__right--model__desc {
font-size: 1rem !important;
line-height: 1.6;
}
.login--content__right--operate {
padding: 0 1rem;
margin-bottom: 6rem;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
.login--content__right--operate__made,
.login--content__right--operate__connect {
width: 10rem !important;
}
.login--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__item3 {
width: 18.8rem;
}
.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;
}
}

675
css/network.css
View File

@@ -1,338 +1,395 @@
/* 公共样式 */
body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
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;
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-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;
display: flex;
align-items: center;
justify-content: space-around;
max-width: 90rem;
margin: 0 auto;
}
.network--content__left {
width: 54%;
width: 54%;
}
.network--content__left--image {
width: 100%;
width: 100%;
}
.network--content__left--image--mobile{
display: none;
.network--content__left--image--mobile {
display: none;
}
.network--content__right {
display: flex;
flex-direction: column;
justify-content: space-between;
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;
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3.125rem;
}
.network--content__right--model {
margin-bottom: 2.2815rem;
margin-bottom: 2.2815rem;
}
.network--content__right--model__title {
font-size: 1.375rem;
font-weight: bold;
color: #333333;
line-height: 2.9375rem;
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;
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;
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;
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;
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;
.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%;
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;
/* 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;
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;
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
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;
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;
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;
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 {
border-color: red;
}
.input.warning::placeholder{
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;
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 {
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
.inputCode.warning::placeholder {
color: red;
}
#footer{
/* margin-top: 9rem; */
margin-top: 6%;
#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 {
@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 {
/* 在屏幕宽度小于等于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;
}
.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{
/* 移动端样式 */
.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;
@@ -341,43 +398,49 @@ body {
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;
}
}
.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;
}
}

92
header.html
View File

@@ -1,46 +1,52 @@
<!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&#45;&#45;nav__phone&#45;&#45;icon" src="./images/phone-2.png">
<div class="home&#45;&#45;nav__phone&#45;&#45;text">400-0000-000</div>-->
</div>
</div>
<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 class="home--nav__tab--item">
<a href="./login.html">登录</a>
<div id="line5"></div>
</div> -->
</div>
<div class="home--nav__phone">
<!-- <div class="home&#45;&#45;nav__phone&#45;&#45;text" onclick="toLogin()">登录</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>
<a href="login.html" class="home&#45;&#45;nav__phone&#45;&#45;text">登录</a>
</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/login_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/login_content_left.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
images/network_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 KiB

303
login - 副本.html Normal file
View File

@@ -0,0 +1,303 @@
<!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/login.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="login">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="login--content-wrap" style="background-color: #fff; margin-top: 5%;">
<img src="images/login_content_left.jpg" style="margin-right: 20px; flex: 1; " />
<div style="display: flex;flex-direction: column; margin: 20px 10px;width: 100%; flex: 0.6;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div style="width: 6px; height:40px;background-color: #238BF0;"></div>
<div style="color: #238BF0;font-size: 28px;margin-left: 15px;">账号登录</div>
</div>
<div class="popup-content__item" style="margin-top: 40px; margin-left: 20px;">
<input class="input" type="text" placeholder="手机号" id="loginPhone" />
</div>
<div class="popup-content__item" style="margin-left: 20px;">
<input class="input" type="password" placeholder="登录密码" id="loginPsw" />
</div>
<div class="popup-content__item popup-content__item3" style="margin-left: 20px;">
<input class="inputCode" type="text" placeholder="验证码" id="loginCode" />
<div class="codeImage" style="background-color: #238BF0;margin-left: 30px;"><img id="codeImg1"
onclick="changeCodeImg1()" class="img" style="height: 56px;"></div>
</div>
<div style="display: flex;flex-direction: column; align-items: center;justify-content: center;width: 100%;
margin-top: 20px;">
<div class="popup-content__btn" style="background-color: #238BF0; width: 32rem; "
onclick="login()">
登录
</div>
<div style="display: flex;flex-direction: row; justify-content: space-between; width: 30.8rem !important;
margin-top: 5px;">
<div style="color: #238BF0;text-decoration: underline; font-size: 18px;"
onclick="openPopup()">注册账号>>
</div>
<div style="color: #238BF0;font-size: 18px;" onclick="forgetPsw()">忘记密码?</div>
</div>
</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="registerName" />
</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
id="registerPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
id="registerCompany" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
id="registerPsw" />
</div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
<div class="codeImage"><img id="codeImg2" onclick="changeCodeImg2()" class="img"
style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">注册</div>
</div>
</div>
<!-- 注册弹窗
<div id="mask1" class="mask"></div>
<div id="popup1" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup1()">
<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="registerName" />
</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
id="registerPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
id="registerCompany" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
id="registerPsw" />
</div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
style="height: 56px;background-color: #f0f;"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">注册</div>
</div>
</div> -->
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImagetype=math&timestamp=' + Date
.now());
</script>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImagetype=math&timestamp=' + Date
.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 忘记密码
function forgetPsw() {
// document.getElementById("popup1").style.display = "block";
// document.getElementById("mask1").style.display = "block";
// $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
alert('功能正在完善,请联系官方客服:123456789');
}
function closePopup1() {
document.getElementById("popup1").style.display = "none";
document.getElementById("mask1").style.display = "none";
}
// 登录
function login() {
let telephone = $('#loginPhone').val();
let password = $('#loginPsw').val();
let captcha = $('#registerCode').val();
$("#loginPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#loginPsw").blur(function() {
if (!password) {
$(this).removeClass("warning");
}
});
$("#loginCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
if (!telephone) {
document.getElementById("loginPhone").classList.add("warning");
document.getElementById("loginPhone").setAttribute("placeholder", "请输入您的手机号");
}
if (!password) {
document.getElementById("loginPsw").classList.add("warning");
document.getElementById("loginPsw").setAttribute("placeholder", "请输入密码");
}
if (!captcha) {
document.getElementById("loginCode").classList.add("warning");
document.getElementById("loginCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {
'telephone': telephone,
'password': password,
'captcha': captcha
}, function(resp) {
if (!!resp && !!resp.result) {
alert('正在登录...');
console.log("登录>>>", resp.result);
// window.location.href = 'login.html';
} else {
alert(resp.message);
console.log("登录>>>", resp.message);
}
});
}
// 注册函数
function submitName() {
let name = $('#registerName').val();
let telephone = $('#registerPhone').val();
let companyName = $('#registerCompany').val();
let password = $('#registerPsw').val();
let captcha = $('#registerCode').val();
$("#registerName").blur(function() {
if (!name) {
$(this).removeClass("warning");
}
});
$("#registerPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#registerPsw").blur(function() {
if (!password) {
$(this).removeClass("warning");
}
});
$("#registerCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
if (!name) {
document.getElementById("registerName").classList.add("warning");
document.getElementById("registerName").setAttribute("placeholder", "请输入您的姓名");
}
if (!telephone) {
document.getElementById("registerPhone").classList.add("warning");
document.getElementById("registerPhone").setAttribute("placeholder", "请输入您的电话");
}
if (!companyName) {
document.getElementById("registerCompany").classList.add("warning");
document.getElementById("registerCompany").setAttribute("placeholder", "请输入公司名称");
}
if (!companyName) {
document.getElementById("registerPsw").classList.add("warning");
document.getElementById("registerPsw").setAttribute("placeholder", "请输入密码");
}
if (!captcha) {
document.getElementById("registerCode").classList.add("warning");
document.getElementById("registerCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'password': password,
'captcha': captcha
}, function(resp) {
if (!!resp && !!resp.result) {
alert('注册成功,正在登录...');
console.log("注册>>>", resp.result);
} else {
alert(resp.message);
}
});
}
function changeCodeImg1() {
console.log("changeCodeImg1", Date.now());
$('#codeImg1').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
function changeCodeImg2() {
$('#codeImg2').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
</script>
</html>

306
login.html Normal file
View File

@@ -0,0 +1,306 @@
<!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/login.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="login">
<!-- 头部占位 -->
<div id="header"></div>
<!-- 页面内容 -->
<div class="login--content-wrap" style="background-color: #fff; margin-top: 5%;">
<img src="images/login_content_left.jpg" style="margin-right: 20px; flex: 1; " />
<div style="display: flex;flex-direction: column; margin: 20px 10px;width: 100%; flex: 0.6;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div style="width: 6px; height:40px;background-color: #238BF0;"></div>
<div style="color: #238BF0;font-size: 28px;margin-left: 15px;">账号登录</div>
</div>
<div class="popup-content__item" style="margin-top: 40px; margin-left: 20px;">
<input class="input" type="text" placeholder="手机号" id="loginPhone" />
</div>
<div class="popup-content__item" style="margin-left: 20px;">
<input class="input" type="password" placeholder="登录密码" id="loginPsw" />
</div>
<div class="popup-content__item popup-content__item3" style="margin-left: 20px;">
<input class="inputCode" type="text" placeholder="验证码" id="loginCode" />
<div class="codeImage" style="background-color: #238BF0;margin-left: 30px;"><img id="codeImg1"
onclick="changeCodeImg1()" class="img" style="height: 56px;"></div>
</div>
<div style="display: flex;flex-direction: column; align-items: center;justify-content: center;width: 100%;
margin-top: 20px;">
<div class="popup-content__btn" style="background-color: #238BF0; width: 32rem; "
onclick="login()">
登录
</div>
<div style="display: flex;flex-direction: row; justify-content: space-between; width: 30.8rem !important;
margin-top: 5px;">
<div style="color: #238BF0;text-decoration: underline; font-size: 18px;"
onclick="openPopup()">注册账号>></div>
<div style="color: #238BF0;font-size: 18px;" onclick="forgetPsw()">忘记密码?</div>
</div>
</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="registerName" />
</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
id="registerPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
id="registerCompany" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
id="registerPsw" />
</div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
<div class="codeImage"><img id="codeImg2" onclick="changeCodeImg2()" class="img"
style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">注册</div>
</div>
</div>
<!-- 注册弹窗
<div id="mask1" class="mask"></div>
<div id="popup1" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup1()">
<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="registerName" />
</div>
<div class="popup-content__item"><input class="input" type="text" placeholder="电话"
id="registerPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
id="registerCompany" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="密码"
id="registerPsw" />
</div>
<div class="popup-content__item popup-content__item2">
<input class="inputCode" type="text" placeholder="验证码" id="registerCode" />
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
style="height: 56px;background-color: #f0f;"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">注册</div>
</div>
</div> -->
<!-- 底部占位 -->
<div id="footer"></div>
</div>
</body>
<script>
$('#codeImg1').attr('src', 'http://192.168.0.105:7072/ycsafe/captcha/captchaImagetype=math&timestamp=' + Date
.now());
</script>
<script>
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
$('#codeImg2').attr('src', 'http://192.168.0.105:7072/ycsafe/captcha/captchaImagetype=math&timestamp=' +
Date
.now());
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
// 忘记密码
function forgetPsw() {
// document.getElementById("popup1").style.display = "block";
// document.getElementById("mask1").style.display = "block";
// $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
alert('功能正在完善,请联系官方客服:123456789');
}
function closePopup1() {
document.getElementById("popup1").style.display = "none";
document.getElementById("mask1").style.display = "none";
}
// 登录
function login() {
let telephone = $('#loginPhone').val();
let password = $('#loginPsw').val();
let captcha = $('#registerCode').val();
$("#loginPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#loginPsw").blur(function() {
if (!password) {
$(this).removeClass("warning");
}
});
$("#loginCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
if (!telephone) {
document.getElementById("loginPhone").classList.add("warning");
document.getElementById("loginPhone").setAttribute("placeholder", "请输入您的手机号");
}
if (!password) {
document.getElementById("loginPsw").classList.add("warning");
document.getElementById("loginPsw").setAttribute("placeholder", "请输入密码");
}
if (!captcha) {
document.getElementById("loginCode").classList.add("warning");
document.getElementById("loginCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('http://192.168.0.105:7072/loulan/business/buy/9', {
'telephone': telephone,
'password': password,
'captcha': captcha
}, function(resp) {
if (!!resp && !!resp.result) {
alert('正在登录...');
console.log("登录>>>", resp.result);
// window.location.href = 'login.html';
} else {
alert(resp.message);
console.log("登录>>>", resp.message);
}
});
}
// 注册函数
function submitName() {
let name = $('#registerName').val();
let telephone = $('#registerPhone').val();
let companyName = $('#registerCompany').val();
let password = $('#registerPsw').val();
let captcha = $('#registerCode').val();
$("#registerName").blur(function() {
if (!name) {
$(this).removeClass("warning");
}
});
$("#registerPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#registerPsw").blur(function() {
if (!password) {
$(this).removeClass("warning");
}
});
$("#registerCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
if (!name) {
document.getElementById("registerName").classList.add("warning");
document.getElementById("registerName").setAttribute("placeholder", "请输入您的姓名");
}
if (!telephone) {
document.getElementById("registerPhone").classList.add("warning");
document.getElementById("registerPhone").setAttribute("placeholder", "请输入您的电话");
}
if (!companyName) {
document.getElementById("registerCompany").classList.add("warning");
document.getElementById("registerCompany").setAttribute("placeholder", "请输入公司名称");
}
if (!companyName) {
document.getElementById("registerPsw").classList.add("warning");
document.getElementById("registerPsw").setAttribute("placeholder", "请输入密码");
}
if (!captcha) {
document.getElementById("registerCode").classList.add("warning");
document.getElementById("registerCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('http://192.168.0.105:7072/ycsafe/website/register', {
'name': name,
'password': password,
'telephone': telephone,
'enterpriseName': companyName,
'captcha': captcha,
'timestamp': Date.now(),
}, function(resp) {
if (!!resp && !!resp.result) {
alert('注册成功,正在登录...');
console.log("注册>>>", resp.result);
} else {
alert(resp.message);
}
});
}
function changeCodeImg1() {
console.log("changeCodeImg1", Date.now());
$('#codeImg1').attr('src', 'http://192.168.0.105:7072/ycsafe/captcha/captchaImage?type=math&timestamp=' +
Date
.now());
}
function changeCodeImg2() {
$('#codeImg2').attr('src', 'http://192.168.0.105:7072/ycsafe/captcha/captchaImage?type=math&timestamp=' +
Date
.now());
}
</script>
</html>

281
network.html
View File

@@ -1,147 +1,156 @@
<!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>
<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 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 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 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>
<!-- 底部占位 -->
<div id="footer"></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>
</body>
<!-- 弹窗 -->
<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");
<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());
}
});
$("#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 closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
}
});
}
function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>
// 提交名字函数
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>

736
secure.html
View File

@@ -1,376 +1,414 @@
<!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>
<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">
</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 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--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 class="secure-content__right">
<img class="secure--content__right--image" src="./images/img2.png">
</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" onclick="openPopuptc()">定制我的套餐</div>
<div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div>
</div>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
<!-- 弹窗: 定制我的套餐 -->
<div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
<div class="secure-popup__close" onclick="closePopuptc()">
<img src="./images/close.png">
</div>
<div style="display: flex;flex-direction: row;justify-content: space-between;align-content: center">
<div style="width: 60%">
<div style="background-color: #262A2F;border-radius: 5px 0px 5px 0px;height: 40px;display: flex;flex-direction: column;justify-content: center">
<span style="color: #FFFFFF;text-align: center">标准套餐</span>
</div>
<table style="width: 100%">
<tr style="height: 50px">
<td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td>
<td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
操作系统防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="300" fuwu="2"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
中间件防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
服务应用防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td rowspan="3" style="font-size: 16px; font-weight: 700">专业防护</td>
<td class="biaozhun-taocan" data="700" fuwu="4"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
漏洞防护
</td>
<td>巡检+加固</td>
<td>700</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="500" fuwu="5"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
木马防护
</td>
<td>实时巡检+加固</td>
<td>500</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
业务逻辑防护
</td>
<td>实时巡检+加固+合规</td>
<td>600</td>
</tr>
<tr style="height: 50px">
<td rowspan="2" style="font-size: 16px; font-weight: 700">数据防护</td>
<td class="biaozhun-taocan" data="400" fuwu="7"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
数据库防护
</td>
<td>巡检+加固</td>
<td>400</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png">
数据安全防护
</td>
<td>数据安全审计/跨境数据合规检查/整改</td>
<td>800</td>
</tr>
<tr style="height: 50px">
<td rowspan="1" style="font-size: 16px; font-weight: 700">应急处理</td>
<td class="biaozhun-taocan2" data="3000" fuwu="9"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png"> 应急处理
</td>
<td>次</td>
<td>3000</td>
</tr>
</table>
</div>
<div style="display: flex;flex-direction: column;justify-content: center;align-content: center;margin-left: 10px;width: 39%">
<div class="modal-body" style="text-align: center">
<div style="display: flex;flex-direction: column;justify-content: center;align-content: flex-end;">
<span class="control-label" style="width: 100%;">您选择了标准套餐，<span class="gongji">0</span>元/月</span>
<span class="control-label" style="width: 100%;">请留下您的联系方式，我们会尽快与您联系</span>
<div class="secure-content--operate">
<div class="secure-content--operate__made" onclick="openPopuptc()">定制我的套餐</div>
<!-- <div class="secure-content--operate__connect" onclick="openPopup()">联系我们</div> -->
</div>
<form id="myModal2_form" class="form-horizontal" role="form" onsubmit="return submit_myModal2_btn();">
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control" name="name" placeholder="姓名" style="height: 45px;width: 80%"/>
</div>
</div>
<!-- 底部占位 -->
<div id="footer"></div>
<!-- 弹窗: 定制我的套餐 -->
<div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
<div class="secure-popup__close" onclick="closePopuptc()">
<img src="./images/close.png">
</div>
<div style="display: flex;flex-direction: column;justify-content: space-between;align-content: center">
<div style="width: 100%">
<div
style="background-color: #262A2F;border-radius: 5px 0px 5px 0px;height: 40px;display: flex;flex-direction: column;justify-content: center">
<span style="color: #FFFFFF;text-align: center">标准套餐</span>
</div>
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control big" name="telephone" placeholder="电话" style="height: 45px;width: 80%">
<table style="width: 100%">
<tr style="height: 50px">
<td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td>
<td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
操作系统防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="300" fuwu="2"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
中间件防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
服务应用防护
</td>
<td>巡检+加固</td>
<td>300</td>
</tr>
<tr style="height: 50px">
<td rowspan="3" style="font-size: 16px; font-weight: 700">专业防护</td>
<td class="biaozhun-taocan" data="700" fuwu="4"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
漏洞防护
</td>
<td>巡检+加固</td>
<td>700</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="500" fuwu="5"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
木马防护
</td>
<td>实时巡检+加固</td>
<td>500</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
业务逻辑防护
</td>
<td>实时巡检+加固+合规</td>
<td>600</td>
</tr>
<tr style="height: 50px">
<td rowspan="2" style="font-size: 16px; font-weight: 700">数据防护</td>
<td class="biaozhun-taocan" data="400" fuwu="7"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
数据库防护
</td>
<td>巡检+加固</td>
<td>400</td>
</tr>
<tr style="height: 50px">
<td class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
数据安全防护
</td>
<td>数据安全审计/跨境数据合规检查/整改</td>
<td>800</td>
</tr>
<tr style="height: 50px">
<td rowspan="1" style="font-size: 16px; font-weight: 700">应急处理</td>
<td class="biaozhun-taocan2" data="3000" fuwu="9"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png"> 应急处理
</td>
<td>次</td>
<td>3000</td>
</tr>
</table>
</div>
<div
style="display: flex;flex-direction: row;justify-content: center;align-content: center; margin-top: 20px;">
<button type="submit"
style="background-color: rgba(21, 170, 125, 1);width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
<span style="color: white">提交您的信息</span>
</button>
</div>
<!-- <div
style="display: flex;flex-direction: column;justify-content: center;align-content: center;margin-left: 10px;width: 39%">
<div class="modal-body" style="text-align: center">
<div
style="display: flex;flex-direction: column;justify-content: center;align-content: flex-end;">
<span class="control-label" style="width: 100%;">您选择了标准套餐，<span
class="gongji">0</span>元/月</span>
<span class="control-label" style="width: 100%;">请留下您的联系方式，我们会尽快与您联系</span>
</div>
<form id="myModal2_form" class="form-horizontal" role="form"
onsubmit="return submit_myModal2_btn();">
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control" name="name" placeholder="姓名"
style="height: 45px;width: 80%" />
</div>
<div style="margin-top: 10px;width: 100%">
<input type="text" class="form-control big" name="telephone" placeholder="电话"
style="height: 45px;width: 80%">
</div>
<div style="margin-top: 10px; margin-bottom: 10px;width: 100%">
<input type="text" class="form-control big" name="companyName" placeholder="公司名称"
style="height: 45px;width: 80%">
</div>
<div
style="display: flex;flex-direction: row;justify-content: center;align-content: center">
<button type="submit"
style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
<span style="color: white">提交您的信息</span>
</button>
</div>
</form>
</div>
<div style="margin-top: 10px; margin-bottom: 10px;width: 100%">
<input type="text" class="form-control big" name="companyName" placeholder="公司名称" style="height: 45px;width: 80%">
</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 style="display: flex;flex-direction: row;justify-content: center;align-content: center">
<button type="submit" style="background-color: rgba(21, 170, 125, 1);margin-left: 15px; width: 50%;display: block;font-size: 18px;border-radius: 6px;padding: 10px 16px">
<span style="color: white">提交您的信息</span>
</button>
</div>
</form>
</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>
<!-- 弹窗: 联系我们 -->
<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>
</body>
<style>
table,
td,
th {
text-align: center;
border: 1px solid #ddd;
border-collapse: collapse;
}
<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>
<style>
table,
td,
th {
text-align: center;
border: 1px solid #ddd;
border-collapse: collapse;
}
table td {
text-align: left;
padding-left: 5px;
}
</style>
<script>
var time = ''
</script>
<script>
var taocan = 0;
$('td.biaozhun-taocan').on('click', function(){
if (taocan == 0 || taocan == 2) {
$('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
taocan = 1;
table td {
text-align: left;
padding-left: 5px;
}
$('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src', './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
if ($(this).hasClass('on')){
$(this).removeClass('on').addClass('off');
$(this).find('img').attr('src', './images/unchoice.png');
}else {
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k,v){
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
$('td.biaozhun-taocan2').on('click', function(){
if (taocan == 0 || taocan == 1) {
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
taocan = 2;
}
$('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src', './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
if ($(this).hasClass('on')){
$(this).removeClass('on').addClass('off');
$(this).find('img').attr('src', './images/unchoice.png');
}else {
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k,v){
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
</script>
<script>
function submit_myModal2_btn() {
var data = $('#myModal2_form').serialize();
var fuwu = '';
$('td.on').each(function(k,v){
if (fuwu) {
fuwu += ',';
</style>
<script>
var time = ''
</script>
<script>
var taocan = 0;
$('td.biaozhun-taocan').on('click', function() {
if (taocan == 0 || taocan == 2) {
$('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
taocan = 1;
}
fuwu += $(v).attr('fuwu');
});
data += '&fuwu=' + fuwu;
$.ajax({
url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
type: "POST",
data: data,
success: function (result) {
if (result.result){
alert("您的意向信息已提交，我们将尽快与您取得联系！");
$('#myModal2_form').trigger('reset');
document.getElementById("tcpopup").style.display = "none";
} else {
alert(result.message);
}
}
});
return false;
}
</script>
<script>
function openPopuptc() {
document.getElementById("tcpopup").style.display = "block";
}
function closePopuptc() {
document.getElementById("tcpopup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/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('http://aos.yyundong.com/ycsafe//business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha,
'timestamp': time,
}, function (resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
document.getElementById("inputName").value = ''
document.getElementById("inputPhone").value = ''
document.getElementById("inputCompany").value = ''
document.getElementById("inputCode").value = ''
$('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src',
'./images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
if ($(this).hasClass('on')) {
$(this).removeClass('on').addClass('off');
$(this).find('img').attr('src', './images/unchoice.png');
} else {
document.getElementById("inputName").value = ''
alert(resp.message);
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src',
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k, v) {
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
}
function changeCodeImg() {
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
</script>
</html>
$('td.biaozhun-taocan2').on('click', function() {
if (taocan == 0 || taocan == 1) {
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
taocan = 2;
}
$('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src',
'./images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
if ($(this).hasClass('on')) {
$(this).removeClass('on').addClass('off');
$(this).find('img').attr('src', './images/unchoice.png');
} else {
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src',
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k, v) {
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
</script>
<script>
function submit_myModal2_btn() {
var data = $('#myModal2_form').serialize();
var fuwu = '';
$('td.on').each(function(k, v) {
if (fuwu) {
fuwu += ',';
}
fuwu += $(v).attr('fuwu');
});
data += '&fuwu=' + fuwu;
$.ajax({
url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
type: "POST",
data: data,
success: function(result) {
if (result.result) {
alert("您的意向信息已提交，我们将尽快与您取得联系！");
$('#myModal2_form').trigger('reset');
document.getElementById("tcpopup").style.display = "none";
} else {
alert(result.message);
}
}
});
return false;
}
</script>
<script>
function openPopuptc() {
document.getElementById("tcpopup").style.display = "block";
}
function closePopuptc() {
document.getElementById("tcpopup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("mask").style.display = "block";
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/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('http://aos.yyundong.com/ycsafe//business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha,
'timestamp': time,
}, function(resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "none";
document.getElementById("inputName").value = ''
document.getElementById("inputPhone").value = ''
document.getElementById("inputCompany").value = ''
document.getElementById("inputCode").value = ''
} else {
document.getElementById("inputName").value = ''
alert(resp.message);
}
});
}
function changeCodeImg() {
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
</script>
</html>