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

111

master
myTest383 1 month ago
parent
a63a5dbff2
commit
afc88d3426
12 changed files with 2547 additions and 887 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 179
      css/header.css
  2. 458
      css/login - 副本.css
  3. 458
      css/login.css
  4. 675
      css/network.css
  5. 90
      header.html
  6. BIN
      images/login_bg.jpg
  7. BIN
      images/login_content_left.jpg
  8. BIN
      images/network_bg.jpg
  9. 303
      login - 副本.html
  10. 306
      login.html
  11. 271
      network.html
  12. 694
      secure.html

179
css/header.css
View File

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

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

90
header.html
View File

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

BIN
images/login_bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
images/login_content_left.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 KiB

BIN
images/network_bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 KiB

303
login - 副本.html
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
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>

271
network.html
View File

@ -1,147 +1,156 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/network.css"> <link rel="stylesheet" href="./css/network.css">
<title>政务外网安全</title> <title>政务外网安全</title>
</head> </head>
<!-- 嵌入头部 --> <!-- 嵌入头部 -->
<script type="text/javascript" src = "./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.js"></script>
<script> <script>
$(function(){ // $(function(){
$("#header").load("./header.html"); // $("#header").load("./header.html");
}); // });
$(function(){ // $(function(){
$("#footer").load("./footer.html"); // $("#footer").load("./footer.html");
}); // });
</script> </script>
<body> <body>
<div class="network"> <div class="network">
<!-- 头部占位 --> <!-- 头部占位 -->
<div id="header"></div> <div id="header"></div>
<!-- 页面内容 --> <!-- 页面内容 -->
<div class="network--content-wrap"> <div class="network--content-wrap">
<div class="network--content"> <div class="network--content">
<div class="network--content__left"> <div class="network--content__left">
<img class="network--content__left--image" src="./images/img5.png"> <img class="network--content__left--image" src="./images/img5.png">
<img class="network--content__left--image--mobile" src="./images/img5-mobile.png"> <img class="network--content__left--image--mobile" src="./images/img5-mobile.png">
</div> </div>
<div class="network--content__right"> <div class="network--content__right">
<div class="network--content__right--title">政务外网服务器安全</div> <div class="network--content__right--title">政务外网服务器安全</div>
<div class="network--content__right--model"> <div class="network--content__right--model">
<div class="network--content__right--model__title">安全运维模式转变</div> <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__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>
<div class="network--content__right--model">
<div class="network--content__right--model__title">安全微服务套餐模式</div> <!-- 弹窗 -->
<div class="network--content__right--model__desc">模式转变，向政务外网服务器提供安</div> <div id="mask" class="mask"></div>
<div class="network--content__right--model__desc">全微服务套餐</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>
</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="footer"></div>
<div id="popup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopup()">
<img src="./images/close.png">
</div> </div>
<div class="popup-content"> </body>
<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>
<!-- 底部占位 --> <script>
<div id="footer"></div> function openPopup() {
</div> document.getElementById("popup").style.display = "block";
</body> document.getElementById("mask").style.display = "block";
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
}
<script> function closePopup() {
function openPopup() { document.getElementById("popup").style.display = "none";
document.getElementById("popup").style.display = "block"; document.getElementById("mask").style.display = "none";
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"; function submitName() {
document.getElementById("mask").style.display = "none"; let name = $('#inputName').val();
} let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
// 提交名字函数 $("#inputName").blur(function() {
function submitName() { if (!name) {
let name = $('#inputName').val(); $(this).removeClass("warning");
let telephone = $('#inputPhone').val(); }
let companyName = $('#inputCompany').val(); });
let captcha = $('#inputCode').val(); $("#inputPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
$("#inputName").blur(function(){ if (!name) {
if(!name){ document.getElementById("inputName").classList.add("warning");
$(this).removeClass("warning"); document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
} }
}); if (!telephone) {
$("#inputPhone").blur(function(){ document.getElementById("inputPhone").classList.add("warning");
if(!telephone){ document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
$(this).removeClass("warning"); }
} if (!companyName) {
}); document.getElementById("inputCompany").classList.add("warning");
$("#inputCompany").blur(function(){ document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
if(!companyName){ }
$(this).removeClass("warning"); if (!captcha) {
} document.getElementById("inputCode").classList.add("warning");
}); document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
$("#inputCode").blur(function(){ return;
if(!captcha){ }
$(this).removeClass("warning");
}
});
if(!name){ $.post('/loulan/business/buy/9', {
document.getElementById("inputName").classList.add("warning"); 'name': name,
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名"); 'telephone': telephone,
} 'companyName': companyName,
if(!telephone){ 'captcha': captcha
document.getElementById("inputPhone").classList.add("warning"); }, function(resp) {
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) { if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！'); alert('您的意向信息已提交，我们将尽快与您取得联系！');
} else { } else {
alert(resp.message); alert(resp.message);
}
});
} }
});
}
function changeCodeImg() { function changeCodeImg() {
$('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now()); $('#codeImg').attr('src', './loulan/captcha/captchaImage?type=math&timestamp=' + Date.now());
} }
</script> </script>
</html> </html>

694
secure.html
View File

@ -1,376 +1,414 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/secure.css"> <link rel="stylesheet" href="./css/secure.css">
<title>独立站安全</title> <title>独立站安全</title>
</head> </head>
<!-- 嵌入头部 --> <!-- 嵌入头部 -->
<script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery.js"></script>
<script> <!-- <script>
$(function () { $(function () {
$("#header").load("./header.html"); $("#header").load("./header.html");
}); });
$(function () { $(function () {
$("#footer").load("./footer.html"); $("#footer").load("./footer.html");
}); });
</script> </script> -->
<body> <body>
<div class="secure"> <div class="secure">
<div class="secure-box"> <div class="secure-box">
<!-- 头部占位 --> <!-- 头部占位 -->
<div id="header"></div> <div id="header"></div>
<!-- 页面内容 --> <!-- 页面内容 -->
<div class="secure-content-wrap"> <div class="secure-content-wrap">
<div class="secure-content"> <div class="secure-content">
<div class="secure-content__left"> <div class="secure-content__left">
<div class="secure-content--title">三种模式总有一款适合您</div> <div class="secure-content--title">三种模式总有一款适合您</div>
<div class="secure-content--model"> <div class="secure-content--model">
<div class="secure-content--model__item"> <div class="secure-content--model__item">
<div class="secure-content--model__round"></div> <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>
</div>
</div> </div>
<div class="secure-content--model__item"> <div class="secure-content__right">
<div class="secure-content--model__round"></div> <img class="secure--content__right--image" src="./images/img2.png">
<div>您购买安全微服务套餐，我们送您独立站</div>
</div>
<div class="secure-content--model__item">
<div class="secure-content--model__round"></div>
<div>您可以只购买我们的独立站</div>
</div> </div>
</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 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> <div id="footer"></div>
<!-- 底部占位 --> <!-- 弹窗: 定制我的套餐 -->
<div id="footer"></div> <div id="tcpopup" class="tc-popup" style="display: none;width: 80%">
<!-- 弹窗: 定制我的套餐 --> <div class="secure-popup__close" onclick="closePopuptc()">
<div id="tcpopup" class="tc-popup" style="display: none;width: 80%"> <img src="./images/close.png">
<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> </div>
<table style="width: 100%"> <div style="display: flex;flex-direction: column;justify-content: space-between;align-content: center">
<tr style="height: 50px"> <div style="width: 100%">
<td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td> <div
<td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1" referrerpolicy="no-referrer" src="./images/unchoice.png"> 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>
</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>
<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 style="margin-top: 10px;width: 100%"> <table style="width: 100%">
<input type="text" class="form-control big" name="telephone" placeholder="电话" style="height: 45px;width: 80%"> <tr style="height: 50px">
</div> <td rowspan="3" style="font-size: 16px; font-weight: 700">基础防护</td>
<div style="margin-top: 10px; margin-bottom: 10px;width: 100%"> <td class="biaozhun-taocan" data="300" fuwu="1"><img class="thumbnail_1"
<input type="text" class="form-control big" name="companyName" placeholder="公司名称" style="height: 45px;width: 80%"> referrerpolicy="no-referrer" src="./images/unchoice.png">
</div> 操作系统防护
<div style="display: flex;flex-direction: row;justify-content: center;align-content: center"> </td>
<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"> <td>巡检+加固</td>
<span style="color: white">提交您的信息</span> <td>300</td>
</button> </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>
</form> </div> -->
</div> </div>
</div> </div>
</div> <!-- 弹窗: 联系我们 -->
</div> <div id="mask" class="mask"></div>
<!-- 弹窗: 联系我们 --> <div id="popup" class="secure-popup" style="display:none;">
<div id="mask" class="mask"></div> <div class="secure-popup__close" onclick="closePopup()">
<div id="popup" class="secure-popup" style="display:none;"> <img src="./images/close.png">
<div class="secure-popup__close" onclick="closePopup()"> </div>
<img src="./images/close.png"> <div class="popup-content">
</div> <div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div>
<div class="popup-content"> <div class="popup-content__item"><input class="input" type="text" placeholder="姓名" id="inputName" />
<div class="popup-content__item">请留下您的联系方式，我们会尽快与您联系</div> </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="电话"
<div class="popup-content__item"><input class="input" type="text" placeholder="电话" id="inputPhone"/></div> id="inputPhone" /></div>
<div class="popup-content__item"><input class="input" type="text" placeholder="公司名称" id="inputCompany"/> <div class="popup-content__item"><input class="input" type="text" placeholder="公司名称"
</div> id="inputCompany" />
<div class="popup-content__item popup-content__item2"> </div>
<input class="inputCode" type="text" placeholder="验证码" id="inputCode"/> <div class="popup-content__item popup-content__item2">
<div class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img" style="height: 56px"> <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>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
</div>
<div id="subpopup" class="secure-popup" style="display:none;"> <div id="subpopup" class="secure-popup" style="display:none;">
<div class="secure-popup__close" onclick="closePopupsub()"> <div class="secure-popup__close" onclick="closePopupsub()">
<img src="./images/close.png"> <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 class="popup-content">
<div id="subpopupmessage" class="popup-content__item"></div>
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div> </div>
</div> </body>
</div> <style>
</div> table,
</body> td,
<style> th {
table, text-align: center;
td, border: 1px solid #ddd;
th { border-collapse: collapse;
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;
}
$('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(){ table td {
if (taocan == 0 || taocan == 1) { text-align: left;
$('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png'); padding-left: 5px;
taocan = 2;
} }
$('td.biaozhun-taocan').removeClass('on').addClass('off').find('img').attr('src', './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png'); </style>
if ($(this).hasClass('on')){ <script>
$(this).removeClass('on').addClass('off'); var time = ''
$(this).find('img').attr('src', './images/unchoice.png'); </script>
}else { <script>
$(this).removeClass('off').addClass('on'); var taocan = 0;
$(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png'); $('td.biaozhun-taocan').on('click', function() {
} if (taocan == 0 || taocan == 2) {
var gongji = 0; $('td.biaozhun-taocan').find('img').attr('src', './images/unchoice.png');
$('td.on').each(function(k,v){ taocan = 1;
gongji += parseInt($(v).attr('data')); }
}); $('td.biaozhun-taocan2').removeClass('on').addClass('off').find('img').attr('src',
$('span.gongji').text(gongji); './images/FigmaDDSSlicePNGb036e0276b958fac7a72814f195c50b0.png');
}); if ($(this).hasClass('on')) {
</script> $(this).removeClass('on').addClass('off');
<script> $(this).find('img').attr('src', './images/unchoice.png');
function submit_myModal2_btn() { } else {
var data = $('#myModal2_form').serialize(); $(this).removeClass('off').addClass('on');
var fuwu = ''; $(this).find('img').attr('src',
$('td.on').each(function(k,v){ './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
if (fuwu) {
fuwu += ',';
} }
fuwu += $(v).attr('fuwu'); var gongji = 0;
$('td.on').each(function(k, v) {
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
}); });
data += '&fuwu=' + fuwu;
$.ajax({ $('td.biaozhun-taocan2').on('click', function() {
url: 'http://aos.yyundong.com/ycsafe/business/buy/1', if (taocan == 0 || taocan == 1) {
type: "POST", $('td.biaozhun-taocan2').find('img').attr('src', './images/unchoice.png');
data: data, taocan = 2;
success: function (result) {
if (result.result){
alert("您的意向信息已提交，我们将尽快与您取得联系！");
$('#myModal2_form').trigger('reset');
document.getElementById("tcpopup").style.display = "none";
} else {
alert(result.message);
}
} }
$('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);
}); });
return false; </script>
} <script>
</script> function submit_myModal2_btn() {
<script> var data = $('#myModal2_form').serialize();
function openPopuptc() { var fuwu = '';
document.getElementById("tcpopup").style.display = "block"; $('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 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 openPopup() { function closePopup() {
document.getElementById("popup").style.display = "block"; document.getElementById("popup").style.display = "none";
document.getElementById("mask").style.display = "block"; document.getElementById("mask").style.display = "none";
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"; function submitName() {
document.getElementById("mask").style.display = "none"; let name = $('#inputName').val();
} let telephone = $('#inputPhone').val();
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
// 提交名字函数 $("#inputName").blur(function() {
function submitName() { if (!name) {
let name = $('#inputName').val(); $(this).removeClass("warning");
let telephone = $('#inputPhone').val(); }
let companyName = $('#inputCompany').val(); });
let captcha = $('#inputCode').val(); $("#inputPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
$("#inputName").blur(function () {
if (!name) { if (!name) {
$(this).removeClass("warning"); document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
} }
});
$("#inputPhone").blur(function () {
if (!telephone) { if (!telephone) {
$(this).removeClass("warning"); document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
} }
});
$("#inputCompany").blur(function () {
if (!companyName) { if (!companyName) {
$(this).removeClass("warning"); document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
} }
});
$("#inputCode").blur(function () {
if (!captcha) { if (!captcha) {
$(this).removeClass("warning"); document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
return;
} }
});
if (!name) { $.post('http://aos.yyundong.com/ycsafe//business/buy/9', {
document.getElementById("inputName").classList.add("warning"); 'name': name,
document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名"); 'telephone': telephone,
} 'companyName': companyName,
if (!telephone) { 'captcha': captcha,
document.getElementById("inputPhone").classList.add("warning"); 'timestamp': time,
document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话"); }, function(resp) {
} if (!!resp && !!resp.result) {
if (!companyName) { alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("inputCompany").classList.add("warning"); document.getElementById("popup").style.display = "none";
document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称"); document.getElementById("mask").style.display = "none";
} document.getElementById("inputName").value = ''
if (!captcha) { document.getElementById("inputPhone").value = ''
document.getElementById("inputCode").classList.add("warning"); document.getElementById("inputCompany").value = ''
document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码"); document.getElementById("inputCode").value = ''
return; } else {
document.getElementById("inputName").value = ''
alert(resp.message);
}
});
} }
$.post('http://aos.yyundong.com/ycsafe//business/buy/9', { function changeCodeImg() {
'name': name, time = Date.now()
'telephone': telephone, $('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
'companyName': companyName, .now());
'captcha': captcha, }
'timestamp': time, </script>
}, function (resp) { </html>
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>
Write Preview
Loading…
Cancel
Save