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

添加动画等

Browse Source
mobile
yujialong 2 years ago
parent 291c811440
commit ea46fbc8f0
18 changed files with 386 additions and 164 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. BIN
      src/assets/images/column-bg2.png
  2. 2
      src/layouts/header/index.vue
  3. 8
      src/layouts/home/index.vue
  4. 4
      src/mixins/page/index.js
  5. 90
      src/pages/about/index.vue
  6. 56
      src/pages/application/index.vue
  7. 8
      src/pages/article/activity.vue
  8. 10
      src/pages/article/index.vue
  9. 37
      src/pages/careers/index.vue
  10. 28
      src/pages/column/index.vue
  11. 32
      src/pages/edu/index.vue
  12. 62
      src/pages/home/index.vue
  13. 135
      src/pages/news/index.vue
  14. 13
      src/pages/newsPress/index.vue
  15. 9
      src/pages/newsProcurement/index.vue
  16. 48
      src/pages/research/index.vue
  17. 7
      src/styles/common.scss
  18. 1
      src/styles/page/page.scss

BIN
src/assets/images/column-bg2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

@ -74,6 +74,8 @@ $height: 90px;
width: 100%; width: 100%;
min-width: $min-width; min-width: $min-width;
height: $height; height: $height;
border-bottom: 1px solid #f7f7f7;
box-sizing: content-box;
&:not(.channel) { &:not(.channel) {
background-color: #fff; background-color: #fff;
} }

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

@ -1,5 +1,5 @@
<template> <template>
<div :class="['main', { channel: isChannel }]"> <div :class="['main', { channel: isChannel, 'site-en': handleClass() }]">
<v-head></v-head> <v-head></v-head>
<div class="layout"> <div class="layout">
<transition name="move" mode="out-in"> <transition name="move" mode="out-in">
@ -20,7 +20,8 @@ import { mapMutations } from 'vuex'
export default { export default {
data() { data() {
return { return {
isChannel: this.$route.path === '/home' isChannel: this.$route.path === '/home',
enSite: [1, 4, 6] // 英文站点id
}; };
}, },
components: { components: {
@ -39,6 +40,9 @@ export default {
...mapMutations('content', [ ...mapMutations('content', [
'setSite' 'setSite'
]), ]),
handleClass() {
return this.enSite.includes(this.$route.query.siteId || this.$store.state.content.site)
},
// 长时间未操作,自动退出登录 // 长时间未操作,自动退出登录
autoLogout() { autoLogout() {
let lastTime = new Date().getTime(); let lastTime = new Date().getTime();

4
src/mixins/page/index.js
Unescape View File

@ -54,8 +54,8 @@ export default {
} }
}, },
// 跳转文章页面 // 跳转文章页面
toArtice(item) { toArtice(item, form) {
this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`) this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`)
} }
} }
}; };

90
src/pages/about/index.vue
Unescape View File

