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

7
src/libs/util.js
Unescape View File

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

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

@ -1,9 +1,18 @@
<template>
<div class="wrap" 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'">
<div class="wrap"
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">
<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)">
<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)">
</el-carousel-item>
</template>
</el-carousel>
@ -11,22 +20,35 @@
<div class="block">
<div class="inner">
<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">
<li class="wow fadeInDown" data-wow-delay="0.2s">
<img class="pic" :src="modules[2].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.2s">
<img class="pic"
:src="modules[2].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[2].form.title }}</h6>
<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>
</li>
<li class="wow fadeInDown" data-wow-delay="0.6s">
<img class="pic" :src="modules[3].form.pic" alt="">
<li class="wow fadeInDown"
data-wow-delay="0.6s">
<img class="pic"
:src="modules[3].form.pic"
alt="">
<div class="texts">
<h6>{{ modules[3].form.title }}</h6>
<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>
</li>
</ul>
@ -36,19 +58,29 @@
<div class="block news-block">
<div class="inner">
<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">
<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)">
<img :src="item.titleImg" alt="">
<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)">
<img :src="item.titleImg"
alt="">
<div class="texts">
<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>
</div>
</li>
</ul>
<div class="all-link" @click="toAll(modules[5].form)">
<span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
<div class="all-link"
@click="toAll(modules[5].form)">
<span>{{$t('column.all')}} <img class="icon"
src="@/assets/images/arrow.png"
alt=""></span>
</div>
</div>
</div>
@ -56,15 +88,24 @@
<div class="block">
<div class="inner">
<h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<p class="intro wow fadeInUp"
data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="people">
<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'">
<img class="pic" :src="item.pic" alt="">
<li v-if="item.isEnable"
:key="i"
class="wow fadeInDown"
:data-wow-delay="(0.4 * i).toFixed(1) + 's'">
<img class="pic"
:src="item.pic"
alt="">
<div class="texts">
<h6>{{ item.title }}</h6>
<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>
</li>
</template>
@ -72,41 +113,72 @@
</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">
<img class="wow fadeInUp" src="@/assets/images/about.png" alt="">
<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>
<img class="wow fadeInUp"
src="@/assets/images/about.png"
alt="">
<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 class="block" style="padding-bottom: 0">
<div class="block"
style="padding-bottom: 0">
<div class="inner">
<h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
<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> -->
<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>
</li>
<li class="wow fadeInRight" data-wow-delay="0.4s">
<animate-number class="num" ref="num2" from="0" :to="modules[11].form.title" duration="3000" />
<li class="wow fadeInRight"
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>
</li>
<li class="wow fadeInRight" data-wow-delay="0.6s">
<animate-number class="num" ref="num3" from="0" :to="modules[12].form.title" duration="3000" />
<li class="wow fadeInRight"
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>
</li>
<li class="wow fadeInRight" data-wow-delay="0.9s">
<animate-number class="num" ref="num4" from="0" :to="modules[13].form.title" duration="3500" />
<li class="wow fadeInRight"
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>
</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="text">{{ modules[14].form.des }}</p>
</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="text">{{ modules[15].form.des }}</p>
</li>
@ -177,7 +249,7 @@ export default {
<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss";
@import '../../styles/page/page.scss';
.carousel {
height: 100vh;
img {
@ -202,7 +274,7 @@ export default {
justify-content: space-between;
li {
width: 47%;
transition: .3s;
transition: 0.3s;
&:hover {
margin-top: -0.9375rem;
}
@ -214,7 +286,7 @@ export default {
.texts {
padding-left: 1.375rem;
margin-top: 3rem;
border-left: 2px solid #DFE4E9;
border-left: 2px solid #dfe4e9;
}
h6 {
min-height: 4.5rem;
@ -249,7 +321,7 @@ export default {
background-color: #fff;
cursor: pointer;
overflow: hidden;
transition: .3s;
transition: 0.3s;
&:nth-child(odd) {
margin-right: 1.75rem;
}
@ -267,7 +339,7 @@ export default {
}
h6 {
font-size: 1.28rem;
color: #0648A8;
color: #0648a8;
@include ellipsis;
}
.des {
@ -307,12 +379,12 @@ export default {
.pic {
width: 47%;
height: auto;
transition: .3s;
transition: 0.3s;
}
.texts {
width: 48%;
padding-top: 8.5rem;
transition: .3s;
transition: 0.3s;
}
h6 {
font-size: 1.8rem;
@ -331,7 +403,7 @@ export default {
font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid #dedede;
}
.stat {
display: flex;
@ -341,9 +413,9 @@ export default {
li {
width: 27%;
margin-bottom: 50px;
transition: .3s;
transition: 0.3s;
&:hover {
transform: translateX(20px)
transform: translateX(20px);
}
}
.num {
@ -351,7 +423,7 @@ export default {
font-family: toppan;
font-size: 2.7rem;
font-weight: 800;
color: #035CE1;
color: #035ce1;
line-height: 49px;
}
.text {
@ -389,12 +461,12 @@ export default {
color: #fff;
line-height: 42px;
text-align: center;
background: rgba(111, 69, 36, .56);
background: rgba(111, 69, 36, 0.56);
border-radius: 17px;
overflow: visible;
transition: .3s;
transition: 0.3s;
&:hover {
background: rgba(239, 126, 10, .56);
background: rgba(239, 126, 10, 0.56);
transform: translateY(10px);
}
}
@ -469,9 +541,7 @@ export default {
width: 100%;
}
}
}
}
}
.card .pic {
@ -502,16 +572,14 @@ export default {
text-align: center;
}
}
}
@media (min-width: 751px) and (max-width: 920px) {
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: .9375rem;
margin-bottom: 0.9375rem;
img {
width: 10rem;
}
@ -535,7 +603,6 @@ export default {
img {
height: 15rem;
}
}
}
.block {
@ -546,7 +613,7 @@ export default {
}
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
@ -587,7 +654,6 @@ export default {
}
}
}
}
}
.about {
@ -611,7 +677,6 @@ export default {
img {
height: 15rem;
}
}
}
.block {
@ -619,7 +684,7 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
@ -629,7 +694,6 @@ export default {
}
.texts {
margin-top: 1.2rem;
}
}
}
@ -671,7 +735,6 @@ export default {
img {
height: 15rem;
}
}
}
.block {
@ -679,7 +742,7 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
@ -689,7 +752,6 @@ export default {
}
.texts {
margin-top: 1.2rem;
}
}
}
@ -731,7 +793,6 @@ export default {
img {
height: 18rem;
}
}
}
.block {
@ -739,7 +800,7 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
@ -749,7 +810,6 @@ export default {
}
.texts {
margin-top: 1.2rem;
}
}
}
@ -789,7 +849,6 @@ export default {
img {
height: 20rem;
}
}
}
.block {
@ -797,7 +856,7 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
@ -807,7 +866,6 @@ export default {
}
.texts {
margin-top: 1.2rem;
}
}
}
@ -853,7 +911,6 @@ export default {
img {
height: 22rem;
}
}
}
.block {
@ -861,20 +918,18 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
@ -928,7 +983,6 @@ export default {
img {
height: 25rem;
}
}
}
.block {
@ -936,20 +990,18 @@ export default {
.inner {
.intro {
margin-bottom: 1rem;
font-size: .95rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}

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

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

4
src/styles/common.scss
Unescape View File

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

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

Binary file not shown.
Write Preview
Loading…
Cancel
Save