From 7a46e2e4937610550ad643f8e95c1bb8f0b507b6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Sun, 23 Apr 2023 17:36:42 +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/pages/industrial/index.vue | 58 +++++-
src/pages/mission/index.vue | 163 ++--------------
src/pages/researchTeam/index.vue | 312 +------------------------------
src/pages/scientific/index.vue | 38 +++-
4 files changed, 114 insertions(+), 457 deletions(-)
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;
+ }
+ }
+ }
+}