aiotagro/niumalll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
aiotagro
2025-09-12 20:19:08 +08:00
parent 26fa7d105f
commit 85fb53d57c
5 changed files with 881 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
website/css/responsive.css
View File

@@ -1,6 +1,100 @@
/* 移动端响应式优化样式 */
/* 移动设备优先设计 */
/* 超小屏幕设备 (小于576px) */
@media (max-width: 575.98px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.hero-section {
padding: 80px 0 30px;
}
.hero-title {
font-size: 1.75rem;
}
.hero-features .col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.hero-stats .col-4 {
flex: 0 0 50%;
max-width: 50%;
}
.hero-stats .col-4:nth-child(3) {
flex: 0 0 100%;
max-width: 100%;
margin-top: 0.5rem;
}
.btn {
font-size: 0.9rem;
padding: 0.6rem 1.2rem;
}
.modal-dialog {
margin: 0.5rem;
}
.demo-header {
padding: 2rem 0;
padding-top: 120px;
}
.demo-header h1 {
font-size: 2rem;
}
.demo-nav-item {
font-size: 0.85rem;
padding: 0.75rem;
}
.metric-number {
font-size: 1.75rem;
}
.chart-container {
height: 200px;
}
/* 超小屏幕新增优化 */
.xs-container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.xs-section {
padding: 1.5rem 0;
}
.xs-card {
margin-bottom: 0.75rem;
border-radius: 8px;
}
.xs-text-center {
text-align: center;
}
.xs-mb-2 {
margin-bottom: 0.5rem;
}
.xs-mt-2 {
margin-top: 0.5rem;
}
.xs-p-2 {
padding: 0.5rem;
}
}
/* 移动设备优先设计 (小于768px) */
@media (max-width: 767.98px) {
/* 导航栏优化 */
.navbar {
@@ -164,7 +258,7 @@
}
}
/* 平板设备优化 */
/* 平板设备优化 (768px 到 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-title {
font-size: 2.5rem;
@@ -198,9 +292,57 @@
.tablet-card {
margin-bottom: 1.5rem;
}
.tablet-text-left {
text-align: left;
}
.tablet-d-flex {
display: flex;
}
}
/* 大屏幕优化 */
/* 中等屏幕设备优化 (992px 到 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.container {
max-width: 960px;
}
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.dashboard-card {
padding: 1.5rem;
}
.metric-number {
font-size: 2.5rem;
}
/* 中等屏幕新增优化 */
.md-container {
max-width: 960px;
}
.md-section {
padding: 4rem 0;
}
.md-card {
transition: all 0.3s ease;
}
.md-card:hover {
transform: translateY(-5px);
}
}
/* 大屏幕优化 (1200px 及以上) */
@media (min-width: 1200px) {
.container {
max-width: 1200px;
@@ -238,6 +380,38 @@
.desktop-card:hover {
transform: translateY(-10px);
}
.desktop-text-left {
text-align: left;
}
.desktop-d-flex {
display: flex;
}
}
/* 超大屏幕优化 (1400px 及以上) */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
.hero-title {
font-size: 4.5rem;
}
.hero-subtitle {
font-size: 1.5rem;
}
/* 超大屏幕新增优化 */
.xxl-container {
max-width: 1500px;
}
.xxl-section {
padding: 6rem 0;
}
}
/* 触摸设备优化 */
@@ -356,69 +530,6 @@
}
}
/* 超小屏幕设备 */
@media (max-width: 575.98px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.hero-section {
padding: 80px 0 30px;
}
.hero-title {
font-size: 1.75rem;
}
.hero-features .col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.hero-stats .col-4 {
flex: 0 0 50%;
max-width: 50%;
}
.hero-stats .col-4:nth-child(3) {
flex: 0 0 100%;
max-width: 100%;
margin-top: 0.5rem;
}
.btn {
font-size: 0.9rem;
padding: 0.6rem 1.2rem;
}
.modal-dialog {
margin: 0.5rem;
}
.demo-header {
padding: 2rem 0;
padding-top: 120px;
}
.demo-header h1 {
font-size: 2rem;
}
.demo-nav-item {
font-size: 0.85rem;
padding: 0.75rem;
}
.metric-number {
font-size: 1.75rem;
}
.chart-container {
height: 200px;
}
}
/* 打印样式优化 */
@media print {
.navbar,