Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 924c9343 by hank
Options

企业文化模板

parent b34fc07b
Showing with 891 additions and 126 deletions
plugins/InlineSoucePlugins.js
......@@ -40,7 +40,7 @@ class InlineSourcePlugin {
if (url) {
newTag.innerHTML = compilation.assets[url.replace('./', '')].source() // 取到文件内容放到innerHtml
delete compilation.assets[url.replace('./', '')]
console.log(compilation.assets)
// console.log(compilation.assets)
return newTag
}
return tag
......
src/App.vue
......@@ -5,7 +5,7 @@
</template>
<script>
import page from './components/page/index.vue'
import page from './components/template/index.vue'
var self = null
window.getQuery = function (key) {
var url = location.search // 获取url中"?"符后的字串
......
src/assets/app.scss
......@@ -80,116 +80,15 @@
border: 1px dashed yellowgreen;
animation: border 2s ease-in-out infinite;
}
.container {
padding: 0 45px;
background: linear-gradient(to right, #32295E, #5277AB);
height: 450px;
width: 800px;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
}
.title {
height: 50px;
line-height: 50px;
padding: 0 0px;
border-bottom: #eeeeee 1px solid;
position: relative;
}
.name {
/* padding: 0 20px; */
border-bottom: #eeeeee 1px solid;
padding: 10px 0px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin-bottom: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.name>span {
font-size: 36.25px;
}
.name span {
display: inline-block;
min-width: 30px;
}
.bottom {
display: flex;
justify-content: space-between;
/* padding-top: 20px; */
}
.bottom img {
height: 280px;
width: 280px;
}
.bottom-left {}
.bottom-right {
padding-top: 20px;
}
.bottom-right .bottom-right-item {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.bottom-right .item-name {
display: inline-block;
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 5px;
width: 60px;
}
.bottom-right .item-des {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 220px;
overflow: hidden;
letter-spacing: 1px;
/* overflow: hidden; */
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.h2-right {
display: flex;
align-items: center;
font-size: 20px;
}
.h2-right img {
height: 42px;
width: 42px;
}
.right-icon {
margin-left: 25px;
/* height: 32px; */
}
/* .delay */
@keyframes bgani {
0% {
......
src/components/page/index.vue
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style="width:800px">
<swiper-slide class="ani" v-for="(page, index) in pages" :key="index">
<component
:is="page.component"
......@@ -239,6 +239,7 @@ export default {
/* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true,
allowTouchMove: false,
slidesPerView: 1,
autoplay: !getQuery('isEdit')
? {
......
src/components/page/page1.vue
......@@ -3,7 +3,11 @@
<div class="ani title bounceInLeft" swiper-animate-effect="bounceInLeft" :class="isAnimeted()">
<span class>{{date}}</span>
</div>
<h2 class="ani h2 name bounceInRight" swiper-animate-effect="bounceInRight" :class="isAnimeted()">
<h2
class="ani h2 name bounceInRight"
swiper-animate-effect="bounceInRight"
:class="isAnimeted()"
>
<span
:class="isEdited(0) + ' ' + isEdit()"
:style="getStyle(0)"
......@@ -31,8 +35,12 @@
<img :src="getValue(2)" alt />
</div>
<div class="bottom-right" :class="isAnimeted()" >
<div class="ani bottom-right-item fadeInUp delay300" swiper-animate-effect="fadeIn" :class="isAnimeted()">
<div class="bottom-right" :class="isAnimeted()">
<div
class="ani bottom-right-item fadeInUp delay300"
swiper-animate-effect="fadeIn"
:class="isAnimeted()"
>
<span
class="item-name"
:class="isEdited(3) + ' ' + isEdit()"
......@@ -46,7 +54,11 @@
@click="edit(4)"
>{{getValue(4)}}</span>
</div>
<div class="ani bottom-right-item fadeInUp delay400" :class="isAnimeted()" swiper-animate-effect="fadeIn" >
<div
class="ani bottom-right-item fadeInUp delay400"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(5) + ' ' + isEdit()"
......@@ -60,7 +72,11 @@
@click="edit(6)"
>{{getValue(6)}}</span>
</div>
<div class="ani bottom-right-item fadeInUp delay500" :class="isAnimeted()" swiper-animate-effect="fadeIn" >
<div
class="ani bottom-right-item fadeInUp delay500"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(7) + ' ' + isEdit()"
......@@ -74,7 +90,11 @@
@click="edit(8)"
>{{getValue(8)}}</span>
</div>
<div class="ani bottom-right-item fadeInUp delay600" :class="isAnimeted()" swiper-animate-effect="fadeIn" >
<div
class="ani bottom-right-item fadeInUp delay600"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(9) + ' ' + isEdit()"
......@@ -94,27 +114,127 @@
</template>
<script>
import methods from './methods'
import methods from "./methods";
export default {
props: ['list', 'page', 'isEditMode', 'cancelEdit'],
props: ["list", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
created () {
created() {
// console.log(this.list);
},
mounted () {
},
data () {
mounted() {},
data() {
return {
currentIndex: '',
date: '2019.07.04',
currentIndex: "",
date: "2019.07.04",
img:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAABVCAYAAAA49ahaAAAJSUlEQVR4nOWda4xV1RXHf3MdBIGBAR1AbBWtCKalBSXBZwoTS6mxVi2ofZimtAyCFGJo07QfmvRLXwmmhTRpNf3WJj4QI7Zgbaw0Wo1KCcrDDkhAio3yGphpkdfw74d1T+8++55779y55zXDP1mZ2ffsc/Y6/7POPvusvfY6TZLIAUYC1wHTgKnAJODjwMVACzDaqdsN9ABHgL1AJ7AL+CfwdnFbpmjKiNShwM1AOzAbmAU0x3Dcs8CbwEtFeQU4GcNx60KapDYBNwLfAOYDY1NoswdYD/wB+DNwLoU2UyF1FNABPAh8os59u4D/Av8p/gXrDlqxruGCOo61H1gD/KZ4vMSQJKljgJXAcoyIangf+CuwBdgG7AEOYLdzJTQDV2J98BSsP56D9cXVcARYjRHcVaNu/yApbrlA0jJJXaqMs5I2SnpQ0jUxtz9ZUoekPxXbqYQuSSskNcfNQdyEzpL0jyonsk3SSkkT4z6RCjJB0sPFdithq6Sb8kjqMEm/ktRbQfEXJd2WEpGVpF3SCxX0OydptaSheSF1qqTtFZTdLGl2xmT6cquk1yrou0XWfWRK6t2SuiOUOyRpoaRCDkiMkiZJDxT19HFc0vysSF2q6AfBOknjckBcX6RN0lMR53BO0g/TJvXHEYp8JGlxDojqjyyUdCLinNbIrDpxUldHNP4vSTNzQE4jMl3SexHn9li9xNbbcJSFblV6Q6SkZYKkNyPO8adJkbokorGXJY3OARlxSouklyLOdXncpN6p8ofSK5JG5ICEJGR4BLHnJC3oy/59efefArxO2Ke5DbgVOJ7Iu3M+0AL8BXNLBugGrgferbZjLVKHAW9gzooABzAX3oH+aDrA0AZsBi53ftsC3AScqrRTocZBf0aY0FPA3ZwfhAIcAr4EnHB+uw5YVXWvKn3DzSp/lx+o49BGZWFE/zq73j51CPAWcK3z27PAXQ1d94GNp7AZiwC7gE8T0Q1Uuv2XEib0KLA4Lu0GKB4Cjjnla4DvRNaMMN9Rko565r4oB7dgHsQfqx+XNNavF2WpS7GpkACbgd/FdblrYC0wLqW2+oNHMT4CjAK+W1bLY/kiSR96V6M9RUuQzB13Xw6sspLM9vjpkdRazVI7CFvKJmxCLk1cAjxOfq12E/B3pzwS460Eh+EmSXu8q/D5lK3AR16t9nZPz31yHPJuxXav4g71w5cYM6kB1ip/ju+tno7zgm3u7f91z8wfA3IRaAV8GdgB3Ju1Ig5+65X/z18w+B8CHMQiPwDOABOBw2lo56AvF3EtNmY8mLAutdAKfIDFhYGFGI0DTgaWeiMlQsEeTmkT2lfMB7aTvdUeA15wyi3ALVB6o5rj7fBsCko1gjbgCezVMcsRwnqvPAdKpLZ7Gzckrk48yNpqfZ7awfrU4Vig1oXFDfuwwK8s0MiDMau+thPzA4AF1F1cAD5FiVAID2wHEgKrXZByu686/zcDMwqUWA6wJT19Ykcb8GRR0uprd3rl6QUsvtPFjpSUSRILsHm0NKz2Ha88uYBN7LnYk4IiaWAc6Vhtp1e+sgBc4f24v8FG1IAkgaStdi/Q65QvK2Cx8wG6gNMJNZ4lkrTas1jIe4A2n9TBPI8PyVmtS2pLgfAKj8wXdqWAwGqfwEYLccBd8NFSwJys5yPuxca182tV7ANCM6oFEl5TNADQFMMxhrqFZjzTjaGBgYI4X2uHOP/3FLA5/QCtDH4cAu7DHlZx+QncJaE9BcJPrlbCfoDBhrWYr+PJGI/ZTHgEdbCAeaVcXE5jaGpAkkIS1hngKsIjqPcLWEyQi6tjbjRrJGGdLvzX/H0Fyh0C0xgcOAzcTzLW6cJ3SO1uptxSZySoQFp4GgtfSsNh/Umv/Hbg+T9OKTPEe1i6jSzQqFPlMLAMe1tKC7spdZm9FD3/Jwg7pq8gu+mURvA0ZjVpEjqR8DNoO3A8mPj7m1d5XioqxYOg75xP+vNTt3vlTVCaTd3obRwoEdPrsCd7mtbpwudpA4QjVD6kFJd6FriM9K98X/vUw1gU8+MJ6lILY7AIleBlqRsYjxOhcgZ4xtmhGfhaaurVh8A6syQU4KuE3z7XE6RrcqLY5nhRbDtzFPUnWVjl/TmI9gvkLU+/ucE2t1KTpF1exS/khNR1ksbngMhAPufpt1dOfKobSiksrZCLHyR6A9XGEew2uwfr8/OC73vlX+MmEvOuwEWSPvCuwlylZwF5ts5APuvpWTPm/yPgEe+3n1N7uWWcyKt1gnmjfH5WE15fFbmOaqSkI97V6EjJCvJqnYEs83g5JmmMX6/Szsu9nY9KujQHJ5WlTCiS6GJlVN1Ka1ObMX+A6wb8I3An+VkHkDbWYSvIA3Ri/JzxK1bqK89ia1Hd1Jh3AEtiUnCgoYMwoQIWEUGoba1u8qs8cz8l6YYc3IppyvWy9FAuVlfbp1ZmiqFYqo/POL+dT5kpPga8VvwbYCcwExspRaLWUOkUNmHW7TW0gXBOlcGINuB5woT2YNMzFQmFvo0/O4EHCIcLTsPSEQ/W4IvhwHOEp0p6gW9SHjldjjr6lhUqxxuyfHlZ93txymhZvi0fS/p6jHob/EVEY52SJuWAjDhkgizdp4+f1HOc/jT8y4hG/y3L8ps1KY3ITEn7I85tTb3H6q8CP4po/KSkh5S+DzYOWazyYZMkPdKf82lEkQ5F5099TnYbZU1UX2S8pGcizuGcpO/197iNKvVFlb8PS5aZfJHym+m3IOnbKnccSZa5+J5Gjh+HgpNVPrUQYIuc5AI5kbmKfhhJllt7aqNtxKXoUNkrbaXs6Zsl3aXs+tsmWWbN1yvo1yvL/j4sjvbiVv4GVc+pv1OWd/+SlMgcK3NjVsruLknvSLolznaTOJFmWRLwqMzkAc5Iel72RYpJMbd/bbH9jZJOV9GhS+YPvTBuDpL8dspo4GFgBbXD3vcDL2PrYjuL8i5V0mlic+5XY/Gh7rdTLq3RVjc2BbIKfxokJqTxlZ8W4FuYf9aP5awF9ws/XZjXbDgWHTKmyn5R2I1lQHuUsIModqT9ka9ZWFacrxCOk08KR7FIlt9jLrxUkNWX04Zg6ZfnYV9Om0E8X047jWUmfhGLwHuVDNbaZkWqjxHAdKxfnILFx07Euo4R2KrEVsyPeQq7fQ9h37Hah33fbxuwldLHwDLD/wCNnsS3EvSf4AAAAABJRU5ErkJggg==',
"data:image/png;base64,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",
currentIndex: ''
}
currentIndex: ""
};
}
}
};
</script>
<style>
<style lang="scss" scoped>
.container {
padding: 0 45px;
background: linear-gradient(to right, #32295e, #5277ab);
height: 450px;
width: 800px;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
}
.title {
height: 50px;
line-height: 50px;
padding: 0 0px;
border-bottom: #eeeeee 1px solid;
position: relative;
}
.name {
/* padding: 0 20px; */
border-bottom: #eeeeee 1px solid;
padding: 10px 0px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin-bottom: 17px;
font-family: Arial, Helvetica, sans-serif;
}
.name > span {
font-size: 36.25px;
}
.name span {
display: inline-block;
min-width: 30px;
}
.bottom {
display: flex;
justify-content: space-between;
/* padding-top: 20px; */
}
.bottom img {
height: 280px;
width: 280px;
}
.bottom-left {
}
.bottom-right {
padding-top: 20px;
}
.bottom-right .bottom-right-item {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
.bottom-right .item-name {
display: inline-block;
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 5px;
width: 60px;
}
.bottom-right .item-des {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 220px;
overflow: hidden;
letter-spacing: 1px;
/* overflow: hidden; */
}
.h2-right {
display: flex;
align-items: center;
font-size: 20px;
}
.h2-right img {
height: 42px;
width: 42px;
}
.right-icon {
margin-left: 25px;
/* height: 32px; */
}
</style>
src/components/template/index.vue 0 → 100644
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback" style="width:1920px">
<swiper-slide class="ani" v-for="(page, index) in pages" :key="index">
<component
:is="page.component"
:list="pages[index].list"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
></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 culture from './page1'
import photoWall from './photoWall'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { parse } from 'path'
import { setTimeout } from 'timers'
export default {
name: 'page',
mixins: [mixin],
components: {
swiper,
swiperSlide,
culture,
photoWall
},
computed: {
swiper () {
return this.$refs.mySwiper.swiper
}
},
data () {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
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));
})
},
message (data) {
window.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
},
'*'
)
}
},
getList () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
},
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);
}
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
}
if (this.timer2) {
clearInterval(this.timer2) // 在Vue实例销毁前，清除我们的定时器
}
},
mounted () {
function setZoom () {
var unit = 1920
var unit2 = 1080
var width = window.innerWidth
var height = window.innerHeight
console.log(width, height)
var zoom = height / 1080
if (width / height <= 16 / 9) {
zoom = width / 1920
console.log('width')
}
if (width / height >= 16 / 9) {
zoom = height / 1080
console.log('height')
}
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()
window.addEventListener('resize', setZoom, false)
let _this = this
if (!this.isEditMode) {
this.timer2 = setInterval(() => {
if (getQuery('filmId')) {
$.get(
'http://39.105.231.218:8090/myequipment/get/film/info/' +
getQuery('filmId'),
function (result) {
console.log(result)
_this.list = JSON.parse(result.filmData)
_this.filmId = result.filmId
}
)
}
$('.bottom-right-item').hide()
setTimeout(() => {
$('.bottom-right-item').show()
}, 500)
}, 10000)
// var DOM = document.querySelector(".title");
// var H2 = document.querySelector(".h2");
// var t = 0,//开始时间
// b = 0,//开始位置
// c = 1000,//变化值
// d = 100;//持续时间
// let appNow = {
// y: 1000
// }
// let appEnd = {
// y: 0
// }
// value = new TWEEN.Tween(appNow).to(appEnd, 1000).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function () {
// DOM.style.setProperty('transform', 'translate(' + appNow.y + 'px' + ', ' + 0 + 'px' +')');
// H2.style.setProperty('transform', 'translate(' + -appNow.y + 'px' + ', ' + 0 + 'px' +')');
// // console.log('translate(' + appNow.y + 'px' + ', ' + appNow.y + 'px' +')')
// }).start()
// var step = function (time) {
// requestAnimationFrame(step);
// TWEEN.update(time);
// // requestAnimationFrame(step);
// };
// requestAnimationFrame(step);
}
},
created () {
var vm = this
window.myApp = this
console.log(this.pages)
window.addEventListener(
'message',
function (e) {
if (e.source != window.parent) return
console.log(e.data, '客户端发来的消息')
console.log(typeof e.data === 'object' && e.data['type'] == 'setData')
if (typeof e.data === 'object' && e.data['type'] == 'setData') {
console.log(myApp.pages[e.data['page']])
myApp.pages[e.data['page']]['list'][e.data.index].value =
e.data['value']
if (e.data['editObj']) {
myApp.list[e.data.index] = e.data['editObj']
myApp.pages[e.data['page']]['list'][e.data.index] =
e.data['editObj']
}
}
if (typeof e.data === 'object' && e.data['type'] == 'cancelEdit') {
myApp.currentIndex = ''
myApp.cancelEdit = true
}
if (typeof e.data === 'object' && e.data['type'] == 'edit') {
myApp.currentIndex = e.data.index
}
if (typeof e.data === 'object' && e.data['type'] == 'setList') {
// myApp.list = JSON.parse(JSON.stringify(e.data.list))
myApp.pages = e.data.pages
}
if (typeof e.data === 'object' && e.data['type'] == 'getList') {
myApp.getList()
}
if (typeof e.data === 'object' && e.data['type'] == 'goPage') {
myApp.swiper.slideTo(parseInt(e.data.index), 1000, false)
}
// window.parent.postMessage(color, '*');
},
false
)
console.log('page created')
this.swiperOption = {
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 () {
swiperAnimateCache(this) // 隐藏动画元素
swiperAnimate(this) // 初始化完成开始动画
},
slideChange () {
if (vm.isEditMode) {
$('.ani').css('visibility', '')
}
},
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
swiperAnimate(this)
}
}
}
}
// console.log(JSON.stringify(this.list))
vm.date = this.timeFormate(new Date())
this.timer = setInterval(() => {
vm.date = this.timeFormate(new Date())
}, 1000 * 60)
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if (getQuery('filmId')) {
$.get(
'http://39.105.231.218:8090/template/get/film/info/' +
getQuery('filmId'),
function (result) {
console.log(result)
vm.pages = JSON.parse(result.filmData)
vm.filmId = result.filmId
}
)
} else {
if (getQuery('isPreview')) {
} else {
vm.getDefaulted()
// $.get(
// 'http://visual-clouds.bdideal.com/html/1562308684495b5b8f5a24a994afd8f799c33ff40e212.txt',
// function (result) {
// // console.log(result)
// console.log('模板数据加载成功')
// vm.pages = JSON.parse(result)
// vm.getDefaulted()
// }
// )
}
}
},
data () {
return {
date: '',
img:
'data:image/png;base64,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',
currentIndex: '',
isEditMode: true,
cancelEdit: false
}
}
}
</script>
<style>
.swiper-slide {
width: 100% !important;
}
</style>
src/components/template/methods.js 0 → 100644
export default {
created () {
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: {
getDefaulted () {
this.list = this.list.map(function (item) {
return (item = Object.assign(item, item.default))
})
},
message (data) {
window.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 (index) {
return this.list[index] ? this.list[index]['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/components/template/mixin.js 0 → 100644
import data from './pages.js'
console.log(JSON.stringify(data))
export default {
data: function () {
return {
pages: data
}
},
created: function () {
console.log('我是mixin 的crteated')
}
}
src/components/template/page1.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">企业简介——迈动互联（北京）信息科技有限公司</div>
<div class="bottom-list">
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/tuandui.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/product.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
<div class="bottom-item">
<div class="icon">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honour.png"
alt
/>
<div class="name">WHO ARE WE</div>
<div class="name-zh">我们是谁</div>
</div>
</div>
</div>
</div>
</template>
<script>
import methods from "./methods";
export default {
props: ["list", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
created() {
// console.log(this.list);
},
mounted() {},
data() {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: ""
};
}
};
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.bottom-list {
position: absolute;
display: flex;
top: 443px;
padding-left: 223px;
.bottom-item {
width: 416px;
height: 542px;
background: rgba(246, 246, 246, 1);
box-shadow: 0px 44px 63px 0px rgba(31, 31, 31, 0.15);
border-radius: 12px;
position: relative;
margin-right: 117px;
.icon {
// position: absolute;
padding-left: 42px;
padding-top: 52px;
left: 42px;
top: 52px;
img {
height: 53px;
}
}
.name {
margin-top: 36px;
height: 16px;
font-size: 16px;
font-family: ShreeDev0714-Bold;
font-weight: bold;
color: rgba(77, 77, 77, 1);
}
.name-zh {
margin-top: 87px;
height: 39px;
font-size: 39px;
line-height: 1;
font-family: PingFangSC-Regular;
font-weight: 400;
color: rgba(59, 59, 59, 1);
}
}
}
}
</style>
src/components/template/pages.js 0 → 100644
export default [
{
name: '企业文化',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb.jpg',
component: 'culture',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '2F'
}
}
]
},
{
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'
}
}
]
}
]
src/components/template/photoWall.vue 0 → 100644
<template>
<div class="container">
<div class="logo">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</div>
<div class="title">照片墙</div>
<div class="photo-container">
<div class="photo-wall">
<div class="wall">
<div class="wall-1"></div>
<div class="wall-2"></div>
</div>
<div class="img-list">
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" style=" transform: translate3d(59px,50px,0) rotate3d(0,1,0,-45deg);" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
<img src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png" alt />
</div>
</div>
</div>
</div>
</template>
<script>
import methods from "./methods";
export default {
props: ["list", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
created() {
// console.log(this.list);
},
mounted() {},
data() {
return {
currentIndex: "",
date: "2019.07.04",
img: "",
currentIndex: ""
};
}
};
</script>
<style lang="scss" scoped>
.container {
position: relative;
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
width: 1920px;
height: 1080px;
background: #dcdcdc
url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/bgs.png")
no-repeat top left;
background-size: 100%;
.logo {
position: absolute;
top: 50px;
left: 101px;
img {
width: 156px;
height: 50px;
}
}
.title {
font-size: 45px;
font-family: PingFangSC-Medium;
font-weight: 500;
color: rgba(49, 49, 49, 1);
position: absolute;
top: 150px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.photo-container {
position: absolute;
// display: flex;
top: 343px;
height: 600px;
width: 100%;
perspective: 2000px;
.photo-wall {
// transform-style: preserve-3d;
.wall {
width: 400px;
position: relative;
right: 0;
top: 0;
left: 0;
margin-left: 1200px;
// padding-left: 800px;
transform-style: preserve-3d;
// perspective: 10000px;
.wall-1 {
position: absolute;
transform: rotateY(-45deg) translateY(0) translateX(-300px);
width: 600px;
height: 600px;
background: #000;
}
.wall-2 {
position: absolute;
transform: rotateY(45deg) translateX(300px) translateY(0);
// transform-origin: 0 0;
width: 600px;
height: 600px;
background: #000;
}
}
}
.img-list {
line-height: 300px;
z-index: 10;
img {
transform: translateZ(-800px);
height: 200px;
width: auto;
margin-right: 100px;
}
}
}
}
</style>
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