diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue index 78af825..938e9f9 100644 --- a/src/pages/about/index.vue +++ b/src/pages/about/index.vue @@ -554,7 +554,7 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .wrap { /deep/ .el-carousel { @@ -606,4 +606,450 @@ export default { } } } +@media (max-width: 320px) { + .banner-item{ + img { + height: 10rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 13rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 13rem; + } + } + } + .list { + li { + .pic { + height: 13rem; + } + } + } + .staff { + .pic { + height: 13rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 13rem; + } + } + } +} +@media (min-width: 320px) and (max-width: 375px) { + .banner-item{ + img { + height: 13rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 13rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 13rem; + } + } + } + .list { + li { + .pic { + height: 13rem; + } + } + } + .staff { + .pic { + height: 13rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 13rem; + } + } + } +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + /deep/ .el-carousel{ + height: 15rem; + } + /deep/ .el-carousel__container{ + height: 15rem; + } + /deep/ .el-carousel__item { + height: 15rem; + } + } + .banner-item{ + img { + height: 15rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 13rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 13rem; + } + } + } + .list { + li { + .pic { + height: 15rem; + } + } + } + .staff { + .pic { + height: 13rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 13rem; + } + } + } +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + /deep/ .el-carousel{ + height: 18rem; + } + /deep/ .el-carousel__container{ + height: 18rem; + } + /deep/ .el-carousel__item { + height: 18rem; + } + } + .banner-item{ + img { + height: 18rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 15rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 15rem; + } + } + } + .list { + li { + .pic { + height: 15rem; + } + } + } + .staff { + .pic { + height: 15rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 15rem; + } + } + } +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + /deep/ .el-carousel{ + height: 20rem; + } + /deep/ .el-carousel__container{ + height: 20rem; + } + /deep/ .el-carousel__item { + height: 20rem; + } + } + .banner-item{ + img { + height: 20rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 17rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 17rem; + } + } + } + .list { + li { + .pic { + height: 17rem; + } + } + } + .staff { + .pic { + height: 17rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 17rem; + } + } + } +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + /deep/ .el-carousel{ + height: 22rem; + } + /deep/ .el-carousel__container{ + height: 22rem; + } + /deep/ .el-carousel__item { + height: 22rem; + } + } + .banner-item{ + img { + height: 22rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 20rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 20rem; + } + } + } + .list { + li { + .pic { + height: 20rem; + } + } + } + .staff { + .pic { + height: 20rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 20rem; + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + /deep/ .el-carousel{ + height: 30rem; + } + /deep/ .el-carousel__container{ + height: 30rem; + } + /deep/ .el-carousel__item { + height: 30rem; + } + } + .banner-item{ + img { + height: 30rem !important; + } + .banner-name { + font-size: 1.5rem; + } + } + .block { + padding: 1.25rem 0; + .inner { + width: 90%; + .texts { + .bg { + height: 26rem; + } + } + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + .people { + li { + .pic { + height: 26rem; + } + } + } + .list { + li { + .pic { + height: 26rem; + } + } + } + .staff { + .pic { + height: 26rem !important; + } + } + } + } + .plan { + .inner { + .pic { + height: 26rem; + } + } + } +} +@media (min-width: 1200px) and (max-width: 1300px) { + .block { + .inner { + .card { + li { + h6 { + font-size: 1.5rem; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index e5cd8b9..7d795b7 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -380,7 +380,7 @@ export default { } } -@media (min-width: 280px) and (max-width: 750px) { +@media (min-width: 280px) and (max-width: 1200px) { .carousel{ height: 21.87rem; img{ @@ -392,7 +392,7 @@ export default { } .about { .des { - font-size: 1.5rem; + font-size: 1rem; } } .el-carousel__item{ @@ -501,4 +501,339 @@ export default { } } } + +@media (max-width: 320px) { + .wrap { + /deep/ .el-carousel{ + height: 15rem; + } + /deep/ .el-carousel__container{ + height: 15rem; + } + /deep/ .el-carousel__item { + height: 15rem; + img{ + height: 15rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 13rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 8rem; + } + } + } + .people { + li { + .pic { + height: 13rem; + } + } + } + } + } + +} +@media (min-width: 320px) and (max-width: 375px) { + .wrap { + /deep/ .el-carousel{ + height: 18rem; + } + /deep/ .el-carousel__container{ + height: 18rem; + } + /deep/ .el-carousel__item { + height: 18rem; + img{ + height: 18rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 13rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 8rem; + } + } + } + .people { + li { + .pic { + height: 15rem; + } + } + } + } + } + +} +@media (min-width: 375px) and (max-width: 480px) { + .wrap { + /deep/ .el-carousel{ + height: 20rem; + } + /deep/ .el-carousel__container{ + height: 20rem; + } + /deep/ .el-carousel__item { + height: 20rem; + img{ + height: 20rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 13rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 8rem; + } + } + } + .people { + li { + .pic { + height: 15rem; + } + } + } + } + } + +} +@media (min-width: 480px) and (max-width: 640px) { + .wrap { + /deep/ .el-carousel{ + height: 20rem; + } + /deep/ .el-carousel__container{ + height: 20rem; + } + /deep/ .el-carousel__item { + height: 20rem; + img{ + height: 20rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 18rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 10rem; + } + } + } + .people { + li { + .pic { + height: 20rem; + } + } + } + } + } + +} +@media (min-width: 640px) and (max-width: 768px) { + .wrap { + /deep/ .el-carousel{ + height: 25rem; + } + /deep/ .el-carousel__container{ + height: 25rem; + } + /deep/ .el-carousel__item { + height: 25rem; + img{ + height: 25rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 22rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 10rem; + } + } + } + .people { + li { + .pic { + height: 25rem; + } + } + } + } + } + +} +@media (min-width: 768px) and (max-width: 980px) { + .wrap { + /deep/ .el-carousel{ + height: 27rem; + } + /deep/ .el-carousel__container{ + height: 27rem; + } + /deep/ .el-carousel__item { + height: 27rem; + img{ + height: 27rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 22rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 10rem; + } + } + } + .people { + li { + .pic { + height: 30rem; + } + } + } + } + } +} +@media (min-width: 980px) and (max-width: 1200px) { + .wrap { + /deep/ .el-carousel{ + height: 30rem; + } + /deep/ .el-carousel__container{ + height: 30rem; + } + /deep/ .el-carousel__item { + height: 30rem; + img{ + height: 30rem; + } + + } + } + .block { + .inner { + .card { + li { + .pic { + height: 28rem; + } + .texts { + margin-top: 1.2rem; + + } + } + } + .news { + li { + padding: 1.2rem; + img{ + width: 10rem; + } + } + } + .people { + li { + .pic { + height: 35rem; + } + } + } + } + } +} \ No newline at end of file