admin/hyapp-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui修改

Browse Source
This commit is contained in:
zhx 2026-06-25 14:20:07 +08:00
parent 64d64c93da
commit 14c7912f26
3 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
activity/cp/index.html
View File

@ -8,7 +8,7 @@
/> />
<title>Last Weekly CP</title> <title>Last Weekly CP</title>
<link rel="stylesheet" href="../../common/theme.css?v=20260608-cp" /> <link rel="stylesheet" href="../../common/theme.css?v=20260608-cp" />
<link rel="stylesheet" href="./style.css?v=20260608-cp" /> <link rel="stylesheet" href="./style.css?v=20260625-cp-width768" />
</head> </head>
<body> <body>
<div class="app-viewport" id="appViewport"> <div class="app-viewport" id="appViewport">
@ -175,6 +175,6 @@
</script> </script>
<script src="../../common/i18n.js?v=20260608-cp"></script> <script src="../../common/i18n.js?v=20260608-cp"></script>
<script src="../../common/api.js?v=20260608-cp"></script> <script src="../../common/api.js?v=20260608-cp"></script>
<script src="./script.js?v=20260608-cp"></script> <script src="./script.js?v=20260625-cp-width768"></script>
</body> </body>
</html> </html>

30
activity/cp/script.js
View File

@ -1,6 +1,6 @@
(function () { (function () {
var DESIGN_WIDTH = 1080; var DESIGN_WIDTH = 1080;
var VIEWPORT_WIDTH = 375; var MAX_PAGE_WIDTH = 768;
var STORAGE_KEY = 'hy_cp_activity_end_at'; var STORAGE_KEY = 'hy_cp_activity_end_at';
var stageHeights = { var stageHeights = {
plaza: 4283, plaza: 4283,
@ -488,20 +488,32 @@
page.setAttribute('data-tab', activeTab); page.setAttribute('data-tab', activeTab);
} }
function getPageWidth() {
var viewportWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
DESIGN_WIDTH;
return Math.min(Math.max(viewportWidth, 1), MAX_PAGE_WIDTH);
}
function updateStageHeight() { function updateStageHeight() {
var designHeight = stageHeights[activeTab] || stageHeights.plaza; var designHeight = stageHeights[activeTab] || stageHeights.plaza;
var pageWidth = getPageWidth();
var designScale = pageWidth / DESIGN_WIDTH;
stage.style.minHeight = designHeight + 'px'; stage.style.minHeight = designHeight + 'px';
stage.style.height = designHeight + 'px'; stage.style.height = designHeight + 'px';
stageWrap.style.height = // 页面保持 1080 设计稿坐标系，大屏只放大到 768px，避免桌面或平板 WebView 把活动页拉得过宽。
Math.ceil(designHeight * (VIEWPORT_WIDTH / DESIGN_WIDTH)) + 'px';
copyright.style.top = designHeight - 77 + 'px';
var scale = Math.min(window.innerWidth / VIEWPORT_WIDTH, 1);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--app-scale', '--page-width',
String(scale) pageWidth + 'px'
); );
document.body.style.minHeight = document.documentElement.style.setProperty(
Math.ceil(stageWrap.offsetHeight * scale) + 'px'; '--design-scale',
String(designScale)
);
stageWrap.style.height = Math.ceil(designHeight * designScale) + 'px';
copyright.style.top = designHeight - 77 + 'px';
document.body.style.minHeight = stageWrap.style.height;
viewport.style.minHeight = stageWrap.style.height; viewport.style.minHeight = stageWrap.style.height;
page.style.minHeight = stageWrap.style.height; page.style.minHeight = stageWrap.style.height;
} }

14
activity/cp/style.css
View File

@ -4,7 +4,7 @@
} }
:root { :root {
--app-scale: 1; --page-width: 375px;
--design-scale: 0.3472222222; --design-scale: 0.3472222222;
--cp-red: #c52d45; --cp-red: #c52d45;
--cp-dark-red: #8c2130; --cp-dark-red: #8c2130;
@ -38,16 +38,17 @@ button {
.app-viewport { .app-viewport {
position: relative; position: relative;
width: 375px; width: var(--page-width);
max-width: 768px;
min-height: 1300px; min-height: 1300px;
margin: 0 auto; margin: 0 auto;
transform: scale(var(--app-scale)); overflow: hidden;
transform-origin: top center;
} }
.page { .page {
position: relative; position: relative;
width: 375px; width: var(--page-width);
max-width: 768px;
min-height: 1300px; min-height: 1300px;
overflow: hidden; overflow: hidden;
background: var(--cp-red); background: var(--cp-red);
@ -55,7 +56,8 @@ button {
.stage-wrap { .stage-wrap {
position: relative; position: relative;
width: 375px; width: var(--page-width);
max-width: 768px;
height: 1487px; height: 1487px;
overflow: hidden; overflow: hidden;
background: var(--cp-red); background: var(--cp-red);