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
Split 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. 312
      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>
<div class="des">{{ modules[1].form.des }}</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>
@ -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;
}
}
}
}
</style>

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

@ -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);
}
}
}

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

@ -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;
}
}
}
}
}
}
}
</style>

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

@ -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;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save