diff --git a/README.md b/README.md index 8b13789..bd8c689 100644 --- a/README.md +++ b/README.md @@ -1 +1,13 @@ +常用 +1280 x 800 +1366 x 1024 (IPad Pro) +1440 x 900 +1680 x 1050 +1600 x 900 +1920 x 1200 +2560 x 1440 +更高忽略 +2880 x 1620 +3200 x 1800 +5120 x 2880 \ No newline at end of file diff --git a/index.html b/index.html index 94bb16c..4cf8bd3 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,10 @@ - + 产品梦工厂 diff --git a/src/common/utils.js b/src/common/utils.js index 71cfba5..a5f6f83 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -10,28 +10,14 @@ const scaleFunc = (showEmpty, id, origin, scale) => { } export const handleScreenAuto = (showEmpty, id, origin) => { - const clientWidth = document.documentElement.clientWidth const clientHeight = document.documentElement.clientHeight - if (clientWidth > 1600) { - if (clientHeight < 1080) { - const scale = clientHeight / 1080 - scaleFunc(showEmpty, id, origin, scale) - } else { - if (clientHeight >= 1764) { - const scale = 1323 / clientHeight - scaleFunc(showEmpty, id, origin, scale) - } else { - if (clientHeight >= 1323) { - const scale = 1176 / clientHeight - scaleFunc(showEmpty, id, origin, scale) - } else { - const scale = 1080 / clientHeight - scaleFunc(showEmpty, id, origin, scale) - } - } - } + const clientWidth = document.documentElement.clientWidth + if (clientHeight < 1080) { + const scale = (clientHeight / 1080).toFixed(3) + scaleFunc(showEmpty, id, origin, scale) } else { - showEmpty.value = true + const scale = ((clientHeight - 180) / 1080).toFixed(3) + scaleFunc(showEmpty, id, origin, scale) } } @@ -88,14 +74,6 @@ export const animateCSS = (element, animation, prefix = 'animate__') => export const totalPageAni = async (activeIndex, previousIndex) => { const isDown = previousIndex < activeIndex const aniName = isDown ? 'fadeInUp' : 'fadeInDown' - if (activeIndex == 0) { - // animateCSS('#main_img', 'fadeInUp') - // animateCSS('#slide_five_desc_ani', 'fadeInUp') - // animateCSS('#slide_two_ani', 'fadeInDown') - // animateCSS('#slide_one_ani', 'fadeInDown') - // animateCSS('#slide_three_ani', 'fadeInDown') - // animateCSS('#slide_four_ani', 'fadeInDown') - } if (activeIndex == 1) { animateCSS('#servive_big_title_ani', aniName) } @@ -105,13 +83,9 @@ export const totalPageAni = async (activeIndex, previousIndex) => { if (activeIndex == 3) { animateCSS('#case_picture_list_ani', aniName) } - if (activeIndex == 4) { - } if (activeIndex == 5) { animateCSS('#contract_ani', aniName) } - if (activeIndex == 6) { - } if (activeIndex == 7) { animateCSS('#software_b_ani', aniName) animateCSS('#software_c_ani', aniName) diff --git a/src/style.scss b/src/style.scss index 4ca742c..fb4c244 100644 --- a/src/style.scss +++ b/src/style.scss @@ -73,6 +73,7 @@ body { .swiper { width: 100%; height: 100%; + min-width: 1280px; } .swiper-slide { diff --git a/src/views/Index/components/Culture/Card/index.vue b/src/views/Index/components/Culture/Card/index.vue index 032488d..9fe6347 100644 --- a/src/views/Index/components/Culture/Card/index.vue +++ b/src/views/Index/components/Culture/Card/index.vue @@ -145,6 +145,7 @@ const getTips = () => { .new_btn { background: #283fe7; font-size: 20px; + white-space: nowrap; font-family: 'SourceHanSans'; font-weight: 400; color: #ffffff; @@ -154,6 +155,7 @@ const getTips = () => { } .header_card { .btn { + white-space: nowrap; border: 2px solid #ffffff; font-size: 18px; font-family: 'SourceHanSans'; diff --git a/src/views/Index/components/HeaderSwiper/index.vue b/src/views/Index/components/HeaderSwiper/index.vue index cff3a6b..82a7398 100644 --- a/src/views/Index/components/HeaderSwiper/index.vue +++ b/src/views/Index/components/HeaderSwiper/index.vue @@ -136,7 +136,7 @@ export default { width: 100%; height: 100%; position: relative; - min-width: 1668px; + min-width: 1280; background: #000; .down_circle { position: absolute; diff --git a/src/views/Index/components/Recruit/Card/index.vue b/src/views/Index/components/Recruit/Card/index.vue index 22228d4..ab9ff36 100644 --- a/src/views/Index/components/Recruit/Card/index.vue +++ b/src/views/Index/components/Recruit/Card/index.vue @@ -89,6 +89,7 @@ const getClass = () => { .desc { flex: 1; font-size: 16px; + line-height: 24.73px; width: 195px; font-family: 'SourceHanSans'; font-weight: 300; diff --git a/vite.config.js b/vite.config.js index f0f3082..63dbb82 100644 --- a/vite.config.js +++ b/vite.config.js @@ -71,6 +71,7 @@ export default defineConfig({ postcsspxtoviewport({ unitToConvert: 'px', // 要转化的单位 viewportWidth: 1920, // UI设计稿的宽度 + viewportHeight: 1080, // UI设计稿高度 unitPrecision: 6, // 转换后的精度,即小数点位数 propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw