Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 87c34a97 by hanjixin
Options

bug

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