diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue index d2ca8ab..b27edb4 100644 --- a/src/pages/industrial/index.vue +++ b/src/pages/industrial/index.vue @@ -15,7 +15,7 @@

{{ modules[1].form.subTitle }}

{{ modules[1].form.des }}
- + @@ -120,7 +120,8 @@ export default { } } .left { - width: 695px; + width: 500px; + padding-right: 30px; } .des { margin: 20px 0; @@ -129,6 +130,8 @@ export default { line-height: 31px; } .bg { + width: 560px; + height: 500px; margin: -122px 0 0 0; } } @@ -194,4 +197,55 @@ export default { } } } +@media (max-width: 1200px) { + .history { + .left { + width: 50%; + } + .bg { + width: 50%; + } + } +} +@media (max-width: 1200px) { + .history { + .texts { + flex-direction: column; + } + .left { + width: 100%; + } + .bg { + width: 100%; + height: auto; + margin-top: 1rem; + } + } + .land { + .inner { + flex-direction: column; + } + .pic, .right { + width: 100%; + } + .right { + margin-top: 1rem; + } + .text { + height: auto; + } + } + .plan { + li { + flex-direction: column !important; + height: auto; + .left, .pic { + width: 100%; + } + .pic { + margin: 1rem 0 0 !important; + } + } + } +} diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue index a31e8d6..9a7de7d 100644 --- a/src/pages/mission/index.vue +++ b/src/pages/mission/index.vue @@ -172,8 +172,8 @@ export default { padding: 0 20px; } h6 { - margin-bottom: 20px; - font-size: 1.5rem; + margin-bottom: 1rem; + font-size: 1.3rem; color: #272727; @include ellipsis(); } @@ -185,11 +185,8 @@ export default { } } @media (max-width: 1200px) { - body { - width: 100% !important; - } .inner { - width: 100%; + width: 98%; } .item { img { @@ -208,153 +205,25 @@ export default { } } } -@media (max-width: 320px) { - .wrap { - .single-banner { - .banner-img { - height: 13rem; - } - .texts { - top: 6rem; - left: 12rem; - .banner-title{ - font-size: 1.5rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } - } - } - .block { - .inner { - img { - height: 18rem; - } - .texts { - padding: 1.25rem; - top: 1.5rem; - } - } - } -} -@media (min-width: 320px) and (max-width: 375px) { - .wrap { - .single-banner { - .banner-img { - height: 13rem; - } - .texts { - top: 6rem; - left: 12rem; - .banner-title{ - font-size: 1.5rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } - } - } -} -@media (min-width: 375px) and (max-width: 480px) { - .wrap { - .single-banner { - .banner-img { - height: 20rem; - } - .texts { - top: 10rem; - left: 12rem; - .banner-title{ - font-size: 1.5rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } - } - } -} -@media (min-width: 480px) and (max-width: 640px) { - .wrap { - .single-banner { - .banner-img { - height: 25rem; - } - .texts { - top: 10rem; - left: 12rem; - .banner-title{ - font-size: 2rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } +@media (max-width: 980px) { + .mind { + .list { + flex-direction: column; } - } -} -@media (min-width: 640px) and (max-width: 768px) { - .wrap { - .single-banner { - .banner-img { - height: 35rem; - } - .texts { - top: 20rem; - left: 12rem; - .banner-title{ - font-size: 2rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } - } - } -} -@media (min-width: 768px) and (max-width: 980px) { - .wrap { - .single-banner { - .banner-img { - height: 35rem; - } - .texts { - top: 20rem; - left: 12rem; - .banner-title{ - font-size: 2rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } - } + li { + width: 100%; } } } -@media (min-width: 980px) and (max-width: 1200px) { - .wrap { - .single-banner { - .banner-img { - height: 40rem; +@media (max-width: 480px) { + .mind { + li { + .pic { + width: 150px; + height: 130px; } .texts { - top: 20rem; - left: 12rem; - .banner-title{ - font-size: 2rem; - margin-bottom: .5rem; - } - .banner-des{ - font-size: .85rem; - } + width: calc(100% - 150px); } } } diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue index bb939cd..bd18155 100644 --- a/src/pages/researchTeam/index.vue +++ b/src/pages/researchTeam/index.vue @@ -208,31 +208,6 @@ export default { color: #666; } } - .notice { - display: flex; - li { - position: relative; - width: calc((100% - 20px) / 2); - height: 300px; - padding: 20px; - background-color: #fff; - } - .pic { - width: 100%; - height: 100%; - } - .text { - position: absolute; - bottom: 20px; - left: 20px; - width: calc(100% - 40px); - font-size: 1.6rem; - line-height: 66px; - text-align: center; - color: #fff; - background: rgba(32,57,81,0.68); - } - } .right { width: 20%; } @@ -283,19 +258,14 @@ export default { } } } - -@media (min-width: 280px) and (max-width: 750px) { +@media (max-width: 640px) { .article { - .recruit { - li { - flex-direction: column; - } - .pic { - width: 100%; - margin-bottom: 10px; + .left { + .search { + width: 5 0%; } } - .notice { + .teams { flex-direction: column; li { width: 100%; @@ -303,276 +273,4 @@ export default { } } } -@media (max-width: 1200px) { - .content { - .article { - flex-direction: column; - .left { - width: 100%; - .recruit { - li { - flex-direction: column; - .pic { - width: 100%; - - } - .texts { - margin-top: .8rem; - } - } - } - .notice { - flex-direction: column; - li { - width: 100%; - } - } - } - .right{ - width: 100%; - .el-tree { - display: none; - } - } - } - } -} -@media (max-width: 320px) { - .wrap { - .single-banner { - .banner-img { - height: 13rem; - } - .texts { - left: 3rem; - top: 7rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 13rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 13rem; - } - } - } - } - } - } -} -@media (min-width: 320px) and (max-width: 375px) { - .wrap { - .single-banner { - .banner-img { - height: 15rem; - } - .texts { - left: 3rem; - top: 7rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 15rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 15rem; - } - } - } - } - } - } -} -@media (min-width: 375px) and (max-width: 480px) { - .wrap { - .single-banner { - .banner-img { - height: 18rem; - } - .texts { - left: 3rem; - top: 10rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 18rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 18rem; - } - } - } - } - } - } -} -@media (min-width: 480px) and (max-width: 640px) { - .wrap { - .single-banner { - .banner-img { - height: 20rem; - } - .texts { - left: 3rem; - top: 12rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 22rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 22rem; - } - } - } - } - } - } -} -@media (min-width: 640px) and (max-width: 768px) { - .wrap { - .single-banner { - .banner-img { - height: 22rem; - } - .texts { - left: 3rem; - top: 14rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 26rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 26rem; - } - } - } - } - } - } -} -@media (min-width: 768px) and (max-width: 980px) { - .wrap { - .single-banner { - .banner-img { - height: 26rem; - } - .texts { - left: 3rem; - top: 16rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 30rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 30rem; - } - } - } - } - } - } -} -@media (min-width: 980px) and (max-width: 1200px) { - .wrap { - .single-banner { - .banner-img { - height: 30rem; - } - .texts { - left: 3rem; - top: 18rem; - } - } - } - .content { - .article { - .left { - .recruit { - li { - .pic { - height: 35rem; - } - } - } - .notice { - li { - height: auto; - .pic { - height: 35rem; - } - } - } - } - } - } -} \ No newline at end of file diff --git a/src/pages/scientific/index.vue b/src/pages/scientific/index.vue index acf4e95..3e3c18d 100644 --- a/src/pages/scientific/index.vue +++ b/src/pages/scientific/index.vue @@ -332,11 +332,47 @@ export default { } .title { margin-bottom: 1rem; - font-size: 2.2rem; + font-size: 1.8rem; } .des { font-size: 1rem; line-height: 1.6; } } +@media (max-width: 1200px) { + .items { + li { + .texts { + left: 0; + width: 98%; + } + &:nth-child(even) { + .texts { + right: auto; + } + } + } + } +} +@media (max-width: 780px) { + .program { + .slide { + flex-direction: column; + } + .texts { + width: 100%; + } + .img-wrap { + width: 100%; + height: 250px; + } + .list { + flex-direction: column; + li { + width: 100%; + margin-bottom: 1rem; + } + } + } +}