From afc88d3426e0fcae6ac56a3ade95594133359ff2 Mon Sep 17 00:00:00 2001 From: myTest383
Date: Tue, 29 Apr 2025 14:12:09 +0800 Subject: [PATCH] 111 --- css/header.css | 179 +++++---- css/login - 副本.css | 458 ++++++++++++++++++++++ css/login.css | 458 ++++++++++++++++++++++ css/network.css | 675 ++++++++++++++++++--------------- header.html | 90 +++-- images/login_bg.jpg | Bin 0 -> 54030 bytes images/login_content_left.jpg | Bin 0 -> 194060 bytes images/network_bg.jpg | Bin 0 -> 954721 bytes login - 副本.html | 303 +++++++++++++++ login.html | 306 +++++++++++++++ network.html | 271 ++++++------- secure.html | 694 ++++++++++++++++++---------------- 12 files changed, 2547 insertions(+), 887 deletions(-) create mode 100644 css/login - 副本.css create mode 100644 css/login.css create mode 100644 images/login_bg.jpg create mode 100644 images/login_content_left.jpg create mode 100644 images/network_bg.jpg create mode 100644 login - 副本.html create mode 100644 login.html diff --git a/css/header.css b/css/header.css index dfbc431..7c733a3 100644 --- a/css/header.css +++ b/css/header.css @@ -1,115 +1,134 @@ .home--nav { - width: 100%; - padding: 1em 0; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-around; - /* position: fixed; + width: 100%; + padding: 1em 0; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-around; + /* position: fixed; left: 0; top: 0; */ } + .home--nav__logo { - width: 11.125rem; - height: 3.5625rem; + width: 11.125rem; + height: 3.5625rem; } + .home--nav__tab { - display: flex; + display: flex; } + .home--nav__tab--item { - margin: 0 1rem; - cursor: pointer; - display: flex; - flex-direction: column; - align-items: center; + margin: 0 1rem; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; } + a { - text-decoration: none; - font-size: 1.125rem; - font-weight: 400; - color: #333333; + text-decoration: none; + font-size: 1.125rem; + font-weight: 400; + color: #333333; } -a:active, a:hover { - color: #1A6CE6; + +a:active, +a:hover { + color: #1A6CE6; } + a:visited { - text-decoration: underline; + text-decoration: underline; } + .home--nav__phone { - display: flex; - align-items: center; + display: flex; + align-items: right; } + .home--nav__phone--icon { - width: 1.625rem; - height: 1.625rem; + width: 1.625rem; + height: 1.625rem; } + .home--nav__phone--text { - font-size: 1.5rem; - font-weight: 400; - color: #333333; - padding-left: .8rem; + font-size: 1.0rem; + font-weight: 400; + color: #666; + padding-left: .8rem; } + .active { - border-bottom: 3px solid #1A6CE6; - padding-bottom: .5rem; + border-bottom: 3px solid #1A6CE6; + padding-bottom: .5rem; } /* 适配1024*768的电脑屏幕 */ @media only screen and (max-width: 1024px) and (max-height: 768px) { - /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ - .home--nav__phone--text { - font-size: 1rem; - padding-left: 0.5rem; - } - .home--nav__phone--icon { - width: 1.25rem; - height: 1.25rem; - } - a { - font-size: 1rem; - } + + /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ + .home--nav__phone--text { + font-size: 1rem; + padding-left: 0.5rem; + } + + .home--nav__phone--icon { + width: 1.25rem; + height: 1.25rem; + } + + a { + font-size: 1rem; + } } /* 当屏幕宽度小于等于 768px 时,应用以下样式 */ @media screen and (max-width: 768px) { - /* 移动端样式 */ - - .home--nav__tab--item{ - margin: 0 .5rem; - } - /* .home--nav__tab{ + /* 移动端样式 */ + + .home--nav__tab--item { + margin: 0 .5rem; + } + + /* .home--nav__tab{ display: none; } */ - /* .home--nav__phone--text{ + /* .home--nav__phone--text{ display: none; } */ - .home--nav__logo{ - width: 8rem; - height: auto; - } - .home--nav__tab { - padding: .5rem 0; - } - a { - text-decoration: none; - font-size: 0.875rem; - font-weight: 400; - color: #333333; - display: inline-block; - width: 2.8125rem; - text-align: center; - } - .home--local__text { - padding: 0!important; - text-align: center; - } - .home--nav__phone--text { - font-size: 1rem; - padding-left: 0.5rem; - } - .home--nav__phone--icon { - width: 1.25rem; - height: 1.25rem; - } -} + .home--nav__logo { + width: 8rem; + height: auto; + } + + .home--nav__tab { + padding: .5rem 0; + } + + a { + text-decoration: none; + font-size: 0.875rem; + font-weight: 400; + color: #333333; + display: inline-block; + width: 2.8125rem; + text-align: center; + } + + .home--local__text { + padding: 0 !important; + text-align: center; + } + + .home--nav__phone--text { + font-size: 1rem; + padding-left: 0.5rem; + } + .home--nav__phone--icon { + width: 1.25rem; + height: 1.25rem; + } +} \ No newline at end of file diff --git a/css/login - 副本.css b/css/login - 副本.css new file mode 100644 index 0000000..e087471 --- /dev/null +++ b/css/login - 副本.css @@ -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; + } +} \ No newline at end of file diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..7832308 --- /dev/null +++ b/css/login.css @@ -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; + } +} \ No newline at end of file diff --git a/css/network.css b/css/network.css index 97018b4..5896c4a 100644 --- a/css/network.css +++ b/css/network.css @@ -1,338 +1,395 @@ /* 公共样式 */ body { - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; } + .network { - width: 100%; - height: 100%; - min-height: 100vh; - font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif; - background: url("../images/bg3.jpg"); - background-repeat: no-repeat; - background-size: cover; + width: 100%; + height: 100%; + min-height: 100vh; + font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans CJK SC', Sathu, EucrosiaUPC, Arial, Helvetica, sans-serif; + background: url("../images/bg3.jpg"); + background-repeat: no-repeat; + background-size: cover; } -.network--content-wrap{ - /* margin: 5rem auto; */ - max-width: 80%; - margin: 3% auto; + +.network--content-wrap { + /* margin: 5rem auto; */ + max-width: 80%; + margin: 3% auto; } + .network--content { - display: flex; - align-items: center; - justify-content: space-around; - max-width: 90rem; - margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-around; + max-width: 90rem; + margin: 0 auto; } + .network--content__left { - width: 54%; + width: 54%; } + .network--content__left--image { - width: 100%; + width: 100%; } -.network--content__left--image--mobile{ - display: none; + +.network--content__left--image--mobile { + display: none; } + .network--content__right { - display: flex; - flex-direction: column; - justify-content: space-between; + display: flex; + flex-direction: column; + justify-content: space-between; } + .network--content__right--title { - font-size: 2.25rem; - font-weight: bold; - color: #333333; - margin-bottom: 3.125rem; + font-size: 2.25rem; + font-weight: bold; + color: #333333; + margin-bottom: 3.125rem; } + .network--content__right--model { - margin-bottom: 2.2815rem; + margin-bottom: 2.2815rem; } + .network--content__right--model__title { - font-size: 1.375rem; - font-weight: bold; - color: #333333; - line-height: 2.9375rem; + font-size: 1.375rem; + font-weight: bold; + color: #333333; + line-height: 2.9375rem; } + .network--content__right--model__desc { - font-size: 1.125rem; - font-weight: 400; - color: #333333; - line-height: 2.25rem; + font-size: 1.125rem; + font-weight: 400; + color: #333333; + line-height: 2.25rem; } + .network--content__right--operate { - margin-top: 4rem; - display: flex; - flex-wrap: wrap; - justify-content: center; + margin-top: 4rem; + display: flex; + flex-wrap: wrap; + justify-content: center; } + .network--content__right--operate__made { - width: 17.5rem; - height: 3.125rem; - line-height: 3.125rem; - background: rgba(38, 42, 47, .8); - border-radius: .25rem; - font-size: 1.125rem; - font-weight: 400; - text-align: center; - color: #FFFFFF; - cursor: pointer; + width: 17.5rem; + height: 3.125rem; + line-height: 3.125rem; + background: rgba(38, 42, 47, .8); + border-radius: .25rem; + font-size: 1.125rem; + font-weight: 400; + text-align: center; + color: #FFFFFF; + cursor: pointer; } + .network--content__right--operate__connect { - width: 17.5rem; - height: 3.125rem; - line-height: 3.125rem; - background: #FFFFFF; - border-radius: .25rem; - border: 3px solid rgba(38, 42, 47, 1); - font-size: 1.125rem; - font-weight: 400; - text-align: center; - color: rgba(38, 42, 47, 1); - margin-left: 2.4375rem; - cursor: pointer; - box-sizing: border-box; + width: 17.5rem; + height: 3.125rem; + line-height: 3.125rem; + background: #FFFFFF; + border-radius: .25rem; + border: 3px solid rgba(38, 42, 47, 1); + font-size: 1.125rem; + font-weight: 400; + text-align: center; + color: rgba(38, 42, 47, 1); + margin-left: 2.4375rem; + cursor: pointer; + box-sizing: border-box; } -.mask{ - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - background-color: rgba(0,0,0,.3); - z-index: 1; - display: none; + +.mask { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .3); + z-index: 1; + display: none; } + .secure-popup { - background: #FFFFFF; - box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51); - border-radius: 4px; - padding: 4.375rem 3.75rem; - position: fixed; - /* top: 26%; + background: #FFFFFF; + box-shadow: 0px 0px 3px 0px rgba(15, 80, 178, 0.51); + border-radius: 4px; + padding: 4.375rem 3.75rem; + position: fixed; + /* top: 26%; left: 36%; z-index: 90; */ - /* width: 32.5rem; + /* width: 32.5rem; height: 34.375rem; */ - z-index: 90; - width: 32.5rem; - left: 50%; - margin-left: -16.25rem; - height: 35rem; - top: 50%; - margin-top: -17.5rem; - box-sizing: border-box; + z-index: 90; + width: 32.5rem; + left: 50%; + margin-left: -16.25rem; + height: 35rem; + top: 50%; + margin-top: -17.5rem; + box-sizing: border-box; } + .popup-content__item { - margin-bottom: 1.25rem; + margin-bottom: 1.25rem; } + .popup-content__item2 { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } + .popup-content__btn { - width: 25rem; - height: 3.375rem; - background: rgba(38, 42, 47, .8); - border-radius: .25rem; - font-size: 1.25rem; - font-weight: 400; - color: #FFFFFF; - line-height: 3.375rem; - text-align: center; - cursor: pointer; + width: 25rem; + height: 3.375rem; + background: rgba(38, 42, 47, .8); + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #FFFFFF; + line-height: 3.375rem; + text-align: center; + cursor: pointer; } + .secure-popup__close { - position: fixed; - position: absolute; - right: 1.375rem; - top: 1.375rem; - cursor: pointer; + position: fixed; + position: absolute; + right: 1.375rem; + top: 1.375rem; + cursor: pointer; } + .input { - width: 22.4rem; - height: 3.375rem; - border: 1px solid #999999; - border-radius: .25rem; - font-size: 1.25rem; - font-weight: 400; - color: #333333; - padding: 0 1.25rem; + width: 22.4rem; + height: 3.375rem; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; } -.input.warning{ - border-color: red; + +.input.warning { + border-color: red; } -.input.warning::placeholder{ - color:red; + +.input.warning::placeholder { + color: red; } + .inputCode { - width: 10rem; - height: 3.375rem; - border: 1px solid #999999; - border-radius: .25rem; - font-size: 1.25rem; - font-weight: 400; - color: #333333; - padding: 0 1.25rem; + width: 10rem; + height: 3.375rem; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; } -.inputCode.warning{ - border-color: red; + +.inputCode.warning { + border-color: red; } -.inputCode.warning::placeholder{ - color:red; + +.inputCode.warning::placeholder { + color: red; } -#footer{ - /* margin-top: 9rem; */ - margin-top: 6%; + +#footer { + /* margin-top: 9rem; */ + margin-top: 6%; } /* 适配1360*768的电脑屏幕: */ /* 适配1366*768的电脑屏幕: */ /* 适配1440*900的电脑屏幕: */ /* 适配1400*1050的电脑屏幕: */ -@media screen and (min-width: 1360px) and (max-width: 1440px){ - /* CSS 样式 */ - .network--content { - max-width: 70rem; - margin: 0 auto; - } - .network--content__right--title { - font-size: 2.45rem!important; - margin-bottom: 2.5rem!important; - } - .network--content__right--operate__connect, - .network--content__right--operate__made { - width: 13rem; - } - .network--content__right--model { - margin-bottom: 1.5rem!important; - } - /* .secure-popup { +@media screen and (min-width: 1360px) and (max-width: 1440px) { + + /* CSS 样式 */ + .network--content { + max-width: 70rem; + margin: 0 auto; + } + + .network--content__right--title { + font-size: 2.45rem !important; + margin-bottom: 2.5rem !important; + } + + .network--content__right--operate__connect, + .network--content__right--operate__made { + width: 13rem; + } + + .network--content__right--model { + margin-bottom: 1.5rem !important; + } + + /* .secure-popup { top: 6rem!important; } */ } /* 适配1024*768的电脑屏幕 */ @media only screen and (max-width: 1024px) and (max-height: 768px) { - /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ - .network--content { - margin: 3rem 6.75rem 2rem!important; - } - .network--content__right--title { - font-size: 1.7rem!important; - margin-bottom: 1rem!important; - } - .network--content__right--model__title { - font-size: 1.25rem!important; - } - .network--content__right--model__desc { - font-size: 1rem!important; - } - .network--content__right--model{ - margin-bottom: 1rem!important; - } - .network--content__right--operate { - display: flex!important; - flex-wrap: nowrap!important; - margin-top: 0!important; - } - .network--content__right--operate__connect, - .network--content__right--operate__made { - width: 12rem!important; - height: 3rem!important; - line-height: 3rem!important; - font-size: 1rem!important; - } - .network--content__right--model { - margin-bottom: 1.5rem!important; - } - /* .secure-popup { + + /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ + .network--content { + margin: 3rem 6.75rem 2rem !important; + } + + .network--content__right--title { + font-size: 1.7rem !important; + margin-bottom: 1rem !important; + } + + .network--content__right--model__title { + font-size: 1.25rem !important; + } + + .network--content__right--model__desc { + font-size: 1rem !important; + } + + .network--content__right--model { + margin-bottom: 1rem !important; + } + + .network--content__right--operate { + display: flex !important; + flex-wrap: nowrap !important; + margin-top: 0 !important; + } + + .network--content__right--operate__connect, + .network--content__right--operate__made { + width: 12rem !important; + height: 3rem !important; + line-height: 3rem !important; + font-size: 1rem !important; + } + + .network--content__right--model { + margin-bottom: 1.5rem !important; + } + + /* .secure-popup { top: 3rem!important; } */ - .network--content__left { - width: 50%!important; - } - #footer{ - margin-top: 4.5rem; - } + .network--content__left { + width: 50% !important; + } + + #footer { + margin-top: 4.5rem; + } } /* 当屏幕宽度小于等于 768px 时,应用以下样式 */ @media screen and (max-width: 768px) { - /* 移动端样式 */ - .network--content-wrap{ - margin: 1rem 0; - } - .network--content { - margin: 0!important; - flex-wrap: wrap; - } - .network--content__left { - width: 100%!important; - height: auto!important; - margin: 2rem 0 3rem; - } - .network--content__left--image { - display: none; - width: 100%; - } - .network--content__left--image--mobile{ - display: block; - width: 90%; - margin: 0 auto; - } - - .network--content__right--title { - /* text-align: center; */ - padding: 0 1rem; - font-size: 1.5rem!important; - margin-bottom: 1.2rem!important; - } - .network--content__right--model { - padding: 0 1rem; - font-size: 1.25rem; - margin-bottom: 1.5rem; - } - .network--content__right--model__title{ - font-size: 1.25rem; - line-height: 2.4; - } - .network--content__right--model__desc { - font-size: 1rem!important; - line-height: 1.6; - } - .network--content__right--operate { - padding: 0 1rem; - margin-bottom: 6rem; - display: flex; - justify-content: space-between; - margin-top: 1rem; - } - .network--content__right--operate__made, - .network--content__right--operate__connect { - width: 10rem!important; - } - .network--content__right--operate__connect { - margin-left: 0!important; - } - .popup-content__item { - margin-bottom: 1.25rem; - } - .popup-content__item2 { - width: 18.8rem; - display: flex; - align-items: center; - justify-content: space-between; - } - .popup-content__btn { - width: 18.8rem!important; - height: 3rem!important; - line-height: 3rem!important; - } - /* .secure-popup{ + + /* 移动端样式 */ + .network--content-wrap { + margin: 1rem 0; + } + + .network--content { + margin: 0 !important; + flex-wrap: wrap; + } + + .network--content__left { + width: 100% !important; + height: auto !important; + margin: 2rem 0 3rem; + } + + .network--content__left--image { + display: none; + width: 100%; + } + + .network--content__left--image--mobile { + display: block; + width: 90%; + margin: 0 auto; + } + + .network--content__right--title { + /* text-align: center; */ + padding: 0 1rem; + font-size: 1.5rem !important; + margin-bottom: 1.2rem !important; + } + + .network--content__right--model { + padding: 0 1rem; + font-size: 1.25rem; + margin-bottom: 1.5rem; + } + + .network--content__right--model__title { + font-size: 1.25rem; + line-height: 2.4; + } + + .network--content__right--model__desc { + font-size: 1rem !important; + line-height: 1.6; + } + + .network--content__right--operate { + padding: 0 1rem; + margin-bottom: 6rem; + display: flex; + justify-content: space-between; + margin-top: 1rem; + } + + .network--content__right--operate__made, + .network--content__right--operate__connect { + width: 10rem !important; + } + + .network--content__right--operate__connect { + margin-left: 0 !important; + } + + .popup-content__item { + margin-bottom: 1.25rem; + } + + .popup-content__item2 { + width: 18.8rem; + display: flex; + align-items: center; + justify-content: space-between; + } + + .popup-content__btn { + width: 18.8rem !important; + height: 3rem !important; + line-height: 3rem !important; + } + + /* .secure-popup{ padding: 2.5rem 1.5rem!important; top: 15%!important; left: 4%!important; @@ -341,43 +398,49 @@ body { margin-left: 0; margin-top: 0; } */ - .secure-popup { - width: 22rem; - height: 30rem; - FONT-WEIGHT: 200; - margin-left: -11rem; - margin-top: -15rem; - padding: 3rem 1.5rem 0 1.5rem; - } - .secure-popup__close { - top: 1.075rem!important; - } - .input { - width: 16.3rem!important; - height: 3rem!important; - line-height: 3rem!important; - font-size: 1rem; - } - .inputCode { - width: 6.3rem; - height: 3rem; - height: 3rem!important; - border: 1px solid #999999; - border-radius: .25rem; - font-size: 1rem; - font-weight: 400; - color: #333333; - padding: 0 1.25rem; - } - .codeImage { - width: 8rem; - height: 3rem; - } - .img { - width: 100%; - height: 100%; - } - #footer{ - margin-top: 1rem; - } -} + .secure-popup { + width: 22rem; + height: 30rem; + FONT-WEIGHT: 200; + margin-left: -11rem; + margin-top: -15rem; + padding: 3rem 1.5rem 0 1.5rem; + } + + .secure-popup__close { + top: 1.075rem !important; + } + + .input { + width: 16.3rem !important; + height: 3rem !important; + line-height: 3rem !important; + font-size: 1rem; + } + + .inputCode { + width: 6.3rem; + height: 3rem; + height: 3rem !important; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; + } + + .codeImage { + width: 8rem; + height: 3rem; + } + + .img { + width: 100%; + height: 100%; + } + + #footer { + margin-top: 1rem; + } +} \ No newline at end of file diff --git a/header.html b/header.html index a56c45c..24162e9 100644 --- a/header.html +++ b/header.html @@ -1,46 +1,52 @@ - - -