Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit d64b4ac5 by zhangmeng
Options

reatil

parent 7d55b422
Showing with 0 additions and 2668 deletions
src/assets/background.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/templates/companyCulture/defaultData/index.js deleted 100644 → 0
import welcome from './welcome'
import notice from './notice'
import schedule from './schedule'
export default {
welcome,
notice,
schedule
}
src/templates/companyCulture/defaultData/notice.js deleted 100644 → 0
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
noticeTitle: {
value: '2019年端午节放假通知'
},
noticeContent: {
value: '根据国家2019年部分节假日安排，结合公司实际情况，劳动节放假时间安排如下：2019年6月7日至6月9日放假，共3天。6月10（星期一）上班。\r\n注意事项：\r\n 1、放假期间，请各部门自行妥善安排好放假前工作，做好安全防范措施。\r\n2、放假期间外出的员工，请注意人身财产安全.\r\n \r\n \r\n \t 特此通知，请知悉。'
},
noticeNickName: {
value: 'Dear All：'
}
}
src/templates/companyCulture/defaultData/schedule.js deleted 100644 → 0
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
scheduleList: [
{
content: '龙湖地产来访',
address: '22-1会议室',
department: '智慧营销',
time: '09:30 AM -12:00 AM',
index: 1,
schemaIndex: 0
},
{
content: 'Vmatrix研发进度',
address: '21-03会议室',
department: '数字理想',
time: '09:30 AM -10:00 AM',
index: 2,
schemaIndex: 0
},
{
content: '数字理想前端面试',
address: '22-1会议室',
department: '数字理想',
time: '09:30 AM -12:00 AM',
index: 3,
schemaIndex: 0
},
{
content: '销售总监面试',
address: '22-1会议室',
department: '总经办',
time: '09:30 AM -12:00 AM',
index: 4,
schemaIndex: 0
}
]
}
src/templates/companyCulture/defaultData/welcome.js deleted 100644 → 0
export default {
companyLogo: {
value: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo1.png'
},
companyName: {
value: '迈动互联（北京）信息科技有限公司'
},
companyNameEn: {
value: 'MAXROCKY'
},
welcomeWordZh: {
value: '欢迎龙湖信息中心领导参观指导'
},
welcomeWordEn: {
value: 'WELCOME'
}
}
src/templates/companyCulture/editMethod.js deleted 100644 → 0
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/companyCulture/index.vue deleted 100644 → 0
<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/companyCulture/itemList/index.js deleted 100644 → 0
import welcome from './welcome'
import notice from './notice'
import schedule from './schedule'
export default {
welcome,
notice,
schedule
}
src/templates/companyCulture/itemList/notice.js deleted 100644 → 0
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'text',
name: '通知标题',
valueRule: '',
description: '请输入通知标题',
dataKey: 'noticeTitle'
},
{
type: 'text',
name: '通知昵称',
valueRule: '',
description: '请输入通知昵称',
dataKey: 'noticeNickName'
},
{
type: 'text',
name: '通知内容',
valueRule: '',
description: '请输入通知内容',
dataKey: 'noticeContent'
}
]
src/templates/companyCulture/itemList/schedule.js deleted 100644 → 0
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
valueRule: ''
},
{
type: 'text',
name: '企业名称',
description: '',
valueRule: '',
dataKey: 'companyName'
},
{
type: 'list',
name: '日程列表',
modelSchema: [ // 创建子项的Schema列表
{
content: {
type: 'text',
name: '内容', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
},
address: {
type: 'text',
name: '地点', // 字段名称
description: '请输入地点', // 用户填写时字段提示语
default: { // 默认
value: '会议室'
}
},
department: {
type: 'text',
name: '部门', // 字段名称
description: '请输入部门', // 用户填写时字段提示语
default: { // 默认
value: '总裁办'
}
},
time: {
type: 'text',
name: '时间', // 字段名称
description: '请输入时间', // 用户填写时字段提示语
default: { // 默认
value: '09:30 AM - 10:00 AM'
}
}
}
],
dataKey: 'scheduleList'
}
]
src/templates/companyCulture/itemList/welcome.js deleted 100644 → 0
export default [
{
type: 'image',
name: '企业logo',
description: '请上传png格式企业logo',
dataKey: 'companyLogo',
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/companyCulture/keyframe.js deleted 100644 → 0
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/companyCulture/methods.js deleted 100644 → 0
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/companyCulture/mixin.js deleted 100644 → 0
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
}
},
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/companyCulture/pages/index.js deleted 100644 → 0
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) => {
pagesObj[req.keys()[index].match(re)[1]] = item.default
return item
})
export default pagesObj
src/templates/companyCulture/pages/introduction.vue deleted 100644 → 0
<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="cover cover-yellow">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/whoBg.png"
alt
/>
</div>
<div class="cover-name">WHO</div>
<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="cover cover-purple">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/productBg.png"
alt
/>
</div>
<div class="cover-name">Product</div>
<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="cover cover-green">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/honourBg.png"
alt
/>
</div>
<div class="cover-name">Honour</div>
<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 {
name: 'introduction',
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>
@keyframes cover {
0% {
width: 416px;
height: 542px;
animation: cover;
// opacity: 0.17;
background-size: contain;
transform-origin: 416px 542px;
transform: rotateY(0deg) skewY(0deg);
}
100% {
width: 300px;
height: 458px;
animation: cover;
// opacity: 0.17;
border-radius: 12px;
background-size: contain;
transform-origin: 300px 458px;
transform: rotateY(-45deg) skewY(20deg);
}
}
.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);
}
.cover-name {
position: absolute;
right: 30px;
top: -40px;
z-index: 111;
color: rgba(255, 255, 255, 1);
font-style: italic;
font-size: 39px;
font-weight: bold;
display: none;
}
.cover {
z-index: 2;
position: absolute;
right: 0px;
// top: -50px;
// width: 300px;
// height: 458px;
// animation: cover 3s;
// animation-delay: 1s;
// opacity: 0.17;
img {
width: 245px;
height: 608px;
}
width: 245px;
height: 608px;
top: -145px;
border-radius: 12px;
background-size: contain;
// background-color: #ed9d68;
transition: all 1s;
// transform: rotateY(-45deg) skewY(20deg);
transform-origin: 300px 458px;
}
// .cover-purple {
// background-color: #9650e1;
// }
// .cover-green {
// background-color: #84e8ce;
// }
}
}
}
</style>
src/templates/companyCulture/pages/photoWall.vue deleted 100644 → 0
<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-3">
<swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1200px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper>
</div>
<div class="wall-1">
<!-- <swiper :options="swiperOption" style="width: 2476px; transform: translateX(-1267px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper> -->
</div>
<div class="wall-2">
<!-- <swiper :options="swiperOption" style="width: 2476px;transform: translateX(-1867px);">
<swiperSlide v-for="(item,index) in 10" :key="index">
<img
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
</swiperSlide>
</swiper> -->
<!-- <swiper :options="swiperOption">
<img v-for="(item,index) in 10" :key="index"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/logo.png"
alt
/>
<!-- </swiper>-->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import methods from '../methods'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'photoWall',
props: ['list', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods],
created () {
// console.log(this.list);
},
components: {
swiper,
swiperSlide
},
mounted () {},
data () {
return {
currentIndex: '',
date: '2019.07.04',
img: '',
currentIndex: '',
swiperOption: {
observerParents: true,
allowTouchMove: false,
slidesPerView: 'auto',
slidesPerColumn: 2,
spaceBetween: 30,
speed: 1000,
freeMode: true,
// reverseDirection: true,
autoplay: {
reverseDirection: true,
delay: 10
},
loop: true
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
.swiper-slide {
width: auto;
}
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: 100%;
height: 800px;
position: relative;
right: 0;
top: 0;
left: 0;
// margin-left: 1200px;
// padding-left: 800px;
transform-style: preserve-3d;
// perspective: 10000px;
.wall-1 {
left: 1200px;
line-height: 300px;
position: absolute;
overflow: hidden;
transform: rotateY(-45deg) translateY(0) translateX(-300px);
width: 600px;
height: 600px;
background: #000;
img {
transform: rotateY(-45deg) translateY(0);
height: 100px;
width: auto;
margin-right: 100px;
// border: 1px solid red;
}
overflow: hidden;
}
.wall-2 {
overflow: hidden;
line-height: 300px;
left: 1200px;
position: absolute;
transform: rotateY(45deg) translateX(300px) translateY(0);
// transform-origin: 0 0;
width: 600px;
height: 600px;
background: #000;
img {
transform: rotateY(45deg) translateY(0);
height: 100px;
width: auto;
margin-right: 100px;
}
}
.wall-3 {
overflow: hidden;
position: absolute;
left: -200px;
top: 0;
height: 600px;
line-height: 300px;
// background: #000;
z-index: 10;
width: 1276px;
transform: translateZ(-424px);
img {
transform: translateZ(-424px);
height: 100px;
width: auto;
margin-right: 100px;
}
}
}
}
}
}
</style>
<style>
.swiper-container-free-mode > .swiper-wrapper {
 -webkit-transition-timing-function: linear; /*之前是ease-out*/
 -moz-transition-timing-function: linear;
 -ms-transition-timing-function: linear;
 -o-transition-timing-function: linear;
 transition-timing-function: linear;
 margin: 0 auto;
}
</style>
src/templates/companyCulture/schemaData.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
}
]
}
src/templates/companyCulture/templateInfo.js deleted 100644 → 0
export default {
name: '企业文化模板'
}
src/templates/listingInformation/defaultData/buyingHouse.js deleted 100644 → 0
export default {
houseList: [
{
img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
},
{
img: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
}
],
title: {
value: '合租 | 彩虹新城·两室两厅·精装修·南'
},
price: {
value: '3000'
},
brightOneName: {
value: '面积(m²)'
},
brightOneContent: {
value: '80m²'
},
brightTwoName: {
value: '位置'
},
brightTwoContent: {
value: '大兴·枣园'
},
brightThreeName: {
value: '楼层'
},
brightThreeContent: {
value: '3/10'
},
peripheralFacilities1: {
value: '地铁四号线枣园站 260米'
},
peripheralFacilities2: {
value: '物美大卖场 300米'
},
peripheralFacilities3: {
value: '康庄公园 800米'
},
peripheralFacilities4: {
value: '仁和医院 900米'
}
}
src/templates/listingInformation/defaultData/index.js deleted 100644 → 0
import buyingHouse from './buyingHouse'
import rentHouse from './rentHouse'
export default {
buyingHouse,
rentHouse
}
/**
* 默认数据入口
*/
src/templates/listingInformation/defaultData/readme.md deleted 100644 → 0
## 默认数据入口
\ No newline at end of file
src/templates/listingInformation/editMethod.js deleted 100644 → 0
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/listingInformation/index.vue deleted 100644 → 0
<template>
<div class="glob-container">
<swiper
:options="swiperOption"
ref="mySwiper"
class
@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"
>
<component
:is="page.component"
:ref="'child'+index"
@hook:mounted="loaded(index)"
v-if="index === sliderActiveIndex"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
:cancelEdit.sync="cancelEdit"
:page="index"
:activeIndex="sliderActiveIndex"
></component>
</swiper-slide>
</swiper>
<div class="decoration"></div>
<svg viewBox="0 0 1920 1080" class="svg-filters">
<title>Animated clip-path SVG</title>
<defs>
<filter id="ant" x="0" y="0" width="1" height="1">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
<clipPath id="cd-image-122">
<circle id="cd-circle-1" cx="1920" cy="1080" r="1920" />
</clipPath>
</filter>
<clipPath id="cd-image-1" clipPathUnits="userSpaceOnUse">
<circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
</clipPath>
<mask id="mask-img-1" maskContentUnits="objectBoundingBox">
<circle id="cd-circle-12" fill="black" cx="0" cy="0" r="1000" />
</mask>
</defs>
<!-- <image height="800px"
width="1400px"
clip-path="url(#cd-image-1)"
mask="mask-img-1"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>-->
</svg>
</div>
</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 } 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: {
loaded (index) {
if (!this.isEditMode) {
setTimeout(() => {
this.$refs['child' + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, 'enter 完毕')
})
}, 1000)
}
},
message (data) {
// 发送消息
Message.send(data, '*')
},
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 () {
},
created () {
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
Scene.EventBus.on('leaveBefore', e => {
console.log('leaveBefore')
if (this.pages.length > 1) {
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, 0, false)
})
}
})
this.isEditMode = false
}
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), 1000, false)
}
})
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 () {
if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 todo
// swiperAnimate(this); // 初始化完成开始动画 todo
}
},
slideChange () {
vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) {
// $(".ani").css("visibility", "");
}
},
slideChangeTransitionEnd () {
if (!vm.isEditMode) {
// swiperAnimate(this); // todo
}
}
}
}
if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery('filmId')).then(result => {
console.log(result)
const filmData = JSON.parse(result.data.filmData)
vm.pages = filmData && filmData.pageList ? 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: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
center no-repeat;
background-size: 100%;
width: 1920px;
height: 1080px;
// background: #000;
position: relative;
opacity: 1;
.ant {
// 路劲裁剪
// clip-path: url(#cd-image-1);
}
.decoration {
position: absolute;
left: 0;
top: 0;
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/decoration.png")
center no-repeat;
background-size: 100%;
height: 1080px;
width: 800px;
}
}
.svg-filters {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
}
#cd-image-1 circle {
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
#mask-img-1 circle {
// animation: visible-clippath 1s ease-out forwards ;
opacity: 1;
}
@keyframes visible-clippath {
from {
r: 1920;
opacity: 1;
}
to {
r: 0;
opacity: 1;
}
}
</style>
<style>
.swiper-slide {
/* width: 100% !important; */
}
</style>
src/templates/listingInformation/itemList/buyingHouse.js deleted 100644 → 0
export default [
{
type: 'list',
name: '房屋图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '房屋图片', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
}
}
],
dataKey: 'houseList'
},
{
type: 'text',
name: '标题',
description: '填写标题',
dataKey: 'title',
valueRule: ''
},
{
type: 'text',
name: '金额',
description: '填写金额',
dataKey: 'price',
valueRule: ''
},
{
type: 'text',
name: '亮点一名称',
description: '填写亮点一名称不超过三个字',
dataKey: 'brightOneName',
valueRule: ''
},
{
type: 'text',
name: '亮点一内容',
description: '填写亮点一内容不超过五个字',
dataKey: 'brightOneContent',
valueRule: ''
},
{
type: 'text',
name: '亮点二名称',
description: '填写亮点二名称不超过三个字',
dataKey: 'brightTwoName',
valueRule: ''
},
{
type: 'text',
name: '亮点二内容',
description: '填写亮点二内容不超过五个字',
dataKey: 'brightTwoContent',
valueRule: ''
},
{
type: 'text',
name: '亮点三名称',
description: '填写亮点三名称不超过三个字',
dataKey: 'brightThreeName',
valueRule: ''
},
{
type: 'text',
name: '亮点三内容',
description: '填写亮点三内容不超过五个字',
dataKey: 'brightThreeContent',
valueRule: ''
},
{
type: 'text',
name: '周边设施一',
description: '填写周边设施',
dataKey: 'peripheralFacilities1',
valueRule: ''
},
{
type: 'text',
name: '周边设施二',
description: '填写周边设施',
dataKey: 'peripheralFacilities2',
valueRule: ''
},
{
type: 'text',
name: '周边设施三',
description: '填写周边设施',
dataKey: 'peripheralFacilities3',
valueRule: ''
},
{
type: 'text',
name: '周边设施四',
description: '填写周边设施',
dataKey: 'peripheralFacilities4',
valueRule: ''
}
]
src/templates/listingInformation/itemList/index.js deleted 100644 → 0
import buyingHouse from './buyingHouse'
import rentHouse from './rentHouse'
export default {
buyingHouse,
rentHouse
}
src/templates/listingInformation/itemList/readme.md deleted 100644 → 0
## 编辑项列表
### 编写格式如下
```
{
type: 'list',
name: '房屋图片列表',
modelSchema: [ // 创建子项的Schema列表
{
img: {
type: 'image',
name: '房屋图片', // 字段名称
description: '请输入内容' // 用户填写时字段提示语
}
}
],
dataKey: 'houseList'
},
{
type: 'text',
name: '标题',
description: '填写标题',
dataKey: 'title',
valueRule: ''
},
```
\ No newline at end of file
src/templates/listingInformation/methods.js deleted 100644 → 0
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/listingInformation/mixin.js deleted 100644 → 0
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 // 引入页面数据
}
},
methods: {
callback () {
console.log('callback')
},
getDefaulted () {
// todo 获取默认值
this.pages = this.pages.map(function (item) {
item.list.map(ele => {
return (ele = Object.assign(ele, ele.default))
})
return item
})
},
getAllData () {
this.message(
{
type: 'getList',
pages: this.pages
},
'*'
)
},
setAllData (data) {
this.pages = data.pages
},
...editMethod
},
mounted () {
// setZoom 设置网页缩放
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(
'.glob-container'
).style.transform = `scale(${zoom})`
}
setZoom()
addEventListener('resize', setZoom, false)
},
created: function () {
// console.log('我是mixin 的crteated')
}
}
src/templates/listingInformation/pages/index.js deleted 100644 → 0
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) => {
pagesObj[req.keys()[index].match(re)[1]] = item.default
return item
})
export default pagesObj
src/templates/listingInformation/pages/readme.md deleted 100644 → 0
## 页面入口
> 引入index.js 会默认引入当前目录下.vue 结尾的文文件作为当前场景下的组件。schemaData.js 中componment 名字与之对应
\ No newline at end of file
src/templates/listingInformation/schemaData.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/listing-information/thumb1.png',
component: 'buyingHouse',
defaultData: defaultData.buyingHouse,
schemaData: defaultData.buyingHouse,
itemList: itemList.buyingHouse
},
{
name: '租房页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb2.png',
component: 'rentHouse',
defaultData: defaultData.buyingHouse,
schemaData: defaultData.buyingHouse,
itemList: itemList.buyingHouse
},
{
name: '租房页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb2.png',
component: 'rentHouse2',
defaultData: defaultData.buyingHouse,
schemaData: defaultData.buyingHouse,
itemList: itemList.buyingHouse
},
{
name: '租房页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb2.png',
component: 'rentHouse3',
defaultData: defaultData.buyingHouse,
schemaData: defaultData.buyingHouse,
itemList: itemList.buyingHouse
}
]
}
src/templates/listingInformation/templateInfo.js deleted 100644 → 0
export default {
name: '房源信息模板'
}
src/templates/testTempalate/methods.js deleted 100644 → 0
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/templates/testTempalate/mixin.js deleted 100644 → 0
import data from './pagesData.js'
console.log(JSON.stringify(data))
export default {
data: function () {
return {
pages: data
}
},
created: function () {
console.log('我是mixin 的crteated')
}
}
src/templates/testTempalate/pagesData.js deleted 100644 → 0
export default [
{
name: '页面名称',
thumb: '页面缩略图',
component: 'page1',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '2F'
}
},
{
type: 'text',
name: '楼层',
value: '',
style: {
color: 'white'
},
description: '',
default: {
value: 'SOHO 3Q'
}
},
{
type: 'image',
name: '图片',
description: '',
value: '',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272251128eaa21d707f5a4e3fb12731007247ba70.png'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0201'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京迈动互联科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0202'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京数字理想科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0203'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0204'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
style: {
color: 'white'
},
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'icon',
name: 'icon',
value: '',
description: '选择icon',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272706920329522ffa548458391830aadfedf511b.png'
}
}
]
},
{
name: '页面名称',
thumb: '页面缩略图',
component: 'page1',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '3F'
}
},
{
type: 'text',
name: '楼层',
value: '',
style: {
color: 'white'
},
description: '',
default: {
value: 'SOHO 3Q'
}
},
{
type: 'image',
name: '图片',
description: '',
value: '',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272251128eaa21d707f5a4e3fb12731007247ba70.png'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0201'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京迈动互联科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0202'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京数字理想科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0203'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0204'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
style: {
color: 'white'
},
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'icon',
name: 'icon',
value: '',
description: '选择icon',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272706920329522ffa548458391830aadfedf511b.png'
}
}
]
},
{
name: '页面名称',
thumb: '页面缩略图',
component: 'page1',
list: [
{
type: 'text',
name: '楼层',
value: '',
description: '',
style: {
color: 'white'
},
default: {
value: '1F'
}
},
{
type: 'text',
name: '楼层',
value: '',
style: {
color: 'white'
},
description: '',
default: {
value: 'SOHO 3Q'
}
},
{
type: 'image',
name: '图片',
description: '',
value: '',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272251128eaa21d707f5a4e3fb12731007247ba70.png'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0201'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京迈动互联科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0202'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京数字理想科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0203'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
default: {
value: '0204'
}
},
{
type: 'text',
name: '门牌号',
value: '',
style: {
color: 'white'
},
description: '门牌号',
style: {
color: 'white'
},
default: {
value: '北京妹纸互动科技有限公司'
}
},
{
type: 'icon',
name: 'icon',
value: '',
description: '选择icon',
default: {
value:
'http://visual-clouds.bdideal.com/html/1563272706920329522ffa548458391830aadfedf511b.png'
}
}
]
}
]
src/templates/testTempalate/testPage.vue deleted 100644 → 0
<template>
<div class="container bgani infinite">
<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()"
>
<span
:class="isEdited(0) + ' ' + isEdit()"
:style="getStyle(0)"
@click="edit(0)"
>{{getValue(0)}}</span>
<div class="h2-right">
<span
:class="isEdited(1) + ' ' + isEdit()"
:style="getStyle(1)"
@click="edit(1)"
>{{getValue(1)}}</span>
<span class="right-icon" @click="edit(11)" :class="isEdited(11) + ' ' + isEdit()">
<img :src="getValue(11)" />
</span>
</div>
<!-- <img src="" alt=""> -->
</h2>
<div class="bottom">
<div
class="ani bottom-left fadeIn"
swiper-animate-effect="fadeIn"
@click="edit(2)"
:class="isEdited(2) + ' ' + isEdit() + isAnimeted()"
>
<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()"
>
<span
class="item-name"
:class="isEdited(3) + ' ' + isEdit()"
:style="getStyle(3)"
@click="edit(3)"
>{{getValue(3)}}</span>
<span
class="item-des"
:class="isEdited(4) + ' ' + isEdit()"
:style="getStyle(4)"
@click="edit(4)"
>{{getValue(4)}}</span>
</div>
<div
class="ani bottom-right-item fadeInUp delay400"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(5) + ' ' + isEdit()"
:style="getStyle(5)"
@click="edit(5)"
>{{getValue(5)}}</span>
<span
class="item-des"
:class="isEdited(6) + ' ' + isEdit()"
:style="getStyle(6)"
@click="edit(6)"
>{{getValue(6)}}</span>
</div>
<div
class="ani bottom-right-item fadeInUp delay500"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(7) + ' ' + isEdit()"
:style="getStyle(7)"
@click="edit(7)"
>{{getValue(7)}}</span>
<span
class="item-des"
:class="isEdited(8) + ' ' + isEdit()"
:style="getStyle(8)"
@click="edit(8)"
>{{getValue(8)}}</span>
</div>
<div
class="ani bottom-right-item fadeInUp delay600"
:class="isAnimeted()"
swiper-animate-effect="fadeIn"
>
<span
class="item-name"
:class="isEdited(9) + ' ' + isEdit()"
:style="getStyle(9)"
@click="edit(9)"
>{{getValue(9)}}</span>
<span
class="item-des"
:class="isEdited(10) + ' ' + isEdit()"
:style="getStyle(10)"
@click="edit(10)"
>{{getValue(10)}}</span>
</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:
'data:image/png;base64,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',
currentIndex: ''
}
}
}
</script>
<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>
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