全站替换成鸿蒙字体,去掉其他字体

master
yujialong 4 months ago
parent 24999a984c
commit 3ecdb1d325
  1. 8
      package-lock.json
  2. 2
      package.json
  3. 2
      src/pages/about/index.vue
  4. 191
      src/pages/aboutNew/index.vue
  5. 1
      src/pages/application/index.vue
  6. 73
      src/pages/article/activity.vue
  7. 4
      src/pages/article/editor.css
  8. 1
      src/pages/article/index.vue
  9. 3
      src/pages/column/index.vue
  10. 59
      src/pages/contactUs/index.vue
  11. 41
      src/pages/devHistory/index.vue
  12. 30
      src/pages/iasf/index.vue
  13. 277
      src/pages/research/index.vue
  14. 264
      src/pages/researchNew/index.vue
  15. 66
      src/pages/researchTeam/index.vue
  16. 103
      src/pages/science/index.vue
  17. 92
      src/pages/scientific/index.vue
  18. 638
      src/pages/sfel/index.vue
  19. 496
      src/pages/sfelNew/index.vue
  20. 28
      src/pages/speech/index.vue
  21. 186
      src/pages/talent/index.vue
  22. 83
      src/pages/talentCentre/index.vue
  23. 30
      src/pages/team/index.vue
  24. 149
      src/pages/userSharing/index.vue
  25. 4
      src/setting.js
  26. 40
      src/styles/common.scss
  27. BIN
      src/styles/font/HarmonyOS_SansSC_Light.ttf
  28. BIN
      src/styles/font/HarmonyOS_Sans_Regular.ttf
  29. BIN
      src/styles/font/PingFang-Regular.otf
  30. BIN
      src/styles/font/PingFangSC-Medium.otf
  31. BIN
      src/styles/font/PingFangTC-Semibold.ttf
  32. BIN
      src/styles/font/ProximaNova-Regular.otf
  33. BIN
      src/styles/font/SF-Pro-Display-Bold.otf
  34. BIN
      src/styles/font/SF-Pro-Display-Regular.otf
  35. BIN
      src/styles/font/SourceHanSansCN-VF-2.otf
  36. BIN
      src/styles/font/toppan.otf
  37. 2
      src/styles/layout/index.scss
  38. 2
      src/styles/lib/_style.scss
  39. 4
      src/styles/page/page.scss

8
package-lock.json generated

