jialong.yu
/
FE_IASF_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

适配

Browse Source
master
yujialong 2 years ago
parent e47272f8ae
commit 7a46e2e493
4 changed files with 114 additions and 457 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      src/pages/industrial/index.vue
  2. 163
      src/pages/mission/index.vue
  3. 310
      src/pages/researchTeam/index.vue
  4. 38
      src/pages/scientific/index.vue

58
src/pages/industrial/index.vue
Unescape View File

@ -15,7 +15,7 @@
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
<img class="bg" width="562" height="506" :src="modules[1].form.pic" alt=""> <img class="bg" :src="modules[1].form.pic" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -120,7 +120,8 @@ export default {
} }
} }
.left { .left {
width: 695px; width: 500px;
padding-right: 30px;
} }
.des { .des {
margin: 20px 0; margin: 20px 0;
@ -129,6 +130,8 @@ export default {
line-height: 31px; line-height: 31px;
} }
.bg { .bg {
width: 560px;
height: 500px;
margin: -122px 0 0 0; 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;
}
}
}
}
</style> </style>

163
src/pages/mission/index.vue
Unescape View File

@ -172,8 +172,8 @@ export default {
padding: 0 20px; padding: 0 20px;
} }
h6 { h6 {
margin-bottom: 20px; margin-bottom: 1rem;
font-size: 1.5rem; font-size: 1.3rem;
color: #272727; color: #272727;
@include ellipsis(); @include ellipsis();
} }
@ -185,11 +185,8 @@ export default {
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
body {
width: 100% !important;
}
.inner { .inner {
width: 100%; width: 98%;
} }
.item { .item {
img { img {
@ -208,153 +205,25 @@ export default {
} }
} }
} }
@media (max-width: 320px) { @media (max-width: 980px) {
.wrap { .mind {
.single-banner { .list {
.banner-img { flex-direction: column;
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;
}
} }
li {
width: 100%;
} }
} }
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (max-width: 480px) {
.wrap { .mind {
.single-banner { li {
.banner-img { .pic {
height: 40rem; width: 150px;
height: 130px;
} }
.texts { .texts {
top: 20rem; width: calc(100% - 150px);
left: 12rem;
.banner-title{
font-size: 2rem;
margin-bottom: .5rem;
}
.banner-des{
font-size: .85rem;
}
} }
} }
} }

310
src/pages/researchTeam/index.vue
Unescape View File

@ -208,31 +208,6 @@ export default {
color: #666; 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 { .right {
width: 20%; width: 20%;
} }
@ -283,296 +258,19 @@ export default {
} }
} }
} }
@media (max-width: 640px) {
@media (min-width: 280px) and (max-width: 750px) {
.article {
.recruit {
li {
flex-direction: column;
}
.pic {
width: 100%;
margin-bottom: 10px;
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
}
@media (max-width: 1200px) {
.content {
.article { .article {
flex-direction: column;
.left { .left {
width: 100%; .search {
.recruit { width: 5 0%;
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: .8rem;
}
} }
} }
.notice { .teams {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; 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;
}
}
}
}
}
}
} }
</style> </style>

38
src/pages/scientific/index.vue
Unescape View File

@ -332,11 +332,47 @@ export default {
} }
.title { .title {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 2.2rem; font-size: 1.8rem;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; 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;
}
}
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save