237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(frontend): improve 2k/4k scaling and mobile overflow responsiveness

Browse Source
This commit is contained in:
yuyx
2026-02-12 20:28:08 +08:00
parent 12859cbb20
commit 8193101566
6 changed files with 187 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/app.html
View File

@@ -6006,6 +6006,120 @@
} }
</style> </style>
<script src="app.js?v=20260212005"></script> <style>
/* ===== Responsive Scale & Overflow Fix v1 ===== */
body.enterprise-netdisk,
body.enterprise-netdisk #app {
overflow-x: hidden;
}
body.enterprise-netdisk .files-content-head,
body.enterprise-netdisk .files-content-head-meta,
body.enterprise-netdisk .files-content-head-actions,
body.enterprise-netdisk .files-head-view-toggle,
body.enterprise-netdisk .files-content-shell {
min-width: 0;
}
body.enterprise-netdisk .files-head-usage-progress {
max-width: 100%;
}
body.enterprise-netdisk .files-head-usage-progress-text {
display: block;
width: 100%;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
@media (max-width: 480px) {
body.enterprise-netdisk .files-content-head-actions {
grid-template-columns: 1fr;
}
body.enterprise-netdisk .files-head-view-toggle {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.enterprise-netdisk .files-head-action-btn,
body.enterprise-netdisk .files-head-folder-btn,
body.enterprise-netdisk .files-head-view-toggle .btn {
min-width: 0;
}
body.enterprise-netdisk .modal-content {
max-width: calc(100vw - 16px);
}
}
@media (min-width: 1920px) {
body.enterprise-netdisk .main-container {
max-width: 1680px;
}
body.enterprise-netdisk .card {
padding: 24px;
}
body.enterprise-netdisk .files-view-card {
padding: 14px 16px 12px;
}
body.enterprise-netdisk .files-content-head.files-content-head-compact .files-content-title {
font-size: 14px;
}
body.enterprise-netdisk .files-head-action-btn,
body.enterprise-netdisk .files-head-view-toggle .btn {
font-size: 13px;
padding: 7px 12px;
}
body.enterprise-netdisk .files-head-usage-progress {
width: 320px;
height: 26px;
}
body.enterprise-netdisk .files-head-usage-progress-text {
font-size: 12px;
}
body.enterprise-netdisk .file-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
}
@media (min-width: 2560px) {
body.enterprise-netdisk .main-container {
max-width: 1980px;
}
body.enterprise-netdisk .navbar {
padding: 14px 28px;
}
body.enterprise-netdisk .card {
padding: 28px;
}
body.enterprise-netdisk .files-head-usage-progress {
width: 360px;
height: 28px;
}
body.enterprise-netdisk .files-head-usage-progress-text {
font-size: 13px;
}
body.enterprise-netdisk .file-grid {
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
}
</style>
<script src="app.js?v=20260212006"></script>
</body> </body>
</html> </html>

2
frontend/index.html
View File

@@ -16,7 +16,7 @@
})(); })();
</script> </script>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="landing.css?v=20260212006"> <link rel="stylesheet" href="landing.css?v=20260212007">
</head> </head>
<body> <body>
<div class="page"> <div class="page">

68
frontend/landing.css
View File

@@ -4,6 +4,17 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
overflow-x: hidden;
}
img,
video,
svg {
max-width: 100%;
height: auto;
}
:root { :root {
--bg-page: #f4f7fb; --bg-page: #f4f7fb;
--bg-card: #ffffff; --bg-card: #ffffff;
@@ -317,6 +328,12 @@ body.theme-dark .hero-tag {
.slide-row strong { .slide-row strong {
color: var(--text-main); color: var(--text-main);
font-weight: 700; font-weight: 700;
min-width: 0;
max-width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
} }
.slide-progress { .slide-progress {
@@ -641,6 +658,57 @@ body.theme-dark .cta-panel {
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (min-width: 1920px) {
:root {
--max-width: 1480px;
}
body {
font-size: 16px;
}
.hero {
padding: 32px;
gap: 28px;
}
.hero-title {
font-size: clamp(38px, 3vw, 56px);
}
.section,
.page-banner {
padding: 24px;
}
.carousel {
min-height: 400px;
}
}
@media (min-width: 2560px) {
:root {
--max-width: 1760px;
}
body {
font-size: 17px;
}
.hero {
padding: 36px;
}
.carousel {
min-height: 430px;
}
.section,
.page-banner {
padding: 28px;
}
}
@media (max-width: 1060px) { @media (max-width: 1060px) {
.hero { .hero {
grid-template-columns: 1fr; grid-template-columns: 1fr;

2
frontend/product.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品能力 - 玩玩云</title> <title>产品能力 - 玩玩云</title>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="landing.css?v=20260212006"> <link rel="stylesheet" href="landing.css?v=20260212007">
</head> </head>
<body> <body>
<div class="page"> <div class="page">

2
frontend/scenes.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>应用场景 - 玩玩云</title> <title>应用场景 - 玩玩云</title>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="landing.css?v=20260212006"> <link rel="stylesheet" href="landing.css?v=20260212007">
</head> </head>
<body> <body>
<div class="page"> <div class="page">

2
frontend/start.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快速开始 - 玩玩云</title> <title>快速开始 - 玩玩云</title>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="landing.css?v=20260212006"> <link rel="stylesheet" href="landing.css?v=20260212007">
</head> </head>
<body> <body>
<div class="page"> <div class="page">