@ -1,5 +1,5 @@
{
"name": "vue-manage-system",
"name": "iasf",
"version": "4.2.0",
"lockfileVersion": 1,
"requires": true,
@ -10268,9 +10268,9 @@
}
},
"pinyin-pro": {
"version": "3.15.1",
"resolved": "https://registry.npmjs.org/pinyin-pro/-/pinyin-pro-3.15.1.tgz",
"integrity": "sha512-xG5gR/HkwEt39mLCAOTVlI6loYwmXvmx4iX6npBJ43GnyGu6EOjY/ukJBivvYObPKocwQ+4dc05cGOkk2hPdjw=="
"version": "3.23.1",
"resolved": "https://registry.npmjs.org/pinyin-pro/-/pinyin-pro-3.23.1.tgz",
"integrity": "sha512-fA345e5Zj+oAemjPKN9BpbTToUrq3J6ZVKEXpiCNNftFQahr4cKsBNnpGWR154WSOP3PgqlsaNgKklD8FlZvSw=="
},
"pkg-dir": {
"version": "4.2.0",

@ -22,7 +22,7 @@
"lru-cache": "^7.14.1",
"mavon-editor": "^2.9.1",
"node-sass": "^4.14.1",
"pinyin-pro": "^3.15.1",
"pinyin-pro": "^3.23.1",
"vue": "^2.6.14",
"vue-animate-number": "^0.4.2",
"vue-cropperjs": "^3.0.0",

@ -368,7 +368,6 @@ export default {
h6 {
margin-bottom: 10px;
font-size: 2.28rem;
font-family: toppan;
}
.des {
font-size: 1.024rem;
@ -545,7 +544,6 @@ export default {
margin-bottom: 10px;
font-size: 2.7rem;
font-weight: 800;
font-family: toppan;
color: #035ce1;
line-height: 2.45rem;
}

@ -1,17 +1,12 @@
<template>
<div class="wrap"
v-if="modules.length>=1">
<el-carousel height="24rem"
:interval="6000"
<div class="wrap" v-if="modules.length >= 1">
<el-carousel height="24rem" :interval="6000"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable"
:key="i">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i">
<div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<img :src="item.pic" alt="">
<p class="banner-name">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -19,20 +14,16 @@
</el-carousel>
<div class="block history gray">
<div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
<div :class="['inner', { 'cursor-pointer': isLink(modules[1].form.link.linkName) }]"
@click="openLink(modules[1].form)">
<h2 class="wow fadeInLeft"
style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<h2 class="wow fadeInLeft" style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
<div class="texts wow fadeInDown" data-wow-delay="0.5s">
<div class="left">
<h2>{{ modules[1].form.subTitle }}</h2>
<div class="line"></div>
<div class="des">{{ modules[1].form.des }}</div>
</div>
<img class="bg"
:src="modules[1].form.pic"
alt="">
<img class="bg" :src="modules[1].form.pic" alt="">
</div>
</div>
</div>
@ -40,36 +31,29 @@
<div class="block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
<ul class="stat">
<li class="wow fadeInLeft"
data-wow-delay="0.2s">
<li class="wow fadeInLeft" data-wow-delay="0.2s">
<p class="num">{{ modules[8].form.title }}</p>
<p class="text">{{ modules[8].form.des }}</p>
</li>
<li class="wow fadeInLeft"
data-wow-delay="0.4s">
<li class="wow fadeInLeft" data-wow-delay="0.4s">
<p class="num">{{ modules[9].form.title }}</p>
<p class="text">{{ modules[9].form.des }}</p>
</li>
<li class="wow fadeInLeft"
data-wow-delay="0.6s">
<li class="wow fadeInLeft" data-wow-delay="0.6s">
<p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p>
</li>
<li class="wow fadeInLeft"
data-wow-delay="0.9s">
<li class="wow fadeInLeft" data-wow-delay="0.9s">
<p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p>
</li>
<li class="wow fadeInLeft"
data-wow-delay="1.1s">
<li class="wow fadeInLeft" data-wow-delay="1.1s">
<p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p>
</li>
<li class="wow fadeInLeft"
data-wow-delay="1.3s">
<li class="wow fadeInLeft" data-wow-delay="1.3s">
<p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p>
</li>
@ -78,16 +62,13 @@
</div>
<div class="plan">
<div :class="['inner', {'cursor-pointer': isLink(modules[14].form.link.linkName)}]"
<div :class="['inner', { 'cursor-pointer': isLink(modules[14].form.link.linkName) }]"
@click="openLink(modules[14].form)">
<img class="pic wow fadeInLeft"
:src="modules[14].form.pic"
alt="">
<img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt="">
<div class="texts wow fadeInRight">
<h6>{{ modules[14].form.title }}</h6>
<div class="des">{{ modules[14].form.des }}</div>
<img src="@/assets/images/arrow-white.png"
alt="">
<img src="@/assets/images/arrow-white.png" alt="">
</div>
</div>
</div>
@ -95,24 +76,16 @@
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[15].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
<ul class="people">
<template v-for="(item, i) in modules[16].list">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
data-wow-delay="0.5s">
<img class="pic"
:src="item.pic"
alt="">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s">
<img class="pic" :src="item.pic" alt="">
<div class="texts">
<p class="sub">{{ item.subTitle }}</p>
<h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p>
<img :class="{'arrow': isLink(item.link.linkName)}"
src="@/assets/images/arrow.png"
alt=""
<img :class="{ 'arrow': isLink(item.link.linkName) }" src="@/assets/images/arrow.png" alt=""
@click="openLink(item)">
</div>
</li>
@ -124,36 +97,23 @@
<div class="block list-block gray">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
<ul class="list">
<li class="wow fadeInDown"
data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[18].form.link.linkName)}"
@click="openLink(modules[18].form)">
<img class="pic"
:src="modules[18].form.pic"
alt="">
<li class="wow fadeInDown" data-wow-delay="0.6s"
:class="{ 'cursor-pointer': isLink(modules[18].form.link.linkName) }" @click="openLink(modules[18].form)">
<img class="pic" :src="modules[18].form.pic" alt="">
<h6>{{ modules[18].form.title }}</h6>
<p class="des">{{ modules[18].form.des }}</p>
</li>
<li class="wow fadeInDown"
data-wow-delay="0.8s"
:class="{'cursor-pointer': isLink(modules[19].form.link.linkName)}"
@click="openLink(modules[19].form)">
<img class="pic"
:src="modules[19].form.pic"
alt="">
<li class="wow fadeInDown" data-wow-delay="0.8s"
:class="{ 'cursor-pointer': isLink(modules[19].form.link.linkName) }" @click="openLink(modules[19].form)">
<img class="pic" :src="modules[19].form.pic" alt="">
<h6>{{ modules[19].form.title }}</h6>
<p class="des">{{ modules[19].form.des }}</p>
</li>
<li class="wow fadeInDown"
data-wow-delay="1s"
:class="{'cursor-pointer': isLink(modules[20].form.link.linkName)}"
@click="openLink(modules[20].form)">
<img class="pic"
:src="modules[20].form.pic"
alt="">
<li class="wow fadeInDown" data-wow-delay="1s"
:class="{ 'cursor-pointer': isLink(modules[20].form.link.linkName) }" @click="openLink(modules[20].form)">
<img class="pic" :src="modules[20].form.pic" alt="">
<h6>{{ modules[20].form.title }}</h6>
<p class="des">{{ modules[20].form.des }}</p>
</li>
@ -164,18 +124,14 @@
<div class="block">
<div class="inner staff-inner">
<h2 class="b-title wow fadeInUp hide-bd">{{ modules[21].form.title }}</h2>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
<div :class="['staff wow fadeInDown', {'cursor-pointer': isLink(modules[22].form.link.linkName)}]"
data-wow-delay="0.7s"
@click="openLink(modules[22].form)">
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
<div :class="['staff wow fadeInDown', { 'cursor-pointer': isLink(modules[22].form.link.linkName) }]"
data-wow-delay="0.7s" @click="openLink(modules[22].form)">
<div class="left">
<h6>{{ modules[22].form.title }}</h6>
<div class="des">{{ modules[22].form.des }}</div>
</div>
<img class="pic"
:src="modules[22].form.pic"
alt="">
<img class="pic" :src="modules[22].form.pic" alt="">
</div>
</div>
</div>
@ -219,16 +175,19 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.banner-item {
.banner-name {
font-size: 2.16rem;
}
}
.history {
h2 {
font-size: 2.14rem;
color: #333;
}
.texts {
display: flex;
justify-content: space-between;
@ -237,25 +196,30 @@ export default {
background-color: #fff;
border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
}
.left {
width: 43.4375rem;
}
.line {
width: 8.5rem;
height: 2px;
margin: 1.25rem 0;
background: #d7d7d7;
}
.des {
font-size: 1.57rem;
color: #181818;
line-height: 31px;
-webkit-line-clamp: 6;
}
.bg {
width: 562px;
height: 506px;
@ -264,9 +228,11 @@ export default {
object-fit: cover;
}
}
.card {
display: flex;
flex-wrap: wrap;
li {
width: calc((100% - 28px) / 2);
// height: 13.85rem;
@ -274,122 +240,150 @@ export default {
margin-bottom: 1.4rem;
color: #fff;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(odd) {
margin-right: 1.75rem;
}
}
.item1 {
background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
}
.item2 {
background-color: #4984b6;
}
.item3 {
background-color: #567180;
}
.item4 {
background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
}
h6 {
margin-bottom: 10px;
font-size: 2.28rem;
font-family: toppan;
}
.des {
font-size: 1.024rem;
}
}
.plan {
padding: 3.65rem 0;
background: #072947;
.inner {
display: flex;
justify-content: space-between;
}
.pic {
width: 33.2rem;
height: 24.4rem;
margin-bottom: -4.8rem;
transition: 0.3s;
object-fit: cover;
&:hover {
transform: scale(1.05);
}
}
.texts {
width: 51%;
margin-top: 4.25rem;
color: #fff;
transition: 0.3s;
&:hover {
transform: translateY(20px);
}
img {
width: 3.5rem;
height: 3.5rem;
}
}
h6 {
font-size: 2.056rem;
}
.des {
margin: 2rem 0;
font-size: 1.1424rem;
}
}
.people {
li {
display: flex;
justify-content: space-between;
margin-bottom: 6.296rem;
transition: 0.3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(even) {
flex-direction: row-reverse;
}
}
.pic {
width: 47%;
height: auto;
object-fit: cover;
}
.texts {
width: 49%;
padding-top: 4.45rem;
}
h6 {
margin: 1rem 0;
font-size: 2.28rem;
font-weight: 600;
}
.sub {
font-size: 1.1424rem;
color: #020202;
}
.des {
font-size: 1.024rem;
color: #020202;
line-height: 30px;
}
.arrow {
height: 3.7rem;
width: 3.7rem;
}
}
.list-block {
.inner {
padding: 5.625rem 0;
background-color: #fff;
}
}
.list {
display: flex;
justify-content: center;
li {
flex: 1;
padding-bottom: 1.875rem;
@ -397,52 +391,64 @@ export default {
text-align: center;
background-color: #f5f5f5;
transition: 0.3s;
&:hover {
background-color: #1f5793;
h6,
.des {
color: #fff;
}
}
&:last-child {
margin-right: 0;
}
}
.pic {
width: 100%;
}
h6 {
margin: 1.75rem 0 5px;
font-size: 1.368rem;
color: #272727;
transition: 0.3s;
}
.des {
font-size: 0.912rem;
color: #757575;
transition: 0.3s;
}
}
.staff {
display: flex;
justify-content: space-between;
background: #f8f8f8;
transition: 0.3s;
&:hover {
transform: scale(1.05);
background-color: #165191;
h6,
.des {
color: #fff;
}
}
.staff-inner {
width: 98rem;
}
.left {
width: 50%;
padding: 5.4rem 2.15rem 0 2.3rem;
}
h6 {
margin-bottom: 1.5rem;
font-size: 1.712rem;
@ -450,35 +456,40 @@ export default {
transition: 0.3s;
@include mul-ellipsis(3);
}
.des {
font-size: 1.42rem;
color: #333;
line-height: 1.94rem;
transition: 0.3s;
}
.pic {
width: 53%;
height: auto;
object-fit: cover;
}
}
.stat {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-top: 3rem;
li {
width: 27%;
margin-bottom: 2.5rem;
}
.num {
margin-bottom: 10px;
font-size: 2.7rem;
font-weight: 800;
font-family: toppan;
color: #035ce1;
line-height: 2.45rem;
}
.text {
font-size: 1.08rem;
}
@ -488,61 +499,75 @@ export default {
.hide-bd:after {
display: none;
}
.history {
.texts {
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
}
.left {
width: 100%;
margin-right: 0;
}
.bg {
width: 100%;
height: auto;
margin-top: 20px;
}
}
.stat {
li {
width: 35%;
}
}
.plan {
.inner {
flex-direction: column;
}
.pic {
width: 100%;
height: auto;
margin-bottom: 0;
}
.texts {
width: 100%;
}
}
.people {
li {
flex-direction: column !important;
}
.pic,
.texts {
width: 100%;
}
}
.list {
flex-direction: column;
li {
margin-right: 0;
}
}
.staff {
flex-direction: column;
.left {
width: 100%;
margin-bottom: 20px;
}
.pic {
width: 100%;
}

@ -316,7 +316,6 @@ export default {
align-items: center;
height: 6.43rem;
font-size: 1.44rem;
font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold;
line-height: 6.43rem;
text-align: center;

@ -1,42 +1,32 @@
<template>
<div class="wrap">
<div v-if="form.bannerImg"
class="banner"
:style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
<div v-if="form.bannerImg" class="banner"
:style="{ backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : '' }">
{{ form.columnName }}
</div>
<div class="content">
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<Breadcrumb ref="breadcrumb" :data.sync="routes" />
<div class="article">
<div class="left">
<h2>{{ form.title }}</h2>
<div class="meta">{{$t('column.time')}}{{ form.activityStartTime }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.address')}}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation"
class="meta">{{$t('column.online')}}{{ form.onlineLocation }}</div>
<div v-if="form.offlineLocation"
class="meta">{{$t('column.offline')}}{{ form.offlineLocation }}</div>
<div v-if="form.keynoteSpeaker"
class="meta">{{$t('column.speaker')}}{{ form.keynoteSpeaker }}</div>
<div v-if="form.lectureSeries"
class="meta">{{$t('column.series')}}{{ form.lectureSeries }}</div>
<h6>{{$t('column.ActivityIntroduction')}}</h6>
<div> {{ form.eventProfile }}</div>
<h6>{{$t('column.content')}}</h6>
<div class="meta">{{ $t('column.time') }}{{ form.activityStartTime }}</div>
<div v-if="form.offlineLocation" class="meta">{{ $t('column.address') }}{{ form.offlineLocation }}</div>
<div v-if="form.onlineLocation" class="meta">{{ $t('column.online') }}{{ form.onlineLocation }}</div>
<div v-if="form.offlineLocation" class="meta">{{ $t('column.offline') }}{{ form.offlineLocation }}</div>
<div v-if="form.keynoteSpeaker" class="meta">{{ $t('column.speaker') }}{{ form.keynoteSpeaker }}</div>
<div v-if="form.lectureSeries" class="meta">{{ $t('column.series') }}{{ form.lectureSeries }}</div>
<h6>{{ $t('column.ActivityIntroduction') }}</h6>
<div class="profile"> {{ form.eventProfile }}</div>
<h6>{{ $t('column.content') }}</h6>
<div v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length"
class="annex">
<h6>{{$t('column.attachmentDownload')}}</h6>
<div v-if="form.fileList && form.fileList.length" class="annex">
<h6>{{ $t('column.attachmentDownload') }}</h6>
<ul class="files">
<li v-for="(file, i) in form.fileList"
:key="i">
<li v-for="(file, i) in form.fileList" :key="i">
<span class="name">{{ file.fileName }}</span>
<span class="download"
@click="download(file)">{{$t('column.download')}}</span>
<span class="download" @click="download(file)">{{ $t('column.download') }}</span>
</li>
</ul>
</div>
@ -144,9 +134,11 @@ export default {
<style lang="scss" scoped>
@import './editor.css';
.content {
width: 1200px;
}
.banner {
height: 280px;
padding: 123px 0 0 243px;
@ -155,62 +147,78 @@ export default {
background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
object-fit: cover;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 66%;
}
h2 {
margin-bottom: 20px;
font-size: 36px;
color: #1c1c1c;
}
.meta {
margin: 10px 0;
font-size: 18px;
font-weight: 600;
color: #333;
}
/deep/.des {
a {
color: rgb(0, 0, 238);
word-wrap: break-word;
}
img {
max-width: 100%;
}
}
.annex {
margin-top: 30px;
h6 {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;
border-left: 4px solid #1583ff;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.name {
margin-right: 8px;
font-size: 14px;
}
.download {
color: #1583ff;
cursor: pointer;
}
}
h6 {
margin: 30px 0 10px;
font-size: 18px;
}
.profile {
font-size: 16px;
line-height: 1.5;
}
}
@media (max-width: 1420px) {
@ -218,6 +226,7 @@ export default {
width: 98%;
}
}
@media (max-width: 1200px) {
.article {
/deep/.des {
@ -227,18 +236,23 @@ export default {
}
}
}
.banner {
font-size: 1.5rem;
}
.article {
flex-direction: column;
.left {
width: 100%;
h2 {
font-size: 1.5rem;
}
}
}
.article {
.des {
img {
@ -246,6 +260,7 @@ export default {
}
}
}
.right {
width: 100%;
}

@ -32,7 +32,6 @@
.tiny-wrap .block p {
margin: 0 0 10px;
font-size: 19px;
font-family: SFProDisplay;
font-weight: 400;
color: #101010;
line-height: 32px;
@ -40,14 +39,12 @@
}
.tiny-wrap .en-block p,
.tiny-wrap .en-block .img-des {
font-family: ProximaNova;
letter-spacing: -0.0135em;
line-height: 1.5em;
}
.tiny-wrap .block .tiny-title {
margin: 10px 0;
font-size: 24px;
font-family: SFProDisplay;
font-weight: 500;
color: #101010;
line-height: 32px;
@ -90,7 +87,6 @@
}
.tiny-wrap .people h6 {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}

@ -272,7 +272,6 @@ export default {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;

@ -1064,7 +1064,6 @@ export default {
align-items: center;
font-size: 0.88rem;
line-height: 1;
font-family: PingFangSC-Medium;
color: #333;
}
@ -1141,7 +1140,6 @@ export default {
.d {
font-size: 2rem;
font-family: DINCondensed-Bold, DINCondensed;
font-weight: bold;
line-height: 43px;
}
@ -1326,7 +1324,6 @@ export default {
padding-left: 8px;
margin-bottom: 20px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 1;
color: #333;

@ -2,9 +2,7 @@
<!-- 联系我们 -->
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -12,46 +10,24 @@
<div class="block">
<div class="inner">
<Breadcrumb ref="breadcrumb"
:data.sync="routes" />
<Breadcrumb ref="breadcrumb" :data.sync="routes" />
<div class="contact">
<div class="fields">
<h6>{{ modules[1].form.title }}</h6>
<div v-html="modules[1].form.info"></div>
</div>
<img :src="modules[2].form.pic"
alt=""
class="pic">
<el-table :data="modules[3].list"
class="patent-table"
ref="table"
stripe
header-align="center">
<el-table-column prop="dep"
label="部门"
align="center"
min-width="250"></el-table-column>
<el-table-column prop="contacts"
label="联系人"
align="center"
min-width="100"></el-table-column>
<el-table-column prop="phone"
align="center"
min-width="150">
<template slot="header"
slot-scope="scope">
<img src="@/assets/images/tel1.png"
alt=""> 电话
<img :src="modules[2].form.pic" alt="" class="pic">
<el-table :data="modules[3].list" class="patent-table" ref="table" stripe header-align="center">
<el-table-column prop="dep" label="部门" align="center" min-width="250"></el-table-column>
<el-table-column prop="contacts" label="联系人" align="center" min-width="100"></el-table-column>
<el-table-column prop="phone" align="center" min-width="150">
<template slot="header" slot-scope="scope">
<img src="@/assets/images/tel1.png" alt=""> 电话
</template>
</el-table-column>
<el-table-column prop="email"
align="center"
min-width="150">
<template slot="header"
slot-scope="scope">
<img style="width: 20px"
src="@/assets/images/email-white.png"
alt=""> 邮箱
<el-table-column prop="email" align="center" min-width="150">
<template slot="header" slot-scope="scope">
<img style="width: 20px" src="@/assets/images/email-white.png" alt=""> 邮箱
</template>
</el-table-column>
</el-table>
@ -146,51 +122,59 @@ export default {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: 0.96rem;
}
}
}
.block {
padding: 2rem 0;
background: url(https://new.iasf.ac.cn/images/contactUs/3.png) 0 130px no-repeat,
url(https://new.iasf.ac.cn/images/contactUs/4.png) bottom right no-repeat;
background-color: #f7f8fa;
}
.inner {
.contact {
padding: 3rem 6rem;
background-color: #fff;
}
.fields {
position: relative;
padding: 2rem;
border: 4px solid #f9f9f9;
h6 {
position: absolute;
top: -16px;
left: 60px;
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
background-color: #fff;
}
.text {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
}
.pic {
width: 100%;
margin: 2rem 0 1.5rem;
}
}
/deep/.patent-table {
thead tr,
thead th {
@ -198,6 +182,7 @@ export default {
background-color: #1583ff;
}
}
@media (max-width: 1200px) {
.inner {
.contact {

@ -1,9 +1,7 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -13,13 +11,10 @@
<div class="inner">
<h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p>
<div class="text"
v-html="modules[1].form.des"></div>
<div class="text" v-html="modules[1].form.des"></div>
<h6 style="font-size: 1.6rem">{{ modules[2].form.title }}</h6>
<p class="en"
style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p>
<div class="text"
v-html="modules[2].form.des"></div>
<p class="en" style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p>
<div class="text" v-html="modules[2].form.des"></div>
</div>
</div>
</div>
@ -36,6 +31,12 @@ export default {
};
},
watch: {
'$route.query' () {
this.id = this.$route.query.id
this.getInfo()
}
},
mounted () {
new WOW().init();
},
@ -49,7 +50,7 @@ export default {
const json = JSON.parse(
this.preview
? data
: data[data.length - 1][
: data[0][
data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
]
);
@ -66,37 +67,42 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.history {
.inner {
width: 1000px;
}
h6 {
position: relative;
font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.en {
margin-top: -25px;
font-size: 2.2rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
color: #e3e3e3;
}
.text {
max-width: 1200px;
margin: 30px 0;
overflow: auto;
/deep/ img {
width: 100% !important;
height: auto;
}
}
}
@media (max-width: 1200px) {
.tab-content {
width: 90%;
span {
font-size: 1.35rem;
}
@ -104,38 +110,49 @@ export default {
.block {
padding: 1.25rem 0;
.inner {
width: 90%;
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
margin: 10px 0 1.25rem;
}
.event {
flex-direction: column;
.time {
width: 100%;
li {
width: 100%;
justify-content: flex-start;
}
}
.right {
margin-top: 1.25rem;
width: 100%;
h6 {
font-size: 2rem;
}
.list {
li {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
.texts {
width: 100%;
}
.pic {
width: 100%;
height: auto;

@ -504,12 +504,10 @@ $bannerMh: 800px;
h6 {
margin-bottom: 30px;
font-size: 68px;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
}
.text {
font-size: 24px;
font-family: AppleSystemUIFont;
}
}
}
@ -532,14 +530,14 @@ $bannerMh: 800px;
.b-title {
font-size: 35px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
}
.intro {
margin-bottom: 3.6rem;
font-size: 26px;
font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
color: #5b5b5e;
}
}
@ -591,7 +589,7 @@ $bannerMh: 800px;
width: 100%;
height: 100%;
font-size: 45px;
font-family: PingFangSC-Medium, PingFang SC;
color: #fff;
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
@ -616,14 +614,14 @@ $bannerMh: 800px;
.name {
font-size: 45px;
font-family: PingFangSC-Medium, PingFang SC;
}
h6 {
margin: 10px 0 20px;
line-height: 63px;
font-size: 45px;
font-family: PingFangSC-Medium, PingFang SC;
@include mul-ellipsis(2);
}
@ -691,7 +689,7 @@ $bannerMh: 800px;
h6 {
font-size: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
line-height: 43px;
@include mul-ellipsis(2);
}
@ -778,7 +776,7 @@ $bannerMh: 800px;
h6 {
font-size: 20px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
@include ellipsis;
}
@ -828,7 +826,7 @@ $bannerMh: 800px;
h6 {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
cursor: pointer;
}
@ -845,7 +843,7 @@ $bannerMh: 800px;
.des {
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
-webkit-line-clamp: 2;
line-height: 30px;
cursor: pointer;
@ -991,14 +989,14 @@ $bannerMh: 800px;
h6 {
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
.job {
margin: 18px 0 12px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
@ -1034,7 +1032,7 @@ $bannerMh: 800px;
h6 {
font-size: 30px;
font-family: PingFangSC-Medium, PingFang SC;
}
.sub-title {
@ -1079,7 +1077,7 @@ $bannerMh: 800px;
h6 {
font-size: 36px;
font-family: PingFangSC-Semibold, PingFang SC;
color: #fff;
}
@ -1122,7 +1120,7 @@ $bannerMh: 800px;
.text {
margin-top: 15px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #48525e;
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -1,9 +1,7 @@
<template>
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -12,41 +10,28 @@
<div class="article">
<div class="left">
<div class="search">
<input type="text"
placeholder="请输入搜索内容"
v-model="title"
clearable>
<input type="text" placeholder="请输入搜索内容" v-model="title" clearable>
</div>
<div class="team-wrap">
<div class="letter">
<span v-for="(letter, i) in letters"
:key="i"
:class="['item', {active: curLetter == 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"
@click="toArtice(item, modules[1].form)">
<li v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[1].form)">
<div class="line">
<img src="https://new.iasf.ac.cn/images/researchTeam/3.png"
alt=""
class="icon">
<img src="https://new.iasf.ac.cn/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="https://new.iasf.ac.cn/images/researchTeam/4.png"
alt=""
class="icon">
<img src="https://new.iasf.ac.cn/images/researchTeam/4.png" alt="" class="icon">
<span class="text">专业 {{ item.major }}</span>
</div>
<div class="line">
<img src="https://new.iasf.ac.cn/images/researchTeam/5.png"
alt=""
class="icon">
<img src="https://new.iasf.ac.cn/images/researchTeam/5.png" alt="" class="icon">
<span class="text">荣誉 {{ item.honor }}</span>
</div>
</li>
@ -123,13 +108,13 @@ export default {
filter () {
const { title, curLetter } = this
this.articles = this.allList.filter(e => {
return (e.title.includes(title) || e.post.includes(title) || e.major.includes(title) || e.honor.includes(title)) && (curLetter === '全部' || (curLetter !== '全部' && curLetter === pinyin(e.title, { toneType: 'none' })[0].toUpperCase()))
return (e.title.includes(title) || e.post.includes(title) || e.major.includes(title) || e.honor.includes(title)) && (curLetter === '全部' || (curLetter !== '全部' && curLetter === pinyin(e.title, { surname: 'head' })[0].toUpperCase()))
})
},
//
sortList (list) {
list.forEach(e => {
e.sortTitle = pinyin(e.title, { toneType: 'none' })[0].toUpperCase()
e.sortTitle = pinyin(e.title, { surname: 'head' })[0].toUpperCase()
})
this.letters = ['全部', ...this.letters.filter(e => list.find(n => n.sortTitle == e))]
return list.sort((a, b) => a.sortTitle.charCodeAt(0) - b.sortTitle.charCodeAt(0))
@ -146,17 +131,22 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.content {
width: 1200px;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 75%;
.search {
display: inline-flex;
width: 34%;
input {
width: 100%;
height: 38px;
@ -167,16 +157,19 @@ export default {
border: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
&:focus {
outline: none;
}
}
}
}
.letter {
display: flex;
margin: 30px 0;
border-radius: 4px;
.item {
padding: 5px 10px;
font-size: 1rem;
@ -185,100 +178,123 @@ export default {
cursor: pointer;
border: 1px solid #dbdbdb;
border-right: 0;
&:first-child {
border-radius: 4px 0px 0px 4px;
}
&:last-child {
border-right: 1px solid #dbdbdb;
border-radius: 0 4px 4px 0;
}
&:hover {
color: #fff;
background: #1583ff;
}
&.active {
color: #fff;
background: #1583ff;
}
}
}
.teams {
display: flex;
flex-wrap: wrap;
li {
width: calc((100% - 10px) / 2);
padding: 20px 30px;
margin: 0 10px 10px 0;
background: url(https://new.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat;
cursor: pointer;
&:nth-child(even) {
margin-right: 0;
}
}
.line {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.icon {
margin-right: 8px;
}
.bold {
margin-right: 5px;
font-size: 1.1rem;
color: #333;
}
.val {
font-size: 1rem;
color: #999;
}
.text {
font-size: 1rem;
color: #666;
}
}
}
@media (max-width: 1200px) {
.content {
width: 95%;
}
.article {
flex-direction: column;
.left,
.right {
width: 100%;
}
.left {
margin-bottom: 30px;
}
}
}
@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 {
@ -286,8 +302,10 @@ export default {
width: 50%;
}
}
.teams {
flex-direction: column;
li {
width: 100%;
}

@ -1,9 +1,7 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des des">{{ modules[0].form.des }}</p>
@ -12,34 +10,25 @@
<div class="block">
<div class="inner">
<div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
@click="openLink(modules[1].form)">
<img src="@/assets/images/science/1.png"
alt="" />
<div class="item wow bounceInLeft" data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }" @click="openLink(modules[1].form)">
<img src="@/assets/images/science/1.png" alt="" />
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div>
</div>
</div>
<div class="item wow bounceInRight"
data-wow-delay="0.8s"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)">
<img src="@/assets/images/science/2.png"
alt="" />
<div class="item wow bounceInRight" data-wow-delay="0.8s"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
<img src="@/assets/images/science/2.png" alt="" />
<div class="texts rightText">
<h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div>
</div>
</div>
<div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
@click="openLink(modules[3].form)">
<img src="@/assets/images/science/3.png"
alt="" />
<div class="item wow bounceInLeft" data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }" @click="openLink(modules[3].form)">
<img src="@/assets/images/science/3.png" alt="" />
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div>
@ -92,30 +81,37 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.inner {
width: 960px;
}
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: 0.96rem;
}
}
}
.block {
padding: 3.85rem 0;
}
.item {
position: relative;
margin-bottom: 2.9rem;
width: 100%;
&:hover {
.texts {
color: #fff;
@ -123,22 +119,27 @@ export default {
background: #32b6e9 !important;
}
}
img {
width: 100%;
height: 22rem;
}
&:nth-child(2) .texts {
color: #fff;
background: #33b3c1;
}
&:nth-child(3) .texts {
color: #fff;
background: #e47c22;
}
&:nth-child(even) .texts {
left: auto;
right: -1.6rem;
}
.texts {
position: absolute;
top: 3.9rem;
@ -149,12 +150,13 @@ export default {
background: #fff6e9;
transition: 0.5s;
}
h6 {
margin-bottom: 0.875rem;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.des {
font-size: 0.88rem;
}
@ -164,58 +166,71 @@ export default {
body {
width: 100% !important;
}
.inner {
width: 80%;
}
.item {
img {
}
img {}
.rightText {
right: 12px !important;
}
.texts {
width: 85%;
box-sizing: border-box;
left: -1rem;
&:nth-child(2) {
right: -1.5rem !important;
}
.des {
-webkit-line-clamp: inherit;
}
}
}
}
@media (max-width: 320px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.2rem;
}
.des {
font-size: 0.75rem;
}
@ -223,36 +238,44 @@ export default {
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: 0.75rem;
}
@ -260,36 +283,44 @@ export default {
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
h6 {
font-size: 1.4rem;
}
.des {
font-size: 0.75rem;
}
@ -297,30 +328,36 @@ export default {
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
@ -328,30 +365,36 @@ export default {
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
@ -359,30 +402,36 @@ export default {
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;
@ -390,30 +439,36 @@ export default {
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
top: 5rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
.inner {
img {
height: 18rem;
}
.texts {
padding: 1.25rem;
top: 1.5rem;

@ -1,44 +1,31 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des des">{{ modules[0].form.des }}</p>
</div>
</div>
<div class="block gray"
style="padding: 2rem 0;">
<div class="block gray" style="padding: 2rem 0;">
<div class="inner">
<ul class="items">
<li>
<img class="pic"
:src="modules[1].form.pic"
alt="">
<img class="pic" :src="modules[1].form.pic" alt="">
<div class="texts">
<h6 v-html="modules[1].form.title"></h6>
<div class="text"
v-html="modules[1].form.des"></div>
<img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[1].form.link.linkName)}"
<div class="text" v-html="modules[1].form.des"></div>
<img src="@/assets/images/arrow.png" alt="" :class="{ 'arrow': isLink(modules[1].form.link.linkName) }"
@click="openLink(modules[1].form)">
</div>
</li>
<li>
<img class="pic"
:src="modules[2].form.pic"
alt="">
<img class="pic" :src="modules[2].form.pic" alt="">
<div class="texts">
<h6 v-html="modules[2].form.title"></h6>
<div class="text"
v-html="modules[2].form.des"></div>
<img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[2].form.link.linkName)}"
<div class="text" v-html="modules[2].form.des"></div>
<img src="@/assets/images/arrow.png" alt="" :class="{ 'arrow': isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)">
</div>
</li>
@ -49,18 +36,10 @@
<div class="about">
<div class="inner">
<div class="texts">
<div class="title wow fadeInUp"
data-wow-delay="0.7s"
v-html="modules[3].form.title"></div>
<div class="des wow fadeInDown"
data-wow-delay="1s"
v-html="modules[3].form.des"></div>
<img class="m-t-10"
width="42"
src="@/assets/images/arrow-white.png"
alt=""
:class="{'arrow': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<div class="title wow fadeInUp" data-wow-delay="0.7s" v-html="modules[3].form.title"></div>
<div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[3].form.des"></div>
<img class="m-t-10" width="42" src="@/assets/images/arrow-white.png" alt=""
:class="{ 'arrow': isLink(modules[3].form.link.linkName) }" @click="openLink(modules[3].form)">
</div>
</div>
</div>
@ -108,23 +87,28 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.items {
margin-top: 2rem;
li {
position: relative;
height: 559px;
margin-bottom: 60px;
&:nth-child(even) {
.texts {
left: auto;
right: 100px;
}
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
top: 100px;
@ -136,22 +120,26 @@ export default {
border-radius: 0px 0px 100px 0px;
border-top: 4px solid #0280f1;
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.text {
margin: 1rem 0;
font-size: 1rem;
line-height: 1.6;
}
.icon {
width: 40px;
}
}
}
.program {
background: #fff;
.title {
position: relative;
display: flex;
@ -161,70 +149,80 @@ export default {
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
align-items: center;
h5 {
padding-left: 16px;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 1;
border-left: 6px solid #2b96ef;
}
.sub {
font-size: 1.1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #afb7bf;
}
.more {
font-size: 0.8rem;
color: #666;
cursor: pointer;
}
}
.slide {
display: flex;
margin-bottom: 14px;
cursor: pointer;
}
.texts {
width: 51%;
padding: 56px;
background: #fbfbfb;
h6 {
font-size: 1.3rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.des {
margin: 35px 0 25px;
font-size: 1rem;
color: #666;
line-height: 32px;
}
.meta {
font-size: 0.9rem;
color: #666;
}
}
.img-wrap {
width: 49%;
height: 430px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: 0.5s;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
.list {
display: flex;
li {
width: calc((100% - 28px) / 3);
height: 204px;
@ -234,33 +232,37 @@ export default {
background-size: 100% 100%;
transition: 0.5s;
cursor: pointer;
&:nth-child(2) {
background-image: url(../../assets/images/sfel/8.png);
}
&:nth-child(3) {
margin-right: 0;
background-image: url(../../assets/images/sfel/9.png);
}
&:hover {
transform: translateY(20px);
}
}
.des {
height: 90px;
margin-bottom: 30px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 30px;
}
.date {
font-size: 0.9rem;
font-family: LaoSangamMN;
color: #ffffff;
}
}
}
.about {
display: flex;
flex-direction: column;
@ -268,26 +270,31 @@ export default {
height: 643px;
text-align: center;
background: url(../../assets/images/about-bg.png) no-repeat center center;
.texts {
padding: 2.375rem 3.75rem;
color: #fff;
background: rgba(111, 69, 36, 0.56);
border-radius: 17px;
transition: 0.3s;
&:hover {
background: rgba(239, 126, 10, 0.56);
transform: translateY(10px);
}
}
.title {
margin-bottom: 1rem;
font-size: 1.8rem;
}
.des {
font-size: 1rem;
line-height: 1.6;
}
}
@media (max-width: 1200px) {
.items {
li {
@ -295,6 +302,7 @@ export default {
left: 0;
width: 98%;
}
&:nth-child(even) {
.texts {
right: auto;
@ -302,24 +310,30 @@ export default {
}
}
}
.about {
height: 30rem;
}
}
@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;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -2,9 +2,7 @@
<div class="wrap">
<!-- 院长致辞 -->
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="" />
<img class="banner-img" :src="modules[0].form.pic" alt="" />
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -12,17 +10,13 @@
<div class="block">
<div class="inner">
<img :src="modules[1].form.pic"
alt=""
class="pic">
<img :src="modules[1].form.pic" alt="" class="pic">
<div class="texts">
<h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p>
<div class="text"
v-html="modules[1].form.des"></div>
<div class="text" v-html="modules[1].form.des"></div>
<div class="sign">
<img :src="modules[2].form.pic"
alt="">
<img :src="modules[2].form.pic" alt="">
</div>
</div>
</div>
@ -72,54 +66,64 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.block {
background: url(https://new.iasf.ac.cn/images/speech/2.png) no-repeat;
}
.inner {
display: flex;
align-items: flex-start;
.pic {
max-width: 480px;
margin-top: 2rem;
}
.texts {
margin-left: 113px;
}
h6 {
position: relative;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #333;
}
.en {
margin: -25px 0 40px;
font-size: 2.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: rgba(216, 216, 216, 0.34);
}
.text {
font-size: 1rem;
color: #333;
line-height: 1.6;
}
.sign {
margin-top: 20px;
text-align: right;
img {
max-width: 150px;
}
}
}
@media (max-width: 920px) {
.inner {
flex-direction: column;
justify-content: center;
align-items: center;
.pic {
max-width: 100%;
}
.texts {
margin: 20px 0 0;
}

@ -1,9 +1,7 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p>
@ -12,28 +10,20 @@
<div class="block talent">
<div class="inner">
<div class="item wow bounceInLeft"
data-wow-delay="0.5s"
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
<div class="item wow bounceInLeft" data-wow-delay="0.5s"
:class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }" @click="openLink(modules[1].form)">
<div class="img-wrap">
<img class="pic"
:src="modules[1].form.pic"
alt="">
<img class="pic" :src="modules[1].form.pic" alt="">
</div>
<div class="texts">
<h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div>
</div>
</div>
<div class="item wow bounceInRight"
data-wow-delay="0.6s"
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<div class="item wow bounceInRight" data-wow-delay="0.6s"
:class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
<div class="img-wrap">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<img class="pic" :src="modules[2].form.pic" alt="">
</div>
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
@ -44,18 +34,12 @@
</div>
<div class="style">
<h6 class="wow fadeInUp"
v-html="modules[3].form.title"></h6>
<el-carousel :interval="4000"
type="card"
height="30rem">
<h6 class="wow fadeInUp" v-html="modules[3].form.title"></h6>
<el-carousel :interval="4000" type="card" height="30rem">
<template v-for="(item, i) in modules[4].list">
<el-carousel-item v-if="item.isEnable"
:key="i">
<div class="item"
@click="openLink(item)">
<img :src="item.pic"
alt="">
<el-carousel-item v-if="item.isEnable" :key="i">
<div class="item" @click="openLink(item)">
<img :src="item.pic" alt="">
<p class="text">{{ item.title }}</p>
</div>
</el-carousel-item>
@ -65,36 +49,28 @@
<div class="block intro">
<div class="inner">
<div class="item wow fadeInDown"
data-wow-delay="0.1s">
<div class="item wow fadeInDown" data-wow-delay="0.1s">
<div class="img-wrap">
<img class="pic"
:src="modules[5].form.pic"
alt="">
<img class="pic" :src="modules[5].form.pic" alt="">
</div>
<div class="texts">
<p class="type">{{ modules[5].form.subTitle }}</p>
<h6>{{ modules[5].form.title }}</h6>
<div class="des">{{ modules[5].form.des }}</div>
<el-button v-if="isLink(modules[5].form.link.linkName)"
type="primary"
@click="openLink(modules[5].form)">{{ $t('column.seeMore') }}</el-button>
<el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">{{
$t('column.seeMore') }}</el-button>
</div>
</div>
<div class="item wow fadeInDown"
data-wow-delay="0.3s">
<div class="item wow fadeInDown" data-wow-delay="0.3s">
<div class="img-wrap">
<img class="pic"
:src="modules[6].form.pic"
alt="">
<img class="pic" :src="modules[6].form.pic" alt="">
</div>
<div class="texts">
<p class="type">{{ modules[6].form.subTitle }}</p>
<h6>{{ modules[6].form.title }}</h6>
<div class="des">{{ modules[6].form.des }}</div>
<el-button v-if="isLink(modules[6].form.link.linkName)"
type="primary"
@click="openLink(modules[6].form)">{{ $t('column.seeMore') }}</el-button>
<el-button v-if="isLink(modules[6].form.link.linkName)" type="primary" @click="openLink(modules[6].form)">{{
$t('column.seeMore') }}</el-button>
</div>
</div>
</div>
@ -143,31 +119,38 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
background: #f8f9fb;
}
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: 1.08rem;
}
}
}
.block {
padding: 3.85rem 0;
}
.talent {
.inner {
width: 1200px;
max-width: 1504px;
}
.item {
display: flex;
padding: 2.1rem;
@ -175,66 +158,78 @@ export default {
color: #333;
background: #fff;
transition: 0.5s;
&:nth-child(even) {
justify-content: space-between;
flex-direction: row-reverse;
.texts {
padding-left: 0;
}
}
&:hover {
color: #fff;
background: #005388;
.pic {
transform: scale(1.1);
}
}
}
.img-wrap {
width: 32rem;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: 0.5s;
}
.texts {
width: 44.375rem;
padding: 3.9rem 3.6rem 1.5rem 4rem;
}
h6 {
margin-bottom: 1.2rem;
font-size: 1.92rem;
font-family: PingFangSC-Light, PingFang SC;
font-weight: 300;
}
.des {
font-size: 0.88rem;
line-height: 1.65rem;
-webkit-line-clamp: 5;
}
}
.style {
width: 1200px;
margin: 0 auto;
h6 {
margin-bottom: 2.95rem;
font-size: 1.92rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
text-align: center;
color: #333333;
}
.item {
position: relative;
width: 100%;
height: 25.5rem;
}
img {
width: 100%;
height: 100%;
}
.text {
position: absolute;
bottom: 0;
@ -247,11 +242,13 @@ export default {
background: rgba(0, 0, 0, 0.38);
}
}
.intro {
.inner {
width: 1200px;
max-width: 1504px;
}
.item {
display: flex;
align-items: center;
@ -259,39 +256,47 @@ export default {
color: #333;
background: #fff;
transition: 0.5s;
&:nth-child(even) {
flex-direction: row-reverse;
}
&:hover {
color: #fff;
background: #465f85;
.pic {
transform: scale(1.1);
}
}
}
.img-wrap {
height: auto;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: 0.5s;
}
.texts {
width: 45%;
padding: 0 2.9rem;
}
.type {
font-size: 0.88rem;
}
h6 {
margin: 1rem 0;
font-size: 1.28rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.des {
margin-bottom: 1.5rem;
font-size: 0.9rem;
@ -303,31 +308,38 @@ export default {
.single-banner {
.texts {
left: 200px;
.banner-title {
font-size: 2.2rem;
}
}
}
.block {
padding: 30px 0;
.inner {
.item {
flex-direction: column;
padding: 1.5rem;
}
.texts {
width: 100%;
padding: 1.5rem;
}
}
}
.style {
/deep/ .el-carousel__container {
height: 27rem !important;
}
.wow {
margin-bottom: 2rem;
}
.item {
height: 25rem;
}
@ -339,20 +351,25 @@ export default {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
@ -361,16 +378,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -378,25 +400,31 @@ export default {
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
@ -405,16 +433,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -422,25 +455,31 @@ export default {
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
@ -449,16 +488,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -466,25 +510,31 @@ export default {
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
@ -493,16 +543,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -510,25 +565,31 @@ export default {
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
.img-wrap {
width: 100%;
@ -537,16 +598,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 13rem !important;
}
/deep/ .el-carousel__container {
height: 13rem !important;
}
.item {
height: 13rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -554,32 +620,40 @@ export default {
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
width: 100%;
flex-direction: row;
.img-wrap {
width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
@ -587,16 +661,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 18rem !important;
}
/deep/ .el-carousel__container {
height: 18rem !important;
}
.item {
height: 18rem;
.text {
line-height: 1.5rem;
font-size: 1rem;
@ -604,32 +683,40 @@ export default {
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.single-banner {
.banner-img {
height: 12rem;
}
.texts {
left: 2rem;
top: 3rem;
.banner-title {
font-size: 1.5rem;
}
.banner-des {
font-size: 1rem;
}
}
}
.block {
.inner {
width: 100%;
.item {
width: 100%;
flex-direction: row;
.img-wrap {
width: 60%;
height: auto;
}
.texts {
width: 80%;
margin-left: 1.5rem;
@ -637,16 +724,21 @@ export default {
}
}
}
.style {
width: 100%;
/deep/ .el-carousel {
height: 20rem !important;
}
/deep/ .el-carousel__container {
height: 20rem !important;
}
.item {
height: 20rem;
.text {
line-height: 1.5rem;
font-size: 1rem;

@ -2,9 +2,7 @@
<!-- 人才中心 -->
<div class="wrap">
<div class="single-banner single-banner-overview">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -13,38 +11,25 @@
<div class="article">
<div class="left">
<h6 class="talent-title">{{ modules[1].form.title }}</h6>
<div class="talent-text"
v-html="modules[1].form.des"></div>
<div class="talent-text" v-html="modules[1].form.des"></div>
<ul class="people">
<li>
<img class="pic"
:src="modules[2].form.pic"
alt="">
<img class="pic" :src="modules[2].form.pic" alt="">
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<div class="line"></div>
<div class="text"
v-html="modules[2].form.des"></div>
<img v-if="isLink(modules[2].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
<div class="text" v-html="modules[2].form.des"></div>
<img v-if="isLink(modules[2].form.link.linkName)" class="arrow" src="@/assets/images/arrow.png" alt=""
@click="openLink(modules[2].form)">
</div>
</li>
<li>
<img class="pic"
:src="modules[3].form.pic"
alt="">
<img class="pic" :src="modules[3].form.pic" alt="">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<div class="line"></div>
<div class="text"
v-html="modules[3].form.des"></div>
<img v-if="isLink(modules[3].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
<div class="text" v-html="modules[3].form.des"></div>
<img v-if="isLink(modules[3].form.link.linkName)" class="arrow" src="@/assets/images/arrow.png" alt=""
@click="openLink(modules[3].form)">
</div>
</li>
@ -52,21 +37,12 @@
</div>
<div class="right">
<el-tree class="column"
ref="column"
:data="modules[4].list"
highlight-current
:expand-on-click-node="false"
:props="defaultProps"
node-key="id"
@node-click="columnClick"></el-tree>
<el-tree class="column" ref="column" :data="modules[4].list" highlight-current :expand-on-click-node="false"
:props="defaultProps" node-key="id" @node-click="columnClick"></el-tree>
<p class="l-title">人才资讯</p>
<ul class="list">
<li v-for="(item, i) in articles"
:key="i"
:title="item.title"
@click="toArtice(item)">
<li v-for="(item, i) in articles" :key="i" :title="item.title" @click="toArtice(item)">
<p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span>
</li>
@ -161,39 +137,49 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.wrap {
background-color: #fff;
}
.content {
width: 1200px;
}
.article {
display: flex;
justify-content: space-between;
.left {
width: 75%;
.talent-title {
padding-bottom: 10px;
font-size: 1.2rem;
color: #666;
border-bottom: 1px solid #eaeef2;
}
.talent-text {
margin: 20px 0;
font-size: 1.1rem;
color: #333;
line-height: 28px;
p {
margin-bottom: 20px;
}
}
}
.people {
margin-top: 4rem;
li {
position: relative;
height: 433px;
margin-bottom: 2rem;
&:nth-child(even) {
.texts {
left: 50px;
@ -201,11 +187,13 @@ export default {
}
}
}
.pic {
width: 100%;
height: 100%;
object-fit: cover;
}
.texts {
position: absolute;
top: 60px;
@ -214,56 +202,66 @@ export default {
padding: 50px 25px;
background: rgba(243, 251, 255, 0.82);
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2a4b65;
}
.line {
width: 93px;
height: 1px;
margin: 1rem 0;
background: #3e6473;
}
.text {
margin-bottom: 1rem;
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #2a4b65;
line-height: 1.6;
}
}
.right {
width: 20%;
}
.column {
width: 100%;
margin-bottom: 25px;
}
/deep/.el-tree-node__content {
height: 44px;
background-color: #e5edf8;
border-bottom: 2px solid #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #fff;
background-color: #0f5698;
}
.list {
margin-bottom: 20px;
li {
padding: 16px 0;
border-bottom: 1px solid #d8d8d8;
}
.text {
margin-bottom: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $main-color;
}
}
.date {
font-size: 12px;
color: #999;
@ -275,33 +273,42 @@ export default {
.content {
width: 90%;
}
.article {
flex-direction: column;
.left {
width: 100%;
.recruit {
li {
flex-direction: column;
.pic {
width: 100%;
}
.texts {
margin-top: 0.8rem;
}
}
}
.notice {
flex-direction: column;
li {
width: 100%;
}
}
}
.right {
width: 100%;
}
}
}
@media (max-width: 480px) {
.article {
.left {

@ -1,9 +1,7 @@
<template>
<div class="wrap p-b-30">
<div class="single-banner single-banner-overview">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div>
@ -12,18 +10,13 @@
<div class="content">
<ul class="list">
<template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable"
:key="i"
:class="{'cursor-pointer': isLink(item.link.linkName)}"
<li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
@click="openLink(item)">
<img :src="item.pic"
alt=""
class="pic">
<img :src="item.pic" alt="" class="pic">
<div class="texts">
<h6>{{ item.title }}</h6>
<p class="job">{{ item.subTitle }}</p>
<div class="text"
v-html="item.des"></div>
<div class="text" v-html="item.des"></div>
</div>
</li>
</template>
@ -77,13 +70,16 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.content {
display: flex;
width: 1200px;
justify-content: space-between;
.left {
width: calc(100% - 300px);
}
.list {
li {
display: flex;
@ -91,50 +87,56 @@ export default {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
&:last-child {
border-bottom: 0;
}
}
.pic {
width: 224px;
height: 268px;
margin-right: 25px;
object-fit: cover;
}
h6 {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #333;
}
.job {
margin: 16px 0;
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
}
.text {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #333;
}
}
}
@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;
}

@ -1,9 +1,7 @@
<template>
<div class="wrap">
<div class="single-banner">
<img class="banner-img"
:src="modules[0].form.pic"
alt="">
<img class="banner-img" :src="modules[0].form.pic" alt="">
<div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6>
<p class="banner-des">{{ modules[0].form.des }}</p>
@ -13,20 +11,12 @@
<div class="block share">
<div class="inner relative">
<div class="left">
<h6 class="wow fadeInUp"
v-html="modules[1].form.title"></h6>
<p class="en wow fadeInUp"
data-wow-delay="0.5s">USERS SHARE</p>
<div class="des wow fadeInUp"
data-wow-delay="0.8s"
v-html="modules[1].form.des"></div>
<h6 class="wow fadeInUp" v-html="modules[1].form.title"></h6>
<p class="en wow fadeInUp" data-wow-delay="0.5s">USERS SHARE</p>
<div class="des wow fadeInUp" data-wow-delay="0.8s" v-html="modules[1].form.des"></div>
</div>
<img class="pic wow bounceInRight"
data-wow-delay="0.8s"
:src="modules[1].form.pic"
alt="">
<div class="card wow bounceInLeft"
data-wow-delay="0.8s">
<img class="pic wow bounceInRight" data-wow-delay="0.8s" :src="modules[1].form.pic" alt="">
<div class="card wow bounceInLeft" data-wow-delay="0.8s">
<p class="title">{{ modules[1].form.subTitle }}</p>
<p class="en-text">{{ modules[1].form.enTitle }}</p>
</div>
@ -36,28 +26,23 @@
<div class="block gray">
<ul class="group">
<li class="wow bounceInDown"
:class="{'cursor-pointer': modules[2].form.link && isLink(modules[2].form.link.linkName)}"
:class="{ 'cursor-pointer': modules[2].form.link && isLink(modules[2].form.link.linkName) }"
@click="openLink(modules[2].form)">
<img src="@/assets/images/userSharing/2.png"
alt="">
<img src="@/assets/images/userSharing/2.png" alt="">
<h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div>
</li>
<li class="wow bounceInDown"
data-wow-delay="0.1s"
:class="{'cursor-pointer': modules[3].form.link && isLink(modules[3].form.link.linkName)}"
<li class="wow bounceInDown" data-wow-delay="0.1s"
:class="{ 'cursor-pointer': modules[3].form.link && isLink(modules[3].form.link.linkName) }"
@click="openLink(modules[3].form)">
<img src="@/assets/images/userSharing/3.png"
alt="">
<img src="@/assets/images/userSharing/3.png" alt="">
<h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div>
</li>
<li class="wow bounceInDown"
data-wow-delay="0.2s"
:class="{'cursor-pointer': modules[4].form.link && isLink(modules[4].form.link.linkName)}"
<li class="wow bounceInDown" data-wow-delay="0.2s"
:class="{ 'cursor-pointer': modules[4].form.link && isLink(modules[4].form.link.linkName) }"
@click="openLink(modules[4].form)">
<img src="@/assets/images/userSharing/4.png"
alt="">
<img src="@/assets/images/userSharing/4.png" alt="">
<h6>{{ modules[4].form.title }}</h6>
<div class="des">{{ modules[4].form.des }}</div>
</li>
@ -103,45 +88,53 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.single-banner {
.banner-img {
height: 21.6rem;
}
.texts {
h6 {
font-size: 2.16rem;
margin-bottom: 0.95rem;
}
.banner-des {
font-size: 0.96rem;
}
}
}
.block {
padding: 3.85rem 0;
}
.share {
position: relative;
.inner {
display: flex;
}
.left {
width: 40%;
padding-right: 2%;
}
h6 {
position: relative;
font-size: 1.76rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.en {
margin-top: 0;
font-size: 1.28rem;
font-family: AppleSystemUIFont;
color: #e4e4e4;
}
.des {
margin-top: 25px;
font-size: 0.81rem;
@ -149,11 +142,13 @@ export default {
line-height: 1.75rem;
-webkit-line-clamp: 5;
}
.pic {
width: 60%;
height: auto;
border-top-left-radius: 70px;
}
.card {
position: absolute;
bottom: 0;
@ -164,25 +159,27 @@ export default {
border-radius: 0px 100px 0px 0px;
opacity: 0.88;
}
.title {
margin-bottom: 0.625rem;
font-size: 1.44rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff;
}
.en-text {
font-size: 1.04rem;
font-family: AppleSystemUIFont;
color: #fff;
letter-spacing: 2px;
}
}
.group {
display: flex;
justify-content: center;
width: 1200px;
margin: 0 auto;
li {
position: relative;
flex: 1;
@ -191,15 +188,18 @@ export default {
margin-right: 1rem;
color: #fff;
overflow: hidden;
&:last-child {
margin-right: 0;
}
&:hover {
img {
transform: scale(1.3);
}
}
}
img {
position: absolute;
top: 0;
@ -208,17 +208,17 @@ export default {
height: 100%;
transition: 0.5s;
}
h6 {
position: relative;
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
.des {
position: relative;
margin-top: 1rem;
font-size: 0.72rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 31px;
}
@ -228,29 +228,37 @@ export default {
body {
width: 100% !important;
}
.share {
width: 100%;
.inner {
width: 100%;
flex-direction: column;
.left {
width: 100%;
}
}
.des {
display: block;
padding: 0 10px;
}
.pic {
width: 100%;
}
.card {
width: 100%;
}
}
.group {
width: 100%;
flex-direction: column;
li {
width: 100%;
margin-top: 20px;
@ -264,31 +272,39 @@ export default {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
@ -296,174 +312,215 @@ export default {
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 480px) and (max-width: 640px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
li {
height: auto;
}
}
}
@media (min-width: 640px) and (max-width: 768px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
@ -471,45 +528,56 @@ export default {
}
}
}
@media (min-width: 768px) and (max-width: 980px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;
@ -517,45 +585,56 @@ export default {
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
.single-banner {
.banner-img {
height: 13rem;
}
.texts {
top: 7rem;
left: 2rem;
.banner-title {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.banner-des {
font-size: 0.85rem;
}
}
}
}
.block {
padding: 2rem 0;
.inner {
.pic {
height: auto;
}
.card {
padding: 1.875rem 0 1.875rem 18.5%;
bottom: 0;
.title {
font-size: 1.4rem;
}
.en-text {
font-size: 0.9rem;
}
}
}
}
.group {
flex-direction: row;
li {
.des {
line-height: 1rem;

@ -3,7 +3,9 @@
* */
const isDev = process.env.NODE_ENV === 'development' // 开发环境
let host = `${location.origin}/`
if (isDev) {
host = 'http://192.168.31.51:10000/'
}
const Setting = {
/**
* 基础配置

@ -2,48 +2,17 @@
@import './var.scss';
@font-face {
font-family: PingFang;
src: url('font/PingFang-Regular.otf');
font-family: Harmony;
src: url('font/HarmonyOS_SansSC_Light.ttf');
}
@font-face {
font-family: PingFang SC;
src: url('font/PingFang-Regular.otf');
}
@font-face {
font-family: PingFangSC-Medium;
src: url('font/PingFangSC-Medium.otf');
}
@font-face {
font-family: PingFangSC-Semibold;
src: url('font/PingFangTC-Semibold.ttf');
}
@font-face {
font-family: SFProDisplay-Bold;
src: url('font/SF-Pro-Display-Bold.otf');
}
@font-face {
font-family: SFProDisplay;
src: url('font/SF-Pro-Display-Regular.otf');
}
@font-face {
font-family: toppan;
src: url('font/toppan.otf');
}
@font-face {
font-family: ProximaNova;
src: url('font/ProximaNova-Regular.otf');
}
@font-face {
font-family: AlimamaShuHeiTi-Bold;
src: url('font/AlimamaShuHeiTi-Bold.otf');
font-family: siyuan;
src: url('font/SourceHanSansCN-VF-2.otf');
}
[v-cloak] {
display: none;
}
.site-en {
font-family: SFProDisplay;
}
.flex-between {
display: flex;
justify-content: space-between;
@ -75,7 +44,6 @@
position: relative;
padding-bottom: 20px;
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
color: #000;
line-height: 1.6;
border-bottom: 1px solid #ddd;

Binary file not shown.

@ -11,7 +11,7 @@ body,
body {
// min-width: 1280px;
font-family: PingFang, PingFang SC, "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
font-family: Harmony, STHeiTi, sans-serif;
font-size: 14px;
background: rgba(0, 0, 0, 0.02);
}

@ -1,3 +1,3 @@
html {
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
font-family: Harmony, STHeiTi, sans-serif;
}

@ -5,7 +5,6 @@
position: relative;
margin-bottom: 50px;
font-size: 3rem;
font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold;
color: #333333;
line-height: 60px;
@ -56,7 +55,6 @@
bottom: 87px;
left: 213px;
font-size: 2rem;
font-family: SFProDisplay-Bold;
font-weight: bold;
line-height: 58px;
color: #fff;
@ -79,11 +77,9 @@
.banner-title {
margin-bottom: 19px;
font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
.banner-des {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
}
}
.des {

Loading…
Cancel
Save