huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加动画

Browse Source
master
yujialong 7 months ago
parent b849c5d88a
commit 86199985a8
6 changed files with 418 additions and 70 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. 73
      src/pages/aboutUs/index.vue
  2. 14
      src/pages/column/index.vue
  3. 74
      src/pages/index/list/index.vue
  4. 106
      src/pages/index/show/index.vue
  5. 106
      src/pages/member/index.vue
  6. 109
      src/pages/supplier/index.vue

73
src/pages/aboutUs/index.vue
Unescape View File

@ -27,7 +27,7 @@
<div class="text" <div class="text"
v-html="item.des"></div> v-html="item.des"></div>
<div v-if="!GTA" <div v-if="!GTA"
class="qrcodes"> class="qrcodes fadeInUp">
<div class="qrcode"> <div class="qrcode">
<img width="103" <img width="103"
:src="item.weixinPic1" :src="item.weixinPic1"
@ -47,7 +47,7 @@
</el-carousel> </el-carousel>
<div v-else <div v-else
class="banner"> class="banner fadeInUp">
<img class="texts" <img class="texts"
src="https://huorantech.com/images/about/banner-text.png" src="https://huorantech.com/images/about/banner-text.png"
alt=""> alt="">
@ -73,15 +73,14 @@
<div class="pics"> <div class="pics">
<div class="text"> <div class="text">
<div class="title-wrap"> <div class="title-wrap">
<p class="title">{{ modules[1].form.title }}</p> <p class="title fadeInLeft">{{ modules[1].form.title }}</p>
<p class="brief">{{ modules[1].form.subTitle1 }}</p> <p class="brief fadeInLeft">{{ modules[1].form.subTitle1 }}</p>
<p class="en">{{ modules[1].form.subTitle2 }}</p> <p class="en fadeInRight">{{ modules[1].form.subTitle2 }}</p>
</div> </div>
<div class="desc wow fadeInLeft" <div class="desc animate"
data-wow-delay="0.7s"
v-html="modules[1].form.des"></div> v-html="modules[1].form.des"></div>
</div> </div>
<img class="bg" <img class="bg fadeInRight"
:src="modules[1].form.pic" :src="modules[1].form.pic"
alt=""> alt="">
</div> </div>
@ -95,8 +94,8 @@
</div> </div>
<div class="culture"> <div class="culture">
<div class="inner"> <div class="inner">
<h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6> <h6 class="i-title animate">{{ modules[3].form.title }}</h6>
<p class="en">{{ modules[3].form.des }}</p> <p class="en fadeInUp">{{ 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" <li v-if="item.isEnable"
@ -117,9 +116,9 @@
<div class="adv" <div class="adv"
id="part2"> id="part2">
<div class="inner"> <div class="inner">
<h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6> <h6 class="i-title animate">{{ modules[5].form.title }}</h6>
<p class="en">{{ modules[5].form.subTitle }}</p> <p class="en fadeInUp">{{ modules[5].form.subTitle }}</p>
<p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p> <p class="title-des animate">{{ modules[5].form.des }}</p>
<ul class="list"> <ul class="list">
<template v-for="(item, i) in modules[6].list"> <template v-for="(item, i) in modules[6].list">
@ -139,14 +138,14 @@
<!-- 合作客户 --> <!-- 合作客户 -->
<div class="client"> <div class="client">
<div class="inner"> <div class="inner">
<h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6> <h6 class="i-title animate">{{ modules[7].form.title }}</h6>
<p class="en">{{ modules[7].form.subTitle }}</p> <p class="en fadeInUp">{{ modules[7].form.subTitle }}</p>
<p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p> <p class="title-des animate">{{ modules[7].form.des }}</p>
<div class="client-pic"> <div class="client-pic">
<img class="bg" <img class="bg fadeInLeft"
:src="modules[8].form.pic" :src="modules[8].form.pic"
alt=""> alt="">
<div class="text"> <div class="text fadeInRight">
<div class="c-title1"> <div class="c-title1">
<img src="https://huorantech.com/images/index/comma1.png" <img src="https://huorantech.com/images/index/comma1.png"
alt=""> alt="">
@ -166,11 +165,13 @@
:class-option="{limitMoveNum: 2, direction: 2}"> :class-option="{limitMoveNum: 2, direction: 2}">
<ul class="client-list" <ul class="client-list"
ref="client"> ref="client">
<li v-for="(item, i) in modules[9].list" <template v-for="item in modules[9].list">
:key="i"> <li v-if="item.isEnable"
:key="item">
<img :src="item.pic" <img :src="item.pic"
alt=""> alt="">
</li> </li>
</template>
</ul> </ul>
</scroll> </scroll>
</div> </div>
@ -307,7 +308,8 @@ export default {
methods: { methods: {
// 初始化动画 // 初始化动画
initAnimate () { initAnimate () {
ScrollReveal().reveal('.wow', { const sr = ScrollReveal()
sr.reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
// origin: 'bottom', // 动画开始的方向 // origin: 'bottom', // 动画开始的方向
distance: '50px',//移动距离 distance: '50px',//移动距离
@ -316,7 +318,7 @@ export default {
// viewFactor: 100, // viewFactor: 100,
}) })
ScrollReveal().reveal('.fadeInUp', { sr.reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向 origin: 'top', // 动画开始的方向
distance: '100px',//移动距离 distance: '100px',//移动距离
@ -324,6 +326,33 @@ export default {
// scale: 0.8, // scale: 0.8,
// viewFactor: 100, // viewFactor: 100,
}) })
sr.reveal('.fadeInDown', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInLeft', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInRight', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
}, },
// 获取文章详情 // 获取文章详情
getInfo () { getInfo () {

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

@ -1,7 +1,7 @@
<template> <template>
<div v-show="loaded" <div v-show="loaded"
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]"> :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
<div class="banner"> <div class="banner fadeInUp">
<img width="100%" <img width="100%"
height="280" height="280"
:src="info.columnBanner" :src="info.columnBanner"
@ -473,6 +473,7 @@ 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 mixins from '@/mixins/article'; import mixins from '@/mixins/article';
import ScrollReveal from 'scrollreveal'
export default { export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
@ -551,7 +552,6 @@ export default {
} }
]; ];
this.init(); this.init();
}, },
methods: { methods: {
init () { init () {
@ -577,6 +577,16 @@ export default {
this.handlePublication() this.handlePublication()
this.getLeftColumn() this.getLeftColumn()
this.getClassification() this.getClassification()
ScrollReveal().reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
}) })
.catch((res) => { }); .catch((res) => { });
}, },