@ -13,8 +13,8 @@
<div class="block history gray"> <div class="block history gray">
<div :class="['inner', {'cursor-pointer': modules[1].form.link.linkName !== '无'}]" @click="openLink(modules[1].form)"> <div :class="['inner', {'cursor-pointer': modules[1].form.link.linkName !== '无'}]" @click="openLink(modules[1].form)">
<h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2> <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
<div class="texts"> <div class="texts wow fadeInDown" data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
<div class="line"></div> <div class="line"></div>
@ -27,22 +27,22 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<ul class="card"> <ul class="card">
<li :class="['item1', {'cursor-pointer': modules[3].form.link.linkName !== '无'}]" @click="openLink(modules[3].form)"> <li :class="['item1 wow fadeInLeft', {'cursor-pointer': modules[3].form.link.linkName !== '无'}]" data-wow-delay="0.7s" @click="openLink(modules[3].form)">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des" v-html="modules[3].form.des"></div> <div class="des" v-html="modules[3].form.des"></div>
</li> </li>
<li :class="['item2', {'cursor-pointer': modules[4].form.link.linkName !== '无'}]" @click="openLink(modules[4].form)"> <li :class="['item2 wow fadeInRight', {'cursor-pointer': modules[4].form.link.linkName !== '无'}]" data-wow-delay="0.9s" @click="openLink(modules[4].form)">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des" v-html="modules[4].form.des"></div> <div class="des" v-html="modules[4].form.des"></div>
</li> </li>
<li :class="['item3', {'cursor-pointer': modules[5].form.link.linkName !== '无'}]" @click="openLink(modules[5].form)"> <li :class="['item3 wow fadeInLeft', {'cursor-pointer': modules[5].form.link.linkName !== '无'}]" data-wow-delay="1.1s" @click="openLink(modules[5].form)">
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
<div class="des" v-html="modules[5].form.des"></div> <div class="des" v-html="modules[5].form.des"></div>
</li> </li>
<li :class="['item4', {'cursor-pointer': modules[6].form.link.linkName !== '无'}]" @click="openLink(modules[6].form)"> <li :class="['item4 wow fadeInRight', {'cursor-pointer': modules[6].form.link.linkName !== '无'}]" data-wow-delay="1.3s" @click="openLink(modules[6].form)">
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
<div class="des" v-html="modules[6].form.des"></div> <div class="des" v-html="modules[6].form.des"></div>
</li> </li>
@ -52,30 +52,30 @@
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[7].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2>
<p class="intro">{{ modules[7].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
<ul class="stat"> <ul class="stat">
<li> <li class="wow fadeInLeft" data-wow-delay="0.2s">
<p class="num">{{ modules[8].form.title }}</p> <p class="num">{{ modules[8].form.title }}</p>
<p class="text">{{ modules[8].form.des }}</p> <p class="text">{{ modules[8].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInLeft" data-wow-delay="0.4s">
<p class="num">{{ modules[9].form.title }}</p> <p class="num">{{ modules[9].form.title }}</p>
<p class="text">{{ modules[9].form.des }}</p> <p class="text">{{ modules[9].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInLeft" data-wow-delay="0.6s">
<p class="num">{{ modules[10].form.title }}</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInLeft" data-wow-delay="0.9s">
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInLeft" data-wow-delay="1.1s">
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInLeft" data-wow-delay="1.3s">
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
</li> </li>
@ -85,8 +85,8 @@
<div class="plan"> <div class="plan">
<div :class="['inner', {'cursor-pointer': modules[14].form.link.linkName !== '无'}]" @click="openLink(modules[14].form)"> <div :class="['inner', {'cursor-pointer': modules[14].form.link.linkName !== '无'}]" @click="openLink(modules[14].form)">
<img class="pic" :src="modules[14].form.pic" alt=""> <img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt="">
<div class="texts"> <div class="texts wow fadeInRight">
<h6>{{ modules[14].form.title }}</h6> <h6>{{ modules[14].form.title }}</h6>
<div class="des">{{ modules[14].form.des }}</div> <div class="des">{{ modules[14].form.des }}</div>
<img src="@/assets/images/arrow-white.png" alt=""> <img src="@/assets/images/arrow-white.png" alt="">
@ -96,11 +96,11 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[15].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[15].form.title }}</h2>
<p class="intro">{{ modules[15].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[16].list"> <template v-for="(item, i) in modules[16].list">
<li v-if="item.isEnable" :key="i"> <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s">
<img class="pic" :src="item.pic" alt=""> <img class="pic" :src="item.pic" alt="">
<div class="texts"> <div class="texts">
<p class="sub">{{ item.subTitle }}</p> <p class="sub">{{ item.subTitle }}</p>
@ -116,20 +116,20 @@
<div class="block list-block gray"> <div class="block list-block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[17].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2>
<p class="intro">{{ modules[17].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
<ul class="list"> <ul class="list">
<li :class="{'cursor-pointer': modules[18].form.link.linkName !== '无'}" @click="openLink(modules[18].form)"> <li class="wow fadeInDown" data-wow-delay="0.6s" :class="{'cursor-pointer': modules[18].form.link.linkName !== '无'}" @click="openLink(modules[18].form)">
<img class="pic" :src="modules[18].form.pic" alt=""> <img class="pic" :src="modules[18].form.pic" alt="">
<h6>{{ modules[18].form.title }}</h6> <h6>{{ modules[18].form.title }}</h6>
<p class="des">{{ modules[18].form.des }}</p> <p class="des">{{ modules[18].form.des }}</p>
</li> </li>
<li :class="{'cursor-pointer': modules[19].form.link.linkName !== '无'}" @click="openLink(modules[19].form)"> <li class="wow fadeInDown" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[19].form.link.linkName !== '无'}" @click="openLink(modules[19].form)">
<img class="pic" :src="modules[19].form.pic" alt=""> <img class="pic" :src="modules[19].form.pic" alt="">
<h6>{{ modules[19].form.title }}</h6> <h6>{{ modules[19].form.title }}</h6>
<p class="des">{{ modules[19].form.des }}</p> <p class="des">{{ modules[19].form.des }}</p>
</li> </li>
<li :class="{'cursor-pointer': modules[20].form.link.linkName !== '无'}" @click="openLink(modules[20].form)"> <li class="wow fadeInDown" data-wow-delay="1s" :class="{'cursor-pointer': modules[20].form.link.linkName !== '无'}" @click="openLink(modules[20].form)">
<img class="pic" :src="modules[20].form.pic" alt=""> <img class="pic" :src="modules[20].form.pic" alt="">
<h6>{{ modules[20].form.title }}</h6> <h6>{{ modules[20].form.title }}</h6>
<p class="des">{{ modules[20].form.des }}</p> <p class="des">{{ modules[20].form.des }}</p>
@ -140,9 +140,9 @@
<div class="block"> <div class="block">
<div class="inner staff-inner"> <div class="inner staff-inner">
<h2 class="b-title">{{ modules[21].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[21].form.title }}</h2>
<p class="intro">{{ modules[21].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
<div :class="['staff', {'cursor-pointer': modules[22].form.link.linkName !== '无'}]" @click="openLink(modules[22].form)"> <div :class="['staff wow fadeInDown', {'cursor-pointer': modules[22].form.link.linkName !== '无'}]" data-wow-delay="0.7s" @click="openLink(modules[22].form)">
<div class="left"> <div class="left">
<h6>{{ modules[22].form.title }}</h6> <h6>{{ modules[22].form.title }}</h6>
<div class="des">{{ modules[22].form.des }}</div> <div class="des">{{ modules[22].form.des }}</div>
@ -158,6 +158,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -166,7 +167,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -188,6 +189,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.history { .history {
h2 { h2 {
@ -201,6 +203,10 @@ export default {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
.left { .left {
width: 695px; width: 695px;
@ -231,6 +237,10 @@ export default {
padding: 70px 67px 20px; padding: 70px 67px 20px;
margin-bottom: 28px; margin-bottom: 28px;
color: #fff; color: #fff;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 28px; margin-right: 28px;
} }
@ -268,11 +278,19 @@ export default {
width: 42%; width: 42%;
height: 488px; height: 488px;
margin-bottom: -120px; margin-bottom: -120px;
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
.texts { .texts {
width: 51%; width: 51%;
margin-top: 36px; margin-top: 36px;
color: #fff; color: #fff;
transition: .3s;
&:hover {
transform: translateY(20px);
}
} }
h6 { h6 {
font-size: 36px; font-size: 36px;
@ -287,6 +305,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -329,6 +351,10 @@ export default {
margin-right: 28px; margin-right: 28px;
text-align: center; text-align: center;
background-color: #F5F5F5; background-color: #F5F5F5;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -351,6 +377,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: #F8F8F8; background: #F8F8F8;
transition: .3s;
&:hover {
transform: scale(1.05);
}
.staff-inner { .staff-inner {
width: 1581px; width: 1581px;
} }

56
src/pages/application/index.vue
Unescape View File

@ -13,8 +13,8 @@
<div class="block history gray"> <div class="block history gray">
<div class="inner"> <div class="inner">
<h2 style="margin-left: 57px">{{ modules[1].form.title }}</h2> <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
<div class="texts"> <div class="texts wow fadeInDown" data-wow-delay="0.5s">
<div class="left"> <div class="left">
<h2>{{ modules[1].form.subTitle }}</h2> <h2>{{ modules[1].form.subTitle }}</h2>
<div class="line"></div> <div class="line"></div>
@ -28,10 +28,10 @@
<div class="block"> <div class="block">
<div class="inner app-inner"> <div class="inner app-inner">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<ul class="app"> <ul class="app">
<li v-for="(item, i) in modules[3].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[3].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt=""> <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
<img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt=""> <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
@ -42,10 +42,10 @@
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<ul class="group"> <ul class="group">
<li v-for="(item, i) in modules[5].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[5].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</li> </li>
@ -55,10 +55,10 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[6].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro">{{ modules[6].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
<ul class="news"> <ul class="news">
<li v-for="(item, i) in articles" :key="i" @click="toArtice(item)"> <li v-for="(item, i) in articles" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="toArtice(item, modules[7].form)">
<img :src="item.titleImg" alt=""> <img :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -76,6 +76,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -84,7 +85,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -114,6 +115,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.history { .history {
h2 { h2 {
@ -127,6 +129,10 @@ export default {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
border-radius: 100px 0px 0px 0px; border-radius: 100px 0px 0px 0px;
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
.left { .left {
width: 695px; width: 695px;
@ -156,6 +162,13 @@ export default {
width: 368px; width: 368px;
height: 252px; height: 252px;
margin: 0 14px 14px 0; margin: 0 14px 14px 0;
transition: .3s;
&:hover {
transform: scale(1.05);
.icon {
transform: rotateY(180deg);
}
}
&:first-child { &:first-child {
width: 750px; width: 750px;
} }
@ -178,6 +191,7 @@ export default {
} }
.icon { .icon {
position: relative; position: relative;
transition: .3s;
} }
.text { .text {
position: relative; position: relative;
@ -193,6 +207,10 @@ export default {
position: relative; position: relative;
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
margin: 0 28px 39px 0; margin: 0 28px 39px 0;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
@ -202,13 +220,17 @@ export default {
height: 353px; height: 353px;
} }
.text { .text {
display: flex;
justify-content: center;
align-items: center;
height: 143px;
font-size: 30px; font-size: 30px;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
line-height: 143px; line-height: 40px;
color: #272727;
text-align: center; text-align: center;
background-color: #fff; color: #272727;
background-color: #F5F5F5;
} }
} }
.news-block { .news-block {
@ -225,6 +247,10 @@ export default {
margin-bottom: 28px; margin-bottom: 28px;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 28px; margin-right: 28px;
} }

8
src/pages/article/activity.vue
Unescape View File

@ -78,11 +78,13 @@ export default {
getInfo() { getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
// 设置面包屑 // 设置面包屑
const { columnName, path, id } = this.$route.query
this.routes = [ this.routes = [
{ {
name: data.columnName, name: columnName || data.columnName,
path: '/' + path,
query: { query: {
id: data.columnId id: id || data.columnId
} }
}, },
{ {
@ -194,7 +196,7 @@ export default {
margin-bottom: 25px; margin-bottom: 25px;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 60px; height: 44px;
background-color: #E5EDF8; background-color: #E5EDF8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }

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

@ -88,11 +88,13 @@ export default {
getInfo() { getInfo() {
this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => { this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
// 设置面包屑 // 设置面包屑
const { columnName, path, id } = this.$route.query
this.routes = [ this.routes = [
{ {
name: data.columnName, name: columnName || data.columnName,
path: '/' + path,
query: { query: {
id: data.columnId id: id || data.columnId
} }
}, },
{ {
@ -103,7 +105,7 @@ export default {
this.$router.back() this.$router.back()
} else { } else {
if (data.articleTemplate === 25) { // 会议活动 if (data.articleTemplate === 25) { // 会议活动
this.$router.replace(`/article/activity?articleId=${this.id}&id=${this.$route.query.columnId}`) this.$router.replace(`/article/activity?articleId=${this.id}&id=${id}&columnName=${columnName}&path=${path}`)
} else { } else {
this.form = data this.form = data
this.columnId = data.columnId this.columnId = data.columnId
@ -239,7 +241,7 @@ export default {
margin-bottom: 25px; margin-bottom: 25px;
} }
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 60px; height: 44px;
background-color: #E5EDF8; background-color: #E5EDF8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }

37
src/pages/careers/index.vue
Unescape View File

@ -14,7 +14,7 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<ul class="card"> <ul class="card">
<li> <li class="wow fadeInDown" data-wow-delay="0.1s">
<img class="pic" :src="modules[1].form.pic" alt=""> <img class="pic" :src="modules[1].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
@ -24,7 +24,7 @@
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)"> <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" @click="openLink(modules[1].form)">
</div> </div>
</li> </li>
<li> <li class="wow fadeInDown" data-wow-delay="0.3s">
<img class="pic" :src="modules[2].form.pic" alt=""> <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>
@ -34,7 +34,7 @@
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)"> <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
</div> </div>
</li> </li>
<li> <li class="wow fadeInDown" data-wow-delay="0.5s">
<img class="pic" :src="modules[3].form.pic" alt=""> <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>
@ -44,7 +44,7 @@
<img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[3].form.link.linkName !== '无'}" @click="openLink(modules[3].form)"> <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': modules[3].form.link.linkName !== '无'}" @click="openLink(modules[3].form)">
</div> </div>
</li> </li>
<li> <li class="wow fadeInDown" data-wow-delay="0.7s">
<img class="pic" :src="modules[4].form.pic" alt=""> <img class="pic" :src="modules[4].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
@ -60,11 +60,11 @@
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[5].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
<p class="intro">{{ modules[5].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<ul class="people"> <ul class="people">
<template v-for="(item, i) in modules[6].list"> <template v-for="(item, i) in modules[6].list">
<li v-if="item.isEnable" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img class="comma" src="@/assets/images/comma.png" alt=""> <img class="comma" src="@/assets/images/comma.png" alt="">
<div class="left"> <div class="left">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -79,12 +79,12 @@
<ul class="shows"> <ul class="shows">
<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"> <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
<div class="left"> <div class="left">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="sub">{{ item.subTitle }}</div> <div class="sub">{{ item.subTitle }}</div>
<div class="des">{{ item.des }}</div> <div class="des">{{ item.des }}</div>
<img src="@/assets/images/arrow-white.png" alt="" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)"> <img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': item.link.linkName !== '无'}" @click="openLink(item)">
</div> </div>
<img class="pic" :src="item.pic" alt=""> <img class="pic" :src="item.pic" alt="">
</li> </li>
@ -97,6 +97,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -105,7 +106,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -127,6 +128,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.card { .card {
display: flex; display: flex;
@ -185,6 +187,10 @@ export default {
padding: 100px 70px 30px 57px; padding: 100px 70px 30px 57px;
margin-bottom: 100px; margin-bottom: 100px;
background-color: #fff; background-color: #fff;
transition: .3s;
&:hover {
transform: scale(1.05);
}
&:nth-child(even) { &:nth-child(even) {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -233,6 +239,11 @@ export default {
height: 654px; height: 654px;
margin-bottom: 40px; margin-bottom: 40px;
color: #fff; color: #fff;
&:hover .left {
h6, .sub, .des, .icon {
transform: translateY(20px);
}
}
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -264,14 +275,20 @@ export default {
} }
h6 { h6 {
font-size: 46px; font-size: 46px;
transition: .3s;
} }
.sub { .sub {
margin: 20px; margin: 20px;
font-size: 36px; font-size: 36px;
transition: .3s;
} }
.des { .des {
margin-bottom: 40px; margin-bottom: 40px;
font-size: 24px; font-size: 24px;
transition: .3s;
}
.icon {
transition: .3s;
} }
} }
</style> </style>

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

@ -107,6 +107,7 @@
<span class="date">{{ item.createTime }}</span> <span class="date">{{ item.createTime }}</span>
</li> </li>
</ul> </ul>
<div class="shadow"></div>
</div> </div>
</div> </div>
</div> </div>
@ -239,14 +240,15 @@ export default {
getLeftColumn() { getLeftColumn() {
this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => { this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
const fromColumn = this.$route.query.column // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章 const fromColumn = this.$route.query.column // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
this.sameStyle = !fromColumn this.sameStyle = 1
this.allColumnId = [] this.allColumnId = []
fromColumn || data.length && this.handleColumn(data, data[0].listStyleId) data.length && this.handleColumn(data, data[0].listStyleId)
this.getArticle(this.sameStyle ? this.allColumnId : [+this.$route.query.id]) this.getArticle(this.sameStyle && !fromColumn ? this.allColumnId : [+this.$route.query.id])
this.columns = data this.columns = data
this.$nextTick(() => { this.$nextTick(() => {
const el = this.$refs.leftColumn const el = this.$refs.leftColumn
el && el.setCurrentKey(this.sameStyle ? data[0].id : this.id) // el && el.setCurrentKey(this.sameStyle && !fromColumn ? data[0].id : this.id)
el && el.setCurrentKey(this.id)
}) })
}).catch(err => {}) }).catch(err => {})
}, },
@ -315,7 +317,7 @@ export default {
this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {}) this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {})
} else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) { } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
// 常规栏目跳转到column页 // 常规栏目跳转到column页
this.$router.push(`/column?id=${to.id + (left ? '&column=1' : '')}`).catch(err => {}) this.$router.push(`/column?id=${to.id + (left && (to.level !== 1 || !this.sameStyle) ? '&column=1' : '')}`).catch(err => {})
} }
}, },
// 查询文章列表 // 查询文章列表
@ -378,6 +380,7 @@ export default {
position: relative; position: relative;
height: 280px; height: 280px;
font-size: 48px; font-size: 48px;
font-weight: 600;
color: #fff; color: #fff;
.text { .text {
position: absolute; position: absolute;
@ -388,7 +391,9 @@ export default {
} }
.column-wrap { .column-wrap {
padding: 40px 0; padding: 40px 0;
background: #F9FAFA url(../../assets/images/column-bg.png) no-repeat; background: url(../../assets/images/column-bg.png) 0 0/auto no-repeat,
url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
background-color: #F9FAFA;
} }
.article { .article {
display: flex; display: flex;
@ -495,7 +500,7 @@ export default {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #F8F9F9; border-top: 1px solid #F8F9F9;
cursor: pointer; cursor: pointer;
&:before { &:before {
content: ''; content: '';
@ -522,6 +527,8 @@ export default {
right: 10px; right: 10px;
} }
.is-current > .el-tree-node__content { .is-current > .el-tree-node__content {
background-color: #E5EDF8;
border-top: 0;
&:after { &:after {
content: ''; content: '';
z-index: 2; z-index: 2;
@ -550,6 +557,7 @@ export default {
.texts { .texts {
max-width: 620px; max-width: 620px;
padding-left: 30px; padding-left: 30px;
margin-right: 20px;
} }
.type { .type {
margin-bottom: 15px; margin-bottom: 15px;
@ -578,8 +586,8 @@ export default {
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
.pic { .pic {
width: 45%; width: 430px;
min-width: 380px; // min-width: 380px;
height: 244px; height: 244px;
} }
} }
@ -592,7 +600,7 @@ export default {
width: 100%; width: 100%;
margin-bottom: 25px; margin-bottom: 25px;
/deep/.el-tree-node__content { /deep/.el-tree-node__content {
height: 60px; height: 44px;
background-color: #E5EDF8; background-color: #E5EDF8;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
} }

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

@ -13,27 +13,27 @@
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[1].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
<img :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)"> <img class="block-pic wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[1].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
<img :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)"> <img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': modules[2].form.link.linkName !== '无'}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
</div> </div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[3].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
<p class="intro">{{ modules[3].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<li v-if="item.isEnable" :key="i"> <li v-if="item.isEnable" :key="i" class="wow fadeInUp" data-wow-delay="0.5s">
<img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -52,6 +52,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -60,7 +61,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -82,7 +83,14 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.block-pic {
transition: .3s;
&:hover {
transform: scale(1.05);
}
}
.list { .list {
li { li {
position: relative; position: relative;
@ -105,6 +113,10 @@ export default {
height: 440px; height: 440px;
padding: 60px 30px 30px 100px; padding: 60px 30px 30px 100px;
background-color: #fff; background-color: #fff;
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
h6 { h6 {
font-size: 40px; font-size: 40px;

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

@ -10,10 +10,10 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[1].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro">{{ 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> <li class="wow fadeInDown" data-wow-delay="0.2s">
<img class="pic" :src="modules[2].form.pic" alt=""> <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>
@ -21,7 +21,7 @@
<img src="@/assets/images/arrow.png" alt="" :class="{'arrow': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)"> <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': modules[2].form.link.linkName !== '无'}" @click="openLink(modules[2].form)">
</div> </div>
</li> </li>
<li> <li class="wow fadeInDown" data-wow-delay="0.6s">
<img class="pic" :src="modules[3].form.pic" alt=""> <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>
@ -35,10 +35,10 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro">{{ 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 v-for="(item, i) in articles" :key="i" @click="toArtice(item)"> <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=""> <img :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -52,11 +52,11 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[6].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
<p class="intro">{{ 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"> <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=""> <img class="pic" :src="item.pic" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -71,38 +71,38 @@
<div class="about" :class="{'cursor-pointer': modules[8].form.link.linkName !== '无'}" @click="openLink(modules[8].form)"> <div class="about" :class="{'cursor-pointer': modules[8].form.link.linkName !== '无'}" @click="openLink(modules[8].form)">
<div class="inner"> <div class="inner">
<img src="@/assets/images/about.png" alt=""> <img class="wow fadeInUp" src="@/assets/images/about.png" alt="">
<div class="line"></div> <div class="line wow fadeInUp" data-wow-delay="0.4s"></div>
<div class="text">{{ modules[8].form.title }}</div> <div class="text wow fadeInUp" data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
<div class="des" v-html="modules[8].form.des"></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">{{ modules[9].form.title }}</h2> <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
<ul class="stat"> <ul class="stat">
<li> <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>
<p class="text">{{ modules[10].form.des }}</p> <p class="text">{{ modules[10].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInRight" data-wow-delay="0.4s">
<p class="num">{{ modules[11].form.title }}</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p> <p class="text">{{ modules[11].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInRight" data-wow-delay="0.6s">
<p class="num">{{ modules[12].form.title }}</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p> <p class="text">{{ modules[12].form.des }}</p>
</li> </li>
<li> <li class="wow fadeInRight" data-wow-delay="0.9s">
<p class="num">{{ modules[13].form.title }}</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p> <p class="text">{{ modules[13].form.des }}</p>
</li> </li>
<li> <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> <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>
@ -116,6 +116,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -124,7 +125,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -154,12 +155,17 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.card { .card {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
li { li {
width: 47%; width: 47%;
transition: .3s;
&:hover{
margin-top: -15px;
}
} }
.pic { .pic {
width: 100%; width: 100%;
@ -196,9 +202,13 @@ export default {
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: .3s;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 28px; margin-right: 28px;
} }
&:hover{
transform: scale(1.05);
}
} }
img { img {
width: 237px; width: 237px;
@ -229,9 +239,13 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
transition: .3s;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
&:hover {
transform: scale(1.05);
}
} }
.pic { .pic {
width: 47%; width: 47%;
@ -312,6 +326,10 @@ export default {
background: rgba(111, 69, 36, .56); background: rgba(111, 69, 36, .56);
border-radius: 17px; border-radius: 17px;
overflow: visible; overflow: visible;
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
} }
</style> </style>

135
src/pages/news/index.vue
Unescape View File

@ -11,64 +11,67 @@
</template> </template>
</el-carousel> </el-carousel>
<ul class="tabs"> <ul class="tabs wow fadeInLeft">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li> <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
</template> </template>
</ul> </ul>
<div class="block"> <div class="block">
<div class="inner" v-if="modules[1].list[this.curColumn].articles.length"> <div class="inner" v-if="modules[1].list[curColumn].articles.length">
<el-carousel class="articles" height="410px" arrow="never"> <div class="banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
<template v-for="(item, i) in modules[1].list[this.curColumn].articles"> <el-carousel ref="carousel" class="articles" height="410px" arrow="never" :autoplay="false">
<el-carousel-item v-if="i < 3" :key="i"> <template v-for="(item, i) in modules[1].list[curColumn].articles">
<div class="banner" @click="toArtice(item)"> <el-carousel-item v-if="i < 3" :key="i">
<img width="50%" height="480" :src="item.titleImg" alt=""> <img width="100%" height="480" :src="item.titleImg" alt="">
<div class="right"> </el-carousel-item>
<h6>{{ item.title }}</h6> </template>
<div class="des" v-html="item.mainBody"></div> </el-carousel>
<p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p> <div class="right">
</div> <h6>{{ curArticle.title }}</h6>
</div> <div class="des" v-html="curArticle.mainBody"></div>
</el-carousel-item> <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
</template> <ul class="inds">
</el-carousel> <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
</ul>
</div>
</div>
<ul class="card"> <ul class="card">
<template v-for="(item, i) in modules[1].list[this.curColumn].articles"> <template v-for="(item, i) in modules[1].list[curColumn].articles">
<li v-if="i > 2" :key="i" @click="toArtice(item)"> <li v-if="i > 2" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
<img class="pic" :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p> <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
<div class="des">{{ item.title }}</div> <div class="des">{{ item.title }}</div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item)"> <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[1].list[curColumn])">
</div> </div>
</li> </li>
</template> </template>
</ul> </ul>
<div class="more" @click="toMore">More news ></div> <div class="more wow fadeInDown" data-wow-delay="0.5s" @click="toMore">More news ></div>
</div> </div>
</div> </div>
<div class="block gray"> <div class="block gray">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title">{{ modules[2].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
<p class="intro">{{ modules[2].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
<div class="shop-shows" v-if="articles.length"> <div class="shop-shows" v-if="articles.length">
<div class="left"> <div class="left wow fadeInLeft" data-wow-delay="0.5s">
<img width="100%" height="400" :src="articles[0].titleImg" alt=""> <img width="100%" height="400" :src="articles[0].titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ articles[0].title }}</h6> <h6>{{ articles[0].title }}</h6>
<div class="des" v-html="articles[0].mainBody"></div> <div class="des" v-html="articles[0].mainBody"></div>
</div> </div>
</div> </div>
<div class="right"> <div class="right wow fadeInRight" data-wow-delay="0.5s">
<ul class="show-card"> <ul class="show-card">
<li v-if="articles[1]" @click="toArtice(articles[1])"> <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
<img class="pic" :src="articles[1].titleImg" alt=""> <img class="pic" :src="articles[1].titleImg" alt="">
<div class="des">{{ articles[1].title }}</div> <div class="des">{{ articles[1].title }}</div>
</li> </li>
<li v-if="articles[2]" @click="toArtice(articles[2])"> <li v-if="articles[2]" @click="toArtice(articles[2], modules[3].form)">
<img class="pic" :src="articles[2].titleImg" alt=""> <img class="pic" :src="articles[2].titleImg" alt="">
<div class="des">{{ articles[2].title }}</div> <div class="des">{{ articles[2].title }}</div>
</li> </li>
@ -81,7 +84,7 @@
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<div class="des" v-html="item.mainBody"></div> <div class="des" v-html="item.mainBody"></div>
</div> </div>
<img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item)"> <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[3].form)">
</li> </li>
</template> </template>
</ul> </ul>
@ -92,10 +95,10 @@
<div class="block conference"> <div class="block conference">
<div class="inner lg"> <div class="inner lg">
<h2 class="b-title">{{ modules[4].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
<p class="intro">{{ modules[4].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
<div class="shows" v-if="articles1.length"> <div class="shows" v-if="articles1.length">
<div class="left"> <div class="left wow fadeInLeft" data-wow-delay="0.5s">
<img width="100%" height="558" :src="articles1[0].titleImg" alt=""> <img width="100%" height="558" :src="articles1[0].titleImg" alt="">
<div class="texts"> <div class="texts">
<div class="meta"> <div class="meta">
@ -108,9 +111,9 @@
</div> </div>
</div> </div>
</div> </div>
<ul class="card-list"> <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
<template v-for="(item, i) in articles1"> <template v-for="(item, i) in articles1">
<li v-if="i" :key="i" @click="toArtice(item)"> <li v-if="i" :key="i" @click="toArtice(item, modules[5].form)">
<img class="pic" :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -140,17 +143,20 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
return { return {
curColumn: 0, curColumn: 0,
articles: [], articles: [],
articles1: [] articles1: [],
curInd: 0,
curArticle: {}
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -167,13 +173,15 @@ export default {
// 获取文章列表 // 获取文章列表
const { list } = json[1] const { list } = json[1]
if (list.length) { if (list.length) {
list.map(e => { list.map((e, i) => {
if (e.site && e.column.length) { if (e.site && e.column.length) {
const id = e.column[e.column.length - 1] const id = e.column[e.column.length - 1]
e.id = id e.id = id
if (e.columnTitle === 2) e.columnName = e.columnTitleCustom if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => { this.$post(`${this.api.queryArticlesByColumnType}?columnId=${id}`).then(({ data }) => {
this.$set(e, 'articles', Util.removeTag(data.slice(0, e.articleNum || 6))) const list = Util.removeTag(data.slice(0, e.articleNum || 6))
this.$set(e, 'articles', list)
if (list.length && !i) this.curArticle = list[0]
}).catch(err => {}) }).catch(err => {})
} else { } else {
this.$set(e, 'articles', []) this.$set(e, 'articles', [])
@ -198,6 +206,14 @@ export default {
} }
}).catch(err => {}) }).catch(err => {})
}, },
// 手动轮播切换
switchCarousel(i) {
if (this.curInd !== i) {
this.$refs.carousel[this.curInd > i ? 'prev' : 'next']()
this.curInd = i
this.curArticle = this.modules[1].list[this.curColumn].articles[i]
}
},
// tab回调 // tab回调
tabChange(i) { tabChange(i) {
const { column } = this.modules[1].list[i] const { column } = this.modules[1].list[i]
@ -251,6 +267,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.tabs { .tabs {
display: flex; display: flex;
@ -274,6 +291,7 @@ export default {
width: 1505px; width: 1505px;
} }
/deep/.articles { /deep/.articles {
width: 50%;
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 20px; bottom: 20px;
left: 804px; left: 804px;
@ -287,21 +305,49 @@ export default {
height: 380px; height: 380px;
} }
.right { .right {
position: relative;
width: 50%; width: 50%;
padding: 50px 50px 30px; padding: 50px 50px 30px;
background: #1583FF; background: #1583FF;
color: #fff; color: #fff;
&:hover {
h6, .des, .meta {
transform: translateY(15px);
}
}
}
.inds {
position: absolute;
bottom: 40px;
left: 60px;
display: flex;
li {
width: 10px;
height: 10px;
margin-right: 12px;
background: #FFFFFF;
border-radius: 50%;
transition: .2s;
&.active {
width: 30px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
}
}
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
transition: .3s;
} }
.des { .des {
margin: 30px 0; margin: 30px 0;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
transition: .3s;
} }
.meta { .meta {
font-size: 16px; font-size: 16px;
transition: .3s;
} }
} }
.card { .card {
@ -313,7 +359,10 @@ export default {
margin-right: 28px; margin-right: 28px;
box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21); box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
border-radius: 6px; border-radius: 6px;
cursor: pointer; transition: .3s;
&:hover {
transform: scale(1.05);
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -332,6 +381,8 @@ export default {
.des { .des {
margin: 10px 0; margin: 10px 0;
font-size: 20px; font-size: 20px;
font-family: SFProDisplay;
font-weight: 500;
color: #333; color: #333;
line-height: 28px; line-height: 28px;
} }
@ -378,6 +429,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
li { li {
position: relative; position: relative;
cursor: pointer;
&:first-child { &:first-child {
margin-right: 22px; margin-right: 22px;
} }
@ -406,7 +458,10 @@ export default {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-bottom: 38px; margin-bottom: 38px;
cursor: pointer; transition: .3s;
&:hover {
transform: scale(1.05);
}
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -488,6 +543,10 @@ export default {
margin-bottom: 13px; margin-bottom: 13px;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: .3s;
&:hover {
transform: translateX(20px);
}
} }
.pic { .pic {
width: 188px; width: 188px;

13
src/pages/newsPress/index.vue
Unescape View File

@ -16,8 +16,8 @@
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i"> <li v-if="item.isEnable" :key="i">
<img class="pic" :src="item.pic" alt=""> <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
<div class="texts"> <div class="texts wow fadeInRight" data-wow-delay="0.1s">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p> <p class="sub">{{ item.subTitle }}</p>
<div class="des">{{ item.des }}</div> <div class="des">{{ item.des }}</div>
@ -35,6 +35,7 @@ import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb' import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -46,6 +47,7 @@ export default {
Breadcrumb Breadcrumb
}, },
mounted() { mounted() {
new WOW().init()
this.getColumn() this.getColumn()
}, },
methods: { methods: {
@ -96,12 +98,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.inner { .inner {
padding-top: 35px; padding-top: 35px;
} }
.list { .list {
margin-top: 40px; margin: 40px 0;
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {
@ -125,6 +128,10 @@ export default {
height: 440px; height: 440px;
padding: 60px 30px 30px 100px; padding: 60px 30px 30px 100px;
background: rgba(247, 247, 247, .72); background: rgba(247, 247, 247, .72);
transition: .3s;
&:hover {
transform: scale(1.05);
}
} }
h6 { h6 {
font-size: 40px; font-size: 40px;

9
src/pages/newsProcurement/index.vue
Unescape View File

@ -16,8 +16,8 @@
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i"> <li v-if="item.isEnable" :key="i">
<img class="pic" :src="item.pic" alt=""> <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
<div class="texts"> <div class="texts wow fadeInRight" data-wow-delay="0.1s">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="sub">{{ item.subTitle }}</p> <p class="sub">{{ item.subTitle }}</p>
<div class="des">{{ item.des }}</div> <div class="des">{{ item.des }}</div>
@ -35,6 +35,7 @@ import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb' import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -46,6 +47,7 @@ export default {
Breadcrumb Breadcrumb
}, },
mounted() { mounted() {
new WOW().init()
this.getColumn() this.getColumn()
}, },
methods: { methods: {
@ -96,12 +98,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.inner { .inner {
padding-top: 35px; padding-top: 35px;
} }
.list { .list {
margin-top: 40px; margin: 40px 0;
li { li {
position: relative; position: relative;
&:nth-child(even) { &:nth-child(even) {

48
src/pages/research/index.vue
Unescape View File

@ -12,10 +12,10 @@
</el-carousel> </el-carousel>
<div class="block"> <div class="block">
<h2 class="b-title">{{ modules[1].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
<p class="intro">{{ modules[1].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
<ul class="area"> <ul class="area">
<li v-for="(item, i) in modules[2].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img :src="item.pic" alt="" class="pic"> <img :src="item.pic" alt="" class="pic">
<div class="texts"> <div class="texts">
<img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon"> <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
@ -28,10 +28,10 @@
<div class="block gray"> <div class="block gray">
<div class="inner"> <div class="inner">
<h2 class="b-title">{{ modules[3].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
<p class="intro">{{ modules[3].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
<ul class="group"> <ul class="group">
<li v-for="(item, i) in modules[4].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</li> </li>
@ -41,10 +41,10 @@
<div class="block"> <div class="block">
<div class="inner news-inner"> <div class="inner news-inner">
<h2 class="b-title">{{ modules[5].form.title }}</h2> <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
<p class="intro">{{ modules[5].form.des }}</p> <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
<ul class="news"> <ul class="news">
<li v-for="(item, i) in modules[6].list" :key="i" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)"> <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="">
<div class="texts"> <div class="texts">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -61,6 +61,7 @@
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
data() { data() {
@ -69,7 +70,7 @@ export default {
} }
}, },
mounted() { mounted() {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -91,6 +92,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import "../../styles/page/page.scss"; @import "../../styles/page/page.scss";
.area { .area {
display: flex; display: flex;
@ -100,6 +102,13 @@ export default {
height: 653px; height: 653px;
color: #fff; color: #fff;
background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat; background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
transition: .3s;
&:hover {
transform: translateY(20px);
.icon {
transform: rotateY(360deg);
}
}
&:nth-child(2) { &:nth-child(2) {
width: 21%; width: 21%;
margin-top: 70px; margin-top: 70px;
@ -129,6 +138,9 @@ export default {
width: 100%; width: 100%;
height: 443px; height: 443px;
} }
.icon {
transition: .3s;
}
.texts { .texts {
width: 100%; width: 100%;
height: 210px; height: 210px;
@ -152,6 +164,10 @@ export default {
position: relative; position: relative;
width: calc((100% - 56px) / 3); width: calc((100% - 56px) / 3);
margin: 0 28px 39px 0; margin: 0 28px 39px 0;
transition: .3s;
&:hover {
transform: translateY(20px);
}
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
@ -161,12 +177,16 @@ export default {
height: 353px; height: 353px;
} }
.text { .text {
display: flex;
justify-content: center;
align-items: center;
height: 143px;
font-size: 30px; font-size: 30px;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
font-weight: bold; font-weight: bold;
line-height: 143px; line-height: 40px;
color: #272727;
text-align: center; text-align: center;
color: #272727;
background-color: #F5F5F5; background-color: #F5F5F5;
} }
} }
@ -186,6 +206,10 @@ export default {
background-color: #fff; background-color: #fff;
box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08); box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
border-radius: 10px; border-radius: 10px;
transition: .3s;
&:hover {
transform: translateY(20px);
}
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }

7
src/styles/common.scss
Unescape View File

@ -13,6 +13,10 @@
font-family: SFProDisplay-Bold; font-family: SFProDisplay-Bold;
src: url('font/SF-Pro-Display-Bold.otf'); src: url('font/SF-Pro-Display-Bold.otf');
} }
@font-face {
font-family: SFProDisplay;
src: url('font/SF-Pro-Display-Regular.otf');
}
@font-face { @font-face {
font-family: toppan; font-family: toppan;
src: url('font/toppan.otf'); src: url('font/toppan.otf');
@ -21,6 +25,9 @@
[v-cloak] { [v-cloak] {
display: none; display: none;
} }
.site-en {
font-family: SFProDisplay;
}
.flex-between { .flex-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@ -62,6 +62,7 @@
background-color: #F2F6F8; background-color: #F2F6F8;
} }
.arrow { .arrow {
transition: .3s;
cursor: pointer; cursor: pointer;
} }
@media (max-width: 1410px) { @media (max-width: 1410px) {

Write Preview
Loading…
Cancel
Save