Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 87c34a97 by hanjixin
Options

bug

parent 11fbe5d0
Showing with 277 additions and 154 deletions
src/templates/companyCulture/pages/notice.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="title">{{getValue('companyName')}}</div> <div class="title">{{getValue('companyName')}}</div>
<div <div
class="ani en_name infinite" class=" en_name"
swiper-animate-effect="my-pulse" swiper-animate-effect="my-pulse"
swiper-animate-duration="3s" swiper-animate-duration="3s"
swiper-animate-delay="1s" swiper-animate-delay="1s"
...@@ -202,14 +202,6 @@ export default { ...@@ -202,14 +202,6 @@ export default {
}, },
{ {
el: ".en_name .left-word", el: ".en_name .left-word",
style: {
opacity: 0,
translateX: "-2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
...@@ -236,50 +228,7 @@ export default { ...@@ -236,50 +228,7 @@ export default {
} }
}, },
{ {
el: ".en_name .right-word",
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 500,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".zh_name", el: ".zh_name",
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 0,
duration: 0
},
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
...@@ -296,7 +245,7 @@ export default { ...@@ -296,7 +245,7 @@ export default {
scale: "1" scale: "1"
}, },
options: { options: {
delay: 3000, delay: 2000,
duration: 1000 duration: 1000
} }
}, },
......
src/templates/companyCulture/pages/schedule.vue
...@@ -6,48 +6,36 @@ ...@@ -6,48 +6,36 @@
<div class="logo"> <div class="logo">
<img :src="getValue('companyLogo')" /> <img :src="getValue('companyLogo')" />
</div> </div>
<div <div class="ani sanjiaoBg"
class="ani sanjiaoBg" swiper-animate-effect="slideInRight"
swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s"
swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
swiper-animate-delay="0s"
></div>
<div class="title">{{getValue('companyName')}}</div> <div class="title">{{getValue('companyName')}}</div>
<div <div class=" en_name "
class="ani en_name infinite" swiper-animate-effect="my-pulse"
swiper-animate-effect="my-pulse" swiper-animate-duration="3s"
swiper-animate-duration="3s" swiper-animate-delay="1s">
swiper-animate-delay="1s" <div class="left-word"
> swiper-animate-effect="fadeInLeftBig"
<div swiper-animate-duration="3s"
class="left-word animated fadeInLeftBig" swiper-animate-delay="1s">Daily Events</div>
swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
>Daily Events</div>
</div> </div>
<div <div class="ani zh_name"
class="ani zh_name" swiper-animate-effect="zoomIn"
swiper-animate-effect="zoomIn" swiper-animate-duration="1s"
swiper-animate-duration="1s" swiper-animate-delay="1s">
swiper-animate-delay="1s"
>
<div class="right-word">日程安排</div> <div class="right-word">日程安排</div>
</div> </div>
<div <div class="ani"
class="ani" swiper-animate-effect="fadeIn"
swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
swiper-animate-duration="1s" swiper-animate-delay=".5s">
swiper-animate-delay=".5s"
>
<div class="ani container-schedule"> <div class="ani container-schedule">
<div <div class="ani schedule-content"
class="ani schedule-content" swiper-animate-effect="fadeIn"
swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
swiper-animate-duration="1s" swiper-animate-delay=".5s">
swiper-animate-delay=".5s"
>
<div class="schedule-item item-title"> <div class="schedule-item item-title">
<div class="item-td"> <div class="item-td">
内容 内容
...@@ -66,23 +54,22 @@ ...@@ -66,23 +54,22 @@
<span class="en">Time</span> <span class="en">Time</span>
</div> </div>
</div> </div>
<transition-group <transition-group v-on:before-enter="TbeforeEnter"
v-on:before-enter="beforeEnter" v-on:enter="Tenter"
v-on:enter="enter" v-on:leave="Tleave"
v-on:leave="leave" v-bind:css="false"
v-bind:css="false" tag="ul">
tag="ul" <div v-for="(item, index) in computeListData"
> :key="item.id"
<div v-for="(item, index) in computeListData" :key="item.id" :data-index="index"> :data-index="index">
<!-- :style="{ <!-- :style="{
'transition-delay':( index + 1) * 200 + 'ms' 'transition-delay':( index + 1) * 200 + 'ms'
}"--> }"-->
<div <div class="ani schedule-item"
class="ani schedule-item" swiper-animate-effect="slideInRight"
swiper-animate-effect="slideInRight" swiper-animate-duration="1s"
swiper-animate-duration="1s" :swiper-animate-delay="2 + ( index + 1) * 200 + 'ms'"
:swiper-animate-delay="2 + ( index + 1) * 200 + 'ms'" >
>
<div class="item-td">{{item.content}}</div> <div class="item-td">{{item.content}}</div>
<div class="item-td">{{item.address}}</div> <div class="item-td">{{item.address}}</div>
<div class="item-td">{{item.department}}</div> <div class="item-td">{{item.department}}</div>
...@@ -100,114 +87,301 @@ ...@@ -100,114 +87,301 @@
</template> </template>
<script> <script>
import methods from '../methods' import methods from "../methods";
import Date from '@/framework/components/Date/index' import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
export default { export default {
name: 'schedule', name: "schedule",
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit', 'activeIndex'], props: ["schemaData", "page", "isEditMode", "cancelEdit", "activeIndex"],
mixins: [methods], mixins: [methods],
components: { components: {
Date Date
}, },
watch: { watch: {
schemaData: function () { schemaData: function() {
this.listData = this.schemaData.scheduleList this.listData = this.schemaData.scheduleList;
} }
}, },
created () { created() {
// console.log(this.list); // console.log(this.list);
this.listData = this.schemaData.scheduleList this.listData = this.schemaData.scheduleList;
setInterval(() => { setInterval(() => {
this.listData = this.schemaData.scheduleList this.listData = this.schemaData.scheduleList;
if (this.activeIndex === this.page && !this.isEditMode) { if (this.activeIndex === this.page && !this.isEditMode) {
this.listData = JSON.parse(JSON.stringify(this.listData)) this.listData = JSON.parse(JSON.stringify(this.listData));
} }
}, 8000) }, 8000);
},
mounted() {
this.enter();
}, },
mounted () {}, data() {
data () {
return { return {
currentIndex: '', currentIndex: "",
date: '2019.07.04', date: "2019.07.04",
img: '', img: "",
currentIndex: '', currentIndex: "",
listData: [ listData: [
{ {
content: '龙湖地产来访', content: "龙湖地产来访",
address: '22-1会议室', address: "22-1会议室",
department: '智慧营销', department: "智慧营销",
time: '09:30 AM -12:00 AM', time: "09:30 AM -12:00 AM",
index: 1 index: 1
}, },
{ {
content: 'Vmatrix研发进度', content: "Vmatrix研发进度",
address: '21-03会议室', address: "21-03会议室",
department: '数字理想', department: "数字理想",
time: '09:30 AM -10:00 AM', time: "09:30 AM -10:00 AM",
index: 2 index: 2
}, },
{ {
content: '数字理想前端面试', content: "数字理想前端面试",
address: '22-1会议室', address: "22-1会议室",
department: '数字理想', department: "数字理想",
time: '09:30 AM -12:00 AM', time: "09:30 AM -12:00 AM",
index: 3 index: 3
}, },
{ {
content: '销售总监面试', content: "销售总监面试",
address: '22-1会议室', address: "22-1会议室",
department: '总经办', department: "总经办",
time: '09:30 AM -12:00 AM', time: "09:30 AM -12:00 AM",
index: 4 index: 4
} }
],
keyframes: [
{
el: ".sanjiaoBg",
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 0,
duration: 1000
}
},
leave: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 1000,
duration: 1000
}
}
},
{
el: ".container-schedule",
style: {
opacity: 0
},
options: {
delay: 0,
duration: 0
},
enterBefore: {
style: {
opacity: 0
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1
},
options: {
delay: 1000,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".en_name .left-word",
enterBefore: {
style: {
opacity: 0,
translateX: "-2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 500,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".schedule-item",
enterBefore: {
style: {
opacity: 0,
translateX: "2000px"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
translateX: "0px"
},
options: {
delay: 500,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
},
{
el: ".zh_name",
enterBefore: {
style: {
opacity: 0,
scale: "0.3"
},
options: {
delay: 0,
duration: 0
}
},
enter: {
style: {
opacity: 1,
scale: "1"
},
options: {
delay: 2000,
duration: 1000
}
},
leave: {
style: {},
options: {}
}
}
] ]
} };
}, },
computed: { computed: {
computeListData () { computeListData() {
return this.listData.map((item, index) => { return this.listData.map((item, index) => {
var obj = {} var obj = {};
var random = parseInt(Math.random() * 1000) var random = parseInt(Math.random() * 1000);
// console.log(random); // console.log(random);
obj.id = random obj.id = random;
// console.log({...item,...obj}) // console.log({...item,...obj})
return { ...item, ...obj } return { ...item, ...obj };
}) });
} }
}, },
methods: { methods: {
beforeEnter (el) { enter() {
el.style.opacity = 0 var countEnterTime = 0;
this.keyframes.map(item => {
var currentTime =
item.enter.options.duration + item.enter.options.delay;
countEnterTime =
countEnterTime < currentTime ? currentTime : countEnterTime;
item.enterBefore &&
$(item.el)
.velocity(item.enterBefore.style, item.enterBefore.options)
.velocity(item.enter.style, item.enter.options);
});
setTimeout(() => {
Scene.enterAfter({
nextDuration: 5000
});
}, countEnterTime);
console.log(countEnterTime, "countEnterTime");
// this.keyframes.map(item => {
// item.enter && $(item.el).velocity(item.enter.style, item.enter.options);
// });
},
leave() {
this.keyframes.map(item => {
item.leave && $(item.el).velocity("reverse");
});
},
TbeforeEnter(el) {
el.style.opacity = 0;
$.Velocity( $.Velocity(
el, el,
{ {
opacity: 0, opacity: 0,
rotateX: '-180deg' rotateX: "-180deg"
}, },
{ {
duration: 0 duration: 0
} }
) );
// el.style.transform = 'rotateX(-180deg)' // el.style.transform = 'rotateX(-180deg)'
}, },
enter (el, done) { Tenter(el, done) {
window.$.Velocity( window.$.Velocity(
el, el,
{ opacity: 1, rotateX: '0deg' }, { opacity: 1, rotateX: "0deg" },
{ duration: 1000, delay: el.dataset.index * 250, easing: 'easeInSine' } { duration: 1000, delay: el.dataset.index * 250, easing: "easeInSine" }
) );
}, },
leave (el, done) { Tleave(el, done) {
window.$.Velocity( window.$.Velocity(
el, el,
{ {
opacity: 0 opacity: 0
}, },
{ complete: done } { complete: done }
) );
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment