From 1d353f4af3a128276831db64afe8d8010f52a187 Mon Sep 17 00:00:00 2001 From: myTest383
Date: Wed, 30 Apr 2025 17:49:53 +0800 Subject: [PATCH] 111 --- business.html | 385 ++++++++++++++++++++++++++++++++++++++++ css/business.css | 447 +++++++++++++++++++++++++++++++++++++++++++++++ css/network.css | 37 ++-- css/serve.css | 25 ++- header.html | 4 +- login.html | 3 +- network.html | 151 +++++++++------- secure.html | 51 +++--- serve.html | 219 +++++++++++++++-------- 9 files changed, 1146 insertions(+), 176 deletions(-) create mode 100644 business.html create mode 100644 css/business.css diff --git a/business.html b/business.html new file mode 100644 index 0000000..feca227 --- /dev/null +++ b/business.html @@ -0,0 +1,385 @@ + + + + + + + 个人中心 + + + + + +
+
+ + + +
+
+ +

带分页的网络数据表格

+ +
+
+ + +
+
+ 每页显示: + +
+
+ + + + +
+ + + + + + + + + + + + + + + + + + + +
序号客户名称录入人名称我方签订人甲方签订人签定时间终止时间合同金额发票情况回款情况备注
+
+ + + + +
+
+
+ + +
+ + + + + + + diff --git a/css/business.css b/css/business.css new file mode 100644 index 0000000..a119e35 --- /dev/null +++ b/css/business.css @@ -0,0 +1,447 @@ +/* 公共样式 */ +body { + margin: 0; + padding: 0; + overflow-x: hidden; +} +/* 整个背景图 */ +.secure { + width: 100%; + height: 100%; + min-height: 100vh; + font-family: 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif; + background: url("../images/bg4.jpg"); + background-repeat: no-repeat; + background-size: cover; +} +/* 右侧图 */ +/* .secure-box { + width: 100%; + min-height: 100vh; + background: url("../images/img2.png"); + background-repeat: no-repeat; + background-position: right top; + background-size: contain; +} */ +.secure-content-wrap{ + /* padding: 8rem 0; */ + padding: 5% 0; +} +.secure-content { + max-width: 90%; + display: flex; + margin: 0 auto; + /* padding: 2rem 0; */ +} +.secure-content__left{ + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 0 1rem; +} +.secure-content__right{ + width: 50%; + padding: 0 1rem; +} +.secure--content__right--image{ + width:100%; +} +.secure-content--title { + font-size: 2.25rem; + font-weight: bold; + color: #333333; + line-height: 3.875rem; +} +.secure-content--model { + font-size: 1.375rem; + font-weight: 400; + color: #333333; + line-height: 3.25rem; + margin-top: 2rem; + margin-bottom: 5.0625rem; +} +.secure-content--model__item { + display: flex; + align-items: center; +} +.secure-content--model__round { + width: .4375rem; + height: .4375rem; + background: #333333; + border-radius: 50%; + margin-right: 1rem; +} +.secure-content--operate { + display: flex; + justify-content: center; + /* margin-top: 5rem; */ + margin-top: 8%; +} +.secure-content--operate__made { + width: 17.5rem; + height: 3.125rem; + line-height: 3.125rem; + background: rgba(38, 42, 47, .8); + border-radius: .25rem; + font-size: 1.125rem; + font-weight: 400; + text-align: center; + color: #FFFFFF; + cursor: pointer; +} +.secure-content--operate__connect { + width: 17.5rem; + height: 3.125rem; + line-height: 3.125rem; + background: #FFFFFF; + border-radius: .25rem; + border: 3px solid rgba(38, 42, 47, 1); + font-size: 1.125rem; + font-weight: 400; + text-align: center; + color: rgba(38, 42, 47, 1); + margin-left: 2.4375rem; + cursor: pointer; + box-sizing: border-box; +} +.mask{ + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + background-color: rgba(0,0,0,.3); + z-index: 1; + display: none; +} +.secure-popup { + background: #FFFFFF; + box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51); + border-radius: 4px; + padding: 4.375rem 3.75rem; + position: fixed; + /* top: 26%; + left: 36%; */ + z-index: 90; + width: 32.5rem; + left: 50%; + margin-left: -16.25rem; + height: 35rem; + top: 50%; + margin-top: -17.5rem; + box-sizing: border-box; +} +.tc-popup { + background: #FFFFFF; + box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51); + border-radius: 4px; + padding: 4.375rem 3.75rem; + position: fixed; + /* top: 26%; + left: 36%; */ + z-index: 90; + width: 32.5rem; + left: 25%; + margin-left: -16.25rem; + height: 40rem; + top: 50%; + margin-top: -17.5rem; + box-sizing: border-box; +} +.popup-content__item { + margin-bottom: 1.25rem; +} +.popup-content__item2 { + display: flex; + justify-content: space-between; +} +.popup-content__btn { + width: 25rem; + height: 3.375rem; + background: rgba(38, 42, 47, .8); + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #FFFFFF; + line-height: 3.375rem; + text-align: center; + cursor: pointer; +} +.secure-popup__close { + position: fixed; + position: absolute; + right: 1.375rem; + top: 1.375rem; + cursor: pointer; +} +.input { + width: 22.4rem; + height: 3.375rem; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; +} +.input.warning{ + border-color: red; +} +.input.warning::placeholder{ + color:red; +} +.inputCode { + width: 10rem; + height: 3.375rem; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1.25rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; +} +.inputCode.warning{ + border-color: red; +} +.inputCode.warning::placeholder{ + color:red; +} +#footer{ + /* margin-top: 12.5rem; */ + margin-top: 3%; +} + + +h1 { + color: #333; +} +table { + border-collapse: collapse; + width: 100%; + margin-top: 20px; +} +th, td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; +} +th { + background-color: #f2f2f2; + position: sticky; + top: 0; +} +tr:nth-child(even) { + background-color: #f9f9f9; +} +tr:hover { + background-color: #f1f1f1; +} +.loading { + text-align: center; + padding: 20px; + font-style: italic; + color: #666; +} +.error { + color: red; + padding: 20px; +} +button { + padding: 8px 16px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + margin: 5px; +} +button:hover { + background-color: #45a049; +} +button:disabled { + background-color: #cccccc; + cursor: not-allowed; +} +.pagination { + display: flex; + justify-content: center; + margin-top: 20px; +} +.pagination button { + margin: 0 5px; +} +.page-info { + margin: 0 15px; + line-height: 36px; +} +.controls { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} +.page-size-selector { + padding: 8px; + border-radius: 4px; + border: 1px solid #ddd; +} + + + +/* 适配1360*768的电脑屏幕： */ +/* 适配1366*768的电脑屏幕： */ +/* 适配1440*900的电脑屏幕： */ +/* 适配1400*1050的电脑屏幕： */ +@media screen and (min-width: 1360px) and (max-width: 1440px){ + /* CSS 样式 */ + /* .secure-popup { + top: 6rem!important; + } */ + /* .secure-content-wrap{ + padding: 2% 0; + } */ + .secure-content--operate{ + margin-top: 3%; + } + /* .secure-content{ + max-width: 80%; + } */ +} + +/* 适配1024*768的电脑屏幕 */ +@media only screen and (max-width: 1024px) and (max-height: 768px) { + /* 在屏幕宽度小于等于1024px且屏幕高度小于等于768px时应用以下样式 */ + .secure-content--title { + font-size: 1.7rem; + line-height: 0rem; + } + .secure-content--model { + font-size: 1.125rem; + } + .secure-content { + max-width: 60rem; + margin: 0 auto; + } + .secure-content--model { + margin-top: 3rem; + margin-bottom: 2rem; + } + .secure-content--operate { + display: flex; + justify-content: center; + } + .secure-content--operate__made, + .secure-content--operate__connect { + width: 12rem!important; + } + /* .secure-popup { + top: 3rem!important; + } */ + #footer { + margin-top: 0rem; + } +} + +/* 当屏幕宽度小于等于 768px 时，应用以下样式 */ +@media screen and (max-width: 768px) { + /* 移动端样式 */ + .secure-content-wrap{ + padding: 1rem 0 4rem 0; + } + .secure-box { + background: none!important; + } + .secure-content { + flex-wrap: wrap; + width: auto!important; + /* margin-top: 2rem!important; */ + margin-left: 0!important; + /* margin-bottom: 6rem!important; */ + padding-top: 0; + } + .secure-content__right{ + width: 90% !important; + margin: 0 auto; + } + .secure-content--title { + font-size: 1.5rem!important; + /* text-align: center; */ + padding: 0 1rem; + } + .secure-content--model { + margin-top: 0.5rem!important; + } + .secure-content--model__item { + display: flex; + align-items: baseline!important; + padding: 0 1rem; + font-size: 1rem; + line-height: 1.5; + margin-top: 1rem; + } + .secure-content--operate { + padding: 0 1rem; + display: flex; + justify-content: space-between; + margin-top: 1rem; + } + .popup-content__item { + margin-bottom: 1.25rem; + } + .popup-content__item2 { + width: 18.8rem; + display: flex; + align-items: center; + justify-content: space-between; + } + .popup-content__btn { + width: 18.8rem!important; + height: 3rem!important; + line-height: 3rem!important; + } + /* .secure-popup{ + padding: 2.5rem 1.5rem!important; + top: 15%!important; + left: 4%!important; + width: auto; + height: auto; + margin-left: 0; + margin-top: 0; + } */ + .secure-popup { + width: 22rem; + height: 30rem; + FONT-WEIGHT: 200; + margin-left: -11rem; + margin-top: -15rem; + padding: 3rem 1.5rem 0 1.5rem; + } + .secure-popup__close { + top: 1.075rem!important; + } + .input { + width: 16.3rem!important; + height: 3rem!important; + line-height: 3rem!important; + font-size: 1rem; + } + .inputCode { + width: 6.3rem; + height: 3rem; + height: 3rem!important; + border: 1px solid #999999; + border-radius: .25rem; + font-size: 1rem; + font-weight: 400; + color: #333333; + padding: 0 1.25rem; + } + .codeImage { + width: 8rem; + height: 3rem; + } + .img { + width: 100%; + height: 100%; + } +} diff --git a/css/network.css b/css/network.css index 5896c4a..fb6d55f 100644 --- a/css/network.css +++ b/css/network.css @@ -142,7 +142,23 @@ body { margin-top: -17.5rem; box-sizing: border-box; } - +.tc-popup { + background: #FFFFFF; + box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51); + border-radius: 4px; + padding: 4.375rem 3.75rem; + position: fixed; + /* top: 26%; + left: 36%; */ + z-index: 90; + width: 32.5rem; + left: 25%; + margin-left: -16.25rem; + height: 40rem; + top: 50%; + margin-top: -17.5rem; + box-sizing: border-box; +} .popup-content__item { margin-bottom: 1.25rem; } @@ -166,11 +182,11 @@ body { } .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 { @@ -406,10 +422,9 @@ body { margin-top: -15rem; padding: 3rem 1.5rem 0 1.5rem; } - - .secure-popup__close { - top: 1.075rem !important; - } + .secure-popup__close { + top: 1.075rem!important; + } .input { width: 16.3rem !important; @@ -443,4 +458,4 @@ body { #footer { margin-top: 1rem; } -} \ No newline at end of file +} diff --git a/css/serve.css b/css/serve.css index ee095ee..9338f11 100644 --- a/css/serve.css +++ b/css/serve.css @@ -228,6 +228,23 @@ body { margin-top: -17.5rem; box-sizing: border-box; } +.tc-popup { + background: #FFFFFF; + box-shadow: 0px 0px 3px 0px rgba(15,80,178,0.51); + border-radius: 4px; + padding: 4.375rem 3.75rem; + position: fixed; + /* top: 26%; + left: 36%; */ + z-index: 90; + width: 32.5rem; + left: 25%; + margin-left: -16.25rem; + height: 40rem; + top: 50%; + margin-top: -17.5rem; + box-sizing: border-box; +} .popup-content__item { margin-bottom: 1.25rem; } @@ -429,7 +446,7 @@ body { line-height: 1.5 !important; padding: 1rem 0 !important; } - + .serve--secure{ height: auto !important; } @@ -491,7 +508,7 @@ body { .serve-package-wrap{ padding: 0 !important; } - .serve-package__left, + .serve-package__left, .serve-package__left--desc__price{ width: auto!important; margin: 1.625rem 0!important; @@ -500,7 +517,7 @@ body { } .serve-package__left--desc { padding-top: 1.5rem; - } + } .serve-package__left { padding: 0 1.5rem!important; } @@ -601,4 +618,4 @@ body { height: 100%; width: 100%; } -} \ No newline at end of file +} diff --git a/header.html b/header.html index a08ea93..32e0331 100644 --- a/header.html +++ b/header.html @@ -43,7 +43,7 @@ diff --git a/login.html b/login.html index 5f3d721..8d4b115 100644 --- a/login.html +++ b/login.html @@ -230,9 +230,8 @@ // const sessionValue = sessionStorage.getItem('token'); // const userName = sessionStorage.getItem('userName'); - var cook = document.cookie; // 存储数据 - localStorage.setItem('token', cook.substring(6, document.cookie.length)); + localStorage.setItem('token', document.cookie); localStorage.setItem('userName', resp.enterpriseName+""); localStorage.setItem('isLogin', resp.result); } else { diff --git a/network.html b/network.html index aaf86db..73604ed 100644 --- a/network.html +++ b/network.html @@ -49,27 +49,27 @@ -
- + + + + + + + + + + + + + + + + + + + + + - + - + + + +