From 11c346061b3405e91a2194b9eec07534bd4f1a77 Mon Sep 17 00:00:00 2001 From: maochaoying <925670706@qq.com> Date: Fri, 7 Apr 2023 11:20:00 +0800 Subject: [PATCH] 123 --- README.md | 28 ++++++++++++++++++++- src/common/utils.js | 30 +++++++++++++++++++---- src/views/Index/components/Recruit/Card/index.vue | 2 +- 3 files changed, 53 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index bd8c689..f461fb5 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,30 @@ 更高忽略 2880 x 1620 3200 x 1800 -5120 x 2880 \ No newline at end of file +5120 x 2880 + +// 还不适配 +3840 * 2160 适配最高 + +// 图像 +// 目前适配屏幕 (高度大于1080) +2569 * 1440 (详情页到最底部了,需要对详情页的缩放进行处理 - 180) +2304 * 1296 (详情页到最底部了,需要对详情页的缩放进行处理 - 180) 案例展示页面顶部超出了90p x +2048 * 1152 (详情页到最底部了,需要对详情页的缩放进行处理 - 180) +⬆️ +1920 * 1080 (与设计图相同) +⬇️ +1680 945 +1600 900 +1504 846 +1280 720 适配最低 + + +// 小图像 +因为高度像素不满足,应该以宽度自适应? + + + + + + diff --git a/src/common/utils.js b/src/common/utils.js index a5f6f83..b4dc058 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -1,4 +1,4 @@ -const scaleFunc = (showEmpty, id, origin, scale) => { +const scaleFunc = (showEmpty, id, origin, scale, isLow) => { if (origin) { document.querySelector(id).style['transform-origin'] = origin } @@ -6,7 +6,16 @@ const scaleFunc = (showEmpty, id, origin, scale) => { handleBottomFont(id, scale) handleImgScale(id, scale) handleCooperation(id, scale) - showEmpty.value = false + handleContactUs(id, scale) + if (id == '#service_container') { + showEmpty.value = false + } else { + if (isLow) { + showEmpty.value = false + } else { + showEmpty.value = true + } + } } export const handleScreenAuto = (showEmpty, id, origin) => { @@ -14,10 +23,10 @@ export const handleScreenAuto = (showEmpty, id, origin) => { const clientWidth = document.documentElement.clientWidth if (clientHeight < 1080) { const scale = (clientHeight / 1080).toFixed(3) - scaleFunc(showEmpty, id, origin, scale) + scaleFunc(showEmpty, id, origin, scale, true) } else { - const scale = ((clientHeight - 180) / 1080).toFixed(3) - scaleFunc(showEmpty, id, origin, scale) + const scale = ((clientHeight - 300) / 1080).toFixed(3) + scaleFunc(showEmpty, id, 'center 0', scale, false) } } @@ -40,6 +49,17 @@ const handleImgScale = (id, scale) => { } } +const handleContactUs = (id, scale) => { + if (id == '#contractus_container') { + document.getElementById('contact_circle').style.transform = `scale(${ + 1 / scale + })` + document.getElementById('contact_hand').style.transform = `scale(${ + 1 / scale + })` + } +} + const handleCooperation = (id, scale) => { if (id == '#cooperation_container') { document.getElementById('contract_bg_coop').style['transform-origin'] = diff --git a/src/views/Index/components/Recruit/Card/index.vue b/src/views/Index/components/Recruit/Card/index.vue index ab9ff36..f36c5b0 100644 --- a/src/views/Index/components/Recruit/Card/index.vue +++ b/src/views/Index/components/Recruit/Card/index.vue @@ -93,7 +93,7 @@ const getClass = () => { width: 195px; font-family: 'SourceHanSans'; font-weight: 300; - color: #ffffff; + color: rgba(214, 214, 214, 1); } .bottom { width: 100%;