Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 9dc040e0 by zhangmeng
Options

产品介绍和欢迎语模板

parent b8055dec
Showing with 1594 additions and 4 deletions
src/App.vue
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
//import page from "./templates/Employee/index"; //import page from "./templates/Employee/index";
//import page from "./templates/retail/index"; //import page from "./templates/retail/index";
// import page from './templates/listingInformation/index' // import page from './templates/listingInformation/index'
import page from './templates/development/index' //import page from './templates/development/index'
//import page from './templates/product/index'
import page from './templates/welcome/index'
window.getQuery = function(key) { window.getQuery = function(key) {
var url = location.search; // 获取url中"?"符后的字串 var url = location.search; // 获取url中"?"符后的字串
var theRequest = new Object(); var theRequest = new Object();
......
src/templates/development/pages/development.vue
<template> <template>
<div class="container"> <div class="container" style='background:url(static/development/bg.jpg) center center repeat'>
<P class="title">迈动互联（北京）信息科技有限公司企业发展历程</P> <P class="title">迈动互联（北京）信息科技有限公司企业发展历程</P>
<div class="movesmall"> <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 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)"> <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="circlrline" src="static/development/1.png" />
<img class="establish" :src="item.picture" /> <img class="establish" :src="item.picture" />
...@@ -126,10 +126,12 @@ ...@@ -126,10 +126,12 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*$bg-image:url(static/development/bg.jpg);*/
.container { .container {
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: url(../../../../static/development/bg.jpg); /*background: $bg-image;*/
position: absolute; position: absolute;
} }
......
src/templates/product/defaultData/index.js 0 → 100644
import product from './product'
export default {
product,
}
src/templates/product/defaultData/product.js 0 → 100644
export default {
code: {
value: 'static/product/code.png'
},
model: {
value: 'RK3288'
},
name: {
value: '迷你网络机顶盒'
},
content: {
value:'数据说明：支持HDR：仅指盒子芯片支持HDR，体验HDR画质需屏幕支持HDR以及HDR内容源；4K解码60帧/秒：H.265 4K2K@60帧/秒指GPU的硬件性能，解码60帧只需1秒'
},
product: {
value: 'static/product/product.png'
},
}
\ No newline at end of file
src/templates/product/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/product/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) {
window.onload = () => {
setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter();
}, 1000);
}
},
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>
\ No newline at end of file
src/templates/product/itemList/index.js 0 → 100644
import product from './product'
export default {
product,
}
src/templates/product/itemList/product.js 0 → 100644
export default [
{
type: 'image',
name: '店家二维码',
description: '请上传二维码',
dataKey: 'code',
valueRule: ''
},
{
type: 'text',
name: '产品型号',
description: '请填写产品型号',
dataKey: 'model',
valueRule: ''
},
{
type: 'text',
name: '产品名称',
description: '请填写产品名称',
dataKey: 'name',
valueRule: ''
},
{
type: 'text',
name: '产品简介',
description: '请填写产品简介',
dataKey: 'content',
valueRule: ''
},
{
type: 'image',
name: '产品图片',
description: '请上传产品图片',
dataKey: 'product',
valueRule: ''
}
]
src/templates/product/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/product/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/product/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/product/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/product/pages/product.vue 0 → 100644
<template>
<div class="container" style='background: url(static/product/bg.png) no-repeat center center;background-size: 100% 100%;'>
<div class="codebg" ref='codebg' style="background: url(static/product/codebg.png)no-repeat center center;background-size: 100% 100%;;">
<img class="code" :src="getValue('code')" />
</div>
<div class="explain" ref='explain'>
<p>{{getValue('model')}}</p>
<p>{{getValue('name')}}</p>
<hr style="width: 28px;height: 3px;background: white;margin-top: 30px;" />
<label class="content">{{getValue('content')}}
</label>
<hr style="width: 150px;height: 1px;background: white;margin-top: 30px;" />
</div>
<img class="product" ref="product" :src="getValue('product')" />
<img class="codebot" ref="codebot" src="static/product/codebot.png" />
</div>
</template>
<script>
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
import { swiper, swiperSlide } from "vue-awesome-swiper";
let vm = null;
export default {
name: "retail",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created() {
console.log(this.schemaData);
vm = this;
},
methods: {
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
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["explain"],
translateX: 0,
opacity: 1,
duration: 2000
}).finished,
anime({
targets: this.$refs["codebg"],
translateX: 0,
opacity: 1,
delay: 500,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["codebot"],
translateX: 0,
opacity: 1,
delay: 500,
duration: 1000,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["product"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["item-price"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["code"],
translateY: 0,
opacity: 1,
duration: 1000,
rotate: 360,
delay: 1200,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
},
enterBefore() {
console.log("enterBefore");
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["explain"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["product"],
translateY: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["codebg"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["codebot"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["item-price"],
translateY: 1000,
opacity: 0,
duration: 0,
delay: 0
});
anime({
targets: this.$refs["code"],
translateY: 100,
opacity: 0,
duration: 0,
delay: 0
}); // setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
console.log("mounted");
this.enterBefore();
},
data() {
return {
currentIndex: "",
sliderActiveIndex: 0,
swiperOption: {
effect: "coverflow",
centeredSlides: true,
speed: 1000,
slidesPerView: "auto",
spaceBetween: 70,
loop: true,
autoplay: {
delay: 5000
},
on: {
slideChange() {
vm.sliderActiveIndex = this.realIndex;
if(vm.isEditMode) {
// $(".ani").css("visibility", "");
}
}
}
}
};
}
};
</script>
<style lang="scss" scopeds>
.container {
width: 1920px;
height: 1080px;
position: absolute;
.codebg {
width: 260px;
height: 260px;
position: absolute;
right: 0;
top: 0;
.code {
display: block;
width: 140px;
height: 140px;
margin-top: 45px;
margin-left: 82px;
}
}
.explain{
width:700px;
height: 600px;
position: absolute;
top: 50%;
margin-left: 120px;
margin-top: -300px;
word-wrap: break-word; word-break: normal;
p{
font-size: 50px;
color: white;
font-weight: bold;
}
.content{
display: block;
color: white;
font-size: 20px;
margin-top: 30px;
letter-spacing:6.5px
}
}
.product{
display: block;
position: absolute;
width: 766px;
height: 766px;
border-radius:900px;
top: 50%;
margin-top: -402px;
right: 223px;
}
.codebot{
display: block;
position: absolute;
width: 116px;
height: 150px;
bottom: 44px;
left: 60px;
}
}
</style>
\ No newline at end of file
src/templates/product/sceneData.js 0 → 100644
export default {
schemaData: {},
itemList: []
}
src/templates/product/schemaData.js 0 → 100644
import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
import sceneData from './sceneData.js'
export default {
templateInfo,
// defaultData,
sceneData,
pageList: [
{
name: '产品介绍',
thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/product/product.png',
component: 'product',
defaultData: defaultData.product,
schemaData: defaultData.product,
itemList: itemList.product
}
]
}
src/templates/product/templateInfo.js 0 → 100644
export default {
name: '企业文化模板'
}
src/templates/welcome/defaultData/index.js 0 → 100644
import welcome from './welcome'
export default {
welcome,
}
src/templates/welcome/defaultData/welcome.js 0 → 100644
export default {
name: {
value: '迈动互联（北京）信息科技有限公司'
},
content: {
value: '欢迎龙湖信息中心领导参观指导'
},
}
\ No newline at end of file
src/templates/welcome/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/welcome/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) {
setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter();
}, 1000);
},
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/welcome/itemList/index.js 0 → 100644
import welcome from './welcome'
export default {
welcome,
}
src/templates/welcome/itemList/welcome.js 0 → 100644
export default [
{
type: 'text',
name: '公司名称',
description: '请填写公司名称',
dataKey: 'name',
valueRule: ''
},
{
type: 'text',
name: '欢迎语',
description: '请填写欢迎语',
dataKey: 'content',
valueRule: ''
},
]
src/templates/welcome/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/welcome/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/welcome/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/welcome/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/welcome/pages/welcome.vue 0 → 100644
<template>
<div class="container">
<img class="bglight" src="static/welcome/bg.jpg" />
<p>{{getValue('name')}}</p>
<span class="box">{{getValue('content')}}</span>
<img class="code" src="static/welcome/code.png" />
<img class="welcome" src="static/welcome/WELCOME.png" />
</div>
</template>
<script>
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
import { swiper, swiperSlide } from "vue-awesome-swiper";
let vm = null;
export default {
name: "retail",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created() {
console.log(this.schemaData);
vm = this;
},
methods: {
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
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["explain"],
translateX: 0,
opacity: 1,
duration: 2000
}).finished,
anime({
targets: this.$refs["codebg"],
translateX: 0,
opacity: 1,
delay: 500,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["codebot"],
translateX: 0,
opacity: 1,
delay: 500,
duration: 1000,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["product"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["item-price"],
translateY: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["code"],
translateY: 0,
opacity: 1,
duration: 1000,
rotate: 360,
delay: 1200,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
},
enterBefore() {
console.log("enterBefore");
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["explain"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["product"],
translateY: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["codebg"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["codebot"],
translateX: 1000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["item-price"],
translateY: 1000,
opacity: 0,
duration: 0,
delay: 0
});
anime({
targets: this.$refs["code"],
translateY: 100,
opacity: 0,
duration: 0,
delay: 0
}); // setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
console.log("mounted");
this.enterBefore();
},
data() {
return {
currentIndex: "",
sliderActiveIndex: 0,
swiperOption: {
effect: "coverflow",
centeredSlides: true,
speed: 1000,
slidesPerView: "auto",
spaceBetween: 70,
loop: true,
autoplay: {
delay: 5000
},
on: {
slideChange() {
vm.sliderActiveIndex = this.realIndex;
if(vm.isEditMode) {
// $(".ani").css("visibility", "");
}
}
}
}
};
}
};
</script>
<style lang="scss" scopeds>
.container {
width: 1920px;
height: 1080px;
position: absolute;
background: #071B31;
.welcome {
display: block;
position: absolute;
width: 1920px;
top: 50%;
transform: translateY(-50%);
}
p {
font-size: 40px;
color: white;
position: absolute;
top: 80px;
left: 80px;
}
.box {
display: inline-block;
width: 1800px;
word-wrap: break-word;
word-break: normal;
position: absolute;
font-size: 180px;
font-weight: bold;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
color: white;
background: radial-gradient(#071B31, white 50%, white 50%, #071B31 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: scratchy 8s linear forwards infinite;
}
@keyframes scratchy {
0% {
background-position: 0 0;
opacity: 0.2;
}
25% {
background-position: 300px -600px;
opacity: 0.4;
}
26% {
background-color: rgba(255, 255, 255, .7);
opacity: 1;
}
74% {
background-color: rgba(255, 255, 255, .7);
opacity: 1;
}
75% {
background-position: 600px -300px;
opacity: 0.4;
}
100% {
background-position: 0 0;
opacity: 0.2;
}
}
.code {
display: block;
position: absolute;
width: 116px;
height: 150px;
bottom: 44px;
left: 60px;
}
.bglight{
display: block;
position: absolute;
width: 1920px;
height: 1080px;
animation: light 4s linear infinite;
}
@keyframes light{
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
}
</style>
\ No newline at end of file
src/templates/welcome/sceneData.js 0 → 100644
export default {
schemaData: {},
itemList: []
}
src/templates/welcome/schemaData.js 0 → 100644
import defaultData from './defaultData'
import itemList from './itemList'
import templateInfo from './templateInfo'
import sceneData from './sceneData.js'
export default {
templateInfo,
// defaultData,
sceneData,
pageList: [
{
name: '欢迎语',
thumb: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/welcome/welcomebg.jpg',
component: 'welcome',
defaultData: defaultData.welcome,
schemaData: defaultData.welcome,
itemList: itemList.welcome
}
]
}
src/templates/welcome/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