优化欢迎页面的手机端兼容性

This commit is contained in:
2023-09-27 10:32:36 +08:00
parent 7f5483c46d
commit 6b665f50ad
2 changed files with 69 additions and 50 deletions

View File

@@ -10,6 +10,7 @@ $skip_files[] = 'app/common/app/middleware.php';
$skip_files[] = 'app/common/app/service.php'; $skip_files[] = 'app/common/app/service.php';
$skip_files[] = 'app/common/app/provider.php'; $skip_files[] = 'app/common/app/provider.php';
$skip_files[] = 'composer.lock'; $skip_files[] = 'composer.lock';
$skip_files[] = '.example.env';
$skip_files[] = 'README.md'; $skip_files[] = 'README.md';
$skip_files[] = 'README.en.md'; $skip_files[] = 'README.en.md';
$skip_files[] = 'composer.json'; $skip_files[] = 'composer.json';
@@ -55,6 +56,8 @@ $append_files[] = 'app/common/app/middleware.php';
$append_files[] = 'app/common/app/service.php'; $append_files[] = 'app/common/app/service.php';
$append_files[] = 'app/common/app/provider.php'; $append_files[] = 'app/common/app/provider.php';
$append_files[] = '.example.env';
$append_files[] = 'app/common/event/AdminLoginSuccess/LogEvent.php'; $append_files[] = 'app/common/event/AdminLoginSuccess/LogEvent.php';
$append_files[] = 'app/common/event/AdminLoginType/DemoEvent.php'; $append_files[] = 'app/common/event/AdminLoginType/DemoEvent.php';

View File

@@ -2,7 +2,9 @@
content from file: common.css content from file: common.css
*/ */
/****************** 系統配置 ******************/ /****************** 系統配置 ******************/
html, body, p { html,
body,
p {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@@ -15,30 +17,6 @@ html, body, p {
margin-left: auto margin-left: auto
} }
@media (min-width: 576px) {
.container {
max-width: 540px
}
}
@media (min-width: 768px) {
.container {
max-width: 720px
}
}
@media (min-width: 992px) {
.container {
max-width: 960px
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px
}
}
.float-left { .float-left {
float: left float: left
} }
@@ -90,7 +68,8 @@ table {
margin-top: 15px; margin-top: 15px;
} }
.clearfix:after, .clearfix:before { .clearfix:after,
.clearfix:before {
content: " "; content: " ";
display: table display: table
} }
@@ -104,6 +83,7 @@ header {
padding: 10px 16.8%; padding: 10px 16.8%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.logo-box { .logo-box {
@@ -117,20 +97,26 @@ header {
header .right { header .right {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
.navbar { .navbar {
margin-right: 40px; margin-right: 40px;
display: flex; display: flex;
padding: 10px 0
} }
.navbar-item { .navbar-item {
margin-left: 30px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.navbar-item:not(:first-child) {
margin-left: 30px;
}
.navbar-item.active { .navbar-item.active {
color: #36C182; color: #36C182;
padding-bottom: 5px; padding-bottom: 5px;
@@ -153,7 +139,8 @@ header iframe {
/****************** 捐赠 ******************/ /****************** 捐赠 ******************/
.d-banner h1, .d-banner p { .d-banner h1,
.d-banner p {
text-align: center; text-align: center;
} }
@@ -190,7 +177,7 @@ header iframe {
border-bottom: 2px solid #dee2e6; border-bottom: 2px solid #dee2e6;
} }
.table tbody + tbody { .table tbody+tbody {
border-top: 2px solid #dee2e6; border-top: 2px solid #dee2e6;
} }
@@ -254,8 +241,7 @@ footer a {
margin-bottom: 15px; margin-bottom: 15px;
} }
.beian-number { .beian-number {}
}
/** /**
content from file: home.css content from file: home.css
@@ -281,7 +267,7 @@ footer a {
} }
.title .desc { .title .desc {
width: 729px;
font-size: 22px; font-size: 22px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@@ -297,7 +283,8 @@ footer a {
justify-content: center; justify-content: center;
} }
.title .operation button, .title .operation a { .title .operation button,
.title .operation a {
width: 123px; width: 123px;
height: 47px; height: 47px;
border: 1px solid rgb(0, 177, 236); border: 1px solid rgb(0, 177, 236);
@@ -356,7 +343,7 @@ footer a {
} }
.introduction { .introduction {
padding: 75px 0 110px; padding: 75px 15px 110px;
background: #f8f8f8; background: #f8f8f8;
} }
@@ -386,7 +373,6 @@ footer a {
} }
.introduction .top .part-desc { .introduction .top .part-desc {
width: 808px;
font-size: 14px; font-size: 14px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
font-weight: 400; font-weight: 400;
@@ -400,26 +386,20 @@ footer a {
max-width: 1100px; max-width: 1100px;
margin: 110px auto 0; margin: 110px auto 0;
display: flex; display: flex;
justify-content: space-between; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.introduction .bottom .item { .introduction .bottom .item {
width: 294px; width: 25%;
margin-right: 108px; margin: 3%;
} }
.introduction .bottom .item.shadow{ .introduction .bottom .item.shadow {
box-shadow: 0 0 6px #999; box-shadow: 0 0 6px #999;
} }
.introduction .bottom .item:nth-child(n+4) {
margin-top: 90px;
}
.introduction .bottom .item:nth-child(3n+3) {
margin-right: 0;
}
.introduction .bottom .item-title { .introduction .bottom .item-title {
display: flex; display: flex;
@@ -467,14 +447,15 @@ footer a {
} }
} }
.site-footer ul, .site-footer li { .site-footer ul,
.site-footer li {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.site-footer a { .site-footer a {
color:rgb(60, 85, 93); color: rgb(60, 85, 93);
line-height: 1.6em; line-height: 1.6em;
font-weight: normal; font-weight: normal;
} }
@@ -718,7 +699,7 @@ footer a {
border-bottom: 1px dotted #cfcfcf; border-bottom: 1px dotted #cfcfcf;
} }
.info-item + .info-item { .info-item+.info-item {
padding-top: 20px; padding-top: 20px;
} }
@@ -740,7 +721,7 @@ footer a {
} }
.info-item .detail p + p { .info-item .detail p+p {
margin-top: 8px; margin-top: 8px;
} }
@@ -758,3 +739,38 @@ footer a {
line-height: 36px; line-height: 36px;
margin-bottom: 12px; margin-bottom: 12px;
} }
@media (min-width: 576px) {
.container {
max-width: 540px
}
}
@media (min-width: 768px) {
.container {
max-width: 720px
}
}
@media (min-width: 992px) {
.container {
max-width: 960px
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px
}
}
@media (max-width:768px) {
header {
padding: 10px;
}
.introduction .bottom .item {
width: 80%;
}
}