74
src/pages/index/list/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<el-carousel class="carousel" <el-carousel class="carousel fadeInUp"
:interval="6000" :interval="6000"
height="354px" height="354px"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
@ -32,7 +32,7 @@
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" <li v-if="item.isEnable"
:key="i" :key="i"
:class="[{'cursor-pointer': isLink(item.link.linkName)}]" :class="[{'cursor-pointer': isLink(item.link.linkName)}, 'fadeInDown' + i]"
@click="openLink(item)"> @click="openLink(item)">
<img :src="item.pic" <img :src="item.pic"
alt=""> alt="">
@ -252,6 +252,7 @@
<script> <script>
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import { Loading } from "element-ui"; import { Loading } from "element-ui";
import ScrollReveal from 'scrollreveal'
export default { export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
@ -350,7 +351,73 @@ export default {
this.getClass() this.getClass()
this.initData() this.initData()
}, },
methods: { methods: {// 初始化动画
initAnimate () {
ScrollReveal().reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
// origin: 'bottom', // 动画开始的方向
distance: '50px',//移动距离
duration: 1000, // 动画持续时间
scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown0', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown1', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 100,
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown2', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 200,
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInLeft', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInRight', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
},
// 获取banner // 获取banner
getBanner () { getBanner () {
// 预览/详情 // 预览/详情
@ -361,6 +428,7 @@ export default {
data : data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json this.modules = json
this.$nextTick(this.initAnimate)
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => { }) }).catch(err => { })

106
src/pages/index/show/index.vue
Unescape View File

@ -1,18 +1,10 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<!-- <el-card shadow="hover"
class="m-b-20">
<div class="flex-between">
<el-page-header @back="$router.back()"
:content="form.mall.productName"></el-page-header>
</div>
</el-card> -->
<div class="inner"> <div class="inner">
<Breadcrumb ref="breadcrumb" <Breadcrumb ref="breadcrumb"
:data.sync="routes" /> :data.sync="routes" />
<div class="top"> <div class="top">
<el-carousel class="pics" <el-carousel class="pics fadeInLeft"
:interval="6000" :interval="6000"
height="278px" height="278px"
:arrow="form.pics.length > 1 ? 'hover' : 'never'" :arrow="form.pics.length > 1 ? 'hover' : 'never'"
@ -25,7 +17,7 @@
</el-image> </el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="right" <div class="right fadeInRight"
id="fields"> id="fields">
<h6>{{ form.mall.productName }}</h6> <h6>{{ form.mall.productName }}</h6>
<div v-if="isCourse" <div v-if="isCourse"
@ -90,13 +82,13 @@
<div class="course" <div class="course"
id="part0"> id="part0">
<div class="detail"> <div class="detail">
<ul class="tab"> <ul class="tab fadeInDown">
<li v-for="(tab, i) in tabs" <li v-for="(tab, i) in tabs"
:key="i" :key="i"
:class="{active: curTab === tab.id}" :class="{active: curTab === tab.id}"
@click="tabChange(tab)">{{ tab.name }}</li> @click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<div class="courses"> <div class="courses fadeInUp">
<div class="des" <div class="des"
v-html="form.mall.detailedIntroduction"></div> v-html="form.mall.detailedIntroduction"></div>
<div class="chapter" <div class="chapter"
@ -138,8 +130,8 @@
</div> </div>
</div> </div>
<div class="products"> <div class="products">
<h6>热门产品推荐</h6> <h6 class="fadeInUp">热门产品推荐</h6>
<ul class="product"> <ul class="product fadeInDown">
<li v-for="(item, i) in hots" <li v-for="(item, i) in hots"
:key="i" :key="i"
@click="toDetail(item.mallId)"> @click="toDetail(item.mallId)">
@ -290,13 +282,6 @@ export default {
this.qrcodeTop = (height > 0 ? height : 0) + 'px' this.qrcodeTop = (height > 0 ? height : 0) + 'px'
this.getData() this.getData()
this.getHot() this.getHot()
ScrollReveal().reveal('.products', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
// distance: '300px',//移动距离
duration: 1000, // 动画持续时间
scale: 0.8,
})
}, },
methods: { methods: {
// 产品详情 // 产品详情
@ -327,6 +312,7 @@ export default {
e.mall.associatedProduct && this.getChapter() e.mall.associatedProduct && this.getChapter()
this.$nextTick(() => { this.$nextTick(() => {
this.height = document.querySelector('#fields').clientHeight + 'px' this.height = document.querySelector('#fields').clientHeight + 'px'
this.initAnimate()
}) })
}).catch(err => { }) }).catch(err => { })
}, },
@ -335,6 +321,84 @@ export default {
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct) let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct)
this.chapterList = res.chapterList this.chapterList = res.chapterList
}, },
// 初始化动画
initAnimate () {
const sr = ScrollReveal()
sr.reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
// origin: 'bottom', // 动画开始的方向
distance: '50px',//移动距离
duration: 1000, // 动画持续时间
scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInDown', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown0', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown1', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 100,
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown2', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 200,
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInLeft', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInRight', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
},
// tab切换 // tab切换
tabChange ({ id }) { tabChange ({ id }) {
this.curTab = id this.curTab = id

106
src/pages/member/index.vue
Unescape View File

@ -35,8 +35,8 @@
<script> <script>
import mixins from '@/mixins/page' import mixins from '@/mixins/page'
import WOW from 'wow.js'
import occuQrcode from '@/components/occuQrcode' import occuQrcode from '@/components/occuQrcode'
import ScrollReveal from 'scrollreveal'
export default { export default {
mixins: [mixins], mixins: [mixins],
data () { data () {
@ -48,7 +48,7 @@ export default {
occuQrcode occuQrcode
}, },
mounted () { mounted () {
new WOW().init()
}, },
methods: { methods: {
// 获取文章详情 // 获取文章详情
@ -61,16 +61,94 @@ export default {
data : data :
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json this.modules = json
// this.$nextTick(this.initAnimate)
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json) console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => { }) }).catch(err => { })
}, },
// 初始化动画
initAnimate () {
const sr = ScrollReveal()
sr.reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
// origin: 'bottom', // 动画开始的方向
distance: '50px',//移动距离
duration: 1000, // 动画持续时间
scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInDown', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown0', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown1', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 100,
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown2', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 200,
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInLeft', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInRight', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
},
} }
}; };
</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';
.reg { .reg {
padding-bottom: 50px; padding-bottom: 50px;
@ -213,17 +291,37 @@ export default {
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.reg { .reg {
h6 {
font-size: 1.6rem;
}
.step { .step {
li { li {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 1.1rem !important;
font-size: 0.9rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
.member-des {
font-size: 1rem;
}
.param {
li {
.name {
font-size: 0.95rem;
}
.name {
font-size: 0.8rem;
}
}
}
.btn { .btn {
width: 100%; width: 100%;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.1rem;
} }
} }
} }

109
src/pages/supplier/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="wrap index"> <div class="wrap index">
<div class="banner"> <div class="banner fadeInDown">
<h6>教育数字化产品供应商</h6> <h6>教育数字化产品供应商</h6>
<p class="text">与3000所高校共建数字化教育产业未来</p> <p class="text">与3000所高校共建数字化教育产业未来</p>
<el-button class="dev" <el-button class="dev"
@ -8,7 +8,7 @@
@click="openDev">登录供应商平台</el-button> @click="openDev">登录供应商平台</el-button>
</div> </div>
<!-- 关于教育产业数字化产品供应商 --> <!-- 关于教育产业数字化产品供应商 -->
<div class="about"> <div class="about fadeInUp">
<div class="inner"> <div class="inner">
<div class="text">如果您是从事高职、本科市场相应数字化场景的软件、硬件研发、生产或代理的供应商；如果您正面临拓展渠道难、精准触达客户难、售前支持难、按时回款难等发展瓶颈；请加入职站商城，让您的产品轻松走进全国院校。</div> <div class="text">如果您是从事高职、本科市场相应数字化场景的软件、硬件研发、生产或代理的供应商；如果您正面临拓展渠道难、精准触达客户难、售前支持难、按时回款难等发展瓶颈；请加入职站商城，让您的产品轻松走进全国院校。</div>
@ -61,17 +61,17 @@
<!-- 我们提供的支持 --> <!-- 我们提供的支持 -->
<div class="sup"> <div class="sup">
<div class="inner"> <div class="inner">
<h6 class="i-title">我们提供的支持</h6> <h6 class="i-title fadeInLeft">我们提供的支持</h6>
<ul class="list"> <ul class="list">
<li> <li class="fadeInDown0">
<h6>生产力赋能</h6> <h6>生产力赋能</h6>
<p class="text">公司打造的产业中台将赋能联盟厂家高效地进行软件产品的开发与交付。</p> <p class="text">公司打造的产业中台将赋能联盟厂家高效地进行软件产品的开发与交付。</p>
</li> </li>
<li> <li class="fadeInDown1">
<h6>渠道与运营服务赋能</h6> <h6>渠道与运营服务赋能</h6>
<p class="text">公司会为联盟厂家提供公共的渠道支撑和客户获取，帮助厂家获得客户成交，降低产品厂家的市场压力。</p> <p class="text">公司会为联盟厂家提供公共的渠道支撑和客户获取，帮助厂家获得客户成交，降低产品厂家的市场压力。</p>
</li> </li>
<li> <li class="fadeInDown2">
<h6>创业技术孵化服务</h6> <h6>创业技术孵化服务</h6>
<p class="text">对于还在创业阶段的产品创业者，我司还提供初始的技术外包支撑服务，帮助产品创业者最小成本的完成产品的落地。</p> <p class="text">对于还在创业阶段的产品创业者，我司还提供初始的技术外包支撑服务，帮助产品创业者最小成本的完成产品的落地。</p>
</li> </li>
@ -81,21 +81,21 @@
<!-- 产品供应商需要具备的条件 --> <!-- 产品供应商需要具备的条件 -->
<div class="con"> <div class="con">
<div class="inner"> <div class="inner">
<h6 class="i-title">产品供应商需要具备的条件</h6> <h6 class="i-title fadeInRight">产品供应商需要具备的条件</h6>
<ul class="list"> <ul class="list">
<li> <li class="fadeInDown0">
<img src="@/assets/images/dev/con1.png" <img src="@/assets/images/dev/con1.png"
alt=""> alt="">
<h6>产品研发</h6> <h6>产品研发</h6>
<p class="text">具备独立设计、开发教育产业数字化产品的能力</p> <p class="text">具备独立设计、开发教育产业数字化产品的能力</p>
</li> </li>
<li> <li class="fadeInDown1">
<img src="@/assets/images/dev/con2.png" <img src="@/assets/images/dev/con2.png"
alt=""> alt="">
<h6>产品运维 </h6> <h6>产品运维 </h6>
<p class="text">具备独立的产品运维支持的能力</p> <p class="text">具备独立的产品运维支持的能力</p>
</li> </li>
<li> <li class="fadeInDown2">
<img src="@/assets/images/dev/con3.png" <img src="@/assets/images/dev/con3.png"
alt=""> alt="">
<h6>专业服务</h6> <h6>专业服务</h6>
@ -105,15 +105,15 @@
</div> </div>
</div> </div>
<div class="profit"> <div class="profit">
<div class="item1">产品供应商受益</div> <div class="item1 fadeInUp">产品供应商受益</div>
<div class="item2">我们将与产品供应商共享教育产业数字化蓝海的巨大收益！</div> <div class="item2 fadeInDown">我们将与产品供应商共享教育产业数字化蓝海的巨大收益！</div>
</div> </div>
<!-- 联系 --> <!-- 联系 -->
<div class="contact"> <div class="contact">
<img class="love" <img class="love fadeInRight"
src="@/assets/images/love.png" src="@/assets/images/love.png"
alt=""> alt="">
<img class="contact-info" <img class="contact-info fadeInLeft"
src="@/assets/images/contact-info.png" src="@/assets/images/contact-info.png"
alt=""> alt="">
</div> </div>
@ -134,8 +134,8 @@
</template> </template>
<script> <script>
import ScrollReveal from 'scrollreveal'
export default { export default {
name: 'cityPartner',
data () { data () {
return { return {
qrcodeVisible: false, qrcodeVisible: false,
@ -145,8 +145,87 @@ export default {
mounted () { mounted () {
const height = (window.innerHeight - 758) / 2 const height = (window.innerHeight - 758) / 2
this.qrcodeTop = (height > 0 ? height : 0) + 'px' this.qrcodeTop = (height > 0 ? height : 0) + 'px'
this.initAnimate()
}, },
methods: { methods: {
// 初始化动画
initAnimate () {
const sr = ScrollReveal()
sr.reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
// origin: 'bottom', // 动画开始的方向
distance: '50px',//移动距离
duration: 1000, // 动画持续时间
scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInUp', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInDown', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown0', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown1', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 100,
// scale: 0.8,
// viewFactor: 100,
})
ScrollReveal().reveal('.fadeInDown2', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: 'bottom', // 动画开始的方向
distance: '150px',//移动距离
duration: 1000, // 动画持续时间
delay: 200,
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInLeft', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
sr.reveal('.fadeInRight', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
distance: '100px',//移动距离
duration: 1000, // 动画持续时间
// scale: 0.8,
// viewFactor: 100,
})
},
openDev () { openDev () {
window.open('https://dev.huorantech.cn') window.open('https://dev.huorantech.cn')
} }

Write Preview
Loading…
Cancel
Save