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 {
},
beforeDestroy() {},
mounted() {
// this.sence = new Scene({
// pages: this.pages,
// keyframes: {
// notice: [
// {
// el: "",
// style: {},
// options: {}
// }
// ],
// welcome: [],
// schedule: []
// }
// });
Scene.EventBus.on("enterAfter", e => {
console.log(e, "enterAfter");
setTimeout(
() => {
this.$refs.child[0].leave();
setTimeout(() => {
this.swiper.slideTo(this.sliderActiveIndex + 1, 1000, false);
}, 1500)
},
e.nextDuration ? e.nextDuration : 1000
);
});
Scene.EventBus.on("change", function(e) {
console.log(e, "change");
if (this.sliderActiveIndex == e.page) {
setTimeout(
() => {
this.$refs.child[0].leave();
setTimeout(() => {
var index = this.sliderActiveIndex;
console.log(this.sliderActiveIndex + 1 >= this.pages.length);
if (this.sliderActiveIndex + 1 >= this.pages.length) {
index = -1;
}
console.log(index);
this.swiper.slideTo(index + 1, 1000, false);
}, 1500);
},
e.nextDuration ? e.nextDuration : 1000
);
}
});
},
created() {
......@@ -149,7 +140,7 @@ export default {
vm.getAllData();
}
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 = {
......
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 requireIcons from '@/icons/requireIcons'
// console.log(JSON.stringify(data))
......
src/templates/companyCulture/pages/notice.vue
......@@ -15,13 +15,13 @@
<div class="title">{{getValue('companyName')}}</div>
<div
class=" en_name"
class="en_name"
swiper-animate-effect="my-pulse"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
>
<div
class="left-word animated fadeInLeftBig"
class="left-word "
swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
......@@ -78,6 +78,7 @@
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import { enter, leave } from '../keyframe'
export default {
name: "notice",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
......@@ -89,36 +90,21 @@ export default {
// console.log(this.list);
},
methods: {
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(() => {
enter,
leave
},
mounted() {
this.enter((countEnterTime) => {
this.timer = setTimeout(() => {
Scene.enterAfter({
nextDuration: 5000
nextDuration: 5000,
page: this.page
});
}, 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() {
this.enter();
destroyed() {
clearTimeout(this.timer)
},
data() {
return {
......@@ -218,7 +204,7 @@ export default {
translateX: "0px"
},
options: {
delay: 500,
delay: 1000,
duration: 1000
}
},
......
src/templates/companyCulture/pages/schedule.vue
......@@ -6,36 +6,48 @@
<div class="logo">
<img :src="getValue('companyLogo')" />
</div>
<div class="ani sanjiaoBg"
swiper-animate-effect="slideInRight"
swiper-animate-duration="0.5s"
swiper-animate-delay="0s"></div>
<div
class="ani sanjiaoBg"
swiper-animate-effect="slideInRight"
swiper-animate-duration="0.5s"
swiper-animate-delay="0s"
></div>
<div class="title">{{getValue('companyName')}}</div>
<div class=" en_name "
swiper-animate-effect="my-pulse"
swiper-animate-duration="3s"
swiper-animate-delay="1s">
<div class="left-word"
swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s"
swiper-animate-delay="1s">Daily Events</div>
<div
class="en_name"
swiper-animate-effect="my-pulse"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
>
<div
class="left-word"
swiper-animate-effect="fadeInLeftBig"
swiper-animate-duration="3s"
swiper-animate-delay="1s"
>Daily Events</div>
</div>
<div class="ani zh_name"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s">
<div
class="ani zh_name"
swiper-animate-effect="zoomIn"
swiper-animate-duration="1s"
swiper-animate-delay="1s"
>
<div class="right-word">日程安排</div>
</div>
<div class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay=".5s">
<div
class="ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay=".5s"
>
<div class="ani container-schedule">
<div class="ani schedule-content"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay=".5s">
<div
class="ani schedule-content"
swiper-animate-effect="fadeIn"
swiper-animate-duration="1s"
swiper-animate-delay=".5s"
>
<div class="schedule-item item-title">
<div class="item-td">
内容
......@@ -54,22 +66,23 @@
<span class="en">Time</span>
</div>
</div>
<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">
<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">
<!-- :style="{
'transition-delay':( index + 1) * 200 + 'ms'
}"-->
<div class="ani schedule-item"
swiper-animate-effect="slideInRight"
swiper-animate-duration="1s"
:swiper-animate-delay="2 + ( index + 1) * 200 + 'ms'"
>
<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>
......@@ -90,6 +103,7 @@
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import { enter, leave } from "../keyframe";
export default {
name: "schedule",
......@@ -114,7 +128,17 @@ export default {
}, 8000);
},
mounted() {
this.enter();
this.enter(countEnterTime => {
this.timer = setTimeout(() => {
Scene.enterAfter({
nextDuration: 12000,
page: this.page
});
}, countEnterTime);
});
},
destroyed() {
clearTimeout(this.timer)
},
data() {
return {
......@@ -323,33 +347,8 @@ export default {
}
},
methods: {
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");
});
},
enter,
leave,
TbeforeEnter(el) {
el.style.opacity = 0;
$.Velocity(
......
src/templates/companyCulture/pages/welcome.vue
......@@ -51,7 +51,7 @@
import methods from "../methods";
import Date from "@/framework/components/Date/index";
import Scene from "@/framework/utils/sence";
import { enter, leave } from '../keyframe'
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
......@@ -63,38 +63,25 @@ export default {
// console.log(this.list);
},
mounted() {
this.enter();
this.enter((countEnterTime) => {
this.timer = setTimeout(() => {
Scene.enterAfter({
nextDuration: 10000,
page: this.page
});
}, countEnterTime);
});
},
destroyed() {
clearTimeout(this.timer)
},
methods: {
eventChange() {
Scene.EventBus.emit("change", { aa: 12 });
this.leave()
// this.leave();
},
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: 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");
});
}
enter,
leave
},
data() {
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
}
]
}
]
}
// {
// name: '照片墙',
// thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
// component: 'photoWall',
// list: [
// {
// type: 'text',
// name: '楼层',
// value: '',
// description: '',
// style: {
// color: 'white'
// },
// default: {
// value: '2F'
// }
// }
// ]
// }
]
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
}
]
}
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