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

自适应修复

Browse Source
master
yujialong 1 year ago
parent 0c0f66c4dd
commit f6f86dd7d9
15 changed files with 328 additions and 192 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. 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. 30
      src/pages/iasf/index.vue
  8. 36
      src/pages/industrial/index.vue
  9. 129
      src/pages/lightSources/index.vue
  10. 73
      src/pages/overview/index.vue
  11. 14
      src/pages/publish/show.vue
  12. 93
      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

19
src/layouts/header/index.vue
Unescape View File

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

8
src/layouts/navbar/index.vue
Unescape View File

@ -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,

19
src/pages/article/index.vue
Unescape View File

@ -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=69）是另一套主题，加个class即可
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

15
src/pages/column/index.vue
Unescape View File

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

7
src/pages/contactUs/index.vue
Unescape View File

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

5
src/pages/governance/index.vue
Unescape View File

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

30
src/pages/iasf/index.vue
Unescape View File

@ -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,18 +816,11 @@ export default {
}
}
@media (max-width: 1200px) {
.block {
padding: 3.125rem 0;
.inner {
width: 95%;
margin: 0 auto;
.card {
flex-direction: column;
li {
margin-top: 1.25rem;
width: 100%;
}
}
.card {
flex-direction: column;
li {
margin-top: 1.25rem;
width: 100%;
}
}
.news {
@ -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>

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

@ -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>

129
src/pages/lightSources/index.vue
Unescape View File

@ -34,72 +34,74 @@
:key="i"
@click="tabChange(item)">{{ item.name }}</li>
</ul>
<table v-if="!active"
class="table">
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>电子束能量（GeV）</th>
<th>储存环周长(m)</th>
<th>实验站数量</th>
<th>代际</th>
<th>建成/改造时间</th>
<th>发射度(nm.rad)</th>
<th>状态</th>
</tr>
</thead>
<tr v-for="(item, i) in modules[2].list"
:key="i">
<td>{{ item.name }}</td>
<td>{{ item.country }}</td>
<td>{{ item.gev }}</td>
<td>{{ item.storage }}</td>
<td>{{ item.stations }}</td>
<td>{{ item.intergenerational }}</td>
<td>{{ item.time }}</td>
<td>{{ item.emittance }}</td>
<td>{{ item.status }}</td>
</tr>
</table>
<table v-else
class="table">
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>地点</th>
<th>加速器技术</th>
<th>能量/GeV</th>
<th>波长范围/nm</th>
<th>重复频率/Hz Repetition rate</th>
<th>设施长度/m Overall length</th>
<th>线站数量</th>
<th>状态</th>
<th>出光时间</th>
</tr>
</thead>
<template v-if="modules[3].list.length">
<tr v-for="(item, i) in modules[3].list"
<div class="table-wrap">
<table v-if="!active"
class="table">
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>电子束能量（GeV）</th>
<th>储存环周长(m)</th>
<th>实验站数量</th>
<th>代际</th>
<th>建成/改造时间</th>
<th>发射度(nm.rad)</th>
<th>状态</th>
</tr>
</thead>
<tr v-for="(item, i) in modules[2].list"
:key="i">
<td>{{ item.name }}</td>
<td>{{ item.country }}</td>
<td>{{ item.address }}</td>
<td>{{ item.accelerator }}</td>
<td>{{ item.gev }}</td>
<td>{{ item.wavelength }}</td>
<td>{{ item.repetitive }}</td>
<td>{{ item.facility }}</td>
<td>{{ item.storage }}</td>
<td>{{ item.stations }}</td>
<td>{{ item.status }}</td>
<td>{{ item.intergenerational }}</td>
<td>{{ item.time }}</td>
<td>{{ item.emittance }}</td>
<td>{{ item.status }}</td>
</tr>
</template>
<tr v-else>
<td class="none"
colspan="11">暂无数据</td>
</tr>
</table>
</table>
<table v-else
class="table">
<thead>
<tr>
<th>光源名称</th>
<th>国家</th>
<th>地点</th>
<th>加速器技术</th>
<th>能量/GeV</th>
<th>波长范围/nm</th>
<th>重复频率/Hz Repetition rate</th>
<th>设施长度/m Overall length</th>
<th>线站数量</th>
<th>状态</th>
<th>出光时间</th>
</tr>
</thead>
<template v-if="modules[3].list.length">
<tr v-for="(item, i) in modules[3].list"
:key="i">
<td>{{ item.name }}</td>
<td>{{ item.country }}</td>
<td>{{ item.address }}</td>
<td>{{ item.accelerator }}</td>
<td>{{ item.gev }}</td>
<td>{{ item.wavelength }}</td>
<td>{{ item.repetitive }}</td>
<td>{{ item.facility }}</td>
<td>{{ item.stations }}</td>
<td>{{ item.status }}</td>
<td>{{ item.time }}</td>
</tr>
</template>
<tr v-else>
<td class="none"
colspan="11">暂无数据</td>
</tr>
</table>
</div>
</div>
</div>
</div>
@ -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>

73
src/pages/overview/index.vue
Unescape View File

@ -60,15 +60,20 @@
<div class="block gray fac">
<div class="inner">
<div class="event">
<h6>{{ modules[4].form.title }}</h6>
<p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text"
v-html="modules[4].form.des"></div>
<img v-if="isLink(modules[4].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
<img src="http://10.10.11.7/images/overview/16.png"
alt=""
@click="openLink(modules[4].form)">
class="pic">
<div class="texts">
<h6>{{ modules[4].form.title }}</h6>
<p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text"
v-html="modules[4].form.des"></div>
<img v-if="isLink(modules[4].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[4].form)">
</div>
</div>
<ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
@ -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;
}
}
}

14
src/pages/publish/show.vue
Unescape View File

@ -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>

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

@ -18,38 +18,40 @@
clearable>
</div>
<div class="letter">
<span v-for="(letter, i) in letters"
<div class="team-wrap">
<div class="letter">
<span v-for="(letter, i) in letters"
:key="i"
:class="['item', {active: curLetter == letter}]"
@click="letterClick(letter)">{{ letter }}</span>
</div>
<ul class="teams">
<li v-for="(item, i) in articles"
:key="i"
:class="['item', {active: curLetter == letter}]"
@click="letterClick(letter)">{{ letter }}</span>
@click="toArtice(item, modules[1].form)">
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/3.png"
alt=""
class="icon">
<span class="bold">{{ item.title }}</span>
<span class="val">/ {{ item.post }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/4.png"
alt=""
class="icon">
<span class="text">专业 {{ item.major }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/5.png"
alt=""
class="icon">
<span class="text">荣誉 {{ item.honor }}</span>
</div>
</li>
</ul>
</div>
<ul class="teams">
<li v-for="(item, i) in articles"
:key="i"
@click="toArtice(item, modules[1].form)">
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/3.png"
alt=""
class="icon">
<span class="bold">{{ item.title }}</span>
<span class="val">/ {{ item.post }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/4.png"
alt=""
class="icon">
<span class="text">专业 {{ item.major }}</span>
</div>
<div class="line">
<img src="http://10.10.11.7/images/researchTeam/5.png"
alt=""
class="icon">
<span class="text">荣誉 {{ item.honor }}</span>
</div>
</li>
</ul>
</div>
<RightColumns />
@ -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,11 +253,37 @@ 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 {
.search {
width: 5 0%;
width: 50%;
}
}
.teams {

18
src/pages/speech/index.vue
Unescape View File

@ -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>

22
src/pages/team/index.vue
Unescape View File

@ -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>

32
src/styles/page/page.scss
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save