Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit 65415dae by hank
Options

零售模板3

parent 6091747b
Showing with 203 additions and 30 deletions
src/templates/retail/defaultData/index.js
import retail from './retail' import retail from './retail'
import retail3 from './retail3'
export default { export default {
retail, retail,
retail3
} }
src/templates/retail/defaultData/retail.js
export default { export default {
texture: { texture: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/texture.jpg" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/texture.jpg'
}, },
mlxg: { mlxg: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/mlxg.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/mlxg.png'
}, },
picture: { picture: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/picture.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/picture.png'
}, },
decorate: { decorate: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/decorate.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/decorate.png'
}, },
leftright: { leftright: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Left-right.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Left-right.png'
}, },
code: { code: {
value: "https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/code.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/code.png'
}, },
price:{ price: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/price.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/price.png'
}, },
line:{ line: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/line.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/line.png'
}, },
titleitem:{ titleitem: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Title%20item.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Title%20item.png'
}, },
newsummer:{ newsummer: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/New%20Summer.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/New%20Summer.png'
}, },
textleft:{ textleft: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textlleft.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textlleft.png'
}, },
textright:{ textright: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textright.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textright.png'
}, },
drinkswave:{ drinkswave: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Drinks%20Wave.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Drinks%20Wave.png'
}, },
bean:{ bean: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/bean.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/bean.png'
}, },
tableitem:{ tableitem: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/table%20item.png" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/table%20item.png'
}, },
background:{ background: {
value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg" value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg'
} }
} }
src/templates/retail/defaultData/retail3.js 0 → 100644
export default {
code: {
value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retail3Code.png'
},
content: {
value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retail3Title.png'
},
decorate: {
value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retail3Decorate.png'
}
}
src/templates/retail/pages/retail1.vue
...@@ -172,13 +172,11 @@ ...@@ -172,13 +172,11 @@
} }
} }
</script> </script>
<style> <style lang="scss" scopeds>
.container { .container {
background: #FCD333; background: #FCD333;
width: 1080px; width: 1080px;
height: 1920px; height: 1920px;
}
.texture { .texture {
display: block; display: block;
width: 100%; width: 100%;
...@@ -248,4 +246,7 @@ ...@@ -248,4 +246,7 @@
bottom: 45px; bottom: 45px;
left: 5%; left: 5%;
} }
}
</style> </style>
\ No newline at end of file
src/templates/retail/pages/retail2.vue
...@@ -171,7 +171,7 @@ export default { ...@@ -171,7 +171,7 @@ export default {
} }
} }
</script> </script>
<style> <style lang="scss" scoped>
.container2{background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg) no-repeat;background-size: 100% 100%;width: 100%;height: 100%;} .container2{background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg) no-repeat;background-size: 100% 100%;width: 100%;height: 100%;}
.titleitem{width: 80%;height: 63%;display: block;position: absolute;top: 60px;left: 50%;margin-left: -40%;} .titleitem{width: 80%;height: 63%;display: block;position: absolute;top: 60px;left: 50%;margin-left: -40%;}
.newsummer{width: 546px;height: 470px;display: block;position: absolute;top: 106px;margin-left: 156px;} .newsummer{width: 546px;height: 470px;display: block;position: absolute;top: 106px;margin-left: 156px;}
......
src/templates/retail/pages/retail3.vue 0 → 100644
<template>
<div class="container2">
<!-- <img class="newsummer" ref="newsummer" :src="getValue('newsummer')" /> -->
<img class="code" :src="getValue('code')" alt ref="newsummer" />
<img class="decorate" :src="getValue('decorate')" ref="tableitem" />
<img class="content" :src="getValue('content')" ref="drinkswave" alt />
</div>
</template>
<script>
import methods from "../methods";
import anime from "animejs/lib/anime.es.js";
import Scene from "@/framework/utils/sence";
export default {
name: "retail3",
props: ["schemaData", "page", "isEditMode", "cancelEdit"],
mixins: [methods],
components: {},
created() {},
methods: {
leave() {
console.log("leave");
// anime({
// targets: "#cd-image-1 circle",
// duration: 3000,
// r: [2920, 0],
// easing: "linear"
// });
var PromiseAll = [
anime({
targets: "#cd-image-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished,
anime({
targets: "#mask-img-1 circle",
duration: 2000,
r: [2920, 0],
easing: "easeOutQuad"
}).finished
];
var enPromise = Promise.all(PromiseAll);
return enPromise;
},
enter() {
console.log("enter anime");
var PromiseAll = [
anime({
targets: this.$refs["newsummer"],
translateX: 0,
opacity: 1,
duration: 2000
}).finished,
anime({
targets: this.$refs["tableitem"],
translateY: 0,
opacity: 1,
delay: 500,
duration: 2000,
easing: "easeInOutQuad"
}).finished,
anime({
targets: this.$refs["drinkswave"],
translateX: 0,
opacity: [0, 1],
duration: 1000,
delay: 1000,
easing: "easeInOutQuad"
}).finished
];
Promise.all(PromiseAll).then(() => {
this.enterAfter();
});
return Promise.all(PromiseAll);
},
enterBefore() {
console.log("enterBefore");
anime({
targets: "#cd-image-1 circle",
duration: 0,
r: [0, 2920]
});
anime({
targets: this.$refs["newsummer"],
translateX: -1500,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["tableitem"],
translateY: 2000,
opacity: 0,
duration: 0
});
anime({
targets: this.$refs["drinkswave"],
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: ""
};
}
};
</script>
<style lang='scss' scoped>
.container2 {
background: url(http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retail3Bg.jpg)
no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: relative;
.code {
position: absolute;
bottom: 67px;
left: 374px;
width: 353px;
height: 359px;
}
.content {
width: 100%;
margin-top: 180px;
}
.decorate {
width: 85%;
position: absolute;
margin: auto;
left: 7.5%;
top: 100px;
}
}
</style>
src/templates/retail/schemaData.js
...@@ -22,6 +22,14 @@ export default { ...@@ -22,6 +22,14 @@ export default {
defaultData: defaultData.retail, defaultData: defaultData.retail,
schemaData: defaultData.retail, schemaData: defaultData.retail,
itemList: itemList.retail itemList: itemList.retail
},
{
name: '零售3',
thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/retailtwo.jpg',
component: 'retail3',
defaultData: defaultData.retail3,
schemaData: defaultData.retail3,
itemList: itemList.retail
} }
] ]
} }
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