Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit b8055dec by zhangmeng
Options

员工风采和发展历程

parent a3b4181a
Showing with 872 additions and 37 deletions
a.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
src/App.vue
......@@ -5,9 +5,10 @@
</template>
<script>
import page from "./templates/Employee/index";
// import page from "./templates/retail/index";
//import page from "./templates/Employee/index";
//import page from "./templates/retail/index";
// import page from './templates/listingInformation/index'
import page from './templates/development/index'
window.getQuery = function(key) {
var url = location.search; // 获取url中"?"符后的字串
var theRequest = new Object();
......
src/templates/Employee/itemList/employee.js
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
type: 'video',
name: '视频',
description: '请上传视频',
dataKey: 'video',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '中文企业欢迎语',
description: '请输入企业欢迎语',
dataKey: 'welcomeWordZh'
},
{
type: 'text',
name: '英文企业欢迎语',
description: '请输入企业英文欢迎语',
valueRule: '',
dataKey: 'welcomeWordEn'
},
{
type: 'text',
name: '企业英文名称',
description: '请输入企业英文名称',
valueRule: '',
dataKey: 'companyNameEn'
}
]
src/templates/Employee/pages/employee.vue
<template>
<div class="container">
<video :src="getValue('video')" autoplay="autoplay" loop="loop" muted="muted"></video>
<video ref="video" :src="getValue('video')" preload="auto" loop="loop" muted="muted" poster="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/employee/complyee.jpg"></video>
</div>
</template>
......@@ -17,7 +17,9 @@
console.log(this.schemaData)
},
methods: {
init(){
this.$refs['video'].play();
},
leave() {
console.log('leave')
// anime({
......@@ -157,6 +159,7 @@
mounted() {
console.log('mounted')
this.enterBefore()
this.init()
},
data() {
return {
......
src/templates/development/defaultData/development.js 0 → 100644
export default {
deveList: [{
picture: 'static/development/图层 3.png',
time: '2010/10/04',
name: '公司成立'
},
{
picture: 'static/development/图层 4.png',
time: '2010/12/08',
name: '公司内部产品研发成功'
},
{
picture: 'static/development/图层 5.png',
time: '2012/05/22',
name: '公司地址搬迁'
},
{
picture: 'static/development/图层 4.png',
time: '2014/09/21',
name: '公司内部产品研发成功'
},
{
picture: 'static/development/图层 3.png',
time: '2015/06/04',
name: '公司地址搬迁'
},
{
picture: 'static/development/图层 3.png',
time: '2010/10/04',
name: '公司成立'
},
{
picture: 'static/development/图层 4.png',
time: '2010/10/04',
name: '公司成立'
},
{
picture: 'static/development/图层 5.png',
time: '2010/10/04',
name: '公司成立'
},
{
picture: 'static/development/图层 4.png',
time: '2010/10/04',
name: '公司成立'
},
{
picture: 'static/development/图层 3.png',
time: '2010/10/04',
name: '公司成立'
}
]
}
\ No newline at end of file
src/templates/development/defaultData/index.js 0 → 100644
import development from './development'
export default {
development,
}
src/templates/development/editMethod.js 0 → 100644
export default {
setEditData (data) {
this.pages[data['page']]['list'][data.index].value =
data['value']
if (data['editObj']) {
this.list[data.index] = data['editObj']
this.pages[data['page']]['list'][data.index] =
data['editObj']
}
},
cancelEditAction () {
this.currentIndex = ''
this.cancelEdit = true
}
}
src/templates/development/index.vue 0 → 100644
<template>
<swiper :options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
@someSwiperEvent="callback"
style="width:1920px;height:1080px;">
<swiper-slide style="transform: translate3d(0,0,0)"
class="ani"
v-for="(page, index) in pages"
:key="index"
@load="loaded(index)">
<component v-if="index == sliderActiveIndex"
:is="page.component"
:ref="'child'+index"
@hook:mounted="loaded(index)"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"></component>
</swiper-slide>
<!-- <swiper-slide>
<div class="container">I'm Slide 2</div>
</swiper-slide>
<swiper-slide>
<div class="container">I'm Slide 3</div>
</swiper-slide>-->
</swiper>
</template>
<script>
import mixin from './mixin'
import 'swiper/dist/css/swiper.css'
import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from './pages/index.js'
import Message from '@/framework/tempalteMessage'
import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from 'timers'
export default {
name: 'page',
mixins: [mixin],
components: {
swiper,
swiperSlide,
...requireAllPage
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
methods: {
message (data) {
Message.send(data, '*')
},
loaded (index) {
this.$refs['child' + this.sliderActiveIndex][0].enter()
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
this.message(
{
type: 'edit',
item,
index
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
}
},
beforeDestroy () {},
mounted () {
Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then");
var index = this.sliderActiveIndex;
if (index >= this.pages.length - 1) {
index = -1;
console.log(index);
}
this.swiper.slideTo(index + 1, 1000, false);
});
});
// this.$refs['child'][0].enter().then(() => {
// })
},
created () {
var vm = this
Message.init(e => {
var isObj = typeof e.data === 'object'
if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data)
}
if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction()
}
if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index
}
if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data)
}
if (isObj && e.data['type'] == 'getList') {
vm.getAllData()
}
if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false)
}
})
this.swiperOption = {
effect: 'fade',
observer: true,
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: !getQuery('isEdit'),
/* slidesPerView: 1,
autoplay: !getQuery("isEdit")
? {
delay: 10000
}
: false, */
loop: false,
on: {
init () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画
}
},
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this);
}
}
}
}
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId
})
} else {
if (getQuery('isPreview')) {
} else {
// vm.getDefaulted();
}
}
},
data () {
return {
date: '',
img: '',
currentIndex: '',
isEditMode: true,
cancelEdit: false,
sliderActiveIndex: 0
}
}
}
</script>
<style lang="scss" scoped>
.glob-container {
// background-color: red;
// filter: url("#goo");
}
</style>
<style>
.swiper-slide {
/* width: 100% !important; */
}
</style>
src/templates/development/itemList/development.js 0 → 100644
export default [
{
type: 'list',
name: '企业发展历程列表',
modelSchema: [ // 创建子项的Schema列表
{
picture: {
type: 'image',
name: '图片', // 字段名称
description: '请上传图片' // 用户填写时字段提示语
},
time: {
type: 'text',
name: '开始时间', // 字段名称
description: '请输入开始时间', // 用户填写时字段提示语
default: { // 默认
value: '--/--/--'
}
},
name: {
type: 'text',
name: '事件名称', // 字段名称
description: '请输入事件名称', // 用户填写时字段提示语
default: { // 默认
value: ''
}
}
}
],
dataKey: 'deveList'
}
]
src/templates/development/itemList/index.js 0 → 100644
import development from './development'
export default {
development
}
src/templates/development/keyframe.js 0 → 100644
export function enter (callback) {
var countEnterTime = 0
var promiseAll = []
this.keyframes.map(item => {
var currentTime = item.enter.options.duration + item.enter.options.delay
countEnterTime =
countEnterTime < currentTime ? currentTime : countEnterTime
item.enterBefore &&
$.Velocity($(item.el), item.enterBefore.style, item.enterBefore.options)
if (!item.enter.options.loop) {
promiseAll.push(
$.Velocity($(item.el), item.enter.style, item.enter.options)
)
} else {
$.Velocity($(item.el), item.enter.style, item.enter.options)
}
})
// callback && callback(countEnterTime)
this.enterAfter()
return Promise.all(promiseAll)
}
export function leave (callback) {
var promiseAll = []
this.keyframes.map(item => {
item.leave && promiseAll.push($.Velocity($(item.el), 'reverse', {
duration: 1500
}))
})
return Promise.all(promiseAll)
}
src/templates/development/methods.js 0 → 100644
export default {
created () {
// console.log(this.schemaData)
window.addEventListener(
'message',
(e) => {
if (e.source != window.parent) return
if (typeof e.data === 'object' && e.data['type'] === 'editPage') {
if (this.page === e.data['page']) {
this.currentIndex = e.data['index']
}
}
},
false
)
},
watch: {
cancelEdit (value) {
console.log('cancels')
if (value === true) {
this.currentIndex = ''
this.$emit('update:cancelEdit', false)
}
}
},
methods: {
message (data) {
parent.postMessage(data, '*')
},
edit (index) {
if (getQuery('isEdit')) {
this.currentIndex = index
var item = this.list[index]
console.log(this.currentIndex)
this.message(
{
type: 'edit',
item,
index,
page: this.page
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
list: this.list
},
'*'
)
},
getValue (dataKey) {
return this.schemaData[dataKey] ? this.schemaData[dataKey]['value'] : ''
},
getStyle (index) {
return this.list[index] ? this.list[index]['style'] : ''
},
isEdited (index) {
return this.isEditMode && this.currentIndex === index ? 'isEdited' : ''
},
isEdit (index) {
return this.isEditMode ? 'isEdit' : ''
},
isAnimeted (index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate (timeStamp) {
let dateString = ''
let year = new Date(timeStamp).getFullYear()
let month =
new Date(timeStamp).getMonth() + 1 < 10
? '0' + (new Date(timeStamp).getMonth() + 1)
: new Date(timeStamp).getMonth() + 1
let date =
new Date(timeStamp).getDate() < 10
? '0' + new Date(timeStamp).getDate()
: new Date(timeStamp).getDate()
let hh =
new Date(timeStamp).getHours() < 10
? '0' + new Date(timeStamp).getHours()
: new Date(timeStamp).getHours()
let mm =
new Date(timeStamp).getMinutes() < 10
? '0' + new Date(timeStamp).getMinutes()
: new Date(timeStamp).getMinutes()
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + '.' + month + '.' + date
return dateString
// console.log(this.nowTime);
}
}
}
src/templates/development/mixin.js 0 → 100644
import data from './schemaData.js'
import editMethod from './editMethod.js'
import requireIcons from '@/icons/requireIcons'
console.log(JSON.stringify(data))
export default {
data: function () {
return {
pages: data.pageList,
sceneData: data.sceneData
}
},
methods: {
callback () {
console.log('callback')
},
getDefaulted () {
this.pages = this.pages.map(function (item) {
item.list.map(ele => {
return (ele = Object.assign(ele, ele.default))
})
return item
// (item = Object.assign(item, item.default));
})
},
getAllData () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
},
setAllData (data) {
this.pages = data.pages
},
...editMethod
},
mounted () {
function setZoom () {
var unit = 1920
var unit2 = 1080
var width = window.innerWidth
var height = window.innerHeight
var zoom = height / 1080
if (width / height <= 16 / 9) {
zoom = width / 1920
}
if (width / height >= 16 / 9) {
zoom = height / 1080
}
var container = document.querySelectorAll('.container')
for (let index = 0; index < container.length; index++) {
// container[index].style.transform = `scale(${zoom})`;
}
// console.log(zoom);
document.querySelector(
'.swiper-container'
).style.transform = `scale(${zoom})`
}
setZoom()
addEventListener('resize', setZoom, false)
},
created: function () {
console.log('我是mixin 的crteated')
}
}
src/templates/development/pages/development.vue 0 → 100644
<template>
<div class="container">
<P class="title">迈动互联（北京）信息科技有限公司企业发展历程</P>
<div class="movesmall">
<div class="movebig" ref="movebig" :style="'width:' + schemaData.deveList.length*3840/9 + 'px'" style="background: url(../../../../static/development/line5.png) left center;background-size: 360% 200%;">
<div v-for="(item,index) in schemaData.deveList" :key="index" :class="filterclass(index)" :style="filterleft(index)">
<img class="circlrline" src="static/development/1.png" />
<img class="establish" :src="item.picture" />
<p class="time">{{item.time}}</p>
<p class="complete">{{item.name}}</p>
</div>
</div>
</div>
<div class="codebox">
<img class="code" src="../../../../static/development/二维码.png" />
<p class="txt">扫码获取</p>
<p class="txt">更多模板</p>
</div>
</div>
</template>
<script>
import methods from '../methods'
import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence'
export default {
name: 'development',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
components: {},
created() {
console.log(this.schemaData)
},
methods: {
filterclass(index) {
var arr = ['pictureone', 'picturetwo', 'picturethree', 'picturefour', 'picturefive','picturesix',
'pictureseven','pictureeight','picturenine'];
const num = index % 9;
return arr[num]
},
filterleft(index) {
var arr = [{
left: 100,
top: 0
}, {
left: 532,
top: 371
}, {
left: 900,
top: 0
}, {
left: 1395,
top: 322
}, {
left: 1795,
top: 27
},{
left:2145,
top:322
},{
left:2640,
top:0
},{
left:3008,
top:371
},{
left:3340,
top:0
}];
var num = parseInt(index / 9)
var numtwo = parseInt(index % 9)
return `left:${num*3840+arr[numtwo].left}px;top:${arr[numtwo].top}px;`
},
leave() {
console.log('leave')
var PromiseAll = [
/*anime({
targets: '#mask-img-1 circle',
duration: 2000,
r: [2920, 0],
easing: 'easeOutQuad'
}).finished*/
]
var enPromise = Promise.all(PromiseAll)
return enPromise
},
enter() {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs['movebig'],
translateX: -this.schemaData.deveList.length*3840/9+1920,
loop: true,
duration: 20000/9*this.schemaData.deveList.length,
easing: 'linear',
complete:function(){
this.$refs['movebig'].css('opacity',0)
}
}).finished,
]
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll)
},
enterBefore() {
console.log('enterBefore')
},
enterAfter() {
}
},
mounted() {
console.log('mounted')
this.enterBefore()
},
data() {
return {
currentIndex: '',
deve: []
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 1920px;
height: 1080px;
background: url(../../../../static/development/bg.jpg);
position: absolute;
}
.title {
width: 100%;
height: 50px;
position: absolute;
line-height: 50px;
text-align: center;
top: 8%;
color: #284591;
font-size: 50px;
font-weight: bold;
}
.movesmall {
width: 100%;
height: 60%;
position: absolute;
top: 50%;
margin-top: -15%;
}
.movebig {
width: 1920px;
height: 100%;
position: absolute;
}
.developmentline {
position: absolute;
width: 1920px;
display: block;
top: 50%;
transform: translateY(-50%);
}
.pictureone {
width: 300px;
height: 250px;
position: absolute;
left: 200px;
word-wrap: break-word; word-break: normal;
}
.circlrline {
display: block;
height: 100%;
position: absolute;
}
.establish {
display: block;
width: 280px;
height: 180px;
position: absolute;
margin-left: 10px;
}
.time {
position: absolute;
top: 160px;
margin-left: 20px;
font-size: 30px;
color: #2A4792;
font-weight: bold;
}
.complete {
position: absolute;
top: 200px;
margin-left: 20px;
font-size: 20px;
color: #6F82B8;
}
.picturetwo {
width: 300px;
height: 250px;
position: absolute;
left: 532px;
top: 294px;
}
.picturethree {
width: 300px;
height: 250px;
position: absolute;
left: 900px;
}
.picturefour {
width: 300px;
height: 250px;
position: absolute;
left: 1395px;
top: 269px;
}
.picturefive {
width: 300px;
height: 250px;
position: absolute;
left: 1795px;
top: 27px;
}
.codebox {
width: 100px;
height: 170px;
position: absolute;
left: 50px;
bottom: 0px;
}
.code {
width: 100px;
height: 100px;
}
.txt {
width: 100%;
text-align: center;
font-weight: bold;
}
.picturesix {
width: 300px;
height: 250px;
position: absolute;
left: 2445px;
top: 269px;
}
.pictureseven{
width: 300px;
height: 250px;
position: absolute;
left: 2940px;
}
.pictureeight {
width: 300px;
height: 250px;
position: absolute;
left: 3308px;
top: 294px;
}
.picturenine {
width: 300px;
height: 250px;
position: absolute;
left: 3640px;
}
</style>
\ No newline at end of file
src/templates/development/pages/index.js 0 → 100644
const req = require.context('', false, /\.vue$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const pages = requireAll(req)
const re = /\.\/(.*)\.vue/
// console.log(req.keys(), 'requireContext')
const pagesObj = {}
pages.map((item, index) => {
// console.log(req.keys()[index].match(re)[1])
pagesObj[req.keys()[index].match(re)[1]] = item.default
return item
})
export default pagesObj
src/templates/development/sceneData.js 0 → 100644
export default {
schemaData: {},
itemList: []
}
src/templates/development/schemaData.js 0 → 100644
import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
export default {
templateInfo,
// defaultData,
pageList: [
{
name: '员工风采',
thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/development/%E4%BC%81%E4%B8%9A%E5%8E%86%E7%A8%8B.png',
component: 'development',
defaultData: defaultData.development,
schemaData: defaultData.development,
itemList: itemList.development
}
]
}
src/templates/development/templateInfo.js 0 → 100644
export default {
name: '企业文化模板'
}
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