零售模板3

src/templates/retail/defaultData/index.js

 import retail from './retail'
+import retail3 from './retail3'
 export default {
   retail,
+  retail3
 }

src/templates/retail/defaultData/retail.js

 export default {
   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: {
-		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: {
-		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: {
-		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: {
-		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: {
-		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:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/price.png"
+  price: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/price.png'
   },
-	line:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/line.png"
+  line: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/line.png'
   },
-	titleitem:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Title%20item.png"
+  titleitem: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Title%20item.png'
   },
-	newsummer:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/New%20Summer.png"
+  newsummer: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/New%20Summer.png'
   },
-	textleft:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textlleft.png"
+  textleft: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textlleft.png'
   },
-	textright:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textright.png"
+  textright: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/textright.png'
   },
-	drinkswave:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Drinks%20Wave.png"
+  drinkswave: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/Drinks%20Wave.png'
   },
-	bean:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/bean.png"
+  bean: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/bean.png'
   },
-	tableitem:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/table%20item.png"
+  tableitem: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/table%20item.png'
   },
-	background:{
-		value:"https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg"
+  background: {
+    value: 'https://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/retail/background.jpg'
   }
 }

src/templates/retail/defaultData/retail3.js

+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 @@
 		}
 	}
 </script>
-<style>
+<style lang="scss" scopeds>
 	.container {
 		background: #FCD333;
 		width: 1080px;
 		height: 1920px;
-	}
-	
 			.texture {
 		display: block;
 		width: 100%;
@@ -248,4 +246,7 @@
 		bottom: 45px;
 		left: 5%;
 	}
+	}
+	
+
 </style>
\ No newline at end of file

src/templates/retail/pages/retail2.vue

@@ -171,7 +171,7 @@ export default {
   }
 }
 </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%;}
 .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;}

src/templates/retail/pages/retail3.vue

+<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 {
       defaultData: defaultData.retail,
       schemaData: defaultData.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
     }
   ]
 }