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

正式上线域名全替换

Browse Source
master
yujialong 3 months ago
parent f57c415359
commit 4225e738f8
18 changed files with 2013 additions and 1883 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/pages/column/index.vue
  2. 4
      src/pages/contactUs/index.vue
  3. 72
      src/pages/deviceIntroBeam/index.vue
  4. 71
      src/pages/deviceIntroLayout/index.vue
  5. 57
      src/pages/deviceIntroLinear/index.vue
  6. 59
      src/pages/estate/event/index.vue
  7. 63
      src/pages/estate/location/index.vue
  8. 32
      src/pages/estate/orgSetup/index.vue
  9. 31
      src/pages/estate/survey/index.vue
  10. 81
      src/pages/governance/index.vue
  11. 30
      src/pages/iasf/index.vue
  12. 28
      src/pages/org/index.vue
  13. 155
      src/pages/overview/index.vue
  14. 70
      src/pages/overviewDevHistory/index.vue
  15. 57
      src/pages/overviewIntro/index.vue
  16. 32
      src/pages/overviewSetup/index.vue
  17. 8
      src/pages/researchTeam/index.vue
  18. 2
      src/pages/speech/index.vue

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

@ -247,14 +247,14 @@
<template v-else-if="item.fileList && item.fileList.length"> <template v-else-if="item.fileList && item.fileList.length">
<!-- <el-image class="media-pic" <!-- <el-image class="media-pic"
:style="{backgroundImage: 'url(https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521)'}" :style="{backgroundImage: 'url(https://www.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521)'}"
src="https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521" src="https://www.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521"
:preview-src-list="['https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521']"> :preview-src-list="['https://www.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521']">
</el-image> --> </el-image> -->
<video <video
v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))" v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
class="media-video" controls x5-playsinline x5-video-player-type="h5" class="media-video" controls x5-playsinline x5-video-player-type="h5"
:poster="isIphone ? 'https://new.iasf.ac.cn/images/about/12.png' : ''" preload> :poster="isIphone ? 'https://www.iasf.ac.cn/images/about/12.png' : ''" preload>
<source :src="item.fileList[0].filePath" type="video/mp4"> <source :src="item.fileList[0].filePath" type="video/mp4">
您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</video> </video>

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

