Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 99d7b6e3 by zhangmeng
Options

retail

parent c81dc7a4
Showing with 790 additions and 793 deletions
src/App.vue
...@@ -5,9 +5,9 @@ ...@@ -5,9 +5,9 @@
</template> </template>
<script> <script>
/*import page from './templates/helloworld/index'*/ /* import page from './templates/helloworld/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'
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/framework/components/BoxShadowSky/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</template> </template>
<script> <script>
export default {}; export default {}
</script> </script>
<style> <style>
......
src/templates/companyCulture/index.vue
...@@ -29,17 +29,17 @@ ...@@ -29,17 +29,17 @@
</template> </template>
<script> <script>
import mixin from "./mixin"; import mixin from './mixin'
import "swiper/dist/css/swiper.css"; import 'swiper/dist/css/swiper.css'
import { getQuery } from "@/framework/utils"; import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from "@/framework/templateApi/index"; import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from "./pages/index.js"; import requireAllPage from './pages/index.js'
import Message from "@/framework/tempalteMessage"; import Message from '@/framework/tempalteMessage'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from "timers"; import { setTimeout, clearTimeout } from 'timers'
export default { export default {
name: "page", name: 'page',
mixins: [mixin], mixins: [mixin],
components: { components: {
swiper, swiper,
...@@ -47,99 +47,99 @@ export default { ...@@ -47,99 +47,99 @@ export default {
...requireAllPage ...requireAllPage
}, },
computed: { computed: {
swiper() { swiper () {
return this.$refs.mySwiper.swiper; return this.$refs.mySwiper.swiper
} }
}, },
data() { data () {
return { return {
swiperOption: { swiperOption: {
// some swiper options/callbacks // some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数 // 所有的参数同 swiper 官方 api 参数
// ... // ...
} }
}; }
}, },
methods: { methods: {
message(data) { message (data) {
Message.send(data, "*"); Message.send(data, '*')
}, },
loaded(index) { loaded (index) {
this.$refs["child" + this.sliderActiveIndex][0].enter(); this.$refs['child' + this.sliderActiveIndex][0].enter()
}, },
edit(index) { edit (index) {
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.currentIndex = index; this.currentIndex = index
var item = this.list[index]; var item = this.list[index]
this.message( this.message(
{ {
type: "edit", type: 'edit',
item, item,
index index
}, },
"*" '*'
); )
} }
}, },
getList() { getList () {
this.message( this.message(
{ {
type: "getList", type: 'getList',
pages: this.pages pages: this.pages
}, },
"*" '*'
); )
} }
}, },
beforeDestroy() {}, beforeDestroy () {},
mounted() { mounted () {
Scene.EventBus.on("leaveBefore", e => { Scene.EventBus.on('leaveBefore', e => {
console.log("leaveBefore"); console.log('leaveBefore')
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => { this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then"); console.log('leaveBefore then')
var index = this.sliderActiveIndex; var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) { if (index >= this.pages.length - 1) {
index = -1; index = -1
console.log(index); console.log(index)
} }
this.swiper.slideTo(index + 1, 1000, false); this.swiper.slideTo(index + 1, 1000, false)
}); })
}); })
// this.$refs['child'][0].enter().then(() => { // this.$refs['child'][0].enter().then(() => {
// }) // })
}, },
created() { created () {
var vm = this; var vm = this
Message.init(e => { Message.init(e => {
var isObj = typeof e.data === "object"; var isObj = typeof e.data === 'object'
if (isObj && e.data["type"] == "setData") { if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data); vm.setEditData(e.data)
} }
if (isObj && e.data["type"] == "cancelEdit") { if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction(); vm.cancelEditAction()
} }
if (isObj && e.data["type"] == "edit") { if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index; vm.currentIndex = e.data.index
} }
if (isObj && e.data["type"] == "setList") { if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list)) // vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data); this.setAllData(e.data)
} }
if (isObj && e.data["type"] == "getList") { if (isObj && e.data['type'] == 'getList') {
vm.getAllData(); vm.getAllData()
} }
if (isObj && e.data["type"] == "goPage") { if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false); vm.swiper.slideTo(parseInt(e.data.index), 500, false)
} }
}); })
this.swiperOption = { this.swiperOption = {
effect: "fade", effect: 'fade',
observer: true, observer: true,
/* 将observe应用于Swiper的父元素。 /* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */ 当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true, observerParents: true,
allowTouchMove: !getQuery("isEdit"), allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1, slidesPerView: 1,
// autoplay: !getQuery("isEdit") // autoplay: !getQuery("isEdit")
// ? { // ? {
...@@ -148,55 +148,55 @@ export default { ...@@ -148,55 +148,55 @@ export default {
// : false, // : false,
loop: false, loop: false,
on: { on: {
init() { init () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 // swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画 // swiperAnimate(this); // 初始化完成开始动画
} }
}, },
slideChange() { slideChange () {
vm.sliderActiveIndex = this.realIndex; vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) { if (vm.isEditMode) {
// $(".ani").css("visibility", ""); // $(".ani").css("visibility", "");
} }
}, },
slideChangeTransitionEnd() { slideChangeTransitionEnd () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimate(this); // swiperAnimate(this);
} }
} }
} }
}; }
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.isEditMode = true; this.isEditMode = true
} else { } else {
this.isEditMode = false; this.isEditMode = false
} }
if (getQuery("filmId") && !this.isEditMode) { if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => { getFilmDetail(getQuery('filmId')).then(result => {
console.log(result); console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList; vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId; vm.filmId = result.filmId
}); })
} else { } else {
if (getQuery("isPreview")) { if (getQuery('isPreview')) {
} else { } else {
// vm.getDefaulted(); // vm.getDefaulted();
} }
} }
}, },
data() { data () {
return { return {
date: "", date: '',
img: "", img: '',
currentIndex: "", currentIndex: '',
isEditMode: true, isEditMode: true,
cancelEdit: false, cancelEdit: false,
sliderActiveIndex: 0 sliderActiveIndex: 0
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
......
src/templates/companyCulture/pages/notice.vue
...@@ -65,46 +65,46 @@ ...@@ -65,46 +65,46 @@
</template> </template>
<script> <script>
import methods from "../methods"; import methods from '../methods'
import Date from "@/framework/components/Date/index"; import Date from '@/framework/components/Date/index'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { enter, leave } from "../keyframe"; import { enter, leave } from '../keyframe'
export default { export default {
name: "notice", name: 'notice',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
Date Date
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
}, },
methods: { methods: {
enter, enter,
leave, leave,
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() {}, mounted () {},
destroyed() { destroyed () {
clearTimeout(this.timer); clearTimeout(this.timer)
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
img: "", img: '',
currentIndex: "", currentIndex: '',
keyframes: [ keyframes: [
{ {
el: ".sanjiaoBg", el: '.sanjiaoBg',
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -113,7 +113,7 @@ export default { ...@@ -113,7 +113,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
leave: { leave: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 1000, delay: 1000,
...@@ -142,7 +142,7 @@ export default { ...@@ -142,7 +142,7 @@ export default {
} }
}, },
{ {
el: ".container-notice", el: '.container-notice',
style: { style: {
opacity: 0 opacity: 0
}, },
...@@ -174,11 +174,11 @@ export default { ...@@ -174,11 +174,11 @@ export default {
} }
}, },
{ {
el: ".en_name .left-word", el: '.en_name .left-word',
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "-2000px" translateX: '-2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -188,7 +188,7 @@ export default { ...@@ -188,7 +188,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 1000, delay: 1000,
...@@ -201,11 +201,11 @@ export default { ...@@ -201,11 +201,11 @@ export default {
} }
}, },
{ {
el: ".zh_name", el: '.zh_name',
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
scale: "1" scale: '1'
}, },
options: { options: {
delay: 2000, delay: 2000,
...@@ -228,9 +228,9 @@ export default { ...@@ -228,9 +228,9 @@ export default {
} }
} }
] ]
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/companyCulture/pages/schedule.vue
...@@ -100,80 +100,80 @@ ...@@ -100,80 +100,80 @@
</template> </template>
<script> <script>
import methods from "../methods"; import methods from '../methods'
import Date from "@/framework/components/Date/index"; import Date from '@/framework/components/Date/index'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { enter, leave } from "../keyframe"; import { enter, leave } from '../keyframe'
export default { export default {
name: "schedule", name: 'schedule',
props: ["schemaData", "page", "isEditMode", "cancelEdit", "activeIndex"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit', 'activeIndex'],
mixins: [methods], mixins: [methods],
components: { components: {
Date Date
}, },
watch: { watch: {
schemaData: function() { schemaData: function () {
this.listData = this.schemaData.scheduleList; this.listData = this.schemaData.scheduleList
} }
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
this.listData = this.schemaData.scheduleList; this.listData = this.schemaData.scheduleList
setInterval(() => { setInterval(() => {
this.listData = this.schemaData.scheduleList; this.listData = this.schemaData.scheduleList
if (this.activeIndex === this.page && !this.isEditMode) { if (this.activeIndex === this.page && !this.isEditMode) {
this.listData = JSON.parse(JSON.stringify(this.listData)); this.listData = JSON.parse(JSON.stringify(this.listData))
} }
}, 8000); }, 8000)
}, },
mounted() { mounted () {
}, },
destroyed() { destroyed () {
clearTimeout(this.timer) clearTimeout(this.timer)
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
img: "", img: '',
currentIndex: "", currentIndex: '',
listData: [ listData: [
{ {
content: "龙湖地产来访", content: '龙湖地产来访',
address: "22-1会议室", address: '22-1会议室',
department: "智慧营销", department: '智慧营销',
time: "09:30 AM -12:00 AM", time: '09:30 AM -12:00 AM',
index: 1 index: 1
}, },
{ {
content: "Vmatrix研发进度", content: 'Vmatrix研发进度',
address: "21-03会议室", address: '21-03会议室',
department: "数字理想", department: '数字理想',
time: "09:30 AM -10:00 AM", time: '09:30 AM -10:00 AM',
index: 2 index: 2
}, },
{ {
content: "数字理想前端面试", content: '数字理想前端面试',
address: "22-1会议室", address: '22-1会议室',
department: "数字理想", department: '数字理想',
time: "09:30 AM -12:00 AM", time: '09:30 AM -12:00 AM',
index: 3 index: 3
}, },
{ {
content: "销售总监面试", content: '销售总监面试',
address: "22-1会议室", address: '22-1会议室',
department: "总经办", department: '总经办',
time: "09:30 AM -12:00 AM", time: '09:30 AM -12:00 AM',
index: 4 index: 4
} }
], ],
keyframes: [ keyframes: [
{ {
el: ".sanjiaoBg", el: '.sanjiaoBg',
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -182,7 +182,7 @@ export default { ...@@ -182,7 +182,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -192,7 +192,7 @@ export default { ...@@ -192,7 +192,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -202,7 +202,7 @@ export default { ...@@ -202,7 +202,7 @@ export default {
leave: { leave: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 1000, delay: 1000,
...@@ -211,7 +211,7 @@ export default { ...@@ -211,7 +211,7 @@ export default {
} }
}, },
{ {
el: ".container-schedule", el: '.container-schedule',
style: { style: {
opacity: 0 opacity: 0
}, },
...@@ -243,11 +243,11 @@ export default { ...@@ -243,11 +243,11 @@ export default {
} }
}, },
{ {
el: ".en_name .left-word", el: '.en_name .left-word',
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "-2000px" translateX: '-2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -257,7 +257,7 @@ export default { ...@@ -257,7 +257,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 500, delay: 500,
...@@ -267,7 +267,7 @@ export default { ...@@ -267,7 +267,7 @@ export default {
leave: { leave: {
style: {}, style: {},
options: {} options: {}
} }
}, },
// { // {
// el: ".schedule-item", // el: ".schedule-item",
...@@ -297,11 +297,11 @@ export default { ...@@ -297,11 +297,11 @@ export default {
// } // }
// }, // },
{ {
el: ".zh_name", el: '.zh_name',
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -311,7 +311,7 @@ export default { ...@@ -311,7 +311,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
scale: "1" scale: '1'
}, },
options: { options: {
delay: 2000, delay: 2000,
...@@ -324,61 +324,61 @@ export default { ...@@ -324,61 +324,61 @@ export default {
} }
} }
] ]
}; }
}, },
computed: { computed: {
computeListData() { computeListData () {
return this.listData.map((item, index) => { return this.listData.map((item, index) => {
var obj = {}; var obj = {}
var random = parseInt(Math.random() * 1000); var random = parseInt(Math.random() * 1000)
// console.log(random); // console.log(random);
obj.id = random; obj.id = random
// console.log({...item,...obj}) // console.log({...item,...obj})
return { ...item, ...obj }; return { ...item, ...obj }
}); })
} }
}, },
methods: { methods: {
enter, enter,
leave, leave,
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer) clearTimeout(this.timer)
}, 10000); }, 10000)
}, },
TbeforeEnter(el) { TbeforeEnter (el) {
el.style.opacity = 0; el.style.opacity = 0
$.Velocity( $.Velocity(
el, el,
{ {
opacity: 0, opacity: 0,
rotateX: "-180deg" rotateX: '-180deg'
}, },
{ {
duration: 0 duration: 0
} }
); )
// el.style.transform = 'rotateX(-180deg)' // el.style.transform = 'rotateX(-180deg)'
}, },
Tenter(el, done) { Tenter (el, done) {
window.$.Velocity( window.$.Velocity(
el, el,
{ opacity: 1, rotateX: "0deg" }, { opacity: 1, rotateX: '0deg' },
{ duration: 1000, delay: el.dataset.index * 250, easing: "easeInSine" } { duration: 1000, delay: el.dataset.index * 250, easing: 'easeInSine' }
); )
}, },
Tleave(el, done) { Tleave (el, done) {
window.$.Velocity( window.$.Velocity(
el, el,
{ {
opacity: 0 opacity: 0
}, },
{ complete: done } { complete: done }
); )
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/companyCulture/pages/welcome.vue
...@@ -42,21 +42,21 @@ ...@@ -42,21 +42,21 @@
</template> </template>
<script> <script>
import methods from "../methods"; import methods from '../methods'
import Date from "@/framework/components/Date/index"; import Date from '@/framework/components/Date/index'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { enter, leave } from '../keyframe' import { enter, leave } from '../keyframe'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
Date Date
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
}, },
mounted() { mounted () {
// this.enter((countEnterTime) => { // this.enter((countEnterTime) => {
// this.timer = setTimeout(() => { // this.timer = setTimeout(() => {
// Scene.enterAfter({ // Scene.enterAfter({
...@@ -70,50 +70,49 @@ export default { ...@@ -70,50 +70,49 @@ export default {
// console.log(err) // console.log(err)
// } ) // } )
}, },
entering() { entering () {
console.log(this) console.log(this)
$.velocity(this.$refs['abc'],) $.velocity(this.$refs['abc'])
return new promise(); return new promise()
}, },
innerAnimationStart() { innerAnimationStart () {
sence.eventBus.emit('pageDone') sence.eventBus.emit('pageDone')
}, },
innerAnimationEnd(){ innerAnimationEnd () {
}, },
leave(){ leave () {
}, },
destroyed() { destroyed () {
clearTimeout(this.timer) clearTimeout(this.timer)
}, },
methods: { methods: {
eventChange() { eventChange () {
Scene.EventBus.emit("change", { aa: 12 }); Scene.EventBus.emit('change', { aa: 12 })
// this.leave(); // this.leave();
}, },
enter, enter,
leave, leave,
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer) clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
img: "", img: '',
currentIndex: "", currentIndex: '',
keyframes: [ keyframes: [
{ {
el: ".sanjiaoBg", el: '.sanjiaoBg',
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -122,7 +121,7 @@ export default { ...@@ -122,7 +121,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -132,7 +131,7 @@ export default { ...@@ -132,7 +131,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -142,7 +141,7 @@ export default { ...@@ -142,7 +141,7 @@ export default {
leave: { leave: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 1000, delay: 1000,
...@@ -151,10 +150,10 @@ export default { ...@@ -151,10 +150,10 @@ export default {
} }
}, },
{ {
el: ".en_name", el: '.en_name',
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 2000, delay: 2000,
...@@ -163,7 +162,7 @@ export default { ...@@ -163,7 +162,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 2000, delay: 2000,
...@@ -187,10 +186,10 @@ export default { ...@@ -187,10 +186,10 @@ export default {
} }
}, },
{ {
el: ".en_name .left-word", el: '.en_name .left-word',
style: { style: {
opacity: 0, opacity: 0,
translateX: "-2000px" translateX: '-2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -199,7 +198,7 @@ export default { ...@@ -199,7 +198,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "-2000px" translateX: '-2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -209,7 +208,7 @@ export default { ...@@ -209,7 +208,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 500, delay: 500,
...@@ -222,10 +221,10 @@ export default { ...@@ -222,10 +221,10 @@ export default {
} }
}, },
{ {
el: ".en_name .right-word", el: '.en_name .right-word',
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -234,7 +233,7 @@ export default { ...@@ -234,7 +233,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
translateX: "2000px" translateX: '2000px'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -244,7 +243,7 @@ export default { ...@@ -244,7 +243,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
translateX: "0px" translateX: '0px'
}, },
options: { options: {
delay: 500, delay: 500,
...@@ -257,10 +256,10 @@ export default { ...@@ -257,10 +256,10 @@ export default {
} }
}, },
{ {
el: ".zh_name", el: '.zh_name',
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -269,7 +268,7 @@ export default { ...@@ -269,7 +268,7 @@ export default {
enterBefore: { enterBefore: {
style: { style: {
opacity: 0, opacity: 0,
scale: "0.3" scale: '0.3'
}, },
options: { options: {
delay: 0, delay: 0,
...@@ -279,7 +278,7 @@ export default { ...@@ -279,7 +278,7 @@ export default {
enter: { enter: {
style: { style: {
opacity: 1, opacity: 1,
scale: "1" scale: '1'
}, },
options: { options: {
delay: 3000, delay: 3000,
...@@ -292,9 +291,9 @@ export default { ...@@ -292,9 +291,9 @@ export default {
} }
} }
] ]
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/listingInformation/index.vue
...@@ -56,17 +56,17 @@ ...@@ -56,17 +56,17 @@
</template> </template>
<script> <script>
import mixin from "./mixin"; import mixin from './mixin'
import "swiper/dist/css/swiper.css"; import 'swiper/dist/css/swiper.css'
import { getQuery } from "@/framework/utils"; import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from "@/framework/templateApi/index"; import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from "./pages/index.js"; import requireAllPage from './pages/index.js'
import Message from "@/framework/tempalteMessage"; import Message from '@/framework/tempalteMessage'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { setTimeout } from "timers"; import { setTimeout } from 'timers'
export default { export default {
name: "page", name: 'page',
mixins: [mixin], mixins: [mixin],
components: { components: {
swiper, swiper,
...@@ -74,109 +74,109 @@ export default { ...@@ -74,109 +74,109 @@ export default {
...requireAllPage ...requireAllPage
}, },
computed: { computed: {
swiper() { swiper () {
return this.$refs.mySwiper.swiper; return this.$refs.mySwiper.swiper
} }
}, },
data() { data () {
return { return {
swiperOption: { swiperOption: {
// some swiper options/callbacks // some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数 // 所有的参数同 swiper 官方 api 参数
// ... // ...
} }
}; }
}, },
methods: { methods: {
loaded(index) { loaded (index) {
if (!this.isEditMode) { if (!this.isEditMode) {
setTimeout(() => { setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter().then(() => { this.$refs['child' + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, "enter 完毕"); console.log(index, 'enter 完毕')
}); })
}, 1000); }, 1000)
} }
}, },
message(data) { message (data) {
// 发送消息 // 发送消息
Message.send(data, "*"); Message.send(data, '*')
}, },
edit(index) { edit (index) {
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.currentIndex = index; this.currentIndex = index
var item = this.list[index]; var item = this.list[index]
this.message( this.message(
{ {
type: "edit", type: 'edit',
item, item,
index index
}, },
"*" '*'
); )
} }
}, },
getList() { getList () {
this.message( this.message(
{ {
type: "getList", type: 'getList',
pages: this.pages pages: this.pages
}, },
"*" '*'
); )
} }
}, },
beforeDestroy() {}, beforeDestroy () {},
mounted() { mounted () {
}, },
created() { created () {
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.isEditMode = true; this.isEditMode = true
} else { } else {
Scene.EventBus.on("leaveBefore", e => { Scene.EventBus.on('leaveBefore', e => {
console.log("leaveBefore"); console.log('leaveBefore')
if (this.pages.length > 1) { if (this.pages.length > 1) {
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => { this.$refs['child' + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then"); console.log('leaveBefore then')
var index = this.sliderActiveIndex; var index = this.sliderActiveIndex
if (index >= this.pages.length - 1) { if (index >= this.pages.length - 1) {
index = -1; index = -1
console.log(index); console.log(index)
} }
this.swiper.slideTo(index + 1, 0, false); this.swiper.slideTo(index + 1, 0, false)
}); })
} }
}); })
this.isEditMode = false; this.isEditMode = false
} }
var vm = this; var vm = this
Message.init(e => { Message.init(e => {
var isObj = typeof e.data === "object"; var isObj = typeof e.data === 'object'
if (isObj && e.data["type"] == "setData") { if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data); vm.setEditData(e.data)
} }
if (isObj && e.data["type"] == "cancelEdit") { if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction(); vm.cancelEditAction()
} }
if (isObj && e.data["type"] == "edit") { if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index; vm.currentIndex = e.data.index
} }
if (isObj && e.data["type"] == "setList") { if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list)) // vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data); this.setAllData(e.data)
} }
if (isObj && e.data["type"] == "getList") { if (isObj && e.data['type'] == 'getList') {
vm.getAllData(); vm.getAllData()
} }
if (isObj && e.data["type"] == "goPage") { if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 1000, false); vm.swiper.slideTo(parseInt(e.data.index), 1000, false)
} }
}); })
this.swiperOption = { this.swiperOption = {
observer: true, observer: true,
/* 将observe应用于Swiper的父元素。 /* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */ 当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true, observerParents: true,
allowTouchMove: !getQuery("isEdit"), allowTouchMove: !getQuery('isEdit'),
slidesPerView: 1, slidesPerView: 1,
// autoplay: !getQuery("isEdit") // autoplay: !getQuery("isEdit")
// ? { // ? {
...@@ -185,51 +185,51 @@ export default { ...@@ -185,51 +185,51 @@ export default {
// : false, // : false,
loop: false, loop: false,
on: { on: {
init() { init () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 todo // swiperAnimateCache(this); // 隐藏动画元素 todo
// swiperAnimate(this); // 初始化完成开始动画 todo // swiperAnimate(this); // 初始化完成开始动画 todo
} }
}, },
slideChange() { slideChange () {
vm.sliderActiveIndex = this.realIndex; vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) { if (vm.isEditMode) {
// $(".ani").css("visibility", ""); // $(".ani").css("visibility", "");
} }
}, },
slideChangeTransitionEnd() { slideChangeTransitionEnd () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimate(this); // todo // swiperAnimate(this); // todo
} }
} }
} }
}; }
if (getQuery("filmId") && !this.isEditMode) { if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => { getFilmDetail(getQuery('filmId')).then(result => {
console.log(result); console.log(result)
const filmData = JSON.parse(result.data.filmData); const filmData = JSON.parse(result.data.filmData)
vm.pages = filmData && filmData.pageList ? filmData.pageList : []; vm.pages = filmData && filmData.pageList ? filmData.pageList : []
vm.filmId = result.filmId; vm.filmId = result.filmId
}); })
} else { } else {
if (getQuery("isPreview")) { if (getQuery('isPreview')) {
} else { } else {
// vm.getDefaulted(); // vm.getDefaulted();
} }
} }
}, },
data() { data () {
return { return {
date: "", date: '',
img: "", img: '',
currentIndex: "", currentIndex: '',
isEditMode: true, isEditMode: true,
cancelEdit: false, cancelEdit: false,
sliderActiveIndex: 0 sliderActiveIndex: 0
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
......
src/templates/listingInformation/pages/buyingHouse.vue
...@@ -52,29 +52,29 @@ ...@@ -52,29 +52,29 @@
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import StarSky from "@/framework/components/BoxShadowSky"; import StarSky from '@/framework/components/BoxShadowSky'
import methods from "../methods"; import methods from '../methods'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
StarSky StarSky
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
}, },
methods: { methods: {
reLeave() { reLeave () {
this.leave(); this.leave()
}, },
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -83,168 +83,168 @@ export default { ...@@ -83,168 +83,168 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
var enPromise = Promise.all(PromiseAll); var enPromise = Promise.all(PromiseAll)
return enPromise; return enPromise
}, },
enter() { enter () {
console.log("enter anime"); console.log('enter anime')
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000 duration: 1000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 1000,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 2100,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter(); this.enterAfter()
}); })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
var els = [ var els = [
".house-list", '.house-list',
".center-v .title", '.center-v .title',
".price", '.price',
".surrounding", '.surrounding',
".feature-list", '.feature-list',
".high-light .high-light-item" '.high-light .high-light-item'
]; ]
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: -1500, translateX: -1500,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 1000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
console.log(this.isEditMode); console.log(this.isEditMode)
if (!this.isEditMode) { if (!this.isEditMode) {
console.log(this.isEditMode); console.log(this.isEditMode)
this.enterBefore(); this.enterBefore()
} }
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
currentIndex: "", currentIndex: '',
dataList: [ dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png", 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg" 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
], ],
feutrueList: ["绿化率高", "有电梯", "精装修", "满五年", "近地铁"], feutrueList: ['绿化率高', '有电梯', '精装修', '满五年', '近地铁'],
swiperOption: { swiperOption: {
effect: "fade", effect: 'fade',
speed: 1000, speed: 1000,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000 delay: 5000
} }
} }
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse.vue
...@@ -80,19 +80,19 @@ ...@@ -80,19 +80,19 @@
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from "../methods"; import methods from '../methods'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
}, },
filters: { filters: {
...@@ -101,11 +101,11 @@ export default { ...@@ -101,11 +101,11 @@ export default {
} }
}, },
methods: { methods: {
reLeave() { reLeave () {
this.leave(); this.leave()
}, },
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -114,165 +114,165 @@ export default { ...@@ -114,165 +114,165 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enter() { enter () {
console.log("enter anime"); console.log('enter anime')
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000 duration: 1000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 1000,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 2100,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter() this.enterAfter()
}) })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
var els = [ var els = [
".house-list", '.house-list',
".center-v .title", '.center-v .title',
".price", '.price',
".surrounding", '.surrounding',
".feature-list", '.feature-list',
".high-light .high-light-item" '.high-light .high-light-item'
]; ]
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: -1500, translateX: -1500,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 1000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
if (!this.isEditMode) { if (!this.isEditMode) {
this.enterBefore(); this.enterBefore()
} }
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
currentIndex: "", currentIndex: '',
dataList: [ dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png", 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg" 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
], ],
swiperOption: { swiperOption: {
effect: "fade", effect: 'fade',
speed: 1000, speed: 1000,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000 delay: 5000
} }
} }
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse2.vue
...@@ -83,27 +83,27 @@ height:912px;"> ...@@ -83,27 +83,27 @@ height:912px;">
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from "../methods"; import methods from '../methods'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
}, },
methods: { methods: {
reLeave() { reLeave () {
this.leave(); this.leave()
}, },
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -112,164 +112,164 @@ export default { ...@@ -112,164 +112,164 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enter() { enter () {
console.log("enter anime"); console.log('enter anime')
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000 duration: 1000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 1000,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 2100,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter(); this.enterAfter()
}); })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
var els = [ var els = [
".house-list", '.house-list',
".center-v .title", '.center-v .title',
".price", '.price',
".surrounding", '.surrounding',
".feature-list", '.feature-list',
".high-light .high-light-item" '.high-light .high-light-item'
]; ]
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: -1500, translateX: -1500,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 1000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
if (!this.isEditMode) { if (!this.isEditMode) {
this.enterBefore(); this.enterBefore()
} }
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
currentIndex: "", currentIndex: '',
dataList: [ dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png", 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png',
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg" 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg'
], ],
swiperOption: { swiperOption: {
effect: "fade", effect: 'fade',
speed: 1000, speed: 1000,
loop: true, loop: true,
autoplay: { autoplay: {
delay: 5000 delay: 5000
} }
} }
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/listingInformation/pages/rentHouse3.vue
...@@ -83,28 +83,28 @@ ...@@ -83,28 +83,28 @@
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from "../methods"; import methods from '../methods'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
swiper, swiper,
swiperSlide swiperSlide
}, },
created() { created () {
// console.log(this.list); // console.log(this.list);
window.test = this; window.test = this
}, },
methods: { methods: {
reLeave() { reLeave () {
this.leave(); this.leave()
}, },
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -113,126 +113,126 @@ export default { ...@@ -113,126 +113,126 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enter() { enter () {
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000 duration: 1000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 1000,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateY: 0, translateY: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 2000, delay: 2000,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter(); this.enterAfter()
}); })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
var els = [ var els = [
".house-list", '.house-list',
".center-v .title", '.center-v .title',
".price", '.price',
".surrounding", '.surrounding',
".feature-list", '.feature-list',
".high-light .high-light-item" '.high-light .high-light-item'
]; ]
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["house-list"], targets: this.$refs['house-list'],
translateX: -1000, translateX: -1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateY: 1000, translateY: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
...@@ -259,29 +259,29 @@ export default { ...@@ -259,29 +259,29 @@ export default {
// translateX: -1000 // translateX: -1000
// }) // })
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
if (!this.isEditMode) { if (!this.isEditMode) {
this.enterBefore(); this.enterBefore()
} }
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: '',
date: "2019.07.04", date: '2019.07.04',
currentIndex: "", currentIndex: '',
dataList: [ dataList: [
"http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png" 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png'
], ],
swiperOption: { swiperOption: {
effect: "fade", effect: 'fade',
speed: 1000, speed: 1000,
loop: true, loop: true,
autoplay: { autoplay: {
...@@ -289,9 +289,9 @@ export default { ...@@ -289,9 +289,9 @@ export default {
} }
}, },
isLeave: false isLeave: false
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/templates/retail/defaultData/welcome.js
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
welcomeWordEn: { welcomeWordEn: {
value: 'WELCOME' value: 'WELCOME'
}, },
imgurl:{ imgurl: {
value: require("../../../assets/code.png") value: require('../../../assets/code.png')
} }
} }
src/templates/retail/index.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
v-for="(page, index) in pages" v-for="(page, index) in pages"
:key="index" :key="index"
@load="loaded(index)"> @load="loaded(index)">
<component v-if="index == sliderActiveIndex" <component v-if="index == sliderActiveIndex"
:is="page.component" :is="page.component"
:ref="'child'+index" :ref="'child'+index"
...@@ -30,17 +30,17 @@ ...@@ -30,17 +30,17 @@
</template> </template>
<script> <script>
import mixin from "./mixin"; import mixin from './mixin'
import "swiper/dist/css/swiper.css"; import 'swiper/dist/css/swiper.css'
import { getQuery } from "@/framework/utils"; import { getQuery } from '@/framework/utils'
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getFilmDetail } from "@/framework/templateApi/index"; import { getFilmDetail } from '@/framework/templateApi/index'
import requireAllPage from "./pages/index.js"; import requireAllPage from './pages/index.js'
import Message from "@/framework/tempalteMessage"; import Message from '@/framework/tempalteMessage'
import Scene from "@/framework/utils/sence"; import Scene from '@/framework/utils/sence'
import { setTimeout, clearTimeout } from "timers"; import { setTimeout, clearTimeout } from 'timers'
export default { export default {
name: "page", name: 'page',
mixins: [mixin], mixins: [mixin],
components: { components: {
swiper, swiper,
...@@ -48,53 +48,53 @@ export default { ...@@ -48,53 +48,53 @@ export default {
...requireAllPage ...requireAllPage
}, },
computed: { computed: {
swiper() { swiper () {
return this.$refs.mySwiper.swiper; return this.$refs.mySwiper.swiper
} }
}, },
data() { data () {
return { return {
swiperOption: { swiperOption: {
// some swiper options/callbacks // some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数 // 所有的参数同 swiper 官方 api 参数
// ... // ...
} }
}; }
}, },
methods: { methods: {
message(data) { message (data) {
Message.send(data, "*"); Message.send(data, '*')
}, },
loaded(index) { loaded (index) {
this.$refs["child" + this.sliderActiveIndex][0].enter(); this.$refs['child' + this.sliderActiveIndex][0].enter()
}, },
edit(index) { edit (index) {
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.currentIndex = index; this.currentIndex = index
var item = this.list[index]; var item = this.list[index]
this.message( this.message(
{ {
type: "edit", type: 'edit',
item, item,
index index
}, },
"*" '*'
); )
} }
}, },
getList() { getList () {
this.message( this.message(
{ {
type: "getList", type: 'getList',
pages: this.pages pages: this.pages
}, },
"*" '*'
); )
} }
}, },
beforeDestroy() {}, beforeDestroy () {},
mounted() { mounted () {
/*Scene.EventBus.on("leaveBefore", e => { /* Scene.EventBus.on("leaveBefore", e => {
console.log("leaveBefore"); console.log("leaveBefore");
this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => { this.$refs["child" + this.sliderActiveIndex][0].leave().then(() => {
console.log("leaveBefore then"); console.log("leaveBefore then");
...@@ -108,96 +108,96 @@ export default { ...@@ -108,96 +108,96 @@ export default {
}); });
// this.$refs['child'][0].enter().then(() => { // this.$refs['child'][0].enter().then(() => {
// })*/ // }) */
}, },
created() { created () {
var vm = this; var vm = this
Message.init(e => { Message.init(e => {
var isObj = typeof e.data === "object"; var isObj = typeof e.data === 'object'
if (isObj && e.data["type"] == "setData") { if (isObj && e.data['type'] == 'setData') {
vm.setEditData(e.data); vm.setEditData(e.data)
} }
if (isObj && e.data["type"] == "cancelEdit") { if (isObj && e.data['type'] == 'cancelEdit') {
vm.cancelEditAction(); vm.cancelEditAction()
} }
if (isObj && e.data["type"] == "edit") { if (isObj && e.data['type'] == 'edit') {
vm.currentIndex = e.data.index; vm.currentIndex = e.data.index
} }
if (isObj && e.data["type"] == "setList") { if (isObj && e.data['type'] == 'setList') {
// vm.list = JSON.parse(JSON.stringify(e.data.list)) // vm.list = JSON.parse(JSON.stringify(e.data.list))
this.setAllData(e.data); this.setAllData(e.data)
} }
if (isObj && e.data["type"] == "getList") { if (isObj && e.data['type'] == 'getList') {
vm.getAllData(); vm.getAllData()
} }
if (isObj && e.data["type"] == "goPage") { if (isObj && e.data['type'] == 'goPage') {
vm.swiper.slideTo(parseInt(e.data.index), 500, false); vm.swiper.slideTo(parseInt(e.data.index), 500, false)
} }
}); })
this.swiperOption = { this.swiperOption = {
effect: "fade", effect: 'fade',
observer: true, observer: true,
/* 将observe应用于Swiper的父元素。 /* 将observe应用于Swiper的父元素。
当Swiper的父元素变化时，例如window.resize，Swiper更新。 */ 当Swiper的父元素变化时，例如window.resize，Swiper更新。 */
observerParents: true, observerParents: true,
allowTouchMove: !getQuery("isEdit"), allowTouchMove: !getQuery('isEdit'),
/*slidesPerView: 1, /* slidesPerView: 1,
autoplay: !getQuery("isEdit") autoplay: !getQuery("isEdit")
? { ? {
delay: 10000 delay: 10000
} }
: false,*/ : false, */
loop: false, loop: false,
on: { on: {
init() { init () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimateCache(this); // 隐藏动画元素 // swiperAnimateCache(this); // 隐藏动画元素
// swiperAnimate(this); // 初始化完成开始动画 // swiperAnimate(this); // 初始化完成开始动画
} }
}, },
slideChange() { slideChange () {
vm.sliderActiveIndex = this.realIndex; vm.sliderActiveIndex = this.realIndex
if (vm.isEditMode) { if (vm.isEditMode) {
// $(".ani").css("visibility", ""); // $(".ani").css("visibility", "");
} }
}, },
slideChangeTransitionEnd() { slideChangeTransitionEnd () {
if (!vm.isEditMode) { if (!vm.isEditMode) {
// swiperAnimate(this); // swiperAnimate(this);
} }
} }
} }
}; }
if (getQuery("isEdit")) { if (getQuery('isEdit')) {
this.isEditMode = true; this.isEditMode = true
} else { } else {
this.isEditMode = false; this.isEditMode = false
} }
if (getQuery("filmId") && !this.isEditMode) { if (getQuery('filmId') && !this.isEditMode) {
getFilmDetail(getQuery("filmId")).then(result => { getFilmDetail(getQuery('filmId')).then(result => {
console.log(result); console.log(result)
vm.pages = JSON.parse(result.data.filmData).pageList; vm.pages = JSON.parse(result.data.filmData).pageList
vm.filmId = result.filmId; vm.filmId = result.filmId
}); })
} else { } else {
if (getQuery("isPreview")) { if (getQuery('isPreview')) {
} else { } else {
// vm.getDefaulted(); // vm.getDefaulted();
} }
} }
}, },
data() { data () {
return { return {
date: "", date: '',
img: "", img: '',
currentIndex: "", currentIndex: '',
isEditMode: true, isEditMode: true,
cancelEdit: false, cancelEdit: false,
sliderActiveIndex: 0 sliderActiveIndex: 0
}; }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
......
src/templates/retail/pages/retail1.vue
...@@ -12,22 +12,22 @@ ...@@ -12,22 +12,22 @@
</template> </template>
<script> <script>
import methods from "../methods"; import methods from '../methods'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence' import Scene from '@/framework/utils/sence'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
}, },
created() { created () {
console.log(this.schemaData) console.log(this.schemaData)
}, },
methods: { methods: {
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -36,142 +36,142 @@ export default { ...@@ -36,142 +36,142 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
var enPromise = Promise.all(PromiseAll) var enPromise = Promise.all(PromiseAll)
return enPromise; return enPromise
}, },
enter() { enter () {
console.log('enter anime') console.log('enter anime')
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["mlxg"], targets: this.$refs['mlxg'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 2000 duration: 2000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["title"], targets: this.$refs['title'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
delay: 1000, delay: 1000,
duration: 500, duration: 500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["decorate"], targets: this.$refs['decorate'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 2100,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter() this.enterAfter()
}) })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
console.log('enterBefore'); console.log('enterBefore')
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["mlxg"], targets: this.$refs['mlxg'],
translateX: -1500, translateX: -1500,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["decorate"], targets: this.$refs['decorate'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 1000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
console.log('mounted') console.log('mounted')
this.enterBefore() this.enterBefore()
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: ''
}; }
} }
}; }
</script> </script>
<style> <style>
.container{background: #FCD333;width: 1080px;height: 1920px;} .container{background: #FCD333;width: 1080px;height: 1920px;}
...@@ -183,4 +183,4 @@ export default { ...@@ -183,4 +183,4 @@ export default {
.code{width: 200px;height: 200px;display: block;position: absolute;bottom: 80px;left: 6%;} .code{width: 200px;height: 200px;display: block;position: absolute;bottom: 80px;left: 6%;}
.price{width: 300px;height: 200px;display: block;position: absolute;bottom: 80px;right: 6%;} .price{width: 300px;height: 200px;display: block;position: absolute;bottom: 80px;right: 6%;}
.line{width: 90%;height: 5px;display: block;position: absolute;bottom: 45px;left: 5%;} .line{width: 90%;height: 5px;display: block;position: absolute;bottom: 45px;left: 5%;}
</style> </style>
\ No newline at end of file
src/templates/retail/pages/retail2.vue
...@@ -11,21 +11,21 @@ ...@@ -11,21 +11,21 @@
</template> </template>
<script> <script>
import methods from "../methods"; import methods from '../methods'
import anime from "animejs/lib/anime.es.js"; import anime from 'animejs/lib/anime.es.js'
import Scene from '@/framework/utils/sence' import Scene from '@/framework/utils/sence'
export default { export default {
name: "welcome", name: 'welcome',
props: ["schemaData", "page", "isEditMode", "cancelEdit"], props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
mixins: [methods], mixins: [methods],
components: { components: {
}, },
created() { created () {
}, },
methods: { methods: {
leave() { leave () {
console.log("leave"); console.log('leave')
// anime({ // anime({
// targets: "#cd-image-1 circle", // targets: "#cd-image-1 circle",
// duration: 3000, // duration: 3000,
...@@ -34,142 +34,142 @@ export default { ...@@ -34,142 +34,142 @@ export default {
// }); // });
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished, }).finished,
anime({ anime({
targets: "#mask-img-1 circle", targets: '#mask-img-1 circle',
duration: 2000, duration: 2000,
r: [2920, 0], r: [2920, 0],
easing: "easeOutQuad" easing: 'easeOutQuad'
}).finished }).finished
]; ]
var enPromise = Promise.all(PromiseAll) var enPromise = Promise.all(PromiseAll)
return enPromise; return enPromise
}, },
enter() { enter () {
console.log('enter anime'); console.log('enter anime')
var PromiseAll = [ var PromiseAll = [
anime({ anime({
targets: this.$refs["newsummer"], targets: this.$refs['newsummer'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 2000 duration: 2000
}).finished, }).finished,
anime({ anime({
targets: this.$refs["tableitem"], targets: this.$refs['tableitem'],
translateY: 0, translateY: 0,
opacity: 1, opacity: 1,
delay: 500, delay: 500,
duration: 2000, duration: 2000,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["decorate"], targets: this.$refs['decorate'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1200, delay: 1200,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 1800, delay: 1800,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
delay: 2100, delay: 2100,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished, }).finished,
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 0, translateX: 0,
opacity: 1, opacity: 1,
duration: 1000, duration: 1000,
// delay: anime.stagger(1000), // delay: anime.stagger(1000),
delay: 1500, delay: 1500,
easing: "easeInOutQuad" easing: 'easeInOutQuad'
}).finished }).finished
]; ]
Promise.all(PromiseAll).then(() => { Promise.all(PromiseAll).then(() => {
this.enterAfter() this.enterAfter()
}) })
return Promise.all(PromiseAll); return Promise.all(PromiseAll)
}, },
enterBefore() { enterBefore () {
console.log('enterBefore'); console.log('enterBefore')
anime({ anime({
targets: "#cd-image-1 circle", targets: '#cd-image-1 circle',
duration: 0, duration: 0,
r: [0, 2920] r: [0, 2920]
}); })
anime({ anime({
targets: this.$refs["newsummer"], targets: this.$refs['newsummer'],
translateX: -1500, translateX: -1500,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["tableitem"], targets: this.$refs['tableitem'],
translateY: 2000, translateY: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["price"], targets: this.$refs['price'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["surrounding"], targets: this.$refs['surrounding'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: this.$refs["feature-list"], targets: this.$refs['feature-list'],
translateX: 2000, translateX: 2000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
anime({ anime({
targets: ".high-light", targets: '.high-light',
translateX: 1000, translateX: 1000,
opacity: 0, opacity: 0,
duration: 0 duration: 0
}); })
// setTimeout(() => { // setTimeout(() => {
// this.enter(); // this.enter();
// }, 1000); // }, 1000);
}, },
enterAfter() { enterAfter () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
Scene.leaveBefore(); Scene.leaveBefore()
clearTimeout(this.timer); clearTimeout(this.timer)
}, 10000); }, 10000)
} }
}, },
mounted() { mounted () {
console.log('mounted') console.log('mounted')
this.enterBefore() this.enterBefore()
}, },
data() { data () {
return { return {
currentIndex: "", currentIndex: ''
}; }
} }
}; }
</script> </script>
<style> <style>
.container2{background: url(../../../assets/background.png) no-repeat;background-size: 100% 100%;width: 100%;height: 100%;} .container2{background: url(../../../assets/background.png) no-repeat;background-size: 100% 100%;width: 100%;height: 100%;}
...@@ -180,4 +180,4 @@ export default { ...@@ -180,4 +180,4 @@ export default {
.drinkswave{width: 176px;height: 176px;display: block;position: absolute;top: 760px;margin-left: 262px;} .drinkswave{width: 176px;height: 176px;display: block;position: absolute;top: 760px;margin-left: 262px;}
.bean{width: 70px;height: 510px;display: block;position: absolute;top: 570px;right:10%;padding: 20px;border: 3px solid white;} .bean{width: 70px;height: 510px;display: block;position: absolute;top: 570px;right:10%;padding: 20px;border: 3px solid white;}
.tableitem{width: 94%;height: 300px;display: block;position: absolute;bottom: 30px;left: 50%;margin-left: -47%;} .tableitem{width: 94%;height: 300px;display: block;position: absolute;bottom: 30px;left: 50%;margin-left: -47%;}
</style> </style>
\ No newline at end of file
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