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

中文系统添加动画

Browse Source
mobile V1.0.0
yujialong 2 years ago
parent 373f1646a1
commit 3da320db77
8 changed files with 203 additions and 109 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. 2
      src/layouts/navbar/index.vue
  2. 11
      src/pages/exp/index.vue
  3. 9
      src/pages/news/index.vue
  4. 18
      src/pages/science/index.vue
  5. 170
      src/pages/sfel/index.vue
  6. 75
      src/pages/talent/index.vue
  7. 23
      src/pages/userSharing/index.vue
  8. 4
      src/setting.js

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

@ -63,7 +63,7 @@ export default {
}).then(({ data }) => { }).then(({ data }) => {
this.menus = data this.menus = data
if (data.length) { if (data.length) {
if (!this.$route.query.id && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`) if (!this.$route.query.id && !this.$route.query.articleId && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
if (!this.active) this.active = data[0].id if (!this.active) this.active = data[0].id
this.$nextTick(() => { this.$nextTick(() => {
const menu = document.querySelectorAll('.el-submenu') const menu = document.querySelectorAll('.el-submenu')

11
src/pages/exp/index.vue
Unescape View File

@ -13,8 +13,8 @@
<div class="block station"> <div class="block station">
<div class="inner"> <div class="inner">
<h6>实验线站</h6> <h6 class="wow fadeInUp">实验线站</h6>
<p class="en">EXPERIMENT STATIONS</p> <p class="en wow fadeInUp" data-wow-delay="0.5s">EXPERIMENT STATIONS</p>
<img class="pic" :src="modules[1].form.pic" alt=""> <img class="pic" :src="modules[1].form.pic" alt="">
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
@ -124,10 +124,17 @@ export default {
li { li {
position: relative; position: relative;
height: 542px; height: 542px;
overflow: hidden;
&:hover {
img {
transform: scale(1.3);
}
}
} }
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s;
} }
h6 { h6 {
position: absolute; position: absolute;

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

@ -17,8 +17,8 @@
</template> </template>
</ul> </ul>
<div class="block"> <div class="block">{{curColumn}}
<div class="inner" v-if="modules[1].list[curColumn].articles.length"> <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
<div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])"> <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
<img width="50%" height="410" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';"> <img width="50%" height="410" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
<div class="right"> <div class="right">
@ -26,7 +26,7 @@
<div class="des" v-html="curArticle.mainBody"></div> <div class="des" v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p> <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
<ul class="inds"> <ul class="inds">
<li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li> <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -264,7 +264,10 @@ export default {
// 长页栏目直接获取path // 长页栏目直接获取path
this.$router.push(`/${data.path}?id=${id}`).catch(err => {}) this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
} else { } else {
this.curInd = 0
this.curColumn = i this.curColumn = i
this.curArticle = this.modules[1].list[i].articles[0] || {}
this.carouselInterval()
} }
}).catch(err => {}) }).catch(err => {})
} else { } else {

18
src/pages/science/index.vue
Unescape View File

@ -13,21 +13,21 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="item" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)"> <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
<img src="@/assets/images/science/1.png" alt=""> <img src="@/assets/images/science/1.png" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
</div> </div>
<div class="item" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <div class="item wow bounceInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<img src="@/assets/images/science/2.png" alt=""> <img src="@/assets/images/science/2.png" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</div> </div>
</div> </div>
<div class="item" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)"> <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
<img src="@/assets/images/science/3.png" alt=""> <img src="@/assets/images/science/3.png" alt="">
<div class="texts"> <div class="texts">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
@ -43,7 +43,6 @@
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 Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js' import WOW from 'wow.js'
export default { export default {
mixins: [mixins], mixins: [mixins],
@ -52,9 +51,6 @@ export default {
routes: [] routes: []
} }
}, },
components: {
Breadcrumb
},
mounted() { mounted() {
new WOW().init() new WOW().init()
}, },
@ -86,6 +82,13 @@ export default {
.item { .item {
position: relative; position: relative;
margin-bottom: 58px; margin-bottom: 58px;
&:hover {
.texts {
color: #fff;
transform: scale(1.05);
background: #32b6e9 !important;
}
}
img { img {
width: 100%; width: 100%;
height: 508px; height: 508px;
@ -110,6 +113,7 @@ export default {
padding: 70px 38px; padding: 70px 38px;
color: #333; color: #333;
background: #FFF6E9; background: #FFF6E9;
transition: .5s;
} }
h6 { h6 {
margin-bottom: 14px; margin-bottom: 14px;

170
src/pages/sfel/index.vue
Unescape View File

@ -10,7 +10,7 @@
<div class="block banner-block"> <div class="block banner-block">
<div class="inner"> <div class="inner">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[1].form.title }} {{ modules[1].form.title }}
<span class="sub">{{ modules[1].form.subTitle }}</span> <span class="sub">{{ modules[1].form.subTitle }}</span>
@ -19,13 +19,15 @@
</div> </div>
<template v-if="articles.length"> <template v-if="articles.length">
<div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)"> <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
<img width="50%" height="410" :src="curArticle.titleImg" alt=""> <div style="width: 50%;height: 410px;overflow: hidden;">
<img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
</div>
<div class="right"> <div class="right">
<h6>{{ curArticle.title }}</h6> <h6>{{ curArticle.title }}</h6>
<div class="des" v-html="curArticle.mainBody"></div> <div class="des" v-html="curArticle.mainBody"></div>
<p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p> <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
<ul class="inds"> <ul class="inds">
<li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li> <li v-for="i in articles.length > 2 ? 3 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -37,7 +39,7 @@
<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, modules[2].list[curColumn])"> <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
</div> </div>
</li> </li>
</template> </template>
@ -48,7 +50,7 @@
<div class="block notice"> <div class="block notice">
<div class="inner lg"> <div class="inner lg">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[3].form.title }} {{ modules[3].form.title }}
<span class="sub">{{ modules[3].form.subTitle }}</span> <span class="sub">{{ modules[3].form.subTitle }}</span>
@ -61,7 +63,7 @@
<template v-for="(item, i) in articles1"> <template v-for="(item, i) in articles1">
<el-carousel-item v-if="i < 4" :key="i"> <el-carousel-item v-if="i < 4" :key="i">
<div class="item"> <div class="item">
<img :src="item.titleImg" alt=""> <img class="pic" :src="item.titleImg" alt="">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
@ -96,7 +98,7 @@
</template> </template>
</ul> </ul>
<div v-if="articles1.length > 10" class="slide"> <div v-if="articles1.length > 10" class="slide">
<img :src="articles1[10].titleImg" alt=""> <img class="pic" :src="articles1[10].titleImg" alt="">
<p class="text">{{ articles1[10].title }}</p> <p class="text">{{ articles1[10].title }}</p>
</div> </div>
</div> </div>
@ -106,7 +108,7 @@
<div class="block conference"> <div class="block conference">
<div class="inner lg"> <div class="inner lg">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[5].form.title }} {{ modules[5].form.title }}
<span class="sub">{{ modules[5].form.subTitle }}</span> <span class="sub">{{ modules[5].form.subTitle }}</span>
@ -115,7 +117,7 @@
</div> </div>
<div class="shows" v-if="articles2.length"> <div class="shows" v-if="articles2.length">
<div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)"> <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
<img width="100%" height="100%" :src="articles2[0].titleImg" alt=""> <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
<div class="text">{{ articles2[0].title }}</div> <div class="text">{{ articles2[0].title }}</div>
</div> </div>
<ul class="card-list wow fadeInRight" data-wow-delay="0.5s"> <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
@ -147,7 +149,7 @@
<div class="block media"> <div class="block media">
<div class="inner"> <div class="inner">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[7].form.title }} {{ modules[7].form.title }}
<span class="sub">{{ modules[7].form.subTitle }}</span> <span class="sub">{{ modules[7].form.subTitle }}</span>
@ -175,8 +177,10 @@
</template> </template>
</ul> </ul>
</div> </div>
<div v-if="articles3.length > 5" class="right"> <div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s">
<img :src="articles3[5].titleImg" alt=""> <div class="img-wrap">
<img :src="articles3[5].titleImg" alt="">
</div>
<div class="texts"> <div class="texts">
<h6>{{ articles3[5].title }}</h6> <h6>{{ articles3[5].title }}</h6>
<div class="des">{{ articles3[5].mainBody }}</div> <div class="des">{{ articles3[5].mainBody }}</div>
@ -188,7 +192,7 @@
<div class="block news"> <div class="block news">
<div class="inner"> <div class="inner">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[9].form.title }} {{ modules[9].form.title }}
<span class="sub">{{ modules[9].form.subTitle }}</span> <span class="sub">{{ modules[9].form.subTitle }}</span>
@ -209,7 +213,7 @@
<div class="block program"> <div class="block program">
<div class="inner"> <div class="inner">
<div class="title"> <div class="title wow fadeInUp">
<h5> <h5>
{{ modules[11].form.subTitle }} {{ modules[11].form.subTitle }}
<span class="sub">{{ modules[11].form.subTitle }}</span> <span class="sub">{{ modules[11].form.subTitle }}</span>
@ -223,7 +227,9 @@
<div class="des">{{ articles4[0].title }}</div> <div class="des">{{ articles4[0].title }}</div>
<div class="meta">发表日期：{{ articles4[0].createTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div> <div class="meta">发表日期：{{ articles4[0].createTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
</div> </div>
<img class="pic" :src="articles4[0].titleImg" alt=""> <div class="img-wrap">
<img class="pic" :src="articles4[0].titleImg" alt="">
</div>
</div> </div>
<ul class="list"> <ul class="list">
<template v-for="(item, i) in articles3"> <template v-for="(item, i) in articles3">
@ -258,7 +264,6 @@ export default {
data() { data() {
return { return {
columns: [], columns: [],
curColumn: 0,
articles: [], articles: [],
articles1: [], articles1: [],
articles2: [], articles2: [],
@ -337,49 +342,6 @@ export default {
this.curArticle = this.articles[this.curInd] || {} this.curArticle = this.articles[this.curInd] || {}
} }
}, },
// tab回调
tabChange(i) {
const { column } = this.modules[1].list[i]
if (column && column.length) {
const id = column[column.length - 1]
// 查询栏目详情
this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => {
const { typeId } = data
// 跳转链接
if (typeId === 2) {
let href = data.linkAddress
const cType = data.connectionType
if (cType !== 2) { // 非站外链接
const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
// 站点id：站内链接取当前站点，其他站点链接取siteSelection
const site = cType === 1 ?
(this.$route.query.siteId || this.site) :
data.siteSelection
if (ids[1]) { // 文章
href = '/article?id=' + ids[1]
} else { // 栏目
const columnIds = ids[0].split(',')
href = '/column?id=' + columnIds[columnIds.length - 1]
}
href = this.$router.resolve(href + '&siteId=' + site).href
}
// 是否新窗口打开
if (data.isOpen) {
window.open(href)
} else {
location.href = href
}
} else if (typeId === 3) {
// 长页栏目直接获取path
this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
} else {
this.curColumn = i
}
}).catch(err => {})
} else {
this.curColumn = i
}
},
} }
}; };
</script> </script>
@ -432,8 +394,10 @@ export default {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.pic { .pic {
width: 700px; transition: .5s;
height: 380px; &:hover {
transform: scale(1.3);
}
} }
.right { .right {
position: relative; position: relative;
@ -535,9 +499,10 @@ export default {
.item { .item {
position: relative; position: relative;
height: 100%; height: 100%;
img { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s;
} }
.text { .text {
position: absolute; position: absolute;
@ -550,22 +515,36 @@ export default {
line-height: 59px; line-height: 59px;
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
&:hover {
.pic {
transform: scale(1.3);
}
}
} }
.card-wrap { .card-wrap {
display: flex; display: flex;
margin-top: 18px; margin-top: 18px;
.cards {
flex: 1;
}
} }
.cards { .cards {
padding: 20px; padding: 20px;
background-color: #fff; background-color: #fff;
transition: .5s;
&:hover {
transform: translateX(10px);
}
h6 { h6 {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
color: #48525E; color: #48525E;
@include mul-ellipsis(2);
} }
.sum { .sum {
font-size: 14px; font-size: 14px;
color: #6D7C8E; color: #6D7C8E;
@include mul-ellipsis(2);
} }
.date { .date {
margin-top: 24px; margin-top: 24px;
@ -625,9 +604,11 @@ export default {
.slide { .slide {
position: relative; position: relative;
height: 284px; height: 284px;
img { overflow: hidden;
.pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s;
} }
.text { .text {
position: absolute; position: absolute;
@ -642,6 +623,11 @@ export default {
color: #FFFFFF; color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
&:hover {
.pic {
transform: scale(1.3);
}
}
} }
} }
.conference { .conference {
@ -655,6 +641,7 @@ export default {
height: 688px; height: 688px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
overflow: hidden;
.text { .text {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -668,6 +655,14 @@ export default {
color: #FFFFFF; color: #FFFFFF;
background-color: rgba(0, 0, 0, 0.57); background-color: rgba(0, 0, 0, 0.57);
} }
.pic {
transition: .5s;
}
&:hover {
.pic {
transform: scale(1.3);
}
}
} }
.card-list { .card-list {
width: 784px; width: 784px;
@ -695,10 +690,12 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 20px; font-size: 20px;
color: #333; color: #333;
@include mul-ellipsis(2);
} }
.sum { .sum {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
@include mul-ellipsis(2);
} }
.text { .text {
display: flex; display: flex;
@ -727,9 +724,11 @@ export default {
position: relative; position: relative;
width: 366px; width: 366px;
height: 197px; height: 197px;
overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s;
} }
.text { .text {
position: absolute; position: absolute;
@ -743,6 +742,11 @@ export default {
@include ellipsis; @include ellipsis;
background-color: rgba(0, 0, 0, 0.49); background-color: rgba(0, 0, 0, 0.49);
} }
&:hover {
img {
transform: scale(1.3);
}
}
} }
.list { .list {
padding: 34px 36px; padding: 34px 36px;
@ -750,9 +754,13 @@ export default {
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
li { li {
margin-bottom: 41px; margin-bottom: 41px;
transition: .5s;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
&:hover {
transform: scale(1.05);
}
} }
h6 { h6 {
margin-bottom: 17px; margin-bottom: 17px;
@ -772,13 +780,19 @@ export default {
.right { .right {
width: 44%; width: 44%;
box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08); box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
img { transition: .5s;
.img-wrap {
width: 100%; width: 100%;
height: 422px; height: 422px;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
transition: .5s;
} }
.texts { .texts {
padding: 40px 28px; padding: 40px 28px;
background: #fff;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
@ -793,6 +807,15 @@ export default {
font-size: 16px; font-size: 16px;
color: #666; color: #666;
} }
&:hover {
background: #005388;
h6, .des {
color: #fff;
}
img {
transform: scale(1.3);
}
}
} }
} }
.news { .news {
@ -871,9 +894,20 @@ export default {
color: #666; color: #666;
} }
} }
.pic { .img-wrap {
width: 49%; width: 49%;
height: 430px; height: 430px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
}
&:hover {
.pic {
transform: scale(1.3);
}
} }
.list { .list {
display: flex; display: flex;
@ -882,6 +916,7 @@ export default {
padding: 36px 22px; padding: 36px 22px;
margin-right: 14px; margin-right: 14px;
background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat; background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat;
transition: .5s;
&:nth-child(2) { &:nth-child(2) {
background-image: url(../../assets/images/sfel/8.png); background-image: url(../../assets/images/sfel/8.png);
} }
@ -889,6 +924,9 @@ export default {
margin-right: 0; margin-right: 0;
background-image: url(../../assets/images/sfel/9.png); background-image: url(../../assets/images/sfel/9.png);
} }
&:hover {
transform: translateY(20px);
}
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 30px;

75
src/pages/talent/index.vue
Unescape View File

@ -13,15 +13,19 @@
<div class="block talent"> <div class="block talent">
<div class="inner"> <div class="inner">
<div class="item" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)"> <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
<img class="pic" :src="modules[1].form.pic" alt=""> <div class="img-wrap">
<img class="pic" :src="modules[1].form.pic" alt="">
</div>
<div class="texts"> <div class="texts">
<h6>{{ modules[1].form.title }}</h6> <h6>{{ modules[1].form.title }}</h6>
<div class="des">{{ modules[1].form.des }}</div> <div class="des">{{ modules[1].form.des }}</div>
</div> </div>
</div> </div>
<div class="item" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <div class="item wow bounceInRight" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<img class="pic" :src="modules[2].form.pic" alt=""> <div class="img-wrap">
<img class="pic" :src="modules[2].form.pic" alt="">
</div>
<div class="texts"> <div class="texts">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
@ -31,7 +35,7 @@
</div> </div>
<div class="style"> <div class="style">
<h6>{{ modules[3].form.title }}</h6> <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
<el-carousel :interval="4000" type="card" height="510px"> <el-carousel :interval="4000" type="card" height="510px">
<template v-for="(item, i) in modules[4].list"> <template v-for="(item, i) in modules[4].list">
<el-carousel-item v-if="item.isEnable" :key="i"> <el-carousel-item v-if="item.isEnable" :key="i">
@ -46,8 +50,10 @@
<div class="block intro"> <div class="block intro">
<div class="inner"> <div class="inner">
<div class="item"> <div class="item wow fadeInDown" data-wow-delay="0.1s">
<img class="pic" :src="modules[5].form.pic" alt=""> <div class="img-wrap">
<img class="pic" :src="modules[5].form.pic" alt="">
</div>
<div class="texts"> <div class="texts">
<p class="type">{{ modules[5].form.subTitle }}</p> <p class="type">{{ modules[5].form.subTitle }}</p>
<h6>{{ modules[5].form.title }}</h6> <h6>{{ modules[5].form.title }}</h6>
@ -55,8 +61,10 @@
<el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">查看更多</el-button> <el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">查看更多</el-button>
</div> </div>
</div> </div>
<div class="item"> <div class="item wow fadeInDown" data-wow-delay="0.3s">
<img class="pic" :src="modules[6].form.pic" alt=""> <div class="img-wrap">
<img class="pic" :src="modules[6].form.pic" alt="">
</div>
<div class="texts"> <div class="texts">
<p class="type">{{ modules[6].form.subTitle }}</p> <p class="type">{{ modules[6].form.subTitle }}</p>
<h6>{{ modules[6].form.title }}</h6> <h6>{{ modules[6].form.title }}</h6>
@ -115,13 +123,16 @@ export default {
} }
.talent { .talent {
.inner { .inner {
width: 1504px; width: 100%;
max-width: 1504px;
} }
.item { .item {
display: flex; display: flex;
padding: 42px; padding: 42px;
margin-bottom: 36px; margin-bottom: 36px;
color: #333;
background: #fff; background: #fff;
transition: .5s;
&:nth-child(even) { &:nth-child(even) {
justify-content: space-between; justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
@ -129,12 +140,25 @@ export default {
padding-left: 0; padding-left: 0;
} }
} }
&:hover {
color: #fff;
background: #005388;
.pic {
transform: scale(1.1);
}
}
} }
.pic { .img-wrap {
width: 602px;
height: 465px; height: 465px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
} }
.texts { .texts {
width: 707px;
padding: 98px 72px 30px 80px; padding: 98px 72px 30px 80px;
} }
h6 { h6 {
@ -142,11 +166,9 @@ export default {
font-size: 50px; font-size: 50px;
font-family: PingFangSC-Light, PingFang SC; font-family: PingFangSC-Light, PingFang SC;
font-weight: 300; font-weight: 300;
color: #333333;
} }
.des { .des {
font-size: 18px; font-size: 18px;
color: #333;
line-height: 33px; line-height: 33px;
} }
} }
@ -182,39 +204,52 @@ export default {
} }
.intro { .intro {
.inner { .inner {
width: 1504px; width: 100%;
max-width: 1504px;
} }
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 36px; margin-bottom: 36px;
color: #333;
background: #fff; background: #fff;
transition: .5s;
&:nth-child(even) { &:nth-child(even) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
&:hover {
color: #fff;
background: #465f85;
.pic {
transform: scale(1.1);
}
}
} }
.pic { .img-wrap {
width: 848px;
height: 505px; height: 505px;
overflow: hidden;
}
.pic {
width: 100%;
height: 100%;
transition: .5s;
} }
.texts { .texts {
width: 45%;
padding: 0 58px; padding: 0 58px;
} }
.type { .type {
font-size: 18px; font-size: 18px;
color: #333;
} }
h6 { h6 {
margin: 20px 0; margin: 20px 0;
font-size: 28px; font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333;
} }
.des { .des {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 16px; font-size: 16px;
color: #333;
line-height: 30px; line-height: 30px;
} }
} }

23
src/pages/userSharing/index.vue
Unescape View File

@ -14,12 +14,12 @@
<div class="block share"> <div class="block share">
<div class="inner"> <div class="inner">
<div class="left"> <div class="left">
<h6>用户共享</h6> <h6 class="wow fadeInUp">用户共享</h6>
<p class="en">USERS SHARE</p> <p class="en wow fadeInUp" data-wow-delay="0.5s">USERS SHARE</p>
<div class="des">{{ modules[1].form.des }}</div> <div class="des wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
</div> </div>
<img class="pic" src="@/assets/images/userSharing/1.png" alt=""> <img class="pic wow bounceInRight" data-wow-delay="0.8s" src="@/assets/images/userSharing/1.png" alt="">
<div class="card"> <div class="card wow bounceInLeft" data-wow-delay="0.8s">
<p class="title">高效运行、分类开放</p> <p class="title">高效运行、分类开放</p>
<p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p> <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
</div> </div>
@ -28,17 +28,17 @@
<div class="block gray"> <div class="block gray">
<ul class="group"> <ul class="group">
<li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)"> <li class="wow bounceInDown" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
<img src="@/assets/images/userSharing/2.png" alt=""> <img src="@/assets/images/userSharing/2.png" alt="">
<h6>{{ modules[2].form.title }}</h6> <h6>{{ modules[2].form.title }}</h6>
<div class="des">{{ modules[2].form.des }}</div> <div class="des">{{ modules[2].form.des }}</div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)"> <li class="wow bounceInDown" data-wow-delay="0.1s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
<img src="@/assets/images/userSharing/3.png" alt=""> <img src="@/assets/images/userSharing/3.png" alt="">
<h6>{{ modules[3].form.title }}</h6> <h6>{{ modules[3].form.title }}</h6>
<div class="des">{{ modules[3].form.des }}</div> <div class="des">{{ modules[3].form.des }}</div>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)"> <li class="wow bounceInDown" data-wow-delay="0.2s" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
<img src="@/assets/images/userSharing/4.png" alt=""> <img src="@/assets/images/userSharing/4.png" alt="">
<h6>{{ modules[4].form.title }}</h6> <h6>{{ modules[4].form.title }}</h6>
<div class="des">{{ modules[4].form.des }}</div> <div class="des">{{ modules[4].form.des }}</div>
@ -154,6 +154,12 @@ export default {
padding: 195px 0 0 32px; padding: 195px 0 0 32px;
margin-right: 20px; margin-right: 20px;
color: #fff; color: #fff;
overflow: hidden;
&:hover {
img {
transform: scale(1.3);
}
}
} }
img { img {
position: absolute; position: absolute;
@ -161,6 +167,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: .5s;
} }
h6 { h6 {
position: relative; position: relative;

4
src/setting.js
Unescape View File

@ -6,8 +6,8 @@ let host = `${location.origin}/`
if (isDev) { if (isDev) {
host = 'http://192.168.31.136:10000/' // 测试服 host = 'http://192.168.31.136:10000/' // 测试服
// host = 'https://31k70639y6.zicp.fun/' // 测试服 // host = 'https://31k70639y6.zicp.fun/' // 测试服
// host = 'http://192.168.31.51:10000/' // 榕 host = 'http://192.168.31.51:10000/' // 榕
// host = 'http://192.168.31.116:10000/' // 赓 // host = 'http://192.168.31.116/' // 赓
} }
const Setting = { const Setting = {

Write Preview
Loading…
Cancel
Save