@ -137,8 +137,8 @@ export default {
.block { .block {
padding: 2rem 0; padding: 2rem 0;
background: url(https://new.iasf.ac.cn/images/contactUs/3.png) 0 130px no-repeat, background: url(https://www.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; url(https://www.iasf.ac.cn/images/contactUs/4.png) bottom right no-repeat;
background-color: #f7f8fa; background-color: #f7f8fa;
} }

72
src/pages/deviceIntroBeam/index.vue
Unescape View File

@ -4,12 +4,9 @@
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" <img :src="item.pic" alt="">
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p> <p class="banner-name">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -19,37 +16,27 @@
<div class="block share"> <div class="block share">
<div class="inner"> <div class="inner">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en" <p class="en" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p>
<div class="sum">{{ modules[2].form.title }}</div> <div class="sum">{{ modules[2].form.title }}</div>
<div class="flex beamBox"> <div class="flex beamBox">
<div class="left"> <div class="left">
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="intro"> <div class="intro">
<div class="inner intro-inner"> <div class="inner intro-inner">
<img class="pic" <img class="pic" :src="modules[3].form.pic" alt="">
:src="modules[3].form.pic" <div class="des" v-html="modules[3].form.des"></div>
alt="">
<div class="des"
v-html="modules[3].form.des"></div>
</div> </div>
</div> </div>
<div class="unit"> <div class="unit">
<div class="title" <div class="title" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img class="pic" :src="modules[4].form.pic" alt="">
<img class="pic"
:src="modules[4].form.pic"
alt="">
</div> </div>
</div> </div>
</template> </template>
@ -93,18 +80,23 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
$banner-height: 21.6rem; $banner-height: 21.6rem;
.wrap { .wrap {
background: url(https://new.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat; background: url(https://www.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
/deep/ .el-carousel { /deep/ .el-carousel {
height: $banner-height; height: $banner-height;
.el-carousel__container { .el-carousel__container {
height: $banner-height; height: $banner-height;
} }
img { img {
height: $banner-height; height: $banner-height;
} }
} }
} }
.banner-item { .banner-item {
.banner-name { .banner-name {
font-size: 2.16rem; font-size: 2.16rem;
@ -112,24 +104,30 @@ $banner-height: 21.6rem;
bottom: 20%; bottom: 20%;
} }
} }
.block { .block {
padding: 3.85rem 0; padding: 3.85rem 0;
.inner { .inner {
h6 { h6 {
font-size: 1.76rem; font-size: 1.76rem;
} }
.en { .en {
font-size: 1.76rem; font-size: 1.76rem;
margin: 0px 0 2rem; margin: 0px 0 2rem;
} }
.sum { .sum {
margin-top: 3rem; margin-top: 3rem;
font-size: 0.96rem; font-size: 0.96rem;
} }
} }
} }
.beamBox { .beamBox {
position: relative; position: relative;
.imgText { .imgText {
position: absolute; position: absolute;
right: 2rem; right: 2rem;
@ -137,6 +135,7 @@ $banner-height: 21.6rem;
display: flex; display: flex;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
.readio { .readio {
width: 7px; width: 7px;
height: 7px; height: 7px;
@ -147,15 +146,19 @@ $banner-height: 21.6rem;
} }
} }
} }
.share { .share {
position: relative; position: relative;
.beamBox { .beamBox {
align-items: center; align-items: center;
} }
.left { .left {
width: 50%; width: 50%;
padding-right: 66px; padding-right: 66px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.92rem; font-size: 1.92rem;
@ -163,6 +166,7 @@ $banner-height: 21.6rem;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
.en { .en {
margin-top: -25px; margin-top: -25px;
font-size: 2.4rem; font-size: 2.4rem;
@ -170,6 +174,7 @@ $banner-height: 21.6rem;
font-weight: 300; font-weight: 300;
color: #e3e3e3; color: #e3e3e3;
} }
.sum { .sum {
margin-top: 60px; margin-top: 60px;
font-size: 1.2rem; font-size: 1.2rem;
@ -178,6 +183,7 @@ $banner-height: 21.6rem;
color: #333333; color: #333333;
line-height: 44px; line-height: 44px;
} }
.des { .des {
margin-top: 1.25rem; margin-top: 1.25rem;
font-size: 0.88rem; font-size: 0.88rem;
@ -186,25 +192,30 @@ $banner-height: 21.6rem;
-webkit-line-clamp: inherit; -webkit-line-clamp: inherit;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 50%; width: 50%;
margin-top: 10px; margin-top: 10px;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
} }
.intro { .intro {
height: 19.65rem; height: 19.65rem;
margin-bottom: 67px; margin-bottom: 67px;
.intro-inner { .intro-inner {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
background-color: #2e4984; background-color: #2e4984;
} }
.pic { .pic {
width: 50%; width: 50%;
height: 100%; height: 100%;
} }
.des { .des {
width: 50%; width: 50%;
height: 19.65rem; height: 19.65rem;
@ -215,10 +226,12 @@ $banner-height: 21.6rem;
-webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示 -webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示
} }
} }
.unit { .unit {
width: 986px; width: 986px;
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
.title { .title {
padding-left: 0.93rem; padding-left: 0.93rem;
margin-bottom: 0.93rem; margin-bottom: 0.93rem;
@ -235,17 +248,20 @@ $banner-height: 21.6rem;
height: 12rem; height: 12rem;
padding: 6rem 0 0 2rem; padding: 6rem 0 0 2rem;
} }
.beamBox { .beamBox {
.imgText { .imgText {
bottom: 4rem; bottom: 4rem;
right: 4rem; right: 4rem;
} }
} }
.share { .share {
width: 90%; width: 90%;
padding-left: 0; padding-left: 0;
margin: 0 auto; margin: 0 auto;
} }
.beamBox { .beamBox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -254,25 +270,31 @@ $banner-height: 21.6rem;
.left { .left {
width: 100%; width: 100%;
} }
.des { .des {
-webkit-line-clamp: 100; -webkit-line-clamp: 100;
} }
.pic { .pic {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
height: auto; height: auto;
} }
} }
.intro { .intro {
width: 90%; width: 90%;
padding: 1rem 0; padding: 1rem 0;
height: auto; height: auto;
.intro-inner { .intro-inner {
flex-direction: column; flex-direction: column;
} }
.pic { .pic {
width: 80%; width: 80%;
} }
.des { .des {
width: 80%; width: 80%;
height: auto; height: auto;
@ -280,8 +302,10 @@ $banner-height: 21.6rem;
-webkit-line-clamp: 100; -webkit-line-clamp: 100;
} }
} }
.unit { .unit {
width: 95%; width: 95%;
img { img {
width: 100%; width: 100%;
} }

71
src/pages/deviceIntroLayout/index.vue
Unescape View File

@ -4,12 +4,9 @@
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" <img :src="item.pic" alt="">
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p> <p class="banner-name">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -20,33 +17,22 @@
<div class="inner"> <div class="inner">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="en">{{ modules[1].form.subTitle }}</p> <p class="en">{{ modules[1].form.subTitle }}</p>
<div class="card" <div class="card" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
<div class="texts"> <div class="texts">
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div> <img class="pic" :src="modules[2].form.pic" alt="">
<img class="pic"
:src="modules[2].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="inner intro"> <div class="inner intro">
<img class="bg" <img class="bg" src="https://www.iasf.ac.cn/images/device/7.png" alt="">
src="https://new.iasf.ac.cn/images/device/7.png" <img class="pic" :src="modules[3].form.pic" alt="">
alt="">
<img class="pic"
:src="modules[3].form.pic"
alt="">
</div> </div>
<div class="unit"> <div class="unit">
<div class="title" <div class="title" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img class="pic" :src="modules[4].form.pic" alt="">
<img class="pic"
:src="modules[4].form.pic"
alt="">
</div> </div>
</div> </div>
</template> </template>
@ -90,18 +76,23 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
$banner-height: 21.6rem; $banner-height: 21.6rem;
.wrap { .wrap {
background: url(https://new.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat; background: url(https://www.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
/deep/ .el-carousel { /deep/ .el-carousel {
height: $banner-height; height: $banner-height;
.el-carousel__container { .el-carousel__container {
height: $banner-height; height: $banner-height;
} }
img { img {
height: $banner-height; height: $banner-height;
} }
} }
} }
.banner-item { .banner-item {
.banner-name { .banner-name {
font-size: 2.16rem; font-size: 2.16rem;
@ -109,23 +100,29 @@ $banner-height: 21.6rem;
bottom: 20%; bottom: 20%;
} }
} }
.block { .block {
padding: 3.85rem 0; padding: 3.85rem 0;
.inner { .inner {
h6 { h6 {
font-size: 2.16rem; font-size: 2.16rem;
} }
.en { .en {
font-size: 1.76rem; font-size: 1.76rem;
margin: 0px 0 2rem; margin: 0px 0 2rem;
} }
} }
} }
.share { .share {
position: relative; position: relative;
.texts { .texts {
display: flex; display: flex;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.76rem; font-size: 1.76rem;
@ -133,6 +130,7 @@ $banner-height: 21.6rem;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
.en { .en {
margin: -25px 0 40px; margin: -25px 0 40px;
font-size: 2.2rem; font-size: 2.2rem;
@ -140,6 +138,7 @@ $banner-height: 21.6rem;
font-weight: 300; font-weight: 300;
color: #e3e3e3; color: #e3e3e3;
} }
.card { .card {
padding: 1.5rem; padding: 1.5rem;
margin-bottom: 20px; margin-bottom: 20px;
@ -149,8 +148,9 @@ $banner-height: 21.6rem;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
line-height: 2.375rem; line-height: 2.375rem;
background: url(https://new.iasf.ac.cn/images/device/5.png) center center no-repeat; background: url(https://www.iasf.ac.cn/images/device/5.png) center center no-repeat;
} }
.des { .des {
flex-grow: 1; flex-grow: 1;
margin: 25px 4rem 0 0; margin: 25px 4rem 0 0;
@ -160,18 +160,22 @@ $banner-height: 21.6rem;
line-height: 2; line-height: 2;
overflow: visible; overflow: visible;
} }
.pic { .pic {
width: 44.375rem; width: 44.375rem;
height: auto; height: auto;
border-top-left-radius: 20px; border-top-left-radius: 20px;
} }
} }
.intro { .intro {
position: relative; position: relative;
margin: 60px auto; margin: 60px auto;
.bg { .bg {
height: 35.73rem; height: 35.73rem;
} }
.pic { .pic {
position: absolute; position: absolute;
top: 3.015rem; top: 3.015rem;
@ -180,10 +184,12 @@ $banner-height: 21.6rem;
height: 29.74rem; height: 29.74rem;
} }
} }
.unit { .unit {
width: 986px; width: 986px;
padding-bottom: 60px; padding-bottom: 60px;
margin: 0 auto; margin: 0 auto;
.title { .title {
padding-left: 0.93rem; padding-left: 0.93rem;
margin-bottom: 0.93rem; margin-bottom: 0.93rem;
@ -201,21 +207,25 @@ $banner-height: 21.6rem;
position: relative; position: relative;
margin-left: -2.5%; margin-left: -2.5%;
} }
.inner { .inner {
max-width: none; max-width: none;
width: 95%; width: 95%;
.texts { .texts {
position: static; position: static;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
margin-left: 15%; margin-left: 15%;
.des { .des {
width: 100%; width: 100%;
-webkit-line-clamp: 100; -webkit-line-clamp: 100;
} }
} }
} }
.pic { .pic {
width: 50%; width: 50%;
margin-top: 20px; margin-top: 20px;
@ -225,22 +235,27 @@ $banner-height: 21.6rem;
.bg { .bg {
width: 100%; width: 100%;
} }
.intro { .intro {
height: 36rem; height: 36rem;
margin-top: 0; margin-top: 0;
.pic { .pic {
width: 100%; width: 100%;
left: 0; left: 0;
top: 6%; top: 6%;
} }
} }
.unit { .unit {
width: 95%; width: 95%;
img { img {
width: 100%; width: 100%;
} }
} }
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.share { .share {
.pic { .pic {
@ -248,6 +263,7 @@ $banner-height: 21.6rem;
} }
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.share { .share {
.inner { .inner {
@ -255,12 +271,15 @@ $banner-height: 21.6rem;
margin: 0 auto; margin: 0 auto;
} }
} }
.des { .des {
margin-right: 0; margin-right: 0;
} }
} }
.intro { .intro {
height: auto; height: auto;
.bg, .bg,
.pic { .pic {
position: static; position: static;

57
src/pages/deviceIntroLinear/index.vue
Unescape View File

@ -4,12 +4,9 @@
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :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'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
<div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" <img :src="item.pic" alt="">
@click="openLink(item)">
<img :src="item.pic"
alt="">
<p class="banner-name">{{ item.title }}</p> <p class="banner-name">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -18,21 +15,15 @@
<div class="block history gray"> <div class="block history gray">
<div class="inner"> <div class="inner">
<h2 class="wow fadeInLeft" <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
v-html="modules[1].form.title"></h2> <p class="en" v-html="modules[1].form.des"></p>
<p class="en" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
v-html="modules[1].form.des"></p>
<div class="texts wow fadeInDown"
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" src="https://www.iasf.ac.cn/images/device/10.png" alt="" />
src="https://new.iasf.ac.cn/images/device/10.png"
alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -40,16 +31,12 @@
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="left"> <div class="left">
<div class="title1" <div class="title1" v-html="modules[3].form.title"></div>
v-html="modules[3].form.title"></div> <img :src="modules[3].form.pic" alt="" />
<img :src="modules[3].form.pic"
alt="" />
</div> </div>
<div class="right"> <div class="right">
<div class="title2" <div class="title2" v-html="modules[4].form.title"></div>
v-html="modules[4].form.title"></div> <img :src="modules[4].form.pic" alt="" />
<img :src="modules[4].form.pic"
alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -93,17 +80,21 @@ export default {
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
$banner-height: 21.6rem; $banner-height: 21.6rem;
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: $banner-height; height: $banner-height;
.el-carousel__container { .el-carousel__container {
height: $banner-height; height: $banner-height;
} }
img { img {
height: $banner-height; height: $banner-height;
} }
} }
} }
.banner-item { .banner-item {
.banner-name { .banner-name {
font-size: 2.16rem; font-size: 2.16rem;
@ -111,18 +102,22 @@ $banner-height: 21.6rem;
bottom: 20%; bottom: 20%;
} }
} }
.block { .block {
padding: 3.85rem 0; padding: 3.85rem 0;
.inner { .inner {
h2 { h2 {
font-size: 1.76rem; font-size: 1.76rem;
} }
.en { .en {
font-size: 1.76rem; font-size: 1.76rem;
margin: 0px 0 2rem; margin: 0px 0 2rem;
} }
} }
} }
.history { .history {
.inner { .inner {
width: 1200px; width: 1200px;
@ -154,6 +149,7 @@ $banner-height: 21.6rem;
border-radius: 65px 100px 0px 0px; border-radius: 65px 100px 0px 0px;
transition: 0.3s; transition: 0.3s;
position: relative; position: relative;
.imgText { .imgText {
position: absolute; position: absolute;
right: 0rem; right: 0rem;
@ -162,6 +158,7 @@ $banner-height: 21.6rem;
font-size: 0.9rem; font-size: 0.9rem;
color: #ffffff; color: #ffffff;
font-weight: 400; font-weight: 400;
.readio { .readio {
width: 7px; width: 7px;
height: 7px; height: 7px;
@ -215,13 +212,16 @@ $banner-height: 21.6rem;
.inner { .inner {
display: flex; display: flex;
} }
.left { .left {
width: 30%; width: 30%;
} }
.right { .right {
width: 68%; width: 68%;
margin-left: 2%; margin-left: 2%;
} }
.title1 { .title1 {
margin-bottom: 0.93rem; margin-bottom: 0.93rem;
font-size: 0.88rem; font-size: 0.88rem;
@ -264,8 +264,10 @@ $banner-height: 21.6rem;
} }
} }
} }
.block { .block {
padding: 50px 0; padding: 50px 0;
.inner { .inner {
.texts { .texts {
.bg { .bg {
@ -288,9 +290,11 @@ $banner-height: 21.6rem;
.inner { .inner {
width: 95%; width: 95%;
} }
.texts { .texts {
flex-direction: column; flex-direction: column;
} }
.bg { .bg {
margin: 0 auto; margin: 0 auto;
} }
@ -299,18 +303,21 @@ $banner-height: 21.6rem;
.inner { .inner {
flex-direction: column; flex-direction: column;
width: 95%; width: 95%;
.left, .left,
.right { .right {
width: 95%; width: 95%;
margin: 20px auto; margin: 20px auto;
} }
} }
.intro { .intro {
img { img {
height: auto; height: auto;
} }
} }
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.history { .history {
.bg { .bg {

59
src/pages/estate/event/index.vue
Unescape View File

@ -2,9 +2,7 @@
<!-- 产业光源-大事记 --> <!-- 产业光源-大事记 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,9 +10,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
@ -23,32 +19,24 @@
<h2 class="wow fadeInLeft">大事记</h2> <h2 class="wow fadeInLeft">大事记</h2>
<p class="en">DEVELOPMENT HISTORY</p> <p class="en">DEVELOPMENT HISTORY</p>
<div v-if="modules[1].list.length" <div v-if="modules[1].list.length" class="event">
class="event">
<ul class="time"> <ul class="time">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="yearClick(i)">{{ item.title }}
:key="i" </li>
:class="{active: curYear == i}"
@click="yearClick(i)">{{ item.title }}</li>
</template> </template>
</ul> </ul>
<div class="right"> <div class="right">
<h6 class="year">{{ modules[1].list[curYear].title }}</h6> <h6 class="year">{{ modules[1].list[curYear].title }}</h6>
<ul class="list"> <ul class="list">
<template v-for="(e, j) in modules[1].list[curYear].list"> <template v-for="(e, j) in modules[1].list[curYear].list">
<li v-if="e.isEnable" <li v-if="e.isEnable" :key="j" :class="{ 'cursor-pointer': isLink(e.link.linkName) }"
:key="j"
:class="{'cursor-pointer': isLink(e.link.linkName)}"
@click="openLink(e)"> @click="openLink(e)">
<div class="texts"> <div class="texts">
<p class="date">{{ e.title }}</p> <p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p> <p class="text">{{ e.des }}</p>
</div> </div>
<el-image v-if="e.pic" <el-image v-if="e.pic" class="pic" :src="e.pic" :preview-src-list="[e.pic]">
class="pic"
:src="e.pic"
:preview-src-list="[e.pic]">
</el-image> </el-image>
</li> </li>
</template> </template>
@ -86,9 +74,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css); @import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://new.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, background: url(https://www.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://new.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; url(https://www.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
} }
.history { .history {
@ -99,6 +88,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
} }
.en { .en {
margin: -15px 0 40px; margin: -15px 0 40px;
font-size: 2rem; font-size: 2rem;
@ -107,14 +97,17 @@ export default {
color: #e3e3e3; color: #e3e3e3;
} }
} }
.event { .event {
display: flex; display: flex;
justify-content: center; justify-content: center;
.time { .time {
width: 200px; width: 200px;
padding-right: 10px; padding-right: 10px;
margin-right: 20px; margin-right: 20px;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -128,23 +121,27 @@ export default {
color: #666; color: #666;
box-shadow: inset 0px -1px 0px 0px #dddddd; box-shadow: inset 0px -1px 0px 0px #dddddd;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
&:before { &:before {
content: ''; content: '';
width: 18px; width: 18px;
height: 18px; height: 18px;
background: url(https://new.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat; background: url(https://www.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
margin-right: 20px; margin-right: 20px;
} }
} }
} }
} }
.right { .right {
width: 1000px; width: 1000px;
} }
.year { .year {
margin: 0 0 20px 20px; margin: 0 0 20px 20px;
font-size: 3.2rem; font-size: 3.2rem;
@ -152,8 +149,10 @@ export default {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
} }
.list { .list {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -161,9 +160,11 @@ export default {
padding: 30px; padding: 30px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.texts { .texts {
width: 500px; width: 500px;
} }
.date { .date {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.2rem; font-size: 1.2rem;
@ -171,10 +172,12 @@ export default {
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.text { .text {
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #333;
@include mul-ellipsis(3); @include mul-ellipsis(3);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -185,6 +188,7 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.pic { .pic {
width: 300px; width: 300px;
height: 195px; height: 195px;
@ -195,37 +199,48 @@ export default {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }
} }
} }
.block { .block {
padding: 2rem 0; padding: 2rem 0;
.inner { .inner {
width: 90%; width: 90%;
.event { .event {
flex-direction: column; flex-direction: column;
.time { .time {
width: 100%; width: 100%;
li { li {
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
} }
} }
.right { .right {
width: 100%; width: 100%;
.list { .list {
li { li {
padding: 1.25rem; padding: 1.25rem;
flex-direction: column; flex-direction: column;
.texts { .texts {
width: 100%; width: 100%;
} }
.pic { .pic {
width: 100%; width: 100%;
height: auto; height: auto;

63
src/pages/estate/location/index.vue
Unescape View File

@ -2,9 +2,7 @@
<!-- 产业光源-地理位置 --> <!-- 产业光源-地理位置 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,56 +10,39 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="item wow bounceInLeft" <div class="item wow bounceInLeft" data-wow-delay="0.5s"
data-wow-delay="0.5s" :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }" @click="openLink(modules[1].form)">
:class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
@click="openLink(modules[1].form)">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
</div> </div>
<div class="item wow bounceInRight" <div class="item wow bounceInRight" data-wow-delay="0.6s"
data-wow-delay="0.6s" :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
:class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
</div> </div>
<div class="item wow bounceInLeft" <div class="item wow bounceInLeft" data-wow-delay="0.5s"
data-wow-delay="0.5s" :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }" @click="openLink(modules[3].form)">
:class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
<div class="img-wrap"> <div class="img-wrap">
<img class="pic" <img class="pic" :src="modules[3].form.pic" alt="">
:src="modules[3].form.pic"
alt="">
</div> </div>
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
@ -92,70 +73,84 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css); @import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tab-content { .tab-content {
width: 70%; width: 70%;
max-width: 1504px; max-width: 1504px;
padding-bottom: 100px; padding-bottom: 100px;
margin: 30px auto 0; margin: 30px auto 0;
.item { .item {
display: flex; display: flex;
padding: 42px; padding: 42px;
margin-bottom: 36px; margin-bottom: 36px;
color: #333; color: #333;
background: #f5f5f5 url(https://new.iasf.ac.cn/images/overviewSetup/1.png) right bottom/auto no-repeat; background: #f5f5f5 url(https://www.iasf.ac.cn/images/overviewSetup/1.png) right bottom/auto no-repeat;
transition: 0.5s; transition: 0.5s;
&:nth-child(even) { &:nth-child(even) {
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
background-position: 30% 100%; background-position: 30% 100%;
.texts { .texts {
padding-left: 0; padding-left: 0;
} }
} }
&:hover { &:hover {
.pic { .pic {
transform: scale(1.1); transform: scale(1.1);
} }
} }
} }
.img-wrap { .img-wrap {
height: 383px; height: 383px;
overflow: hidden; overflow: hidden;
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: 0.5s; transition: 0.5s;
} }
.texts { .texts {
width: 707px; width: 707px;
padding: 98px 72px 30px 80px; padding: 98px 72px 30px 80px;
} }
h6 { h6 {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 2rem; font-size: 2rem;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
} }
.des { .des {
font-size: 1rem; font-size: 1rem;
line-height: 33px; line-height: 33px;
-webkit-line-clamp: 8; -webkit-line-clamp: 8;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tab-content { .tab-content {
width: 80%; width: 80%;
padding: 1.25rem 0; padding: 1.25rem 0;
.item { .item {
padding: 0.85rem; padding: 0.85rem;
flex-direction: column !important; flex-direction: column !important;
.texts { .texts {
margin-top: 0.5rem; margin-top: 0.5rem;
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
} }
.img-wrap { .img-wrap {
height: auto; height: auto;
} }

32
src/pages/estate/orgSetup/index.vue
Unescape View File

@ -2,9 +2,7 @@
<!-- 产业光源-机构设置 --> <!-- 产业光源-机构设置 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,9 +10,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
@ -22,17 +18,12 @@
<div class="org"> <div class="org">
<div class="left"> <div class="left">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="pic" <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
alt="">
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<img width="100%" <img width="100%" :src="modules[2].form.pic" alt="">
:src="modules[2].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -62,9 +53,11 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css); @import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -74,49 +67,60 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
} }
} }
.lg-bg { .lg-bg {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
img { img {
object-fit: cover; object-fit: cover;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
} }
img { img {
display: none; display: none;
} }
} }
} }
.lg-bg { .lg-bg {
width: 90%; width: 90%;
} }

31
src/pages/estate/survey/index.vue
Unescape View File

@ -2,9 +2,7 @@
<!-- 产业光源-产业光源概况 --> <!-- 产业光源-产业光源概况 -->
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,9 +10,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
@ -22,17 +18,12 @@
<div class="survey"> <div class="survey">
<h6> <h6>
{{ modules[1].form.title }} {{ modules[1].form.title }}
<img class="title-bg" <img class="title-bg" src="https://www.iasf.ac.cn/images/overviewIntro/2.png" alt="">
src="https://new.iasf.ac.cn/images/overviewIntro/2.png"
alt="">
</h6> </h6>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<img width="100%" <img width="100%" src="https://www.iasf.ac.cn/images/estate/3.png" alt="">
src="https://new.iasf.ac.cn/images/estate/3.png"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -62,16 +53,19 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../../plugins/wow/animate.css); @import url(../../../plugins/wow/animate.css);
@import '../../../styles/page/page.scss'; @import '../../../styles/page/page.scss';
.tab-content { .tab-content {
padding-top: 70px; padding-top: 70px;
} }
.survey { .survey {
width: 1294px; width: 1294px;
min-height: 500px; min-height: 500px;
padding: 80px 86px 29px 597px; padding: 80px 86px 29px 597px;
margin: 0 auto 200px; margin: 0 auto 200px;
background: url(https://new.iasf.ac.cn/images/estate/2.png) 0 0/100% 100% no-repeat; background: url(https://www.iasf.ac.cn/images/estate/2.png) 0 0/100% 100% no-repeat;
border-radius: 160px; border-radius: 160px;
h6 { h6 {
position: relative; position: relative;
margin-bottom: 30px; margin-bottom: 30px;
@ -80,11 +74,13 @@ export default {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.title-bg { .title-bg {
position: absolute; position: absolute;
top: -40px; top: -40px;
left: -20px; left: -20px;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
@ -93,22 +89,27 @@ export default {
// @include mul-ellipsis(10); // @include mul-ellipsis(10);
} }
} }
.lg-bg { .lg-bg {
width: 40%; width: 40%;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
} }
.lg-bg { .lg-bg {
width: 100%; width: 100%;
} }
.survey { .survey {
width: 95%; width: 95%;
padding: 80px 86px 29px 47%; padding: 80px 86px 29px 47%;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.survey { .survey {
padding: 30px; padding: 30px;

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

@ -1,29 +1,20 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="block history gray" <div class="block history gray" style="padding-bottom: 70px">
style="padding-bottom: 70px">
<div class="inner"> <div class="inner">
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2 v-html="modules[1].form.title"></h2> <h2 v-html="modules[1].form.title"></h2>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="467" :src="modules[1].form.pic" alt="">
width="562"
height="467"
:src="modules[1].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -31,26 +22,18 @@
<div class="cards"> <div class="cards">
<ul> <ul>
<template v-for="(item, i) in modules[2].list"> <template v-for="(item, i) in modules[2].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="depClick(i)">{{ item.title }}</li>
:key="i"
:class="{active: curYear == i}"
@click="depClick(i)">{{ item.title }}</li>
</template> </template>
</ul> </ul>
</div> </div>
<div class="block committee gray" <div class="block committee gray" style="padding-top: 80px">
style="padding-top: 80px"> <div v-if="modules[2].list[curYear].list[0]" class="inner">
<div v-if="modules[2].list[curYear].list[0]"
class="inner">
<div class="left"> <div class="left">
<h2>{{ modules[2].list[curYear].list[0].title }}</h2> <h2>{{ modules[2].list[curYear].list[0].title }}</h2>
<div class="text" <div class="text" v-html="modules[2].list[curYear].list[0].des"></div>
v-html="modules[2].list[curYear].list[0].des"></div>
</div> </div>
<img class="pic" <img class="pic" :src="modules[2].list[curYear].list[0].pic" alt="">
:src="modules[2].list[curYear].list[0].pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
@ -101,11 +84,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.history { .history {
h2 { h2 {
padding-bottom: 15px; padding-bottom: 15px;
font-size: 1.2rem; font-size: 1.2rem;
color: #333; color: #333;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
@ -115,6 +100,7 @@ export default {
background: #0280f1; background: #0280f1;
} }
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -123,14 +109,17 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 600px; width: 600px;
padding-right: 20px; padding-right: 20px;
} }
.text { .text {
margin: 20px 0; margin: 20px 0;
font-size: 1.2rem; font-size: 1.2rem;
@ -138,13 +127,16 @@ export default {
line-height: 31px; line-height: 31px;
@include mul-ellipsis(10); @include mul-ellipsis(10);
} }
.bg { .bg {
margin: -122px 0 0 0; margin: -122px 0 0 0;
object-fit: cover; object-fit: cover;
} }
} }
.cards { .cards {
padding-top: 50px; padding-top: 50px;
ul { ul {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -152,6 +144,7 @@ export default {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
li { li {
width: 368px; width: 368px;
margin: 0 30px 50px 0; margin: 0 30px 50px 0;
@ -160,29 +153,37 @@ export default {
color: #333; color: #333;
text-align: center; text-align: center;
@include ellipsis(); @include ellipsis();
background: url(https://new.iasf.ac.cn/images/governance/3.png) 0 0 / cover no-repeat; background: url(https://www.iasf.ac.cn/images/governance/3.png) 0 0 / cover no-repeat;
cursor: pointer; cursor: pointer;
&:nth-child(2) { &:nth-child(2) {
background-image: url(https://new.iasf.ac.cn/images/governance/4.png); background-image: url(https://www.iasf.ac.cn/images/governance/4.png);
} }
&:nth-child(3) { &:nth-child(3) {
background-image: url(https://new.iasf.ac.cn/images/governance/5.png); background-image: url(https://www.iasf.ac.cn/images/governance/5.png);
} }
&:nth-child(4) { &:nth-child(4) {
background-image: url(https://new.iasf.ac.cn/images/governance/4.png); background-image: url(https://www.iasf.ac.cn/images/governance/4.png);
} }
&:nth-child(5) { &:nth-child(5) {
background-image: url(https://new.iasf.ac.cn/images/governance/7.png); background-image: url(https://www.iasf.ac.cn/images/governance/7.png);
} }
&:nth-child(6) { &:nth-child(6) {
background-image: url(https://new.iasf.ac.cn/images/governance/6.png); background-image: url(https://www.iasf.ac.cn/images/governance/6.png);
} }
&:nth-child(8) { &:nth-child(8) {
background-image: url(https://new.iasf.ac.cn/images/governance/6.png); background-image: url(https://www.iasf.ac.cn/images/governance/6.png);
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
&:hover, &:hover,
&.active { &.active {
color: #fff; color: #fff;
@ -190,27 +191,32 @@ export default {
} }
} }
} }
.committee { .committee {
.inner { .inner {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.left { .left {
width: 50%; width: 50%;
margin-right: 2%; margin-right: 2%;
} }
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
line-height: 1.5; line-height: 1.5;
color: #333; color: #333;
} }
.pic { .pic {
width: 48%; width: 48%;
height: 300px; height: 300px;
@ -223,32 +229,39 @@ export default {
.texts { .texts {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 90%; width: 90%;
} }
.bg { .bg {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
} }
} }
.cards { .cards {
ul { ul {
width: 98%; width: 98%;
} }
li { li {
width: 100%; width: 100%;
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.committee { .committee {
.inner { .inner {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
} }
.pic { .pic {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;

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

@ -88,7 +88,7 @@
</template> </template>
<ul class="news-carousel"> <ul class="news-carousel">
<li v-if="articles1.length"> <li v-if="articles1.length">
<img class="pic" src="https://new.iasf.ac.cn/images/iasf/8.png" alt=""> <img class="pic" src="https://www.iasf.ac.cn/images/iasf/8.png" alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i
class="el-icon-arrow-right"></i></h6> class="el-icon-arrow-right"></i></h6>
@ -108,7 +108,7 @@
</div> </div>
</li> </li>
<li v-if="articles2.length"> <li v-if="articles2.length">
<img class="pic" src="https://new.iasf.ac.cn/images/iasf/9.png" alt=""> <img class="pic" src="https://www.iasf.ac.cn/images/iasf/9.png" alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i
class="el-icon-arrow-right"></i></h6> class="el-icon-arrow-right"></i></h6>
@ -128,7 +128,7 @@
</div> </div>
</li> </li>
<li v-if="articles3.length"> <li v-if="articles3.length">
<img class="pic" src="https://new.iasf.ac.cn/images/iasf/10.png" alt=""> <img class="pic" src="https://www.iasf.ac.cn/images/iasf/10.png" alt="">
<div class="texts"> <div class="texts">
<h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i
class="el-icon-arrow-right"></i></h6> class="el-icon-arrow-right"></i></h6>
@ -547,7 +547,7 @@ $bannerMh: 800px;
} }
.card-block { .card-block {
background: url(https://new.iasf.ac.cn/images/iasf/14.jpg) 0 0 / cover no-repeat; background: url(https://www.iasf.ac.cn/images/iasf/14.jpg) 0 0 / cover no-repeat;
} }
.card { .card {
@ -632,7 +632,7 @@ $bannerMh: 800px;
} }
.news-wrap { .news-wrap {
background: url(https://new.iasf.ac.cn/images/iasf/1.png) 0 0 / cover no-repeat; background: url(https://www.iasf.ac.cn/images/iasf/1.png) 0 0 / cover no-repeat;
} }
.news-title:after { .news-title:after {
@ -1015,7 +1015,7 @@ $bannerMh: 800px;
} }
.talent-block { .talent-block {
background: url(https://new.iasf.ac.cn/images/iasf/11.png) 0 0 / cover no-repeat; background: url(https://www.iasf.ac.cn/images/iasf/11.png) 0 0 / cover no-repeat;
} }
.talent { .talent {
@ -1059,7 +1059,7 @@ $bannerMh: 800px;
.about { .about {
padding: 100px 0 0; padding: 100px 0 0;
background: url(https://new.iasf.ac.cn/images/iasf/12.png) 0 450px no-repeat; background: url(https://www.iasf.ac.cn/images/iasf/12.png) 0 450px no-repeat;
.about-bg { .about-bg {
background-color: #0a7fec; background-color: #0a7fec;
@ -1153,31 +1153,31 @@ $bannerMh: 800px;
width: 28px; width: 28px;
height: 28px; height: 28px;
margin-right: 7px; margin-right: 7px;
background: url(https://new.iasf.ac.cn/images/iasf/icon1.png) no-repeat; background: url(https://www.iasf.ac.cn/images/iasf/icon1.png) no-repeat;
} }
&:nth-child(2):before { &:nth-child(2):before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon2.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon2.png);
} }
&:nth-child(2):hover:before { &:nth-child(2):hover:before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon2-1.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon2-1.png);
} }
&:nth-child(3):before { &:nth-child(3):before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon3.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon3.png);
} }
&:nth-child(3):hover:before { &:nth-child(3):hover:before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon3-1.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon3-1.png);
} }
&:nth-child(4):before { &:nth-child(4):before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon4.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon4.png);
} }
&:nth-child(4):hover:before { &:nth-child(4):hover:before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon4-1.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon4-1.png);
} }
&:hover { &:hover {
@ -1188,7 +1188,7 @@ $bannerMh: 800px;
background-color: rgba(1, 129, 247, 0.94); background-color: rgba(1, 129, 247, 0.94);
&:before { &:before {
background-image: url(https://new.iasf.ac.cn/images/iasf/icon1-1.png); background-image: url(https://www.iasf.ac.cn/images/iasf/icon1-1.png);
} }
} }
} }

28
src/pages/org/index.vue
Unescape View File

@ -1,9 +1,7 @@
<template> <template>
<div class="wrap p-b-30"> <div class="wrap p-b-30">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,17 +10,12 @@
<div class="org"> <div class="org">
<div class="left"> <div class="left">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p>
</div> </div>
<img class="pic" <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
alt="">
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<el-image style="width: 100%;" <el-image style="width: 100%;" :src="modules[2].form.pic" :preview-src-list="[modules[2].form.pic]">
:src="modules[2].form.pic"
:preview-src-list="[modules[2].form.pic]">
</el-image> </el-image>
</div> </div>
</div> </div>
@ -69,6 +62,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -78,52 +72,64 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
} }
} }
.lg-bg { .lg-bg {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
.org { .org {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
.left { .left {
width: 60%; width: 60%;
} }
.pic { .pic {
width: 30%; width: 30%;
height: auto; height: auto;
} }
} }
.lg-bg { .lg-bg {
width: 85%; width: 85%;
} }
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.org { .org {
flex-direction: column; flex-direction: column;
.pic { .pic {
display: none; display: none;
} }
.left { .left {
width: 100%; width: 100%;
} }

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

@ -1,60 +1,44 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner"> <div class="single-banner">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="" />
:src="modules[0].form.pic"
alt="" />
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
</div> </div>
<div class="block history gray"> <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)"> @click="openLink(modules[1].form)">
<div class="texts wow fadeInDown" <div class="texts wow fadeInDown" data-wow-delay="0.5s">
data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2 v-html="modules[1].form.title"></h2> <h2 v-html="modules[1].form.title"></h2>
<div class="line"></div> <div class="line"></div>
<div class="des" <div class="des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg" width="562" height="418" :src="modules[1].form.pic" alt="">
width="562"
height="418"
:src="modules[1].form.pic"
alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]" <div :class="['core', { 'cursor-pointer': isLink(modules[2].form.link.linkName) }]"
@click="openLink(modules[2].form)"> @click="openLink(modules[2].form)">
<img :src="modules[2].form.pic" <img :src="modules[2].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<div class="core-title" <div class="core-title" v-html="modules[2].form.title"></div>
v-html="modules[2].form.title"></div>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
</div> </div>
<div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]" <div :class="['core', { 'cursor-pointer': isLink(modules[3].form.link.linkName) }]"
@click="openLink(modules[3].form)"> @click="openLink(modules[3].form)">
<img :src="modules[3].form.pic" <img :src="modules[3].form.pic" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<div class="core-title" <div class="core-title" v-html="modules[3].form.title"></div>
v-html="modules[3].form.title"></div>
<div class="line"></div> <div class="line"></div>
<div class="text" <div class="text" v-html="modules[3].form.des"></div>
v-html="modules[3].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
@ -63,53 +47,35 @@
<div class="block gray fac"> <div class="block gray fac">
<div class="inner"> <div class="inner">
<div class="event"> <div class="event">
<img src="https://new.iasf.ac.cn/images/overview/16.png" <img src="https://www.iasf.ac.cn/images/overview/16.png" alt="" class="pic">
alt=""
class="pic">
<div class="texts"> <div class="texts">
<h6 v-html="modules[4].form.title"></h6> <h6 v-html="modules[4].form.title"></h6>
<p class="en">{{ modules[4].form.subTitle }}</p> <p class="en">{{ modules[4].form.subTitle }}</p>
<div class="text" <div class="text" v-html="modules[4].form.des"></div>
v-html="modules[4].form.des"></div> <img v-if="isLink(modules[4].form.link.linkName)" class="arrow" src="@/assets/images/arrow.png" alt=""
<img v-if="isLink(modules[4].form.link.linkName)"
class="arrow"
src="@/assets/images/arrow.png"
alt=""
@click="openLink(modules[4].form)"> @click="openLink(modules[4].form)">
</div> </div>
</div> </div>
<ul class="l-card"> <ul class="l-card">
<li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[5].form.link.linkName) }" @click="openLink(modules[5].form)">
@click="openLink(modules[5].form)"> <img :src="modules[5].form.pic" alt="" class="pic" />
<img :src="modules[5].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[5].form.des"></div>
v-html="modules[5].form.des"></div>
</div> </div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[6].form.link.linkName) }" @click="openLink(modules[6].form)">
@click="openLink(modules[6].form)"> <img :src="modules[6].form.pic" alt="" class="pic" />
<img :src="modules[6].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[6].form.des"></div>
v-html="modules[6].form.des"></div>
</div> </div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[7].form.link.linkName) }" @click="openLink(modules[7].form)">
@click="openLink(modules[7].form)"> <img :src="modules[7].form.pic" alt="" class="pic" />
<img :src="modules[7].form.pic"
alt=""
class="pic" />
<div class="texts"> <div class="texts">
<h6>{{ modules[7].form.title }}</h6> <h6>{{ modules[7].form.title }}</h6>
<div class="text" <div class="text" v-html="modules[7].form.des"></div>
v-html="modules[7].form.des"></div>
</div> </div>
</li> </li>
</ul> </ul>
@ -117,20 +83,13 @@
</div> </div>
<div class="block scan gray"> <div class="block scan gray">
<h2 class="b-title wow fadeInUp hide-bd" <h2 class="b-title wow fadeInUp hide-bd" v-html="modules[8].form.title"></h2>
v-html="modules[8].form.title"></h2> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
<div class="inner scan-inner"> <div class="inner scan-inner">
<div class="left"> <div class="left">
<template v-for="(item, i) in modules[9].list"> <template v-for="(item, i) in modules[9].list">
<div v-if="item.isEnable" <div v-if="item.isEnable" class="line" :key="i">
class="line" <img v-if="item.pic" :src="item.pic" alt="" class="icon">
:key="i">
<img v-if="item.pic"
:src="item.pic"
alt=""
class="icon">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
</template> </template>
@ -149,9 +108,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<img :src="modules[13].form.pic" <img :src="modules[13].form.pic" alt="" class="pic" />
alt=""
class="pic" />
</div> </div>
</div> </div>
</div> </div>
@ -199,11 +156,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.history { .history {
h2 { h2 {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
.texts { .texts {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -212,42 +171,51 @@ export default {
background-color: #fff; background-color: #fff;
border-radius: 6.25rem 0px 0px 0px; border-radius: 6.25rem 0px 0px 0px;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
.left { .left {
width: 43.4375rem; width: 43.4375rem;
} }
.line { .line {
width: 53px; width: 53px;
height: 3px; height: 3px;
margin: 18px 0; margin: 18px 0;
background: #0280f1; background: #0280f1;
} }
.des { .des {
font-size: 0.9rem; font-size: 0.9rem;
color: #181818; color: #181818;
line-height: 31px; line-height: 31px;
-webkit-line-clamp: 6; -webkit-line-clamp: 6;
} }
.bg { .bg {
margin: -115px -80px 0 30px; margin: -115px -80px 0 30px;
border-top-right-radius: 40px; border-top-right-radius: 40px;
} }
} }
.core { .core {
position: relative; position: relative;
margin-bottom: 40px; margin-bottom: 40px;
&:last-child { &:last-child {
.texts { .texts {
left: 40px; left: 40px;
right: auto; right: auto;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 80px; top: 80px;
@ -255,10 +223,12 @@ export default {
width: 500px; width: 500px;
color: #fff; color: #fff;
} }
.core-title { .core-title {
font-size: 1.4rem; font-size: 1.4rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.line { .line {
width: 136px; width: 136px;
height: 3px; height: 3px;
@ -266,17 +236,21 @@ export default {
background: #ffffff; background: #ffffff;
opacity: 0.56; opacity: 0.56;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
} }
.fac { .fac {
.event { .event {
position: relative; position: relative;
.pic { .pic {
width: 100%; width: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 70px; top: 70px;
@ -284,40 +258,48 @@ export default {
bottom: 70px; bottom: 70px;
left: 60px; left: 60px;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 2.2rem; font-size: 2.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333; color: #333;
} }
.en { .en {
margin-top: -30px; margin-top: -30px;
font-size: 2rem; font-size: 2rem;
font-family: AppleSystemUIFont; font-family: AppleSystemUIFont;
color: #e4e4e4; color: #e4e4e4;
} }
.text { .text {
margin: 15px 0; margin: 15px 0;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.l-card { .l-card {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
li { li {
position: relative; position: relative;
width: calc((100% - 40px) / 3); width: calc((100% - 40px) / 3);
height: 359px; height: 359px;
margin-right: 20px; margin-right: 20px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 0; top: 0;
@ -328,11 +310,13 @@ export default {
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
h6 { h6 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.6rem; font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -341,23 +325,28 @@ export default {
} }
} }
} }
.scan { .scan {
.scan-inner { .scan-inner {
display: flex; display: flex;
} }
.left { .left {
width: 45%; width: 45%;
margin-right: 80px; margin-right: 80px;
} }
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
.icon { .icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
margin-right: 20px; margin-right: 20px;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@ -365,10 +354,12 @@ export default {
line-height: 1.6; line-height: 1.6;
} }
} }
.total { .total {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 50px; margin-top: 50px;
.num { .num {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 2rem; font-size: 2rem;
@ -376,11 +367,13 @@ export default {
font-weight: 800; font-weight: 800;
color: #1583ff; color: #1583ff;
} }
.text { .text {
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
} }
} }
.pic { .pic {
width: 50%; width: 50%;
// object-fit: cover; // object-fit: cover;
@ -394,14 +387,17 @@ export default {
} }
} }
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
.history { .history {
.texts { .texts {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
} }
.bg { .bg {
width: auto; width: auto;
max-width: 100%; max-width: 100%;
@ -409,18 +405,22 @@ export default {
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
} }
.scan { .scan {
.scan-inner { .scan-inner {
flex-direction: column; flex-direction: column;
} }
.left { .left {
width: 100%; width: 100%;
} }
.pic { .pic {
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
} }
} }
.fac { .fac {
.event { .event {
.texts { .texts {
@ -430,6 +430,7 @@ export default {
} }
} }
} }
@media (max-width: 920px) { @media (max-width: 920px) {
.core { .core {
.texts { .texts {
@ -439,12 +440,15 @@ export default {
width: auto; width: auto;
} }
} }
.scan { .scan {
padding: 20px; padding: 20px;
} }
.fac { .fac {
.l-card { .l-card {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -452,23 +456,28 @@ export default {
} }
} }
} }
@media (max-width: 750px) { @media (max-width: 750px) {
.hide-bd:after { .hide-bd:after {
display: none; display: none;
} }
.block { .block {
padding: 50px 0; padding: 50px 0;
} }
.core { .core {
.texts { .texts {
position: static; position: static;
padding: 20px; padding: 20px;
color: #333; color: #333;
} }
.line { .line {
background: #333; background: #333;
} }
} }
.fac { .fac {
.event { .event {
.pic { .pic {

70
src/pages/overviewDevHistory/index.vue
Unescape View File

@ -1,9 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -11,45 +9,33 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
<div class="block history"> <div class="block history">
<div class="inner"> <div class="inner">
<h2 class="wow fadeInLeft" <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
v-html="modules[1].form.title"></h2>
<p class="en">{{ modules[1].form.des }}</p> <p class="en">{{ modules[1].form.des }}</p>
<div v-if="modules[2].list.length" <div v-if="modules[2].list.length" class="event">
class="event">
<ul class="time"> <ul class="time">
<template v-for="(item, i) in modules[2].list"> <template v-for="(item, i) in modules[2].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="yearClick(i)">{{ item.title }}
:key="i" </li>
:class="{active: curYear == i}"
@click="yearClick(i)">{{ item.title }}</li>
</template> </template>
</ul> </ul>
<div v-if="modules[2].list[curYear]" <div v-if="modules[2].list[curYear]" class="right">
class="right">
<h6 class="year">{{ modules[2].list[curYear].title }}</h6> <h6 class="year">{{ modules[2].list[curYear].title }}</h6>
<ul class="list"> <ul class="list">
<template v-for="(e, j) in modules[2].list[curYear].list"> <template v-for="(e, j) in modules[2].list[curYear].list">
<li v-if="e.isEnable" <li v-if="e.isEnable" :key="j" :class="{ 'cursor-pointer': isLink(e.link.linkName) }"
:key="j"
:class="{'cursor-pointer': isLink(e.link.linkName)}"
@click="openLink(e)"> @click="openLink(e)">
<div class="texts"> <div class="texts">
<p class="date">{{ e.title }}</p> <p class="date">{{ e.title }}</p>
<p class="text">{{ e.des }}</p> <p class="text">{{ e.des }}</p>
</div> </div>
<div class="pic-wrap"> <div class="pic-wrap">
<el-image v-if="e.pic" <el-image v-if="e.pic" class="pic" :src="e.pic" :preview-src-list="[e.pic]">
class="pic"
:src="e.pic"
:preview-src-list="[e.pic]">
</el-image> </el-image>
</div> </div>
</li> </li>
@ -89,18 +75,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.wrap { .wrap {
background: url(https://new.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat, background: url(https://www.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
url(https://new.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat; url(https://www.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
} }
.single-banner { .single-banner {
.texts { .texts {
top: auto !important; top: auto !important;
bottom: 2rem; bottom: 2rem;
} }
} }
.history { .history {
padding: 3.85rem 0; padding: 3.85rem 0;
h2 { h2 {
position: relative; position: relative;
font-size: 1.75rem; font-size: 1.75rem;
@ -108,6 +98,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #1c1c1c; color: #1c1c1c;
} }
.en { .en {
margin: 0 0 2rem; margin: 0 0 2rem;
font-size: 1.75rem; font-size: 1.75rem;
@ -116,15 +107,18 @@ export default {
color: #e3e3e3; color: #e3e3e3;
} }
} }
.event { .event {
display: flex; display: flex;
justify-content: center; justify-content: center;
.time { .time {
width: 12.5rem; width: 12.5rem;
padding-right: 0.625rem; padding-right: 0.625rem;
margin-right: 1.25rem; margin-right: 1.25rem;
flex-shrink: 1; flex-shrink: 1;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -137,24 +131,28 @@ export default {
color: #666; color: #666;
box-shadow: inset 0px -1px 0px 0px #dddddd; box-shadow: inset 0px -1px 0px 0px #dddddd;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%); background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
&:before { &:before {
content: ''; content: '';
width: 18px; width: 18px;
height: 18px; height: 18px;
background: url(https://new.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat; background: url(https://www.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
margin-right: 20px; margin-right: 20px;
} }
} }
} }
} }
.right { .right {
// width: 1000px; // width: 1000px;
flex-grow: 1; flex-grow: 1;
} }
.year { .year {
margin: 0 0 1rem 1rem; margin: 0 0 1rem 1rem;
font-size: 2.35rem; font-size: 2.35rem;
@ -162,8 +160,10 @@ export default {
font-weight: 800; font-weight: 800;
color: #1a81f4; color: #1a81f4;
} }
.list { .list {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -171,9 +171,11 @@ export default {
padding: 1.5rem; padding: 1.5rem;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.texts { .texts {
width: 31.25rem; width: 31.25rem;
} }
.date { .date {
width: 31.25rem; width: 31.25rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
@ -188,10 +190,12 @@ export default {
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
} }
.text { .text {
font-size: 1.08rem; font-size: 1.08rem;
color: #333; color: #333;
@include mul-ellipsis(3); @include mul-ellipsis(3);
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -202,11 +206,13 @@ export default {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
.pic-wrap { .pic-wrap {
width: 17.5rem; width: 17.5rem;
height: 9.75rem; height: 9.75rem;
text-align: center; text-align: center;
} }
.pic { .pic {
// width: 17.5rem; // width: 17.5rem;
height: 100%; height: 100%;
@ -217,6 +223,7 @@ export default {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tab-content { .tab-content {
width: 90%; width: 90%;
span { span {
font-size: 1.35rem; font-size: 1.35rem;
} }
@ -224,38 +231,49 @@ export default {
.block { .block {
padding: 1.25rem 0; padding: 1.25rem 0;
.inner { .inner {
width: 90%; width: 90%;
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
} }
p { p {
font-size: 1rem; font-size: 1rem;
margin: 10px 0 1.25rem; margin: 10px 0 1.25rem;
} }
.event { .event {
flex-direction: column; flex-direction: column;
.time { .time {
width: 100%; width: 100%;
li { li {
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
} }
} }
.right { .right {
margin-top: 1.25rem; margin-top: 1.25rem;
width: 100%; width: 100%;
h6 { h6 {
font-size: 2rem; font-size: 2rem;
} }
.list { .list {
li { li {
padding: 1.25rem; padding: 1.25rem;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.texts { .texts {
width: 100%; width: 100%;
} }
.pic { .pic {
width: 100%; width: 100%;
height: auto; height: auto;

57
src/pages/overviewIntro/index.vue
Unescape View File

@ -1,10 +1,7 @@
<template> <template>
<div class="wrap" <div class="wrap" v-if="modules.length >= 1">
v-if="modules.length>=1">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -12,35 +9,26 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="inner intro"> <div class="inner intro">
<img class="pic" <img class="pic" :src="modules[1].form.pic" alt="">
:src="modules[1].form.pic"
alt="">
<div class="right"> <div class="right">
<div class="relative"> <div class="relative">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<img class="title-bg" <img class="title-bg" src="https://www.iasf.ac.cn/images/overviewIntro/2.png" alt="">
src="https://new.iasf.ac.cn/images/overviewIntro/2.png"
alt="">
</div> </div>
<div class="text" <div class="text" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
</div> </div>
</div> </div>
<div class="intro-bg" <div class="intro-bg" v-if="modules[2]">
v-if="modules[2]">
<div class="mask"></div> <div class="mask"></div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des" <div class="des" v-html="modules[2].form.des"></div>
v-html="modules[2].form.des"></div>
</div> </div>
</div> </div>
</div> </div>
@ -79,38 +67,47 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.wrap { .wrap {
background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat; background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
} }
.single-banner { .single-banner {
.texts { .texts {
top: auto !important; top: auto !important;
bottom: 2rem; bottom: 2rem;
} }
} }
.tab-content { .tab-content {
padding-top: 3.85rem; padding-top: 3.85rem;
.intro { .intro {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 5.5rem; margin-bottom: 5.5rem;
.pic { .pic {
width: 49%; width: 49%;
margin-right: 2%; margin-right: 2%;
} }
.right { .right {
width: 49%; width: 49%;
} }
h6 { h6 {
position: relative; position: relative;
font-size: 1.36rem; font-size: 1.36rem;
color: #333; color: #333;
} }
.title-bg { .title-bg {
position: absolute; position: absolute;
top: -2rem; top: -2rem;
left: -1rem; left: -1rem;
} }
.text { .text {
margin-top: 2rem; margin-top: 2rem;
font-size: 1rem; font-size: 1rem;
@ -118,6 +115,7 @@ export default {
line-height: 2; line-height: 2;
} }
} }
.intro-bg { .intro-bg {
position: relative; position: relative;
height: auto; height: auto;
@ -125,7 +123,8 @@ export default {
padding-bottom: 2rem; padding-bottom: 2rem;
color: #fff; color: #fff;
text-align: center; text-align: center;
background: url(https://new.iasf.ac.cn/images/overviewIntro/3.png) 0 0/100% 100% no-repeat; background: url(https://www.iasf.ac.cn/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
.mask { .mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -135,26 +134,31 @@ export default {
content: ''; content: '';
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.texts { .texts {
position: relative; position: relative;
} }
h6 { h6 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.6rem; font-size: 1.6rem;
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
font-weight: 800; font-weight: 800;
} }
.des { .des {
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
} }
.ads { .ads {
position: fixed; position: fixed;
top: 30%; top: 30%;
right: 1%; right: 1%;
padding: 20px; padding: 20px;
animation: move 20s linear infinite alternate; animation: move 20s linear infinite alternate;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
@ -163,6 +167,7 @@ export default {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color: #1583ff; color: #1583ff;
&:before { &:before {
content: ''; content: '';
width: 4px; width: 4px;
@ -173,15 +178,18 @@ export default {
} }
} }
} }
@keyframes move { @keyframes move {
0% { 0% {
top: 30%; top: 30%;
right: 1%; right: 1%;
} }
50% { 50% {
top: 40%; top: 40%;
right: 40%; right: 40%;
} }
100% { 100% {
top: 90%; top: 90%;
right: 90%; right: 90%;
@ -193,27 +201,34 @@ export default {
width: 90%; width: 90%;
margin: auto; margin: auto;
padding-top: 1.25rem; padding-top: 1.25rem;
.intro { .intro {
flex-direction: column; flex-direction: column;
.pic { .pic {
width: 100%; width: 100%;
} }
} }
.intro-bg { .intro-bg {
padding-top: 3rem; padding-top: 3rem;
.texts { .texts {
h6 { h6 {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
} }
.right { .right {
width: 100% !important; width: 100% !important;
margin-top: 1.25rem; margin-top: 1.25rem;
.text { .text {
margin-top: 1.25rem; margin-top: 1.25rem;
} }
} }
span { span {
font-size: 1.35rem; font-size: 1.35rem;
} }

32
src/pages/overviewSetup/index.vue
Unescape View File

@ -1,9 +1,7 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="single-banner single-banner-overview"> <div class="single-banner single-banner-overview">
<img class="banner-img" <img class="banner-img" :src="modules[0].form.pic" alt="">
:src="modules[0].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6 class="banner-title">{{ modules[0].form.title }}</h6> <h6 class="banner-title">{{ modules[0].form.title }}</h6>
</div> </div>
@ -11,9 +9,7 @@
<ul class="tabs wow fadeInLeft"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in tabs"> <template v-for="(item, i) in tabs">
<li :class="{active: item.id == active}" <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
:key="i"
@click="tabChange(item)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
@ -21,17 +17,12 @@
<div class="org"> <div class="org">
<div class="left"> <div class="left">
<h6 v-html="modules[1].form.title"></h6> <h6 v-html="modules[1].form.title"></h6>
<p class="text" <p class="text" v-html="modules[1].form.des"></p>
v-html="modules[1].form.des"></p>
</div> </div>
<img class="pic" <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
alt="">
</div> </div>
<div class="lg-bg"> <div class="lg-bg">
<el-image style="width: 100%;" <el-image style="width: 100%;" :src="modules[2].form.pic" :preview-src-list="[modules[2].form.pic]">
:src="modules[2].form.pic"
:preview-src-list="[modules[2].form.pic]">
</el-image> </el-image>
</div> </div>
@ -62,15 +53,18 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css); @import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.single-banner { .single-banner {
.texts { .texts {
top: auto !important; top: auto !important;
bottom: 2rem; bottom: 2rem;
} }
} }
.tab-content { .tab-content {
padding: 77px 0; padding: 77px 0;
} }
.org { .org {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -80,46 +74,56 @@ export default {
margin: 0 auto 50px; margin: 0 auto 50px;
background: #fcfcfc; background: #fcfcfc;
border-radius: 160px; border-radius: 160px;
.left { .left {
width: 705px; width: 705px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 1rem; font-size: 1rem;
color: #020202; color: #020202;
line-height: 2rem; line-height: 2rem;
} }
.pic { .pic {
width: 320px; width: 320px;
height: 282px; height: 282px;
object-fit: cover; object-fit: cover;
} }
} }
.lg-bg { .lg-bg {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tab-content { .tab-content {
padding: 20px 0; padding: 20px 0;
.org { .org {
width: 95%; width: 95%;
padding: 15px; padding: 15px;
flex-direction: column; flex-direction: column;
.pic { .pic {
display: none; display: none;
} }
.left { .left {
width: 100%; width: 100%;
} }
} }
} }
.lg-bg { .lg-bg {
width: 90%; width: 90%;
} }

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

@ -22,16 +22,16 @@
<ul class="teams"> <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"> <div class="line">
<img src="https://new.iasf.ac.cn/images/researchTeam/3.png" alt="" class="icon"> <img src="https://www.iasf.ac.cn/images/researchTeam/3.png" alt="" class="icon">
<span class="bold">{{ item.title }}</span> <span class="bold">{{ item.title }}</span>
<span class="val">/ {{ item.post }}</span> <span class="val">/ {{ item.post }}</span>
</div> </div>
<div class="line"> <div class="line">
<img src="https://new.iasf.ac.cn/images/researchTeam/4.png" alt="" class="icon"> <img src="https://www.iasf.ac.cn/images/researchTeam/4.png" alt="" class="icon">
<span class="text">专业 {{ item.major }}</span> <span class="text">专业 {{ item.major }}</span>
</div> </div>
<div class="line"> <div class="line">
<img src="https://new.iasf.ac.cn/images/researchTeam/5.png" alt="" class="icon"> <img src="https://www.iasf.ac.cn/images/researchTeam/5.png" alt="" class="icon">
<span class="text">荣誉 {{ item.honor }}</span> <span class="text">荣誉 {{ item.honor }}</span>
</div> </div>
</li> </li>
@ -208,7 +208,7 @@ export default {
width: calc((100% - 10px) / 2); width: calc((100% - 10px) / 2);
padding: 20px 30px; padding: 20px 30px;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
background: url(https://new.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat; background: url(https://www.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat;
cursor: pointer; cursor: pointer;
&:nth-child(even) { &:nth-child(even) {

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

@ -68,7 +68,7 @@ export default {
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.block { .block {
background: url(https://new.iasf.ac.cn/images/speech/2.png) no-repeat; background: url(https://www.iasf.ac.cn/images/speech/2.png) no-repeat;
} }
.inner { .inner {

Write Preview
Loading…
Cancel
Save