Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit cac360ab by hank
Options

houseData and anime

parent 45386131
Showing with 787 additions and 151 deletions
src/framework/utils/sence.js
......@@ -52,6 +52,7 @@ Scene.EventBus = (function () {
this.msgQueues[msgName](msg)
} else {
this.msgQueues[msgName].map((fn) => {
console.log(fn, 'fn')
fn(msg)
})
}
......
src/templates/listingInformation/defaultData/buyingHouse.js
export default {}
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: '二手房 | 彩虹新城·两室两厅·精装修·南',
price: '3000',
brightOneName: '面积(m²)',
brightOneContent: '80m²',
brightTwoName: '面积(m²)',
brightTwoContent: '80m²',
brightThreeName: '面积(m²)',
brightThreeContent: '80m²',
peripheralFacilities1: '地铁四号线枣园站 260米',
peripheralFacilities2: '物美大卖场 300米',
peripheralFacilities3: '康庄公园 800米',
peripheralFacilities4: '仁和医院 900米'
}
src/templates/listingInformation/index.vue
<template>
<div class>
<div class="glob-container">
<swiper
:options="swiperOption"
:class="'glob-container'"
ref="mySwiper"
class
@someSwiperEvent="callback"
style="width:1920px;height:1080px;"
>
......@@ -15,6 +15,8 @@
>
<component
:is="page.component"
:ref="'child'+index"
@hook:mounted="loaded(index)"
v-if="index === sliderActiveIndex"
:schemaData="pages[index].schemaData"
:isEditMode="isEditMode"
......@@ -24,6 +26,8 @@
></component>
</swiper-slide>
</swiper>
<div class="decoration"></div>
<svg viewBox="0 0 1920 1080" class="svg-filters">
<title>Animated clip-path SVG</title>
<defs>
......@@ -38,15 +42,15 @@
<circle id="cd-circle-1" cx="0" cy="1080" r="2920" />
</clipPath>
<mask id="mask-img-1" maskContentUnits="objectBoundingBox">
<circle id="cd-circle-1" fill="white" cx="0" cy="0" r="1000" />
<circle id="cd-circle-12" fill="black" cx="0" cy="0" r="1000" />
</mask>
</defs>
<image height="800px"
<!-- <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>
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"></image>-->
</svg>
</div>
</template>
......@@ -59,6 +63,8 @@ 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],
......@@ -82,6 +88,14 @@ export default {
};
},
methods: {
loaded(index) {
console.log("child mouted", index);
setTimeout(() => {
this.$refs["child" + this.sliderActiveIndex][0].enter().then(() => {
console.log(index, "enter 完毕");
});
}, 1000);
},
message(data) {
Message.send(data, "*");
},
......@@ -116,6 +130,20 @@ export default {
});
},
created() {
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);
});
}
});
var vm = this;
Message.init(e => {
var isObj = typeof e.data === "object";
......@@ -208,21 +236,21 @@ export default {
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
center no-repeat;
background-size: 100%;
// filter: url("#ant");
// -webkit-filter: url("#ant");
// clip-path: url(#cd-image-1);
#cd-image-1 circle {
animation: visible-clippath 1s ease-in-out forwards;
opacity: 0;
}
.ant {
// clip-path: url(#cd-image-1);
// clip-path: circle(30%);
mask-image: url(#mask-img-1);
// mask-size:10%;
mask-type:alpha;
// mask-clip: view-box;
width: 1920px;
height: 1080px;
// background: #000;
position: relative;
opacity: 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;
}
}
......
src/templates/listingInformation/itemList/buyingHouse.js
export default []
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: 'brighTwoName',
valueRule: ''
},
{
type: 'text',
name: '亮点二内容',
description: '填写亮点二内容不超过五个字',
dataKey: 'brighTwoContent',
valueRule: ''
},
{
type: 'text',
name: '亮点三名称',
description: '填写亮点三名称不超过三个字',
dataKey: 'brighThreeName',
valueRule: ''
},
{
type: 'text',
name: '亮点三内容',
description: '填写亮点三内容不超过五个字',
dataKey: 'brighThreeContent',
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/mixin.js
......@@ -54,7 +54,7 @@ export default {
}
// console.log(zoom);
document.querySelector(
'.swiper-container'
'.glob-container'
).style.transform = `scale(${zoom})`
}
setZoom()
......
src/templates/listingInformation/pages/buyingHouse.vue
<template>
<!-- animated bgliner -->
<div class="container ">
<div class="container ant">
<!-- <StarSky></StarSky> -->
<!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<div class="title">二手房 | 彩虹新城·两室两厅·精装修·南</div>
<div class="house-list">
<!-- <div class="decoration"></div> -->
<div class="title" ref="title">二手房 | 彩虹新城·两室两厅·精装修·南</div>
<div class="house-list" ref="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width: 830px;height: 601px;">
<swiper-slide
style="transform: translate3d(0,0,0)"
......@@ -19,14 +19,14 @@
</div>
<div class="right-container">
<div class="center-v">
<div class="price">
<div class="price" ref="price">
¥
<span class="number">310</span>
<span class="uint">/万</span>
<!-- <span class="number2">38765</span>
<span class="uint2">/平</span> -->
<span class="uint2">/平</span>-->
</div>
<div class="high-light">
<div class="high-light" ref="high-light">
<div class="high-light-item">
<div class="high-light-item-top">80m²</div>
<div class="high-light-item-bottom">面积</div>
......@@ -40,9 +40,9 @@
<div class="high-light-item-bottom">楼层</div>
</div>
</div>
<div class="surrounding" zh="房源特色">PROPERTY FEATURES</div>
<div class="feature-list">
<div class="feature-item" v-for="(item, index) in feutrueList" :key="index">{{item}}</div>
<div class="surrounding" zh="房源特色" ref="surrounding">PROPERTY FEATURES</div>
<div class="feature-list" ref="feature-list">
<div class="feature-item" v-for="(item, index) in feutrueList" :key="index">{{item}}</div>
</div>
</div>
</div>
......@@ -50,43 +50,195 @@
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import StarSky from '@/framework/components/BoxShadowSky'
import methods from '../methods'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import StarSky from "@/framework/components/BoxShadowSky";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from '@/framework/utils/sence'
export default {
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
components: {
swiper,
swiperSlide,
StarSky
},
created () {
created() {
// console.log(this.list);
},
mounted () {},
data () {
methods: {
reLeave() {
this.leave();
},
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished
];
var enPromise = Promise.all(PromiseAll)
return enPromise;
},
enter() {
console.log('enter anime')
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["price"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["surrounding"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["feature-list"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
}).finished,
anime({
targets: ".high-light",
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
},
enterBefore() {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["house-list"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["title"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: ".high-light",
translateX: 1000,
opacity: 0,
duration: 0
});
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
console.log('mounted')
this.enterBefore()
},
data() {
return {
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
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/bg.jpg'
"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"
],
feutrueList: ['绿化率高', '有电梯', '精装修', '满五年', '近地铁'],
feutrueList: ["绿化率高", "有电梯", "精装修", "满五年", "近地铁"],
swiperOption: {
effect: 'slider',
effect: "fade",
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
}
};
}
}
};
</script>
<style lang="scss" scoped>
......@@ -134,7 +286,7 @@ export default {
line-height: 1;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(51,51,51,0.8);;
color: rgba(51, 51, 51, 0.8);
// background-image: -webkit-linear-gradient(
// bottom,
// rgba(41, 39, 39, 0.5),
......@@ -196,7 +348,7 @@ export default {
display: inline-block;
height: 100px;
width: auto;
color: #E74D61;
color: #e74d61;
font-size: 35px;
vertical-align: text-bottom;
.mirror-light {
......@@ -238,8 +390,11 @@ export default {
box-sizing: border-box;
padding: 22px 51px;
justify-content: space-between;
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/desBg.png")
center no-repeat;
// background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/desBg.png")
// center no-repeat;
border: 1px solid #e6e6e6;
border-left: none;
border-right: none;
background-size: cover;
.high-light-item {
box-sizing: border-box;
......@@ -254,7 +409,7 @@ export default {
font-size: 29px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(102,102,102,1);
color: rgba(102, 102, 102, 1);
}
.high-light-item-bottom {
margin-top: 10px;
......@@ -271,7 +426,7 @@ export default {
font-family: DINCondensed-Bold;
font-weight: bold;
line-height: 1;
color: rgba(232,84,103,0.2);
color: rgba(232, 84, 103, 0.2);
&::after {
position: absolute;
left: 0;
......@@ -280,7 +435,7 @@ export default {
font-size: 26px;
font-family: PingFangSC-Semibold;
font-weight: 600;
color: rgba(232,84,103,1);
color: rgba(232, 84, 103, 1);
}
}
.feature-list {
......@@ -300,7 +455,7 @@ export default {
font-size: 17px;
min-width: 97px;
height: 32px;
background: rgba(0,0,0,0.26);
background: rgba(0, 0, 0, 0.26);
border-radius: 16px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
......
src/templates/listingInformation/pages/rentHouse.vue
<template>
<!-- animated bgliner -->
<div class="container infinite">
<div class="container ant">
<!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<div class="house-list">
<!-- <div class="decoration"></div> -->
<div class="house-list" ref="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width: 1144px;height: 828px;">
<swiper-slide
style="transform: translate3d(0,0,0)"
......@@ -17,13 +17,13 @@
</div>
<div class="right-container">
<div class="center-v">
<div class="title">合租 | 金茂悦两居室-主卧</div>
<div class="price">
<div class="title" ref="title">合租 | 金茂悦两居室-主卧</div>
<div class="price" ref="price">
<span class="number">¥2100</span>
<span class="uint">/月</span>
<div class="mirror-light"></div>
</div>
<div class="high-light">
<div class="high-light" ref="high-light">
<div class="high-light-item">
<div class="high-light-item-top">20m²</div>
<div class="high-light-item-bottom">面积</div>
......@@ -37,8 +37,8 @@
<div class="high-light-item-bottom">楼层</div>
</div>
</div>
<div class="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list">
<div class="surrounding" zh="周边设施" ref="surrounding">SURROUNDING FACILITIES</div>
<div class="feature-list" ref="feature-list">
<div class="feature-item">
<img
class="icon"
......@@ -78,41 +78,193 @@
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import methods from '../methods'
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
export default {
name: 'welcome',
props: ['schemaData', 'page', 'isEditMode', 'cancelEdit'],
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
components: {
swiper,
swiperSlide
},
created () {
created() {
// console.log(this.list);
},
mounted () {},
data () {
methods: {
reLeave() {
this.leave();
},
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished
];
return Promise.all(PromiseAll);
},
enter() {
console.log("enter anime");
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["price"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["surrounding"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["feature-list"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
}).finished,
anime({
targets: ".high-light",
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
},
enterBefore() {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["house-list"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["title"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: ".high-light",
translateX: 1000,
opacity: 0,
duration: 0
});
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
console.log("mounted");
this.enterBefore();
},
data() {
return {
currentIndex: '',
date: '2019.07.04',
currentIndex: '',
currentIndex: "",
date: "2019.07.04",
currentIndex: "",
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/bg.jpg'
"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"
],
swiperOption: {
effect: 'slider',
effect: "fade",
speed: 1000,
loop: true,
autoplay: {
delay: 5000
}
}
}
};
}
}
};
</script>
<style lang="scss" scoped>
......@@ -226,7 +378,12 @@ export default {
font-size: 45px;
// background-position: 50% 0;
// background-blend-mode: lighten;
background: linear-gradient( -30deg, rgba(255,255,255, 1) 10px, rgba(255,255,255, 1) 10px) no-repeat;
background: linear-gradient(
-30deg,
rgba(255, 255, 255, 1) 10px,
rgba(255, 255, 255, 1) 10px
)
no-repeat;
-webkit-background-clip: text;
// animation: moveTo2 12s infinite alternate ease-in-out;
.mirror-light {
......
src/templates/listingInformation/pages/rentHouse2.vue
<template>
<!-- animated bgliner -->
<div class="container infinite">
<div class="container ant">
<!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<div class="house-list">
<swiper :options="swiperOption"
ref="mySwiper"
style=" width:672px;
<!-- <div class="decoration"></div> -->
<div class="house-list" ref="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width:672px;
height:912px;">
<swiper-slide style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index">
<img :src="item"
alt />
<swiper-slide
style="transform: translate3d(0,0,0)"
v-for="(item, index) in dataList"
:key="index"
>
<img :src="item" alt />
</swiper-slide>
</swiper>
</div>
<div class="right-container">
<div class="center-v">
<div class="title">合租 | 金茂悦两居室-主卧</div>
<div class="price">
<div class="title" ref="title">合租 | 金茂悦两居室-主卧</div>
<div class="price" ref="price">
¥
<span class="number">2100</span>
<span class="uint">/月</span>
<div class="mirror-light"></div>
<div class="mirror-light"></div >
</div>
<div class="surrounding"
zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list">
<div class="surrounding" ref="surrounding" zh="周边设施">SURROUNDING FACILITIES</div>
<div class="feature-list" ref="feature-list">
<div class="feature-item">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%9C%B0%E9%93%81.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%85%AC%E5%9B%AD.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%95%86%E5%9C%BA.png"
alt
/>
地铁四号线枣园站 260米
</div>
<div class="feature-item feature-item-right">
<img class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt />
<img
class="icon"
src="http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/%E5%8C%BB%E9%99%A2.png"
alt
/>
地铁四号线枣园站 260米
</div>
</div>
</div>
</div>
<div class="high-light">
<div class="high-light" ref="high-light">
<div class="high-light-item">
<div class="high-light-item-top">20m²</div>
<div class="high-light-item-bottom">面积</div>
......@@ -78,6 +83,8 @@ height:912px;">
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
export default {
name: "welcome",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
......@@ -89,7 +96,156 @@ export default {
created() {
// console.log(this.list);
},
mounted() {},
methods: {
reLeave() {
this.leave();
},
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished
];
return Promise.all(PromiseAll);
},
enter() {
console.log("enter anime");
var PromiseAll = [
anime({
targets: this.$refs["house-list"],
translateX: 0,
opacity: 1,
duration: 1000
}).finished,
anime({
targets: this.$refs["title"],
translateX: 0,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["price"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["surrounding"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["feature-list"],
translateX: 0,
opacity: 1,
duration: 1000,
delay: 2100,
easing: "easeInOutQuad"
}).finished,
anime({
targets: ".high-light",
translateX: 0,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 1500,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
},
enterBefore() {
var els = [
".house-list",
".center-v .title",
".price",
".surrounding",
".feature-list",
".high-light .high-light-item"
];
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["house-list"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["title"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
opacity: 0,
duration: 0
});
anime({
targets: ".high-light",
translateX: 1000,
opacity: 0,
duration: 0
});
// setTimeout(() => {
// this.enter();
// }, 1000);
},
enterAfter() {
this.timer = setTimeout(() => {
Scene.leaveBefore();
clearTimeout(this.timer);
}, 10000);
}
},
mounted() {
console.log("mounted");
this.enterBefore();
},
data() {
return {
currentIndex: "",
......@@ -101,7 +257,7 @@ export default {
],
swiperOption: {
effect: "slider",
effect: "fade",
speed: 1000,
loop: true,
autoplay: {
......@@ -336,7 +492,7 @@ export default {
border: 1px solid rgba(0, 0, 0, 0.3);
// opacity:0.3;
border-radius: 60px;
z-index: 2;
z-index: 2;
.high-light-item-top {
font-size: 36px;
font-family: PingFangSC-Semibold;
......
src/templates/listingInformation/pages/rentHouse3.vue
......@@ -3,7 +3,7 @@
<div class="container" :class="'ant'" @click="reLeave">
<!-- <div class="ani sanjiaoBg " swiper-animate-effect="fadeInRightBig" swiper-animate-duration="0.5s" swiper-animate-delay="0s"></div>
<div class="title">{{getValue('companyName')}}</div>-->
<div class="decoration"></div>
<!-- <div class="decoration"></div> -->
<div class="house-list" ref="house-list">
<swiper :options="swiperOption" ref="mySwiper" style=" width:731px;height:1080px;">
<swiper-slide
......@@ -114,13 +114,13 @@ export default {
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}),
}).finished,
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
})
}).finished
];
return Promise.all(PromiseAll);
},
......@@ -129,53 +129,55 @@ export default {
anime({
targets: this.$refs["house-list"],
translateX: 0,
opcity: 1,
opacity: 1,
duration: 1000
}),
}).finished,
anime({
targets: this.$refs["title"],
translateX: 0,
opcity: 1,
opacity: 1,
delay: 1000,
duration: 500,
easing: "easeInOutQuad"
}),
}).finished,
anime({
targets: this.$refs["price"],
translateX: 0,
opcity: 1,
opacity: 1,
duration: 1000,
delay: 1200,
easing: "easeInOutQuad"
}),
}).finished,
anime({
targets: this.$refs["surrounding"],
translateX: 0,
opcity: 1,
opacity: 1,
duration: 1000,
delay: 1500,
easing: "easeInOutQuad"
}),
}).finished,
anime({
targets: this.$refs["feature-list"],
translateX: 0,
opcity: 1,
opacity: 1,
duration: 1000,
delay: 1800,
easing: "easeInOutQuad"
}),
}).finished,
anime({
targets: ".high-light-item",
targets: ".high-light",
translateY: 0,
opcity: 1,
opacity: 1,
duration: 1000,
// delay: anime.stagger(1000),
delay: 2000,
easing: "easeInOutQuad"
})
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter()
})
return Promise.all(PromiseAll);
},
enterBefore() {
......@@ -195,57 +197,57 @@ export default {
anime({
targets: this.$refs["house-list"],
translateX: -1000,
opcity: 0,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["title"],
translateX: 2000,
opcity: 0,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["price"],
translateX: 2000,
opcity: 0,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["surrounding"],
translateX: 2000,
opcity: 0,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["feature-list"],
translateX: 2000,
opcity: 0,
opacity: 0,
duration: 0
});
anime({
targets: ".high-light-item",
targets: ".high-light",
translateY: 1000,
opcity: 0,
opacity: 0,
duration: 0
});
setTimeout(() => {
this.enter();
}, 1000);
// setTimeout(() => {
// this.enter();
// }, 1000);
// anime.set(els[1], {
// translateX: () => 1000,
// opcity: () => 0
// opacity: () => 0
// })
// anime.set(els[2], {
// translateX: () => 1000,
// opcity: () => 0
// opacity: () => 0
// })
// anime.set(els[3], {
// translateX: () => 1000,
// opcity: () => 0
// opacity: () => 0
// })
// anime.set(els[4], {
// translateX: () => 1000,
// opcity: () => 0
// opacity: () => 0
// })
// anime.set(els[0], {
// translateX: -1000
......
src/templates/listingInformation/schemaData.js
......@@ -7,20 +7,36 @@ export default {
// 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: 'rentHouse3',
component: 'rentHouse',
defaultData: defaultData.buyingHouse,
schemaData: defaultData.buyingHouse,
itemList: itemList.rentHouse
},
{
name: '买房页面',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/thumb1.png',
component: '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
itemList: itemList.rentHouse
},
{
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.rentHouse
}
]
}
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