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

fix

Browse Source
master
yujialong 1 year ago
parent 14e2083f8d
commit e657bccaf0
6 changed files with 876 additions and 792 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. 9
      src/layouts/header/index.vue
  2. 7
      src/libs/util.js
  3. 320
      src/pages/home/index.vue
  4. 64
      src/pages/iasf/index.vue
  5. 4
      src/styles/common.scss
  6. BIN
      src/styles/font/AlimamaShuHeiTi-Bold.otf

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

@ -36,12 +36,12 @@
alt="" alt=""
@click.stop="toMail"> @click.stop="toMail">
</template> </template>
<template v-if="$i18n.locale == 'en'"> <template v-if="Util.isEn(site)">
<img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')"
alt="" alt=""
@click.stop="toggleLang"> @click.stop="toggleLang">
</template> </template>
<template v-else-if="$i18n.locale == 'zh'"> <template v-else>
<img :src="require('@/assets/images/en' + (isHome ? '-white' : '') + '.png')" <img :src="require('@/assets/images/en' + (isHome ? '-white' : '') + '.png')"
alt="" alt=""
@click.stop="toggleLang"> @click.stop="toggleLang">
@ -80,12 +80,12 @@
@click.stop="toggleSearch"></div> @click.stop="toggleSearch"></div>
<div class="languageBox"> <div class="languageBox">
<!-- <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"> --> <!-- <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" alt="" @click.stop="toggleLang"> -->
<template v-if="$i18n.locale == 'en'"> <template v-if="Util.isEn(site)">
<img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" <img :src="require('@/assets/images/cn' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
alt="" alt=""
@click.stop="toggleLang"> @click.stop="toggleLang">
</template> </template>
<template v-else-if="$i18n.locale == 'zh'"> <template v-else>
<img :src="require('@/assets/images/en' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')" <img :src="require('@/assets/images/en' + (isHome && $store.getters.getModelType ? '-white' : '') + '.png')"
alt="" alt=""
@click.stop="toggleLang"> @click.stop="toggleLang">
@ -118,6 +118,7 @@ import navbar from '../navbar'
export default { export default {
data () { data () {
return { return {
Util,
isHome: true, isHome: true,
isEstate: false, isEstate: false,
showSearch: false, showSearch: false,

7
src/libs/util.js
Unescape View File

@ -1,6 +1,7 @@
import { _local } from "./util.db"; import { _local } from "./util.db";
import { Message } from "element-ui"; import { Message } from "element-ui";
import Router from '@/router' import Router from '@/router'
import Setting from '@/setting'
// 文件后缀集合 // 文件后缀集合
const exts = { const exts = {
@ -140,7 +141,11 @@ const util = {
// 是否是各个站点的首页，首页的导航样式不一样，所以要单独判断 // 是否是各个站点的首页，首页的导航样式不一样，所以要单独判断
isIndex() { isIndex() {
return indexPath.includes(Router.app.$route.path) return indexPath.includes(Router.app.$route.path)
} },
// 传入站点id，判断是否英文
isEn(id) {
return Setting.enIds.includes(+id)
},
}; };
export default util; export default util;

320
src/pages/home/index.vue
Unescape View File

@ -1,9 +1,18 @@
<template> <template>
<div class="wrap" v-if="modules.length>=1"> <div class="wrap"
<el-carousel class="carousel" :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'"> v-if="modules.length>=1">
<el-carousel class="carousel"
: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"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> <el-carousel-item v-if="item.pic && item.isEnable"
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]" width="100%" :src="item.pic" alt="" @click="openLink(item)"> :key="i">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
width="100%"
:src="item.pic"
alt=""
@click="openLink(item)">
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
@ -11,22 +20,35 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p> <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="card"> <ul class="card">
<li class="wow fadeInDown" data-wow-delay="0.2s"> <li class="wow fadeInDown"
<img class="pic" :src="modules[2].form.pic" alt=""> data-wow-delay="0.2s">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<p class="des">{{ modules[2].form.des }}</p> <p class="des">{{ modules[2].form.des }}</p>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[2].form.link.linkName)}"
@click="openLink(modules[2].form)">
</div> </div>
</li> </li>
<li class="wow fadeInDown" data-wow-delay="0.6s"> <li class="wow fadeInDown"
<img class="pic" :src="modules[3].form.pic" alt=""> data-wow-delay="0.6s">
<img class="pic"
:src="modules[3].form.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<p class="des">{{ modules[3].form.des }}</p> <p class="des">{{ modules[3].form.des }}</p>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)"> <img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(modules[3].form.link.linkName)}"
@click="openLink(modules[3].form)">
</div> </div>
</li> </li>
</ul> </ul>
@ -36,19 +58,29 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p> <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<ul class="news"> <ul class="news">
<li class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[5].form)"> <li class="wow fadeInDown"
<img :src="item.titleImg" alt=""> :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
v-for="(item, i) in articles"
:key="i"
@click="toArtice(item, modules[5].form)">
<img :src="item.titleImg"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div> <div class="des"
v-html="item.mainBody"></div>
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
</div> </div>
</li> </li>
</ul> </ul>
<div class="all-link" @click="toAll(modules[5].form)"> <div class="all-link"
<span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span> @click="toAll(modules[5].form)">
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div> </div>
</div> </div>
</div> </div>
@ -56,15 +88,24 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p> <p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[7].list"> <template v-for="(item, i) in modules[7].list">
<li v-if="item.isEnable" :key="i" class="wow fadeInDown" :data-wow-delay="(0.4 * i).toFixed(1) + 's'"> <li v-if="item.isEnable"
<img class="pic" :src="item.pic" alt=""> :key="i"
class="wow fadeInDown"
:data-wow-delay="(0.4 * i).toFixed(1) + 's'">
<img class="pic"
:src="item.pic"
alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)" > <img src="@/assets/images/arrow.png"
alt=""
:class="{'arrow': isLink(item.link.linkName)}"
@click="openLink(item)">
</div> </div>
</li> </li>
</template> </template>
@ -72,41 +113,72 @@
</div> </div>
</div> </div>
<div class="about" :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}" @click="openLink(modules[8].form)"> <div class="about"
:class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}"
@click="openLink(modules[8].form)">
<div class="inner"> <div class="inner">
<img class="wow fadeInUp" src="@/assets/images/about.png" alt=""> <img class="wow fadeInUp"
<div class="line wow fadeInUp" data-wow-delay="0.4s"></div> src="@/assets/images/about.png"
<div class="text wow fadeInUp" data-wow-delay="0.7s">{{ modules[8].form.title }}</div> alt="">
<div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[8].form.des"></div> <div class="line wow fadeInUp"
data-wow-delay="0.4s"></div>
<div class="text wow fadeInUp"
data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
<div class="des wow fadeInDown"
data-wow-delay="1s"
v-html="modules[8].form.des"></div>
</div> </div>
</div> </div>
<div class="block" style="padding-bottom: 0"> <div class="block"
style="padding-bottom: 0">
<div class="inner"> <div class="inner">
<h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2> <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
<ul class="stat"> <ul class="stat">
<li class="wow fadeInRight" data-wow-delay="0.2s"> <li class="wow fadeInRight"
data-wow-delay="0.2s">
<!-- <p class="num">{{ modules[10].form.title }}</p> --> <!-- <p class="num">{{ modules[10].form.title }}</p> -->
<animate-number class="num" ref="num1" from="0" :to="modules[10].form.title" duration="3000" /> <animate-number class="num"
ref="num1"
from="0"
:to="modules[10].form.title"
duration="3000" />
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
</li> </li>
<li class="wow fadeInRight" data-wow-delay="0.4s"> <li class="wow fadeInRight"
<animate-number class="num" ref="num2" from="0" :to="modules[11].form.title" duration="3000" /> data-wow-delay="0.4s">
<animate-number class="num"
ref="num2"
from="0"
:to="modules[11].form.title"
duration="3000" />
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
</li> </li>
<li class="wow fadeInRight" data-wow-delay="0.6s"> <li class="wow fadeInRight"
<animate-number class="num" ref="num3" from="0" :to="modules[12].form.title" duration="3000" /> data-wow-delay="0.6s">
<animate-number class="num"
ref="num3"
from="0"
:to="modules[12].form.title"
duration="3000" />
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
</li> </li>
<li class="wow fadeInRight" data-wow-delay="0.9s"> <li class="wow fadeInRight"
<animate-number class="num" ref="num4" from="0" :to="modules[13].form.title" duration="3500" /> data-wow-delay="0.9s">
<animate-number class="num"
ref="num4"
from="0"
:to="modules[13].form.title"
duration="3500" />
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
</li> </li>
<li class="wow fadeInRight" data-wow-delay="1.2s"> <li class="wow fadeInRight"
data-wow-delay="1.2s">
<p class="num">{{ modules[14].form.title }}</p> <p class="num">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p> <p class="text">{{ modules[14].form.des }}</p>
</li> </li>
<li class="wow fadeInRight" data-wow-delay="1.5s"> <li class="wow fadeInRight"
data-wow-delay="1.5s">
<p class="num">{{ modules[15].form.title }}</p> <p class="num">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.des }}</p> <p class="text">{{ modules[15].form.des }}</p>
</li> </li>
@ -123,7 +195,7 @@ import Util from '@/libs/util'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data () {
return { return {
articles: [], articles: [],
} }
@ -132,13 +204,13 @@ export default {
// 移除滚动事件 // 移除滚动事件
window.removeEventListener('scroll', this.handleScroll) window.removeEventListener('scroll', this.handleScroll)
}, },
mounted() { mounted () {
new WOW().init() new WOW().init()
window.addEventListener('scroll', this.handleScroll) window.addEventListener('scroll', this.handleScroll)
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
getInfo() { getInfo () {
// 预览/详情 // 预览/详情
this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => { this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
if (data.length) { if (data.length) {
@ -147,7 +219,7 @@ export default {
data : data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
console.log('JSON=>',json) console.log('JSON=>', json)
this.modules = json this.modules = json
console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules) console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
@ -156,10 +228,10 @@ export default {
if (column.length) { if (column.length) {
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
this.articles = Util.removeTag(data.slice(0, articleNum || 6)) this.articles = Util.removeTag(data.slice(0, articleNum || 6))
}).catch(err => {}) }).catch(err => { })
} }
} }
}).catch(err => {}) }).catch(err => { })
}, },
// 监听页面滚动，到了底部后开始数字滚动动画 // 监听页面滚动，到了底部后开始数字滚动动画
handleScroll () { handleScroll () {
@ -177,13 +249,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';
.carousel{ .carousel {
height: 100vh; height: 100vh;
img{ img {
height: 100%; height: 100%;
} }
/deep/.el-carousel__container{ /deep/.el-carousel__container {
height: 100vh; height: 100vh;
} }
} }
@ -202,8 +274,8 @@ export default {
justify-content: space-between; justify-content: space-between;
li { li {
width: 47%; width: 47%;
transition: .3s; transition: 0.3s;
&:hover{ &:hover {
margin-top: -0.9375rem; margin-top: -0.9375rem;
} }
} }
@ -214,7 +286,7 @@ export default {
.texts { .texts {
padding-left: 1.375rem; padding-left: 1.375rem;
margin-top: 3rem; margin-top: 3rem;
border-left: 2px solid #DFE4E9; border-left: 2px solid #dfe4e9;
} }
h6 { h6 {
min-height: 4.5rem; min-height: 4.5rem;
@ -249,11 +321,11 @@ export default {
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: .3s; transition: 0.3s;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 1.75rem; margin-right: 1.75rem;
} }
&:hover{ &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
} }
@ -267,7 +339,7 @@ export default {
} }
h6 { h6 {
font-size: 1.28rem; font-size: 1.28rem;
color: #0648A8; color: #0648a8;
@include ellipsis; @include ellipsis;
} }
.des { .des {
@ -307,12 +379,12 @@ export default {
.pic { .pic {
width: 47%; width: 47%;
height: auto; height: auto;
transition: .3s; transition: 0.3s;
} }
.texts { .texts {
width: 48%; width: 48%;
padding-top: 8.5rem; padding-top: 8.5rem;
transition: .3s; transition: 0.3s;
} }
h6 { h6 {
font-size: 1.8rem; font-size: 1.8rem;
@ -331,7 +403,7 @@ export default {
font-weight: bold; font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center; text-align: center;
border-bottom: 1px solid #DEDEDE; border-bottom: 1px solid #dedede;
} }
.stat { .stat {
display: flex; display: flex;
@ -341,9 +413,9 @@ export default {
li { li {
width: 27%; width: 27%;
margin-bottom: 50px; margin-bottom: 50px;
transition: .3s; transition: 0.3s;
&:hover { &:hover {
transform: translateX(20px) transform: translateX(20px);
} }
} }
.num { .num {
@ -351,7 +423,7 @@ export default {
font-family: toppan; font-family: toppan;
font-size: 2.7rem; font-size: 2.7rem;
font-weight: 800; font-weight: 800;
color: #035CE1; color: #035ce1;
line-height: 49px; line-height: 49px;
} }
.text { .text {
@ -389,24 +461,24 @@ export default {
color: #fff; color: #fff;
line-height: 42px; line-height: 42px;
text-align: center; text-align: center;
background: rgba(111, 69, 36, .56); background: rgba(111, 69, 36, 0.56);
border-radius: 17px; border-radius: 17px;
overflow: visible; overflow: visible;
transition: .3s; transition: 0.3s;
&:hover { &:hover {
background: rgba(239, 126, 10, .56); background: rgba(239, 126, 10, 0.56);
transform: translateY(10px); transform: translateY(10px);
} }
} }
} }
@media (min-width: 280px) and (max-width: 1200px) { @media (min-width: 280px) and (max-width: 1200px) {
.carousel{ .carousel {
height: 21.87rem; height: 21.87rem;
img{ img {
height: 100%; height: 100%;
} }
/deep/.el-carousel__container{ /deep/.el-carousel__container {
height: 21.87rem; height: 21.87rem;
} }
} }
@ -415,18 +487,18 @@ export default {
font-size: 1rem; font-size: 1rem;
} }
} }
.el-carousel__item{ .el-carousel__item {
height: 21.87rem; height: 21.87rem;
img { img {
height: 21.87rem; height: 21.87rem;
} }
} }
.block{ .block {
padding: 3.125rem 0; padding: 3.125rem 0;
.inner{ .inner {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
.b-title{ .b-title {
font-size: 2rem; font-size: 2rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
@ -438,7 +510,7 @@ export default {
} }
.card { .card {
flex-direction: column; flex-direction: column;
li{ li {
margin-top: 1.25rem; margin-top: 1.25rem;
width: 100%; width: 100%;
} }
@ -448,7 +520,7 @@ export default {
li { li {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
img{ img {
width: 10rem; width: 10rem;
} }
.texts { .texts {
@ -456,22 +528,20 @@ export default {
} }
} }
} }
.people{ .people {
li{ li {
flex-direction: column; flex-direction: column;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
.pic { .pic {
width: 100%; width: 100%;
height: 21.875rem; height: 21.875rem;
} }
.texts{ .texts {
padding-top: 1.25rem; padding-top: 1.25rem;
width: 100%; width: 100%;
} }
} }
} }
} }
} }
.card .pic { .card .pic {
@ -483,7 +553,7 @@ export default {
.inner { .inner {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
.line{ .line {
margin: 1.25rem 0 1.25rem; margin: 1.25rem 0 1.25rem;
} }
.des { .des {
@ -495,24 +565,22 @@ export default {
.glance { .glance {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
} }
.stat{ .stat {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
} }
} }
@media (min-width: 751px) and (max-width: 920px) { @media (min-width: 751px) and (max-width: 920px) {
.news { .news {
flex-direction: column; flex-direction: column;
li { li {
width: 100%; width: 100%;
margin-bottom: .9375rem; margin-bottom: 0.9375rem;
img{ img {
width: 10rem; width: 10rem;
} }
.texts { .texts {
@ -524,18 +592,17 @@ export default {
@media (max-width: 320px) { @media (max-width: 320px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem; height: 15rem;
img{ img {
height: 15rem; height: 15rem;
} }
} }
} }
.block { .block {
@ -546,7 +613,7 @@ export default {
} }
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
@ -556,7 +623,7 @@ export default {
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
h6{ h6 {
font-size: 1.2rem; font-size: 1.2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -570,7 +637,7 @@ export default {
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -587,7 +654,6 @@ export default {
} }
} }
} }
} }
} }
.about { .about {
@ -600,18 +666,17 @@ export default {
} }
@media (min-width: 320px) and (max-width: 375px) { @media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem; height: 15rem;
img{ img {
height: 15rem; height: 15rem;
} }
} }
} }
.block { .block {
@ -619,7 +684,7 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
@ -629,14 +694,13 @@ export default {
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -660,18 +724,17 @@ export default {
} }
@media (min-width: 375px) and (max-width: 480px) { @media (min-width: 375px) and (max-width: 480px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 15rem; height: 15rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 15rem; height: 15rem;
img{ img {
height: 15rem; height: 15rem;
} }
} }
} }
.block { .block {
@ -679,7 +742,7 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
@ -689,14 +752,13 @@ export default {
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -720,18 +782,17 @@ export default {
} }
@media (min-width: 480px) and (max-width: 640px) { @media (min-width: 480px) and (max-width: 640px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 18rem; height: 18rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 18rem; height: 18rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 18rem; height: 18rem;
img{ img {
height: 18rem; height: 18rem;
} }
} }
} }
.block { .block {
@ -739,7 +800,7 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
@ -749,14 +810,13 @@ export default {
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -778,18 +838,17 @@ export default {
} }
@media (min-width: 640px) and (max-width: 768px) { @media (min-width: 640px) and (max-width: 768px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 20rem; height: 20rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 20rem; height: 20rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 20rem; height: 20rem;
img{ img {
height: 20rem; height: 20rem;
} }
} }
} }
.block { .block {
@ -797,7 +856,7 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
@ -807,14 +866,13 @@ export default {
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -842,18 +900,17 @@ export default {
} }
@media (min-width: 768px) and (max-width: 980px) { @media (min-width: 768px) and (max-width: 980px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 22rem; height: 22rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 22rem; height: 22rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 22rem; height: 22rem;
img{ img {
height: 22rem; height: 22rem;
} }
} }
} }
.block { .block {
@ -861,27 +918,25 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
flex-direction: row; flex-direction: row;
li { li {
width: 47%; width: 47%;
.pic { .pic {
height: auto; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }
@ -917,18 +972,17 @@ export default {
} }
@media (min-width: 980px) and (max-width: 1200px) { @media (min-width: 980px) and (max-width: 1200px) {
.wrap { .wrap {
/deep/ .el-carousel{ /deep/ .el-carousel {
height: 25rem; height: 25rem;
} }
/deep/ .el-carousel__container{ /deep/ .el-carousel__container {
height: 25rem; height: 25rem;
} }
/deep/ .el-carousel__item { /deep/ .el-carousel__item {
height: 25rem; height: 25rem;
img{ img {
height: 25rem; height: 25rem;
} }
} }
} }
.block { .block {
@ -936,27 +990,25 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: .95rem; font-size: 0.95rem;
line-height: 1rem; line-height: 1rem;
} }
.card { .card {
flex-direction: row; flex-direction: row;
li { li {
width: 47%; width: 47%;
.pic { .pic {
height: auto; height: auto;
} }
.texts { .texts {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
} }
.news { .news {
li { li {
padding: 1.2rem; padding: 1.2rem;
img{ img {
width: 8rem; width: 8rem;
} }
} }

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

@ -1,13 +1,24 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="iasf-banner"> <el-carousel class="carousel"
<img :src="modules[0].form.pic" :interval="6000"
alt=""> :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">
<img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
width="100%"
:src="item.pic"
alt=""
@click="openLink(item)">
<div class="texts"> <div class="texts">
<h6>{{ modules[0].form.title }}</h6> <h6>{{ item.title }}</h6>
<p class="text">{{ modules[0].form.des }}</p> <p class="text">{{ item.des }}</p>
</div>
</div> </div>
</el-carousel-item>
</template>
</el-carousel>
<div class="block" <div class="block"
style="padding-top: 110px"> style="padding-top: 110px">
@ -78,8 +89,10 @@
:src="item.titleImg" :src="item.titleImg"
alt=""> alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6>
<div class="des"
v-html="item.mainBody"></div>
<p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p> <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
<div class="des">{{ item.title }}</div>
</div> </div>
</li> </li>
</template> </template>
@ -414,15 +427,17 @@ 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';
.iasf-banner { .carousel {
height: 727px; height: 100vh;
img { img {
width: 100%;
height: 100%; height: 100%;
} }
/deep/.el-carousel__container {
height: 100vh;
}
.texts { .texts {
position: absolute; position: absolute;
bottom: 40%; bottom: 20%;
left: 120px; left: 120px;
h6, h6,
.text { .text {
@ -451,6 +466,10 @@ export default {
margin-bottom: 3.6rem; margin-bottom: 3.6rem;
} }
} }
.inner {
width: 1370px;
min-width: 70%;
}
.card { .card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -569,12 +588,14 @@ export default {
color: #666; color: #666;
} }
h6 { h6 {
margin-top: 5px;
font-size: 1.1rem; font-size: 1.1rem;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
color: #333; color: #333;
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
.des {
margin: 15px 0;
}
} }
.news-carousel { .news-carousel {
display: flex; display: flex;
@ -607,12 +628,12 @@ export default {
cursor: pointer; cursor: pointer;
} }
.meta { .meta {
margin: 8px 0; margin: 14px 0;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(255, 255, 255, 0.86); color: rgba(255, 255, 255, 0.86);
} }
.des { .des {
margin-bottom: 8px; margin-bottom: 14px;
font-size: 1rem; font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
cursor: pointer; cursor: pointer;
@ -698,7 +719,7 @@ export default {
.talent { .talent {
display: flex; display: flex;
color: #fff; color: #fff;
background: #1a2844; background: #1583ff;
border-radius: 0px 100px 0px 100px; border-radius: 0px 100px 0px 100px;
.left { .left {
width: 50%; width: 50%;
@ -791,8 +812,9 @@ export default {
} }
} }
.tools { .tools {
z-index: 10;
position: fixed; position: fixed;
top: 430px; top: 60vh;
right: 0; right: 0;
li { li {
display: flex; display: flex;
@ -815,6 +837,11 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
} }
@media (max-width: 1450px) {
.inner {
width: 95%;
}
}
@media (max-width: 1200px) { @media (max-width: 1200px) {
.card { .card {
flex-direction: column; flex-direction: column;
@ -877,10 +904,5 @@ export default {
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.iasf-banner {
.texts {
left: 3%;
}
}
} }
</style> </style>

4
src/styles/common.scss
Unescape View File

@ -29,6 +29,10 @@
font-family: ProximaNova; font-family: ProximaNova;
src: url('font/ProximaNova-Regular.otf'); src: url('font/ProximaNova-Regular.otf');
} }
@font-face {
font-family: AlimamaShuHeiTi-Bold;
src: url('font/AlimamaShuHeiTi-Bold.otf');
}
[v-cloak] { [v-cloak] {
display: none; display: none;

BIN
src/styles/font/AlimamaShuHeiTi-Bold.otf
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save