自适应修复

master
yujialong 1 year ago
parent 0c0f66c4dd
commit f6f86dd7d9
  1. 19
      src/layouts/header/index.vue
  2. 8
      src/layouts/navbar/index.vue
  3. 19
      src/pages/article/index.vue
  4. 15
      src/pages/column/index.vue
  5. 7
      src/pages/contactUs/index.vue
  6. 5
      src/pages/governance/index.vue
  7. 20
      src/pages/iasf/index.vue
  8. 36
      src/pages/industrial/index.vue
  9. 11
      src/pages/lightSources/index.vue
  10. 57
      src/pages/overview/index.vue
  11. 14
      src/pages/publish/show.vue
  12. 31
      src/pages/researchTeam/index.vue
  13. 18
      src/pages/speech/index.vue
  14. 22
      src/pages/team/index.vue
  15. 32
      src/styles/page/page.scss

@ -27,6 +27,7 @@
@click.stop="toggleSearch">
<template v-if="site == 2">
<img class="search"
style="margin-right: 40px"
:src="require('@/assets/images/email' + (isHome ? '-white' : '') + '.png')"
alt=""
@click.stop="toMail">
@ -236,11 +237,12 @@ $height: 90px;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
// min-width: $min-width;
// background-color: #fff;
height: $height;
box-sizing: content-box;
padding: 0 5% 0 5%;
&:not(.channel) {
background-color: #fff;
border-bottom: 1px solid #f7f7f7;
@ -249,9 +251,6 @@ $height: 90px;
background-color: rgba(0, 0, 0, 0.15);
}
.logo {
position: absolute;
top: 0;
left: 5%;
font-size: 1.428rem;
color: #333330;
line-height: $height;
@ -261,9 +260,6 @@ $height: 90px;
}
}
.tools {
position: absolute;
top: 30px;
right: 5%;
img {
cursor: pointer;
}
@ -309,10 +305,11 @@ $height: 90px;
}
}
.rightBox {
font-size: 2.57rem;
position: absolute;
right: 10px;
top: 2rem;
font-size: 2.57rem;
color: #818181;
}
.contentBox {
width: 100%;
@ -343,7 +340,7 @@ $height: 90px;
left: 10px;
}
.search {
margin-right: 20px;
margin-right: 20px !important;
}
.tools {
right: 30px;

@ -175,10 +175,10 @@ $height: 90px;
}
/deep/.nav.el-menu--horizontal {
display: flex;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
// position: absolute;
// top: 0;
// left: 50%;
// transform: translateX(-50%);
border: 0;
outline: none;
.el-menu-item,

@ -77,7 +77,7 @@ export default {
methods: {
//
getInfo () {
this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
this.id && this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
//
const { columnName, path, id } = this.$route.query
this.routes = [
@ -102,14 +102,21 @@ export default {
this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
} else {
if (temId == 69) this.isParty = 1 // articleTemplate=69class
if (temId == 72) this.isPeople = 1 // articleTemplate=72
if (temId == 72) this.isPeople = 1 // articleTemplate=72
data.releaseTime = data.releaseTime.split(' ')[0]
this.form = data
this.columnId = data.columnId
// banner
if (!data.bannerImg) {
this.getBanner(this.$refs.right.columns)
this.form.bannerImg = this.gotBanner && this.columnBanner || require('@/assets/images/article-banner.png')
const columns = await this.$post(this.api.listWithTree, {
siteId: this.site,
columnName: '',
templateId: '',
typeId: '',
isSort: 1
})
this.getBanner(columns.data)
this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
}
// +1
@ -128,10 +135,10 @@ export default {
})
.catch((res) => { });
},
// banner
// banner
getBanner (data) {
for (const e of data) {
if (e.columnBanner) this.columnBanner = e.columnBanner
if (e.columnBanner && !this.gotBanner) this.columnBanner = e.columnBanner
if (e.id == this.columnId) {
this.gotBanner = 1
break

@ -449,6 +449,7 @@ export default {
watch: {
$route () {
this.id = this.$route.query.id;
this.info = {}
this.init();
},
'form.title': function (val) {
@ -985,18 +986,18 @@ export default {
.articles {
.readDetail {
padding: 1.3rem 1.5rem;
padding: 10px 20px;
justify-content: flex-start;
align-items: center;
.texts {
padding-left: 1.5rem;
.titleDes {
margin-bottom: 1.3rem;
margin-bottom: 10px;
font-size: 1.2rem;
margin-top: 0;
}
.des {
margin-top: 1.3rem;
margin-top: 10px;
}
}
.titleDes {
@ -1004,7 +1005,7 @@ export default {
-webkit-line-clamp: 1;
}
.readDetailBtn {
margin-top: 1.3rem;
margin-top: 10px;
}
.texts {
flex-grow: 1;
@ -1036,10 +1037,9 @@ export default {
}
h6 {
margin-bottom: 15px;
margin-bottom: 10px;
font-size: 1.368rem;
color: #000;
line-height: 38px;
@include mul-ellipsis(2);
}
@ -1047,6 +1047,7 @@ export default {
display: flex;
align-items: center;
font-size: 0.88rem;
line-height: 1;
font-family: PingFangSC-Medium;
color: #333;
}
@ -1056,7 +1057,7 @@ export default {
}
.des {
margin-top: 15px;
margin-top: 10px;
@include mul-ellipsis(2);
}

@ -198,4 +198,11 @@ export default {
background-color: #1583ff;
}
}
@media (max-width: 1200px) {
.inner {
.contact {
padding: 3rem 1rem;
}
}
}
</style>

@ -228,10 +228,11 @@ export default {
}
.cards {
ul {
width: 100%;
width: 98%;
}
li {
width: 30%;
width: 100%;
margin: 0 0 20px 0;
}
}
}

@ -9,7 +9,8 @@
</div>
</div>
<div class="block">
<div class="block"
style="padding-top: 110px">
<div class="inner">
<ul class="card">
<li class="wow fadeInDown"
@ -815,11 +816,6 @@ export default {
}
}
@media (max-width: 1200px) {
.block {
padding: 3.125rem 0;
.inner {
width: 95%;
margin: 0 auto;
.card {
flex-direction: column;
li {
@ -827,8 +823,6 @@ export default {
width: 100%;
}
}
}
}
.news {
flex-direction: column;
li {
@ -856,6 +850,9 @@ export default {
.pic {
width: 100%;
}
.left {
margin-bottom: 10px;
}
}
.about {
.inner {
@ -879,4 +876,11 @@ export default {
}
}
}
@media (max-width: 1200px) {
.iasf-banner {
.texts {
left: 3%;
}
}
}
</style>

@ -79,7 +79,7 @@
</div>
<div class="block">
<div class="inner app-inner">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
@ -187,14 +187,14 @@ export default {
@import '../../styles/page/page.scss';
.history {
h2 {
margin-bottom: 20px;
font-size: 1.8rem;
color: #333;
}
.texts {
display: flex;
justify-content: space-between;
padding: 82px 57px 30px;
margin-top: 20px;
padding: 30px 57px;
background-color: #fff;
border-radius: 100px 0px 0px 0px;
transition: 0.3s;
@ -291,9 +291,6 @@ export default {
}
}
.app-inner {
width: 1200px;
}
.app {
display: flex;
flex-wrap: wrap;
@ -391,6 +388,9 @@ export default {
.right {
width: 100%;
}
h6 {
margin-left: 0;
}
.right {
margin-top: 1rem;
}
@ -411,5 +411,29 @@ export default {
}
}
}
.app {
li {
width: calc((100% - 10px) / 2);
height: 267px;
&:nth-child(2n) {
margin-right: 0;
}
}
}
.news {
flex-direction: column;
li {
width: 100%;
margin: 0 0 20px 0;
}
}
}
@media (max-width: 780px) {
.app {
li {
width: 100%;
margin-right: 0;
}
}
}
</style>

@ -34,6 +34,7 @@
:key="i"
@click="tabChange(item)">{{ item.name }}</li>
</ul>
<div class="table-wrap">
<table v-if="!active"
class="table">
<thead>
@ -103,6 +104,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@ -186,6 +188,9 @@ export default {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
th {
white-space: nowrap;
}
th,
td {
padding: 10px 10px;
@ -193,4 +198,10 @@ export default {
text-align: left;
}
}
@media (max-width: 1200px) {
.table-wrap {
width: 100%;
overflow: auto;
}
}
</style>

@ -60,6 +60,10 @@
<div class="block gray fac">
<div class="inner">
<div class="event">
<img src="http://10.10.11.7/images/overview/16.png"
alt=""
class="pic">
<div class="texts">
<h6>{{ modules[4].form.title }}</h6>
<p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text"
@ -70,6 +74,7 @@
alt=""
@click="openLink(modules[4].form)">
</div>
</div>
<ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
@click="openLink(modules[5].form)">
@ -220,13 +225,12 @@ export default {
-webkit-line-clamp: 6;
}
.bg {
margin: -115px -80px 0 0;
margin: -115px -80px 0 30px;
border-top-right-radius: 40px;
}
}
.core {
position: relative;
height: 424px;
margin-bottom: 40px;
&:last-child {
.texts {
@ -236,7 +240,6 @@ export default {
}
.pic {
width: 100%;
height: 100%;
}
.texts {
position: absolute;
@ -264,9 +267,16 @@ export default {
.fac {
.event {
position: relative;
height: 387px;
padding: 70px 300px 70px 60px;
background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% 100% no-repeat;
.pic {
width: 100%;
}
.texts {
position: absolute;
top: 70px;
right: 300px;
bottom: 70px;
left: 60px;
}
h6 {
position: relative;
font-size: 2.2rem;
@ -409,7 +419,7 @@ export default {
width: auto;
max-width: 100%;
height: auto;
margin-top: 20px;
margin: 20px 0 0 0;
}
}
.scan {
@ -425,15 +435,27 @@ export default {
margin-top: 2rem;
}
}
.fac {
.event {
.texts {
position: static;
margin-top: 20px;
}
}
}
}
@media (max-width: 920px) {
.core {
.texts {
top: 20px;
left: 20px;
right: auto;
top: 20px !important;
left: 20px !important;
right: 20px !important;
width: auto;
}
}
.scan {
padding: 20px;
}
.fac {
.l-card {
flex-direction: column;
@ -444,14 +466,15 @@ export default {
}
}
}
@media (max-width: 640px) {
.about {
.inner {
flex-direction: column;
@media (max-width: 750px) {
.core {
.texts {
position: static;
padding: 20px;
color: #333;
}
.pic {
width: 100%;
margin-bottom: 2rem;
.line {
background: #333;
}
}
}

@ -261,9 +261,19 @@ export default {
}
}
}
@media (max-width: 1420px) {
@media (max-width: 1084px) {
.content {
width: 98%;
width: 95%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.right {
margin: 20px 0 0;
}
}
}
</style>

@ -18,6 +18,7 @@
clearable>
</div>
<div class="team-wrap">
<div class="letter">
<span v-for="(letter, i) in letters"
:key="i"
@ -51,6 +52,7 @@
</li>
</ul>
</div>
</div>
<RightColumns />
</div>
@ -178,6 +180,7 @@ export default {
.item {
padding: 5px 10px;
font-size: 1rem;
text-align: center;
color: #999;
cursor: pointer;
border: 1px solid #dbdbdb;
@ -237,7 +240,7 @@ export default {
}
@media (max-width: 1200px) {
.content {
width: 98%;
width: 95%;
}
.article {
flex-direction: column;
@ -250,6 +253,32 @@ export default {
}
}
}
@media (max-width: 980px) {
.article {
.team-wrap {
display: flex;
align-items: flex-start;
}
.letter {
flex-direction: column;
margin: 16px 10px 0 0;
.item {
border: 1px solid #dbdbdb;
border-top: 0;
&:first-child {
border-top: 1px solid #dbdbdb;
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
}
}
.teams {
flex: 1;
}
}
}
@media (max-width: 640px) {
.article {
.left {

@ -116,4 +116,22 @@ export default {
}
}
}
@media (max-width: 1200px) {
.inner {
width: 95%;
}
}
@media (max-width: 920px) {
.inner {
flex-direction: column;
justify-content: center;
align-items: center;
.pic {
max-width: 100%;
}
.texts {
margin: 20px 0 0;
}
}
}
</style>

@ -122,4 +122,26 @@ export default {
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
flex-direction: column;
.left,
.right {
width: 100%;
}
}
}
@media (max-width: 640px) {
.content {
.list {
li {
flex-direction: column;
}
.pic {
margin: 0 0 20px 0;
}
}
}
}
</style>

@ -130,13 +130,8 @@
}
}
}
@media (max-width: 1410px) {
.inner {
width: 80%;
}
}
@media (max-width: 1300px) {
@media (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
@ -148,6 +143,9 @@
}
}
}
.inner {
width: 95%;
}
.tabs {
overflow: hidden;
overflow-x: auto;
@ -159,25 +157,6 @@
}
}
}
@media (max-width: 980px) {
.wrap {
.single-banner {
.banner-img {
height: 32rem;
}
.texts {
top: 20rem;
left: 5rem;
}
}
}
.tabs {
li {
font-size: 0.8rem;
}
}
}
@media (max-width: 980px) {
.wrap {
.single-banner {
@ -190,6 +169,9 @@
}
}
}
.block {
padding: 50px 0;
}
}
@media (max-width: 768px) {
.wrap {

Loading…
Cancel
Save