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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      css/header.css
  2. 458
      css/login - 副本.css
  3. 458
      css/login.css
  4. 171
      css/network.css
  5. 16
      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. 65
      network.html
  12. 180
      secure.html

35
css/header.css
View File

@ -9,13 +9,16 @@
left: 0;
top: 0; */
}
.home--nav__logo {
width: 11.125rem;
height: 3.5625rem;
}
.home--nav__tab {
display: flex;
}
.home--nav__tab--item {
margin: 0 1rem;
cursor: pointer;
@ -23,32 +26,40 @@
flex-direction: column;
align-items: center;
}
a {
text-decoration: none;
font-size: 1.125rem;
font-weight: 400;
color: #333333;
}
a:active, a:hover {
a:active,
a:hover {
color: #1A6CE6;
}
a:visited {
text-decoration: underline;
}
.home--nav__phone {
display: flex;
align-items: center;
align-items: right;
}
.home--nav__phone--icon {
width: 1.625rem;
height: 1.625rem;
}
.home--nav__phone--text {
font-size: 1.5rem;
font-size: 1.0rem;
font-weight: 400;
color: #333333;
color: #666;
padding-left: .8rem;
}
.active {
border-bottom: 3px solid #1A6CE6;
padding-bottom: .5rem;
@ -56,15 +67,18 @@ a:visited {
/* 适配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;
}
@ -74,22 +88,25 @@ a:visited {
@media screen and (max-width: 768px) {
/* 移动端样式 */
.home--nav__tab--item{
.home--nav__tab--item {
margin: 0 .5rem;
}
/* .home--nav__tab{
display: none;
} */
/* .home--nav__phone--text{
display: none;
} */
.home--nav__logo{
.home--nav__logo {
width: 8rem;
height: auto;
}
.home--nav__tab {
padding: .5rem 0;
}
a {
text-decoration: none;
font-size: 0.875rem;
@ -99,17 +116,19 @@ a:visited {
width: 2.8125rem;
text-align: center;
}
.home--local__text {
padding: 0!important;
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
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;
}
}

171
css/network.css
View File

@ -7,20 +7,23 @@ body {
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;
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{
.network--content-wrap {
/* margin: 5rem auto; */
max-width: 80%;
margin: 3% auto;
}
.network--content {
display: flex;
align-items: center;
@ -28,47 +31,57 @@ body {
max-width: 90rem;
margin: 0 auto;
}
.network--content__left {
width: 54%;
}
.network--content__left--image {
width: 100%;
}
.network--content__left--image--mobile{
.network--content__left--image--mobile {
display: none;
}
.network--content__right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.network--content__right--title {
font-size: 2.25rem;
font-weight: bold;
color: #333333;
margin-bottom: 3.125rem;
}
.network--content__right--model {
margin-bottom: 2.2815rem;
}
.network--content__right--model__title {
font-size: 1.375rem;
font-weight: bold;
color: #333333;
line-height: 2.9375rem;
}
.network--content__right--model__desc {
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 2.25rem;
}
.network--content__right--operate {
margin-top: 4rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.network--content__right--operate__made {
width: 17.5rem;
height: 3.125rem;
@ -81,6 +94,7 @@ body {
color: #FFFFFF;
cursor: pointer;
}
.network--content__right--operate__connect {
width: 17.5rem;
height: 3.125rem;
@ -96,19 +110,21 @@ body {
cursor: pointer;
box-sizing: border-box;
}
.mask{
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.3);
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);
box-shadow: 0px 0px 3px 0px rgba(15, 80, 178, 0.51);
border-radius: 4px;
padding: 4.375rem 3.75rem;
position: fixed;
@ -126,13 +142,16 @@ body {
margin-top: -17.5rem;
box-sizing: border-box;
}
.popup-content__item {
margin-bottom: 1.25rem;
}
.popup-content__item2 {
display: flex;
justify-content: space-between;
}
.popup-content__btn {
width: 25rem;
height: 3.375rem;
@ -145,6 +164,7 @@ body {
text-align: center;
cursor: pointer;
}
.secure-popup__close {
position: fixed;
position: absolute;
@ -152,6 +172,7 @@ body {
top: 1.375rem;
cursor: pointer;
}
.input {
width: 22.4rem;
height: 3.375rem;
@ -162,12 +183,15 @@ body {
color: #333333;
padding: 0 1.25rem;
}
.input.warning{
.input.warning {
border-color: red;
}
.input.warning::placeholder{
color:red;
.input.warning::placeholder {
color: red;
}
.inputCode {
width: 10rem;
height: 3.375rem;
@ -178,13 +202,16 @@ body {
color: #333333;
padding: 0 1.25rem;
}
.inputCode.warning{
.inputCode.warning {
border-color: red;
}
.inputCode.warning::placeholder{
color:red;
.inputCode.warning::placeholder {
color: red;
}
#footer{
#footer {
/* margin-top: 9rem; */
margin-top: 6%;
}
@ -193,23 +220,28 @@ body {
/* 适配1366*768的电脑屏幕： */
/* 适配1440*900的电脑屏幕： */
/* 适配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 {
max-width: 70rem;
margin: 0 auto;
}
.network--content__right--title {
font-size: 2.45rem!important;
margin-bottom: 2.5rem!important;
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;
margin-bottom: 1.5rem !important;
}
/* .secure-popup {
top: 6rem!important;
} */
@ -217,69 +249,84 @@ body {
/* 适配1024*768的电脑屏幕 */
@media only screen and (max-width: 1024px) and (max-height: 768px) {
/* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */
.network--content {
margin: 3rem 6.75rem 2rem!important;
margin: 3rem 6.75rem 2rem !important;
}
.network--content__right--title {
font-size: 1.7rem!important;
margin-bottom: 1rem!important;
font-size: 1.7rem !important;
margin-bottom: 1rem !important;
}
.network--content__right--model__title {
font-size: 1.25rem!important;
font-size: 1.25rem !important;
}
.network--content__right--model__desc {
font-size: 1rem!important;
font-size: 1rem !important;
}
.network--content__right--model{
margin-bottom: 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;
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;
width: 12rem !important;
height: 3rem !important;
line-height: 3rem !important;
font-size: 1rem !important;
}
.network--content__right--model {
margin-bottom: 1.5rem!important;
margin-bottom: 1.5rem !important;
}
/* .secure-popup {
top: 3rem!important;
} */
.network--content__left {
width: 50%!important;
width: 50% !important;
}
#footer{
#footer {
margin-top: 4.5rem;
}
}
/* 当屏幕宽度小于等于 768px 时，应用以下样式 */
@media screen and (max-width: 768px) {
/* 移动端样式 */
.network--content-wrap{
.network--content-wrap {
margin: 1rem 0;
}
.network--content {
margin: 0!important;
margin: 0 !important;
flex-wrap: wrap;
}
.network--content__left {
width: 100%!important;
height: auto!important;
width: 100% !important;
height: auto !important;
margin: 2rem 0 3rem;
}
.network--content__left--image {
display: none;
width: 100%;
}
.network--content__left--image--mobile{
.network--content__left--image--mobile {
display: block;
width: 90%;
margin: 0 auto;
@ -288,22 +335,26 @@ body {
.network--content__right--title {
/* text-align: center; */
padding: 0 1rem;
font-size: 1.5rem!important;
margin-bottom: 1.2rem!important;
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{
.network--content__right--model__title {
font-size: 1.25rem;
line-height: 2.4;
}
.network--content__right--model__desc {
font-size: 1rem!important;
font-size: 1rem !important;
line-height: 1.6;
}
.network--content__right--operate {
padding: 0 1rem;
margin-bottom: 6rem;
@ -311,27 +362,33 @@ body {
justify-content: space-between;
margin-top: 1rem;
}
.network--content__right--operate__made,
.network--content__right--operate__connect {
width: 10rem!important;
width: 10rem !important;
}
.network--content__right--operate__connect {
margin-left: 0!important;
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;
width: 18.8rem !important;
height: 3rem !important;
line-height: 3rem !important;
}
/* .secure-popup{
padding: 2.5rem 1.5rem!important;
top: 15%!important;
@ -349,19 +406,22 @@ body {
margin-top: -15rem;
padding: 3rem 1.5rem 0 1.5rem;
}
.secure-popup__close {
top: 1.075rem!important;
top: 1.075rem !important;
}
.input {
width: 16.3rem!important;
height: 3rem!important;
line-height: 3rem!important;
width: 16.3rem !important;
height: 3rem !important;
line-height: 3rem !important;
font-size: 1rem;
}
.inputCode {
width: 6.3rem;
height: 3rem;
height: 3rem!important;
height: 3rem !important;
border: 1px solid #999999;
border-radius: .25rem;
font-size: 1rem;
@ -369,15 +429,18 @@ body {
color: #333333;
padding: 0 1.25rem;
}
.codeImage {
width: 8rem;
height: 3rem;
}
.img {
width: 100%;
height: 100%;
}
#footer{
#footer {
margin-top: 1rem;
}
}

16
header.html
View File

@ -5,7 +5,7 @@
<title></title>
<link rel="stylesheet" type="text/css" href="./css/header.css">
</head>
<script type="text/javascript" src = "./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<body>
<div class="home--nav">
<img class="home--nav__logo" src="images/logo-2.png" />
@ -26,17 +26,23 @@
<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">
<!--<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 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>
</body>
<script>
$(document).ready(function () {
$(".home--nav__tab--item >a").each(function () {
$(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())

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>

65
network.html
View File

@ -7,14 +7,14 @@
<title>政务外网安全</title>
</head>
<!-- 嵌入头部 -->
<script type="text/javascript" src = "./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.js"></script>
<script>
$(function(){
$("#header").load("./header.html");
});
$(function(){
$("#footer").load("./footer.html");
});
// $(function(){
// $("#header").load("./header.html");
// });
// $(function(){
// $("#footer").load("./footer.html");
// });
</script>
<body>
<div class="network">
@ -56,12 +56,16 @@
</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"><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 class="codeImage"><img id="codeImg" onclick="changeCodeImg()" class="img"
style="height: 56px"></div>
</div>
<div class="popup-content__btn" onclick="submitName()">提交</div>
</div>
@ -91,46 +95,51 @@
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function(){
if(!name){
$("#inputName").blur(function() {
if (!name) {
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function(){
if(!telephone){
$("#inputPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function(){
if(!companyName){
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function(){
if(!captcha){
$("#inputCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
});
if(!name){
if (!name) {
document.getElementById("inputName").classList.add("warning");
document.getElementById("inputName").setAttribute("placeholder","请输入您的姓名");
document.getElementById("inputName").setAttribute("placeholder", "请输入您的姓名");
}
if(!telephone){
if (!telephone) {
document.getElementById("inputPhone").classList.add("warning");
document.getElementById("inputPhone").setAttribute("placeholder","请输入您的电话");
document.getElementById("inputPhone").setAttribute("placeholder", "请输入您的电话");
}
if(!companyName){
if (!companyName) {
document.getElementById("inputCompany").classList.add("warning");
document.getElementById("inputCompany").setAttribute("placeholder","请输入公司名称");
document.getElementById("inputCompany").setAttribute("placeholder", "请输入公司名称");
}
if(!captcha){
if (!captcha) {
document.getElementById("inputCode").classList.add("warning");
document.getElementById("inputCode").setAttribute("placeholder","请输入验证码");
document.getElementById("inputCode").setAttribute("placeholder", "请输入验证码");
return;
}
$.post('/loulan/business/buy/9', {'name':name,'telephone':telephone,'companyName':companyName,'captcha':captcha}, function (resp){
$.post('/loulan/business/buy/9', {
'name': name,
'telephone': telephone,
'companyName': companyName,
'captcha': captcha
}, function(resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');

180
secure.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
<!-- 嵌入头部 -->
<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">
</script> -->
<body>
<div class="secure">
<div class="secure-box">
<!-- 头部占位 -->
<div id="header"></div>
@ -48,7 +48,7 @@
</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 class="secure-content--operate__connect" onclick="openPopup()">联系我们</div> -->
</div>
</div>
</div>
@ -59,29 +59,33 @@
<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">
<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>
<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 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 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 class="biaozhun-taocan" data="300" fuwu="3"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
服务应用防护
</td>
<td>巡检+加固</td>
@ -89,21 +93,24 @@
</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 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 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 class="biaozhun-taocan" data="600" fuwu="6"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
业务逻辑防护
</td>
<td>实时巡检+加固+合规</td>
@ -111,14 +118,16 @@
</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 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 class="biaozhun-taocan" data="800" fuwu="8"><img class="thumbnail_1"
referrerpolicy="no-referrer" src="./images/unchoice.png">
数据安全防护
</td>
<td>数据安全审计/跨境数据合规检查/整改</td>
@ -126,37 +135,55 @@
</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 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
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>
<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();">
<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%"/>
<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%">
<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%">
<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">
<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>
</div> -->
</div>
</div>
<!-- 弹窗: 联系我们 -->
@ -167,13 +194,17 @@
</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 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">
<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>
@ -189,10 +220,10 @@
<div class="popup-content__btn" id="subpopupmessageclose">关闭</div>
</div>
</div>
</div>
</div>
</body>
<style>
</div>
</div>
</body>
<style>
table,
td,
th {
@ -200,61 +231,66 @@
border: 1px solid #ddd;
border-collapse: collapse;
}
table td {
text-align: left;
padding-left: 5px;
}
</style>
<script>
</style>
<script>
var time = ''
</script>
<script>
</script>
<script>
var taocan = 0;
$('td.biaozhun-taocan').on('click', function(){
$('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')){
$('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 {
} else {
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
$(this).find('img').attr('src',
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k,v){
$('td.on').each(function(k, v) {
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
$('td.biaozhun-taocan2').on('click', function(){
$('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')){
$('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 {
} else {
$(this).removeClass('off').addClass('on');
$(this).find('img').attr('src', './images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
$(this).find('img').attr('src',
'./images/FigmaDDSSlicePNGba1504f367f579c6504830b2cee83a77.png');
}
var gongji = 0;
$('td.on').each(function(k,v){
$('td.on').each(function(k, v) {
gongji += parseInt($(v).attr('data'));
});
$('span.gongji').text(gongji);
});
</script>
<script>
</script>
<script>
function submit_myModal2_btn() {
var data = $('#myModal2_form').serialize();
var fuwu = '';
$('td.on').each(function(k,v){
$('td.on').each(function(k, v) {
if (fuwu) {
fuwu += ',';
}
@ -265,8 +301,8 @@
url: 'http://aos.yyundong.com/ycsafe/business/buy/1',
type: "POST",
data: data,
success: function (result) {
if (result.result){
success: function(result) {
if (result.result) {
alert("您的意向信息已提交，我们将尽快与您取得联系！");
$('#myModal2_form').trigger('reset');
document.getElementById("tcpopup").style.display = "none";
@ -277,8 +313,8 @@
});
return false;
}
</script>
<script>
</script>
<script>
function openPopuptc() {
document.getElementById("tcpopup").style.display = "block";
}
@ -292,7 +328,8 @@
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());
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
function closePopup() {
@ -307,22 +344,22 @@
let companyName = $('#inputCompany').val();
let captcha = $('#inputCode').val();
$("#inputName").blur(function () {
$("#inputName").blur(function() {
if (!name) {
$(this).removeClass("warning");
}
});
$("#inputPhone").blur(function () {
$("#inputPhone").blur(function() {
if (!telephone) {
$(this).removeClass("warning");
}
});
$("#inputCompany").blur(function () {
$("#inputCompany").blur(function() {
if (!companyName) {
$(this).removeClass("warning");
}
});
$("#inputCode").blur(function () {
$("#inputCode").blur(function() {
if (!captcha) {
$(this).removeClass("warning");
}
@ -352,7 +389,7 @@
'companyName': companyName,
'captcha': captcha,
'timestamp': time,
}, function (resp) {
}, function(resp) {
if (!!resp && !!resp.result) {
alert('您的意向信息已提交，我们将尽快与您取得联系！');
document.getElementById("popup").style.display = "none";
@ -370,7 +407,8 @@
function changeCodeImg() {
time = Date.now()
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date.now());
$('#codeImg').attr('src', 'http://aos.yyundong.com/ycsafe/captcha/captchaImage?type=math&timestamp=' + Date
.now());
}
</script>
</script>
</html>
Write Preview
Loading…
Cancel
Save