From f5d34a00db48b8fe060d59702df8ca13dbef6b95 Mon Sep 17 00:00:00 2001 From: clay <20932067@zju.edu.cn> Date: Wed, 12 Jan 2022 18:53:03 +0800 Subject: [PATCH] 01 --- src/App.vue | 1 + src/main.js | 1 + src/views/header/index.vue | 250 +++++++++--------- src/views/header/mobile_herder.vue | 3 + src/views/index/components/news_center.vue | 10 +- .../components/party_building_activities.vue | 10 +- .../components/scientific_research_trends.vue | 40 ++- src/views/index/components/slideshow_card.vue | 103 +++++++- .../index/components/teaching_student.vue | 4 +- 9 files changed, 271 insertions(+), 151 deletions(-) diff --git a/src/App.vue b/src/App.vue index ae8215b..dc5ccb5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@
+
diff --git a/src/main.js b/src/main.js index 49ac3ed..d99298c 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,7 @@ import router from './router' import i18n from './i18n/i18n' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; +import 'element-ui/lib/theme-chalk/display.css'; Vue.config.productionTip = false diff --git a/src/views/header/index.vue b/src/views/header/index.vue index 183bb95..a9472b2 100644 --- a/src/views/header/index.vue +++ b/src/views/header/index.vue @@ -1,133 +1,134 @@ diff --git a/src/views/index/components/scientific_research_trends.vue b/src/views/index/components/scientific_research_trends.vue index f01c816..620bf96 100644 --- a/src/views/index/components/scientific_research_trends.vue +++ b/src/views/index/components/scientific_research_trends.vue @@ -25,10 +25,10 @@ - +
- + @@ -193,10 +193,10 @@ - +
- + @@ -343,7 +343,7 @@ export default { padding-left: 4rem; .img { - img{ + img { width: 2.6rem; } } @@ -352,9 +352,9 @@ export default { margin-left: 1rem; font-size: 1.8rem; font-weight: 500; - overflow:hidden; //超出的文本隐藏 - text-overflow:ellipsis; //溢出用省略号显示 - white-space:nowrap; //溢出不换行 + overflow: hidden; //超出的文本隐藏 + text-overflow: ellipsis; //溢出用省略号显示 + white-space: nowrap; //溢出不换行 } .time { @@ -395,7 +395,7 @@ export default { .img { - img{ + img { width: 2.6rem; } } @@ -404,9 +404,9 @@ export default { margin-left: 1rem; font-size: 1.8rem; font-weight: 500; - overflow:hidden; //超出的文本隐藏 - text-overflow:ellipsis; //溢出用省略号显示 - white-space:nowrap; //溢出不换行 + overflow: hidden; //超出的文本隐藏 + text-overflow: ellipsis; //溢出用省略号显示 + white-space: nowrap; //溢出不换行 } .time { @@ -419,4 +419,20 @@ export default { } } +@media screen and (min-width: 1100px) and (max-width: 1400px) { + .scientific_context_text { + padding-left: 2rem !important; + + .time { + margin-left: 2rem !important; + } + } + .academia_context_text { + padding-left: 2rem !important; + + .time{ + margin-left: 2rem !important; + } + } +} diff --git a/src/views/index/components/slideshow_card.vue b/src/views/index/components/slideshow_card.vue index 7f06871..542c5a3 100644 --- a/src/views/index/components/slideshow_card.vue +++ b/src/views/index/components/slideshow_card.vue @@ -194,25 +194,32 @@ export default { background-color: #fff; .card_img { - width: 40rem; - height: 30rem; + width: 100%; + height: 75%; img { - border-radius:2rem 2rem 0 0; + border-radius: 2rem 2rem 0 0; display: inline-block; width: 100%; height: 100%; object-fit: cover; } } - .card_title{ + + .card_title { + width: 90%; font-size: 2rem; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #1C1C1C; text-align: left; - width: 36rem; + //width: 36rem; margin: 2rem auto; + overflow:hidden; //超出的文本隐藏 + text-overflow:ellipsis; //溢出用省略号显示 + display: -webkit-box; //作为弹性伸缩盒子模型显示。 + -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 + -webkit-line-clamp: 2; //显示的行 } } @@ -255,7 +262,7 @@ export default { transform: scale(0.7); } -.banner-card .left-btn ,.right-btn { +.banner-card .left-btn, .right-btn { transition: 0.3s; position: absolute; top: 20rem; @@ -276,4 +283,88 @@ export default { right: 10rem; } +@media screen and (min-width: 1100px) and (max-width: 1400px) { + .banner-card { + height: 34rem; + + li { + width: 28rem !important; + height: 28rem !important; + + .card_title { + font-size: 1.6rem; + margin: 1rem 1rem; + } + } + + .one { + left: -2.8rem; + } + + .two { + left: 10rem; + } + + .three { + left: 24rem; + } + + .four { + left: 38rem; + } + + .five { + left: 50.3rem; + } + + .six { + left: 80rem; + } + } + + +} + +@media screen and (max-width: 1100px) { + .banner-card { + height: 34rem; + + li { + width: 22rem !important; + height: 22rem !important; + + .card_title { + font-size: 1.6rem; + margin: 1rem 1rem; + display: -webkit-box; //作为弹性伸缩盒子模型显示。 + -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 + -webkit-line-clamp: 2; //显示的行 + } + } + + .one { + left: -2.6rem; + } + + .two { + left: 6rem; + } + + .three { + left: 16rem; + } + + .four { + left: 26rem; + } + + .five { + left: 34rem; + } + + .six { + left: 80rem; + } + } +} diff --git a/src/views/index/components/teaching_student.vue b/src/views/index/components/teaching_student.vue index aa081a0..008dd7e 100644 --- a/src/views/index/components/teaching_student.vue +++ b/src/views/index/components/teaching_student.vue @@ -27,10 +27,10 @@ - +
- +