From b3b2caee20ac50727ba9a969c12f2f0bfcc0181e Mon Sep 17 00:00:00 2001 From: wangchenguang <728837162@qq.com> Date: Fri, 14 Apr 2023 17:42:01 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/menuTree/index.vue | 5 +- src/layouts/header/index.vue | 18 +- src/layouts/navbar/index.vue | 7 + src/pages/article/index.vue | 9 +- src/pages/column/index.vue | 71 ++- src/pages/column/result.vue | 2 +- src/pages/deviceIntroBeam/index.vue | 39 +- src/pages/deviceIntroLayout/index.vue | 44 +- src/pages/deviceIntroLinear/index.vue | 39 +- src/pages/estate/event/index.vue | 321 +++++++++++ src/pages/estate/location/index.vue | 439 +++++++++++++++ src/pages/estate/orgSetup/index.vue | 366 +++++++++++++ src/pages/estate/survey/index.vue | 169 +++++- src/pages/exp/index.vue | 284 +++++++++- src/pages/overviewDevHistory/index.vue | 299 ++++++++++ src/pages/overviewIntro/index.vue | 123 +++++ src/pages/overviewLocation/index.vue | 124 ++++- src/pages/overviewSetup/index.vue | 136 ++++- src/pages/overviewTrailer/index.vue | 152 +++++- src/pages/publication/index.vue | 30 ++ src/pages/publication/monograph.vue | 11 + src/pages/publication/patent.vue | 11 + src/pages/publication/thesis.vue | 11 + src/pages/science/index.vue | 153 +++++- src/pages/sfel/index.vue | 719 ++++++++++++++++++++++++- src/pages/talent/index.vue | 292 +++++++++- src/pages/talentCenter/index.vue | 195 +++++++ src/pages/userSharing/index.vue | 218 ++++++++ 28 files changed, 4264 insertions(+), 23 deletions(-) diff --git a/src/components/menuTree/index.vue b/src/components/menuTree/index.vue index 650880d..f30ed7f 100644 --- a/src/components/menuTree/index.vue +++ b/src/components/menuTree/index.vue @@ -32,10 +32,10 @@ export default { \ No newline at end of file diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue index 398a75b..d265d58 100644 --- a/src/pages/article/index.vue +++ b/src/pages/article/index.vue @@ -302,7 +302,7 @@ export default { } } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .article { /deep/.des { @@ -338,4 +338,11 @@ export default { } } } +@media (max-width: 320px) { + .wrap { + .banner { + padding: 12rem 0 0 10rem; + } + } +} \ No newline at end of file diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue index 964c7ea..5ab82e6 100644 --- a/src/pages/column/index.vue +++ b/src/pages/column/index.vue @@ -922,7 +922,7 @@ export default { .pic { width: 95%; - margin: 0 atuo; + margin: 0 auto; } } } @@ -932,7 +932,7 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .banner { height: 15rem !important; @@ -987,4 +987,71 @@ export default { } } +@media (max-width: 320px) { + .banner { + height: 13rem; + img { + height: 13rem !important; + } + } + .contents { + .article-wrap { + .articles { + .pic { + height: 10rem !important; + } + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .contents { + .article-wrap { + .articles { + .pic { + height: 15rem !important; + } + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .contents { + .article-wrap { + .articles { + .pic { + height: 20rem !important; + } + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .contents { + .article-wrap { + .articles { + .pic { + height: 25rem !important; + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .banner { + height: 18rem; + img { + height: 18rem !important; + } + } + .contents { + .article-wrap { + .articles { + .pic { + height: 30rem !important; + } + } + } + } +} diff --git a/src/pages/column/result.vue b/src/pages/column/result.vue index 69a489c..e2863e4 100644 --- a/src/pages/column/result.vue +++ b/src/pages/column/result.vue @@ -97,7 +97,7 @@ export default { background-color: #fff; } .articles { - width: 1000px; + width: 100%; padding-top: 47px; margin: 0 auto; } diff --git a/src/pages/deviceIntroBeam/index.vue b/src/pages/deviceIntroBeam/index.vue index c0cb248..77fda21 100644 --- a/src/pages/deviceIntroBeam/index.vue +++ b/src/pages/deviceIntroBeam/index.vue @@ -179,9 +179,46 @@ export default { } } } -@media (min-width: 280px) and (max-width: 750px) { +@media (max-width: 320px) { + .banner{ + height: 13rem; + padding: 6rem 0 0 12rem; + } +} +@media (min-width: 320px) and (max-width: 375px) { + .banner{ + height: 13rem; + padding: 8rem 0 0 13rem; + } + } + @media (min-width: 375px) and (max-width: 480px) { .banner{ height: 15rem; + padding: 10rem 0 0 14rem; + } +} +@media (min-width: 480px) and (max-width: 640px) { + .banner{ + height: 17rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 640px) and (max-width: 768px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 768px) and (max-width: 980px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .banner{ + height: 25rem; + padding: 12rem 0 0 22rem; } } \ No newline at end of file diff --git a/src/pages/deviceIntroLayout/index.vue b/src/pages/deviceIntroLayout/index.vue index dc0ffe0..51dbc49 100644 --- a/src/pages/deviceIntroLayout/index.vue +++ b/src/pages/deviceIntroLayout/index.vue @@ -214,7 +214,7 @@ export default { padding: 50px 0; } } -@media (min-width: 300px) and (max-width: 1200px) { +@media (min-width: 280px) and (max-width: 1200px) { body{ width: 100% !important; } @@ -305,4 +305,46 @@ export default { } } +@media (max-width: 320px) { + .banner{ + height: 13rem; + padding: 6rem 0 0 12rem; + } +} +@media (min-width: 320px) and (max-width: 375px) { + .banner{ + height: 15rem; + padding: 8rem 0 0 13rem; + } + } + @media (min-width: 375px) and (max-width: 480px) { + .banner{ + height: 17rem; + padding: 10rem 0 0 14rem; + } +} +@media (min-width: 480px) and (max-width: 640px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 640px) and (max-width: 768px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 768px) and (max-width: 980px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} \ No newline at end of file diff --git a/src/pages/deviceIntroLinear/index.vue b/src/pages/deviceIntroLinear/index.vue index 0a90f6d..8dca4c1 100644 --- a/src/pages/deviceIntroLinear/index.vue +++ b/src/pages/deviceIntroLinear/index.vue @@ -235,9 +235,46 @@ export default { } } } -@media (min-width: 280px) and (max-width: 750px) { +@media (max-width: 320px) { + .banner{ + height: 13rem; + padding: 6rem 0 0 12rem; + } +} +@media (min-width: 320px) and (max-width: 375px) { + .banner{ + height: 13rem; + padding: 8rem 0 0 13rem; + } + } + @media (min-width: 375px) and (max-width: 480px) { .banner{ height: 15rem; + padding: 10rem 0 0 14rem; + } +} +@media (min-width: 480px) and (max-width: 640px) { + .banner{ + height: 17rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 640px) and (max-width: 768px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 768px) and (max-width: 980px) { + .banner{ + height: 19rem; + padding: 12rem 0 0 22rem; + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .banner{ + height: 25rem; + padding: 12rem 0 0 22rem; } } diff --git a/src/pages/estate/event/index.vue b/src/pages/estate/event/index.vue index 74cb592..7b8e6f3 100644 --- a/src/pages/estate/event/index.vue +++ b/src/pages/estate/event/index.vue @@ -194,4 +194,325 @@ export default { } } } +@media (max-width: 1200px) { + .tabs { + overflow: hidden;; + overflow-x: auto; + white-space: normal; + justify-content: normal; + display: -webkit-box; + li { + white-space: normal; + } + } + .tab-content{ + padding: 20px 0; + .org{ + width: 100%; + padding:15px; + flex-direction: column; + .left{ + width: 100%; + } + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .event { + flex-direction: column; + .time { + width: 100%; + li { + width: 100%; + justify-content: flex-start; + } + } + .right { + width: 100%; + .list { + li { + padding: 1.25rem; + flex-direction: column; + .texts { + width: 100%; + } + .pic { + width: 100%; + margin-top: 1rem; + } + } + } + } + } + } + } +} +@media (max-width: 320px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 13rem; + } + } + } + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 15rem; + } + } + } + } + } + } + } +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 18rem; + } + } + } + } + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 10rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 20rem; + } + } + } + } + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 12rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 22rem; + } + } + } + } + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 15rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 25rem; + } + } + } + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 32rem; + } + .texts { + top: 20rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 27rem; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/estate/location/index.vue b/src/pages/estate/location/index.vue index ce8a86e..afb2c01 100644 --- a/src/pages/estate/location/index.vue +++ b/src/pages/estate/location/index.vue @@ -165,4 +165,443 @@ export default { } } +@media (max-width: 1200px) { + .tabs { + overflow: hidden;; + overflow-x: auto; + white-space: normal; + justify-content: normal; + display: -webkit-box; + li { + white-space: normal; + } + } + .tab-content{ + padding: 20px 0; + .org{ + width: 100%; + padding:15px; + flex-direction: column; + .left{ + width: 100%; + } + img{ + width: 100%; + } + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .event { + flex-direction: column; + .time { + width: 100%; + li { + width: 100%; + justify-content: flex-start; + } + } + .right { + width: 100%; + .list { + li { + padding: 1.25rem; + flex-direction: column; + .texts { + width: 100%; + } + .pic { + width: 100%; + margin-top: 1rem; + } + } + } + } + } + } + } + .tab-content { + padding: 1.25rem 0; + .item { + padding: .85rem; + flex-direction: column !important; + .texts { + margin-top: .5rem; + width: 100%; + padding: 0; + } + } + } +} +@media (max-width: 320px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 13rem; + } + } + .item { + .img-wrap { + height: 13rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 13rem; + } + } + } + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 18rem; + } + } + .item { + .img-wrap { + height: 15rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 15rem; + } + } + } + } + } + } + } +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 20rem; + } + } + .item { + .img-wrap { + height: 18rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 18rem; + } + } + } + } + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 10rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 24rem; + } + } + .item { + .img-wrap { + height: 22rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 20rem; + } + } + } + } + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 12rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 28rem; + } + } + .item { + .img-wrap { + height: 25rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 22rem; + } + } + } + } + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 15rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 30rem; + } + } + .item { + .img-wrap { + height: 28rem; + } + .texts { + h6 { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 25rem; + } + } + } + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 32rem; + } + .texts { + top: 20rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 32rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 27rem; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/estate/orgSetup/index.vue b/src/pages/estate/orgSetup/index.vue index 9f072c4..5e3f46b 100644 --- a/src/pages/estate/orgSetup/index.vue +++ b/src/pages/estate/orgSetup/index.vue @@ -130,4 +130,370 @@ export default { } } +@media (max-width: 1200px) { + .tabs { + overflow: hidden;; + overflow-x: auto; + white-space: normal; + justify-content: normal; + display: -webkit-box; + li { + white-space: normal; + } + } + .tab-content{ + padding: 20px 0; + .org{ + width: 100%; + padding:15px; + flex-direction: column; + .left{ + width: 100%; + } + img{ + width: 100%; + } + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .event { + flex-direction: column; + .time { + width: 100%; + li { + width: 100%; + justify-content: flex-start; + } + } + .right { + width: 100%; + .list { + li { + padding: 1.25rem; + flex-direction: column; + .texts { + width: 100%; + } + .pic { + width: 100%; + margin-top: 1rem; + } + } + } + } + } + } + } +} +@media (max-width: 320px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 13rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 13rem; + } + } + } + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 18rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 15rem; + } + } + } + } + } + } + } +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 20rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 18rem; + } + } + } + } + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 10rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 24rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 20rem; + } + } + } + } + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 12rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 28rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 22rem; + } + } + } + } + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 15rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 30rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 25rem; + } + } + } + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 32rem; + } + .texts { + top: 20rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + .org{ + img{ + width: 100%; + height: 32rem; + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + margin-top: 1rem; + height: 27rem; + } + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/estate/survey/index.vue b/src/pages/estate/survey/index.vue index 40c256c..694e3ce 100644 --- a/src/pages/estate/survey/index.vue +++ b/src/pages/estate/survey/index.vue @@ -125,6 +125,173 @@ export default { } } } - +} +@media (max-width: 320px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 20rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 6rem; + left: 5rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 35rem; + } + .texts { + top: 20rem; + left: 9rem; + + } + } + } + .tab-content { + .survey { + padding: 1.25rem; + width: 100%; + margin-bottom: 2rem; + } + } + .lg-bg { + width: 100%; + } } \ No newline at end of file diff --git a/src/pages/exp/index.vue b/src/pages/exp/index.vue index 9d1cb95..b7fe19f 100644 --- a/src/pages/exp/index.vue +++ b/src/pages/exp/index.vue @@ -197,7 +197,7 @@ export default { } } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .wrap{ /deep/ .el-carousel { height: 15rem; @@ -223,4 +223,286 @@ export default { } } } +@media (max-width: 320px) { + .wrap { + /deep/ .el-carousel { + height: 13rem !important; + } + /deep/ .el-carousel__item { + height: 13rem !important; + } + /deep/ .el-carousel__container { + height: 13rem !important; + } + } + .banner-item{ + img { + height: 13rem !important; + } + .banner-name { + left: 11rem; + top: 8rem; + font-size: 1.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 13rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + /deep/ .el-carousel { + height: 15rem !important; + } + /deep/ .el-carousel__item { + height: 15rem !important; + } + /deep/ .el-carousel__container { + height: 15rem !important; + } + } + .banner-item{ + img { + height: 15rem !important; + } + .banner-name { + left: 15rem; + top: 10rem; + font-size: 1.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 13rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } + } + @media (min-width: 375px) and (max-width: 480px) { + .wrap { + /deep/ .el-carousel { + height: 20rem !important; + } + /deep/ .el-carousel__item { + height: 20rem !important; + } + /deep/ .el-carousel__container { + height: 20rem !important; + } + } + .banner-item{ + img { + height: 20rem !important; + } + .banner-name { + left: 20rem; + top: 13rem; + font-size: 1.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 18rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + /deep/ .el-carousel { + height: 25rem !important; + } + /deep/ .el-carousel__item { + height: 25rem !important; + } + /deep/ .el-carousel__container { + height: 25rem !important; + } + } + .banner-item{ + img { + height: 25rem !important; + } + .banner-name { + left: 22rem; + top: 15rem; + font-size: 1.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 22rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + /deep/ .el-carousel { + height: 25rem !important; + } + /deep/ .el-carousel__item { + height: 25rem !important; + } + /deep/ .el-carousel__container { + height: 25rem !important; + } + } + .banner-item{ + img { + height: 25rem !important; + } + .banner-name { + left: 22rem; + top: 15rem; + font-size: 1.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 22rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + /deep/ .el-carousel { + height: 28rem !important; + } + /deep/ .el-carousel__item { + height: 28rem !important; + } + /deep/ .el-carousel__container { + height: 28rem !important; + } + } + .banner-item{ + img { + height: 28rem !important; + } + .banner-name { + left: 39rem; + top: 22rem; + font-size: 2.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 25rem; + } + } + + } + } + .list { + li { + width: 100% !important; + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + /deep/ .el-carousel { + height: 32rem !important; + } + /deep/ .el-carousel__item { + height: 32rem !important; + } + /deep/ .el-carousel__container { + height: 32rem !important; + } + } + .banner-item{ + img { + height: 32rem !important; + } + .banner-name { + left: 39rem; + top: 22rem; + font-size: 2.5rem; + } + } + .block { + padding: 2rem 0; + .inner { + width: 90%; + .text-center { + .pic { + width: 100%; + height: 32rem; + } + } + + } + } +} \ No newline at end of file diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue index 1800c14..dc50d4a 100644 --- a/src/pages/overviewDevHistory/index.vue +++ b/src/pages/overviewDevHistory/index.vue @@ -193,4 +193,303 @@ export default { } } } +@media (max-width: 1200px) { + .tabs { + overflow: hidden;; + overflow-x: auto; + white-space: normal; + justify-content: normal; + display: -webkit-box; + li { + white-space: normal; + } + } + .tab-content{ + width: 90%; + span { + font-size: 1.35rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + h2 { + font-size: 1.5rem; + } + p { + font-size: 1rem; + margin: 10px 0 1.25rem; + } + .event { + flex-direction: column; + .time { + width: 100%; + li { + width: 100%; + justify-content: flex-start; + } + } + .right { + margin-top: 1.25rem; + width: 100%; + h6{ + font-size: 2rem; + } + .list { + li { + padding: 1.25rem; + flex-direction: column; + align-items: flex-start; + .texts { + width: 100%; + } + .pic { + width: 100%; + } + } + } + } + } + } + } +} +@media (min-width: 280px) and (max-width: 1200px) { + .single-banner { + .banner-img { + height: 15rem; + } + } +} +@media (max-width: 320px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 10rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 13rem; + } + } + } + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 15rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 15rem; + } + } + } + } + } + } + } + +} + +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 14rem !important; + left: 18rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 18rem; + } + } + } + } + } + } + } + +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 13rem !important; + left: 24rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 22rem; + } + } + } + } + } + } + } + +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 28rem; + } + .texts { + top: 20rem !important; + left: 34rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 25rem; + } + } + } + } + } + } + } + +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 36rem; + } + .texts { + top: 25rem !important; + left: 38rem !important; + .banner-title { + font-size: 2rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 28rem; + } + } + } + } + } + } + } + +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 40rem; + } + .texts { + top: 25rem !important; + left: 55rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + .block { + .inner { + .event { + .right { + .list { + li { + .pic { + width: 100%; + height: 31rem; + } + } + } + } + } + } + } + +} \ No newline at end of file diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue index f8d6a46..a750572 100644 --- a/src/pages/overviewIntro/index.vue +++ b/src/pages/overviewIntro/index.vue @@ -151,10 +151,133 @@ export default { } .tab-content{ width: 90%; + margin: auto; + padding-top: 1.25rem; + .intro { + flex-direction: column; + .pic { + width: 100%; + } + } + .intro-bg { + padding-top: 3rem; + .texts { + h6 { + font-size: 1.6rem; + } + } + } + .right { + width: 100% !important; + margin-top: 1.25rem; + .text { + margin-top: 1.25rem; + } + } span { font-size: 1.35rem; } } } + +@media (max-width: 320px) { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 9rem !important; + left: 11rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 11rem !important; + left: 15rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} + +@media (min-width: 375px) and (max-width: 480px) { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 14rem !important; + left: 18rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 18rem !important; + left: 25rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .single-banner { + .banner-img { + height: 28rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .single-banner { + .banner-img { + height: 32rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} \ No newline at end of file diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue index 732ae27..5229afe 100644 --- a/src/pages/overviewLocation/index.vue +++ b/src/pages/overviewLocation/index.vue @@ -71,6 +71,9 @@ export default { span { font-size: 1.35rem; } + /deep/ img { + width: 100% !important; + } } .video { width: 100%; @@ -100,7 +103,7 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 120px) { .single-banner { .banner-img { height: 15rem; @@ -112,4 +115,123 @@ export default { } } +@media (max-width: 320px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 12rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 15rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + +} + +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 14rem !important; + left: 18rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 12rem !important; + left: 24rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 28rem; + } + .texts { + top: 20rem !important; + left: 34rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 36rem; + } + .texts { + top: 25rem !important; + left: 38rem !important; + .banner-title { + font-size: 2rem; + } + } + } + } + +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 40rem; + } + .texts { + top: 25rem !important; + left: 55rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + +} \ No newline at end of file diff --git a/src/pages/overviewSetup/index.vue b/src/pages/overviewSetup/index.vue index 3b0bc4f..4c65364 100644 --- a/src/pages/overviewSetup/index.vue +++ b/src/pages/overviewSetup/index.vue @@ -123,6 +123,9 @@ export default { width: 100%; padding:15px; flex-direction: column; + .pic { + width: 100%; + } .left{ width: 100%; } @@ -130,7 +133,7 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .single-banner { .banner-img { height: 15rem; @@ -141,4 +144,135 @@ export default { } } } +@media (max-width: 320px) { + .single-banner { + .banner-img { + height: 13rem; + } + .texts { + top: 9rem !important; + left: 11rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + .tab-content{ + .org{ + .pic { + width: 100%; + height: 13rem; + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .single-banner { + .banner-img { + height: 15rem; + } + .texts { + top: 11rem !important; + left: 15rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} + +@media (min-width: 375px) and (max-width: 480px) { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 14rem !important; + left: 18rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 18rem !important; + left: 25rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .single-banner { + .banner-img { + height: 25rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + .tab-content{ + .org{ + .pic { + width: 100%; + height: 25rem; + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .single-banner { + .banner-img { + height: 28rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + .tab-content{ + .org{ + .pic { + width: 100%; + height: 28rem; + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .single-banner { + .banner-img { + height: 32rem; + } + .texts { + top: 21rem !important; + left: 37rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + .tab-content{ + .org{ + .pic { + width: 100%; + height: 32rem; + } + } + } +} \ No newline at end of file diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue index 2683123..35ff43e 100644 --- a/src/pages/overviewTrailer/index.vue +++ b/src/pages/overviewTrailer/index.vue @@ -104,16 +104,164 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .single-banner { .banner-img { height: 15rem; } .texts { top: 9rem !important; - left: 22rem !important; + left: 22rem !important; } } } +@media (max-width: 320px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 10rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .tab-content { + .video { + height: 18rem; + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + .banner-img { + height: 15rem; + } + .single-banner { + .texts { + top: 11rem !important; + left: 15rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .tab-content { + .video { + height: 18rem; + } + } +} + +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + .single-banner { + .banner-img { + height: 18rem; + } + .texts { + top: 14rem !important; + left: 18rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .tab-content { + .video { + height: 18rem; + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + .single-banner { + .banner-img { + height: 22rem; + } + .texts { + top: 18rem !important; + left: 24rem !important; + .banner-title { + font-size: 1.5rem; + } + } + } + } + .tab-content { + .video { + height: 23rem; + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + .single-banner { + .banner-img { + height: 28rem; + } + .texts { + top: 20rem !important; + left: 34rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + .tab-content { + .video { + height: 23rem; + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + .single-banner { + .banner-img { + height: 36rem; + } + .texts { + top: 25rem !important; + left: 38rem !important; + .banner-title { + font-size: 2rem; + } + } + } + } + .tab-content { + .video { + height: auto; + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 40rem; + } + .texts { + top: 25rem !important; + left: 55rem !important; + .banner-title { + font-size: 1.8rem; + } + } + } + } + .tab-content { + .video { + height: auto; + } + } +} \ No newline at end of file diff --git a/src/pages/publication/index.vue b/src/pages/publication/index.vue index a468429..49b9a12 100644 --- a/src/pages/publication/index.vue +++ b/src/pages/publication/index.vue @@ -126,4 +126,34 @@ export default { padding: 20px 0; margin: 0 auto; } +@media (max-width: 1200px) { + .banner { + .texts { + .text { + font-size: 1.5rem; + } + } + } + .tabs { + // flex-direction: column; + width: 100%; + overflow-x: scroll; + li { + padding: 1.25rem 0; + margin: 0 1.25rem; + } + } + .tab-content{ + width: 90%; + margin: 0 auto; + } +} +@media (max-width: 320px) { + .banner { + .texts { + left: 6rem; + top: 6rem; + } + } +} \ No newline at end of file diff --git a/src/pages/publication/monograph.vue b/src/pages/publication/monograph.vue index efb099a..735b8ea 100644 --- a/src/pages/publication/monograph.vue +++ b/src/pages/publication/monograph.vue @@ -154,4 +154,15 @@ export default { background-color: #1583FF; } } +@media (max-width: 1200px) { + .forms { + padding: 1.25rem; + flex-direction: column; + .item, .search,div { + width: 80%;margin: 0 auto; + justify-content: center; + margin-top: 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/publication/patent.vue b/src/pages/publication/patent.vue index 4bd0fdd..e862262 100644 --- a/src/pages/publication/patent.vue +++ b/src/pages/publication/patent.vue @@ -171,4 +171,15 @@ export default { background-color: #1583FF; } } +@media (max-width: 1200px) { + .forms { + padding: 1.25rem; + flex-direction: column; + .item, .search,div { + width: 80%;margin: 0 auto; + justify-content: center; + margin-top: 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/publication/thesis.vue b/src/pages/publication/thesis.vue index d42040b..ec22949 100644 --- a/src/pages/publication/thesis.vue +++ b/src/pages/publication/thesis.vue @@ -155,4 +155,15 @@ export default { line-height: 30px; } } +@media (max-width: 1200px) { + .forms { + padding: 1.25rem; + flex-direction: column; + .item, .search,div { + width: 80%;margin: 0 auto; + justify-content: center; + margin-top: 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/science/index.vue b/src/pages/science/index.vue index 2815509..06a4df7 100644 --- a/src/pages/science/index.vue +++ b/src/pages/science/index.vue @@ -4,7 +4,7 @@
- +
@@ -169,4 +169,155 @@ 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 (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; + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + .single-banner { + .banner-img { + height: 40rem; + } + .texts { + top: 20rem; + left: 12rem; + .banner-title{ + font-size: 2rem; + margin-bottom: .5rem; + } + .banner-des{ + font-size: .85rem; + } + } + } + } +} diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue index 113bd61..2f40c26 100644 --- a/src/pages/sfel/index.vue +++ b/src/pages/sfel/index.vue @@ -387,6 +387,7 @@ export default { padding-bottom: 25px; margin-bottom: 30px; border-bottom: 1px solid #ddd; + align-items: center; h5 { padding-left: 16px; font-size: 1.6rem; @@ -992,6 +993,7 @@ export default { padding: 36px 22px; margin-right: 14px; background: url(../../assets/images/sfel/7.png) no-repeat center; + background-size: 100% 100%; transition: .5s; cursor: pointer; &:nth-child(2) { @@ -1060,6 +1062,9 @@ export default { } } @media (max-width: 1200px) { + .tools { + display: none; + } .sfel-banner{ flex-direction: column; .newBox{ @@ -1149,7 +1154,7 @@ export default { } } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .block { padding: 2rem 0; } @@ -1206,4 +1211,716 @@ export default { } } } +@media (max-width: 320px) { + .wrap { + /deep/ .el-carousel{ + height: 15rem; + } + /deep/ .el-carousel__container { + height: 15rem !important; + } + /deep/ .el-carousel__item{ + height: 15rem; + img{ + height: 15rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 13rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 13rem; + } + } + } + .shop-shows{ + .slide { + height: 15rem; + p { + line-height: 1.7rem; + } + } + } + .shows { + .left { + height: 15rem; + .text { + line-height: 2rem; + font-size: .95rem; + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 15rem !important; + } + } + } + .news { + li { + img { + height: 15rem ; + } + } + } + .slide { + .img-wrap { + height: 15rem !important; + } + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + /deep/ .el-carousel{ + height: 20rem; + } + /deep/ .el-carousel__container { + height: 20rem; + } + /deep/ .el-carousel__item{ + height: 20rem; + img{ + height: 20rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 15rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 13rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 18rem; + } + /deep/ .el-carousel__container { + height: 18rem; + } + /deep/ .el-carousel__item{ + height: 18rem; + img{ + height: 18rem; + } + } + } + .slide { + height: 15rem; + p { + line-height: 1.7rem; + } + } + } + .shows { + .left { + height: 15rem; + .text { + line-height: 2rem; + font-size: .95rem; + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 15rem !important; + } + } + } + .news { + li { + img { + height: 15rem ; + } + } + } + .slide { + .img-wrap { + height: 15rem !important; + } + } + } + } +} +@media (min-width: 375px) and (max-width: 480px) { + + .wrap { + /deep/ .el-carousel{ + height: 22rem; + } + /deep/ .el-carousel__container { + height: 22rem; + } + /deep/ .el-carousel__item{ + height: 22rem; + img{ + height: 22rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1.5rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 15rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 18rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 20rem; + } + /deep/ .el-carousel__container { + height: 20rem; + } + /deep/ .el-carousel__item{ + height: 20rem; + img{ + height: 20rem; + } + } + } + .slide { + height: 18rem; + p { + line-height: 1.7rem; + } + } + } + .shows { + .left { + height: 17rem; + .text { + line-height: 2rem; + font-size: .95rem; + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 15rem !important; + } + } + } + .news { + li { + img { + height: 15rem ; + } + } + } + .slide { + .img-wrap { + height: 15rem !important; + } + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + + .wrap { + /deep/ .el-carousel{ + height: 25rem; + } + /deep/ .el-carousel__container { + height: 25rem; + } + /deep/ .el-carousel__item{ + height: 25rem; + img{ + height: 25rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1.5rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 20rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 22rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 22rem; + } + /deep/ .el-carousel__container { + height: 22rem; + } + /deep/ .el-carousel__item{ + height: 22rem; + img{ + height: 22rem; + } + } + } + .slide { + height: 20rem; + p { + line-height: 2.5rem; + } + } + } + .shows { + .left { + height: 20rem; + .text { + line-height: 2rem; + font-size: .95rem; + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 20rem !important; + } + } + } + .news { + li { + img { + height: 18rem ; + } + } + } + .slide { + .img-wrap { + height: 18rem !important; + } + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + + .wrap { + /deep/ .el-carousel{ + height: 28rem; + } + /deep/ .el-carousel__container { + height: 28rem; + } + /deep/ .el-carousel__item{ + height: 28rem; + img{ + height: 28rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1.5rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 25rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 25rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 28rem; + } + /deep/ .el-carousel__container { + height: 28rem; + } + /deep/ .el-carousel__item{ + height: 28rem; + img{ + height: 28rem; + } + } + } + .slide { + height: 23rem; + p { + line-height: 2.5rem; + } + } + } + .shows { + .left { + height: 23rem; + .text { + line-height: 2rem; + font-size: .95rem; + } + } + .card-list { + li{ + .pic { + height: 23rem !important; + } + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 20rem !important; + } + } + .left { + .slides { + .item { + height: 13rem !important; + } + } + } + } + .news { + li { + img { + height: 20rem ; + } + } + } + .slide { + .img-wrap { + height: 20rem !important; + } + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + + .wrap { + /deep/ .el-carousel{ + height: 32rem; + } + /deep/ .el-carousel__container { + height: 32rem; + } + /deep/ .el-carousel__item{ + height: 32rem; + img{ + height: 32rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1.5rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 32rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 30rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 35rem; + } + /deep/ .el-carousel__container { + height: 35rem; + } + /deep/ .el-carousel__item{ + height: 35rem; + img{ + height: 35rem; + } + } + } + .slide { + height: 28rem; + p { + line-height: 2.5rem; + } + } + } + .shows { + .left { + height: 28rem; + .text { + line-height: 3rem; + font-size: 1.5rem; + } + } + .card-list { + li{ + .pic { + height: 26rem !important; + } + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 25rem !important; + } + } + .left { + .slides { + .item { + height: 15rem !important; + } + } + } + } + .news { + li { + img { + height: 28rem ; + } + } + } + .slide { + .img-wrap { + height: 28rem !important; + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + + .wrap { + /deep/ .el-carousel{ + height: 40rem; + } + /deep/ .el-carousel__container { + height: 40rem; + } + /deep/ .el-carousel__item{ + height: 40rem; + img{ + height: 40rem; + } + } + } + .block { + .inner { + width: 90%; + .title { + padding-bottom: 1.25rem; + margin-bottom: 1.25rem; + h5 { + font-size: 1.5rem; + span { + font-size: .75rem; + } + } + span { + font-size: .85rem; + } + } + .sfel-banner { + .newBox { + height: 35rem !important; + } + } + .card { + margin-top: 1.25rem; + li { + .pic { + height: 35rem; + } + } + } + .shop-shows{ + .left { + /deep/ .el-carousel{ + height: 40rem; + } + /deep/ .el-carousel__container { + height: 40rem; + } + /deep/ .el-carousel__item{ + height: 40rem; + img{ + height: 40rem; + } + } + } + .slide { + height: 35rem; + p { + line-height: 2.5rem; + } + } + } + .shows { + .left { + height: 32rem; + .text { + line-height: 3rem; + font-size: 1.5rem; + } + } + .card-list { + li{ + .pic { + height: 30rem !important; + } + } + } + } + .media-wrap { + .right { + .img-wrap { + height: 30rem !important; + } + } + .left { + .slides { + .item { + height: 18rem !important; + } + } + } + } + .news { + li { + img { + height: 32rem ; + } + } + } + .slide { + .img-wrap { + height: 32rem !important; + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/talent/index.vue b/src/pages/talent/index.vue index 47e425e..383e773 100644 --- a/src/pages/talent/index.vue +++ b/src/pages/talent/index.vue @@ -33,7 +33,7 @@
{{ modules[3].form.title }}
- +