Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 46408f30 by hank
Options

动画修改

parent 87c34a97
Showing with 167 additions and 456 deletions
src/templates/companyCulture/index.vue
...@@ -98,34 +98,25 @@ export default { ...@@ -98,34 +98,25 @@ export default {
}, },
beforeDestroy() {}, beforeDestroy() {},
mounted() { mounted() {
// this.sence = new Scene({
// pages: this.pages,
// keyframes: {
// notice: [
// {
// el: "",
// style: {},
// options: {}
// }
// ],
// welcome: [],
// schedule: []
// }
// });
Scene.EventBus.on("enterAfter", e => { Scene.EventBus.on("enterAfter", e => {
console.log(e, "enterAfter"); console.log(e, "enterAfter");
setTimeout( if (this.sliderActiveIndex == e.page) {
() => { setTimeout(
this.$refs.child[0].leave(); () => {
setTimeout(() => { this.$refs.child[0].leave();
this.swiper.slideTo(this.sliderActiveIndex + 1, 1000, false); setTimeout(() => {
}, 1500) var index = this.sliderActiveIndex;
}, console.log(this.sliderActiveIndex + 1 >= this.pages.length);
e.nextDuration ? e.nextDuration : 1000 if (this.sliderActiveIndex + 1 >= this.pages.length) {
); index = -1;
}); }
Scene.EventBus.on("change", function(e) { console.log(index);
console.log(e, "change"); this.swiper.slideTo(index + 1, 1000, false);
}, 1500);
},
e.nextDuration ? e.nextDuration : 1000
);
}
}); });
}, },
created() { created() {
...@@ -149,7 +140,7 @@ export default { ...@@ -149,7 +140,7 @@ export default {
vm.getAllData(); vm.getAllData();
} }
if (isObj && e.data["type"] == "goPage") { if (isObj && e.data["type"] == "goPage") {
vm.swiper.slideTo(parseInt(e.data.index), 1000, false); vm.swiper.slideTo(parseInt(e.data.index), 500, false);
} }
}); });
this.swiperOption = { this.swiperOption = {
......
src/templates/companyCulture/keyframe.js 0 → 100644
export function enter (callback) {
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)
})
callback && callback(countEnterTime)
}
export function leave (callback) {
var countEnterTime = 0
this.keyframes.map(item => {
item.leave && $(item.el).velocity('reverse')
})
callback && callback(countEnterTime)
}
src/templates/companyCulture/mixin.js
import data from './schemaData2.js' import data from './schemaData.js'
import editMethod from './editMethod.js' import editMethod from './editMethod.js'
import requireIcons from '@/icons/requireIcons' import requireIcons from '@/icons/requireIcons'
// console.log(JSON.stringify(data)) // console.log(JSON.stringify(data))
......
src/templates/companyCulture/pages/notice.vue
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
<div class="title">{{getValue('companyName')}}</div> <div class="title">{{getValue('companyName')}}</div>
<div <div
class=" en_name" 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"
> >
<div <div
class="left-word animated fadeInLeftBig" class="left-word "
swiper-animate-effect="fadeInLeftBig" swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s" swiper-animate-duration="3s"
swiper-animate-delay="1s" swiper-animate-delay="1s"
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
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"; import Scene from "@/framework/utils/sence";
import { enter, leave } from '../keyframe'
export default { export default {
name: "notice", name: "notice",
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ["schemaData", "page", "isEditMode", "cancelEdit"],
...@@ -89,36 +90,21 @@ export default { ...@@ -89,36 +90,21 @@ export default {
// console.log(this.list); // console.log(this.list);
}, },
methods: { methods: {
enter() { enter,
var countEnterTime = 0; leave
this.keyframes.map(item => { },
var currentTime = mounted() {
item.enter.options.duration + item.enter.options.delay; this.enter((countEnterTime) => {
countEnterTime = this.timer = setTimeout(() => {
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({ Scene.enterAfter({
nextDuration: 5000 nextDuration: 5000,
page: this.page
}); });
}, countEnterTime); }, 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");
});
}
}, },
mounted() { destroyed() {
this.enter(); clearTimeout(this.timer)
}, },
data() { data() {
return { return {
...@@ -218,7 +204,7 @@ export default { ...@@ -218,7 +204,7 @@ export default {
translateX: "0px" translateX: "0px"
}, },
options: { options: {
delay: 500, delay: 1000,
duration: 1000 duration: 1000
} }
}, },
......
src/templates/companyCulture/pages/schedule.vue
...@@ -6,36 +6,48 @@ ...@@ -6,36 +6,48 @@
<div class="logo"> <div class="logo">
<img :src="getValue('companyLogo')" /> <img :src="getValue('companyLogo')" />
</div> </div>
<div class="ani sanjiaoBg" <div
swiper-animate-effect="slideInRight" class="ani sanjiaoBg"
swiper-animate-duration="0.5s" swiper-animate-effect="slideInRight"
swiper-animate-delay="0s"></div> swiper-animate-duration="0.5s"
swiper-animate-delay="0s"
></div>
<div class="title">{{getValue('companyName')}}</div> <div class="title">{{getValue('companyName')}}</div>
<div class=" en_name " <div
swiper-animate-effect="my-pulse" class="en_name"
swiper-animate-duration="3s" swiper-animate-effect="my-pulse"
swiper-animate-delay="1s"> swiper-animate-duration="3s"
<div class="left-word" swiper-animate-delay="1s"
swiper-animate-effect="fadeInLeftBig" >
swiper-animate-duration="3s" <div
swiper-animate-delay="1s">Daily Events</div> class="left-word"
swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
>Daily Events</div>
</div> </div>
<div class="ani zh_name" <div
swiper-animate-effect="zoomIn" class="ani zh_name"
swiper-animate-duration="1s" swiper-animate-effect="zoomIn"
swiper-animate-delay="1s"> swiper-animate-duration="1s"
swiper-animate-delay="1s"
>
<div class="right-word">日程安排</div> <div class="right-word">日程安排</div>
</div> </div>
<div class="ani" <div
swiper-animate-effect="fadeIn" class="ani"
swiper-animate-duration="1s" swiper-animate-effect="fadeIn"
swiper-animate-delay=".5s"> swiper-animate-duration="1s"
swiper-animate-delay=".5s"
>
<div class="ani container-schedule"> <div class="ani container-schedule">
<div class="ani schedule-content" <div
swiper-animate-effect="fadeIn" class="ani schedule-content"
swiper-animate-duration="1s" swiper-animate-effect="fadeIn"
swiper-animate-delay=".5s"> swiper-animate-duration="1s"
swiper-animate-delay=".5s"
>
<div class="schedule-item item-title"> <div class="schedule-item item-title">
<div class="item-td"> <div class="item-td">
内容 内容
...@@ -54,22 +66,23 @@ ...@@ -54,22 +66,23 @@
<span class="en">Time</span> <span class="en">Time</span>
</div> </div>
</div> </div>
<transition-group v-on:before-enter="TbeforeEnter" <transition-group
v-on:enter="Tenter" v-on:before-enter="TbeforeEnter"
v-on:leave="Tleave" v-on:enter="Tenter"
v-bind:css="false" v-on:leave="Tleave"
tag="ul"> v-bind:css="false"
<div v-for="(item, index) in computeListData" tag="ul"
:key="item.id" >
:data-index="index"> <div v-for="(item, index) in computeListData" :key="item.id" :data-index="index">
<!-- :style="{ <!-- :style="{
'transition-delay':( index + 1) * 200 + 'ms' 'transition-delay':( index + 1) * 200 + 'ms'
}"--> }"-->
<div class="ani schedule-item" <div
swiper-animate-effect="slideInRight" class="ani schedule-item"
swiper-animate-duration="1s" swiper-animate-effect="slideInRight"
:swiper-animate-delay="2 + ( index + 1) * 200 + 'ms'" swiper-animate-duration="1s"
> :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>
...@@ -90,6 +103,7 @@ ...@@ -90,6 +103,7 @@
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"; import Scene from "@/framework/utils/sence";
import { enter, leave } from "../keyframe";
export default { export default {
name: "schedule", name: "schedule",
...@@ -114,7 +128,17 @@ export default { ...@@ -114,7 +128,17 @@ export default {
}, 8000); }, 8000);
}, },
mounted() { mounted() {
this.enter(); this.enter(countEnterTime => {
this.timer = setTimeout(() => {
Scene.enterAfter({
nextDuration: 12000,
page: this.page
});
}, countEnterTime);
});
},
destroyed() {
clearTimeout(this.timer)
}, },
data() { data() {
return { return {
...@@ -323,33 +347,8 @@ export default { ...@@ -323,33 +347,8 @@ export default {
} }
}, },
methods: { methods: {
enter() { enter,
var countEnterTime = 0; leave,
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) { TbeforeEnter(el) {
el.style.opacity = 0; el.style.opacity = 0;
$.Velocity( $.Velocity(
......
src/templates/companyCulture/pages/welcome.vue
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
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"; import Scene from "@/framework/utils/sence";
import { enter, leave } from '../keyframe'
export default { export default {
name: "welcome", name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ["schemaData", "page", "isEditMode", "cancelEdit"],
...@@ -63,38 +63,25 @@ export default { ...@@ -63,38 +63,25 @@ export default {
// console.log(this.list); // console.log(this.list);
}, },
mounted() { mounted() {
this.enter(); this.enter((countEnterTime) => {
this.timer = setTimeout(() => {
Scene.enterAfter({
nextDuration: 10000,
page: this.page
});
}, countEnterTime);
});
},
destroyed() {
clearTimeout(this.timer)
}, },
methods: { methods: {
eventChange() { eventChange() {
Scene.EventBus.emit("change", { aa: 12 }); Scene.EventBus.emit("change", { aa: 12 });
this.leave() // this.leave();
}, },
enter() { enter,
var countEnterTime = 0 leave
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: 10000
})
}, 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");
});
}
}, },
data() { data() {
return { return {
......
src/templates/companyCulture/schemaData.js
export default [
{
name: '欢迎页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'welcome',
list: [
{
type: 'image',
name: '企业logo',
value: '',
description: '请上传png格式企业logo',
style: {
color: 'white'
},
default: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
}
},
{
type: 'text',
name: '企业名称',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '迈动互联（北京）信息科技有限公司'
}
},
{
type: 'text',
name: '中文企业欢迎语',
value: '',
description: '请输入企业欢迎语',
style: {
color: 'white'
},
default: {
value: '欢迎龙湖信息中心领导参观指导'
}
},
{
type: 'text',
name: '英文企业欢迎语',
value: '',
description: '请输入企业英文欢迎语',
style: {
color: 'white'
},
default: {
value: 'WELCOME'
}
},
{
type: 'text',
name: '企业英文名称',
value: '',
description: '请输入企业英文名称',
style: {
color: 'white'
},
default: {
value: 'MAXROCKY'
}
}
]
},
{
name: '通知页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'notice',
list: [
{
type: 'image',
name: '企业logo',
value: '',
description: '请上传png格式企业logo',
style: {
color: 'white'
},
default: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
}
},
{
type: 'text',
name: '企业名称',
value: '',
description: '请输入企业名称',
style: {
color: 'white'
},
default: {
value: '迈动互联（北京）信息科技有限公司'
}
},
{
type: 'text',
name: '通知标题',
value: '',
description: '请输入通知标题',
style: {
color: 'white'
},
default: {
value: '2019年端午节放假通知'
}
},
{
type: 'text',
name: '通知昵称',
value: '',
description: '请输入通知昵称',
style: {
color: 'white'
},
default: {
value: 'Dear All：'
}
},
{
type: 'text',
name: '企业名称',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '根据国家2019年部分节假日安排，结合公司实际情况，劳动节放假时间安排如下：2019年6月7日至6月9日放假，共3天。6月10（星期一）上班。\r\n注意事项：\r\n 1、放假期间，请各部门自行妥善安排好放假前工作，做好安全防范措施。\r\n2、放假期间外出的员工，请注意人身财产安全.\r\n \r\n \r\n \t 特此通知，请知悉。'
}
}
]
},
{
name: '日程页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'schedule',
list: [
{
type: 'image',
name: '企业logo',
value: '',
description: '请上传png格式企业logo',
style: {
color: 'white'
},
default: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
}
},
{
type: 'text',
name: '企业名称',
value: '',
description: '请输入企业名称',
style: {
color: 'white'
},
default: {
value: '迈动互联（北京）信息科技有限公司'
}
},
{
type: 'list',
name: '日程列表',
modeSchema: [ // 创建子项的Schema列表
{
content: {
type: 'text',
name: '内容', // 字段名称
value: '', // 字段值
description: '请输入内容', // 用户填写时字段提示语
style: { // 样式
color: '' // 目前只允许更改颜色
},
default: { // 默认
value: '脉动互联'
}
},
address: {
type: 'text',
name: '地点', // 字段名称
value: '', // 字段值
description: '', // 用户填写时字段提示语
style: { // 样式
color: '' // 目前只允许更改颜色
},
default: { // 默认
value: '会议室'
}
},
department: {
type: 'text',
name: '部门', // 字段名称
value: '', // 字段值
description: '', // 用户填写时字段提示语
style: { // 样式
color: '' // 目前只允许更改颜色
},
default: { // 默认
value: '总裁办'
}
},
time: {
type: 'text',
name: '时间', // 字段名称
value: '', // 字段值
description: '', // 用户填写时字段提示语
style: { // 样式
color: '' // 目前只允许更改颜色
},
default: { // 默认
value: '09:30 AM - 10:00 AM'
}
}
}
],
list: [
{
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',
index: 2
},
{
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',
index: 4
}
]
} import defaultData from './defaultData'
] import itemList from './itemList'
} import templateInfo from './templateInfo'
// { export default {
// name: '照片墙', templateInfo,
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg', // defaultData,
// component: 'photoWall', pageList: [
// list: [ {
// { name: '欢迎页面',
// type: 'text', thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb1.jpg',
// name: '楼层', component: 'welcome',
// value: '', defaultData: defaultData.welcome,
// description: '', schemaData: defaultData.welcome,
// style: { itemList: itemList.welcome
// color: 'white' },
// }, {
// default: { name: '通知页面',
// value: '2F' thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb3.jpg',
// } component: 'notice',
// } defaultData: defaultData.notice,
// ] schemaData: defaultData.notice,
// } itemList: itemList.notice
] },
{
name: '日程页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb2.jpg',
component: 'schedule',
defaultData: defaultData.schedule,
schemaData: defaultData.schedule,
itemList: itemList.schedule
}
]
}
src/templates/companyCulture/schemaData2.js deleted 100644 → 0
import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
export default {
templateInfo,
// defaultData,
pageList: [
{
name: '欢迎页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb1.jpg',
component: 'welcome',
defaultData: defaultData.welcome,
schemaData: defaultData.welcome,
itemList: itemList.welcome
},
{
name: '通知页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb3.jpg',
component: 'notice',
defaultData: defaultData.notice,
schemaData: defaultData.notice,
itemList: itemList.notice
},
{
name: '日程页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb2.jpg',
component: 'schedule',
defaultData: defaultData.schedule,
schemaData: defaultData.schedule,
itemList: itemList.schedule
}
]
}
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