ui修改
This commit is contained in:
parent
64d64c93da
commit
14c7912f26
@ -8,7 +8,7 @@
|
||||
/>
|
||||
<title>Last Weekly CP</title>
|
||||
<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>
|
||||
<body>
|
||||
<div class="app-viewport" id="appViewport">
|
||||
@ -175,6 +175,6 @@
|
||||
</script>
|
||||
<script src="../../common/i18n.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>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
var DESIGN_WIDTH = 1080;
|
||||
var VIEWPORT_WIDTH = 375;
|
||||
var MAX_PAGE_WIDTH = 768;
|
||||
var STORAGE_KEY = 'hy_cp_activity_end_at';
|
||||
var stageHeights = {
|
||||
plaza: 4283,
|
||||
@ -488,20 +488,32 @@
|
||||
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() {
|
||||
var designHeight = stageHeights[activeTab] || stageHeights.plaza;
|
||||
var pageWidth = getPageWidth();
|
||||
var designScale = pageWidth / DESIGN_WIDTH;
|
||||
stage.style.minHeight = designHeight + 'px';
|
||||
stage.style.height = designHeight + 'px';
|
||||
stageWrap.style.height =
|
||||
Math.ceil(designHeight * (VIEWPORT_WIDTH / DESIGN_WIDTH)) + 'px';
|
||||
copyright.style.top = designHeight - 77 + 'px';
|
||||
var scale = Math.min(window.innerWidth / VIEWPORT_WIDTH, 1);
|
||||
// 页面保持 1080 设计稿坐标系,大屏只放大到 768px,避免桌面或平板 WebView 把活动页拉得过宽。
|
||||
document.documentElement.style.setProperty(
|
||||
'--app-scale',
|
||||
String(scale)
|
||||
'--page-width',
|
||||
pageWidth + 'px'
|
||||
);
|
||||
document.body.style.minHeight =
|
||||
Math.ceil(stageWrap.offsetHeight * scale) + 'px';
|
||||
document.documentElement.style.setProperty(
|
||||
'--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;
|
||||
page.style.minHeight = stageWrap.style.height;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--app-scale: 1;
|
||||
--page-width: 375px;
|
||||
--design-scale: 0.3472222222;
|
||||
--cp-red: #c52d45;
|
||||
--cp-dark-red: #8c2130;
|
||||
@ -38,16 +38,17 @@ button {
|
||||
|
||||
.app-viewport {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
width: var(--page-width);
|
||||
max-width: 768px;
|
||||
min-height: 1300px;
|
||||
margin: 0 auto;
|
||||
transform: scale(var(--app-scale));
|
||||
transform-origin: top center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
width: var(--page-width);
|
||||
max-width: 768px;
|
||||
min-height: 1300px;
|
||||
overflow: hidden;
|
||||
background: var(--cp-red);
|
||||
@ -55,7 +56,8 @@ button {
|
||||
|
||||
.stage-wrap {
|
||||
position: relative;
|
||||
width: 375px;
|
||||
width: var(--page-width);
|
||||
max-width: 768px;
|
||||
height: 1487px;
|
||||
overflow: hidden;
|
||||
background: var(--cp-red);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user