背景抽离

src/framework/components/StarSky/index.vue

+<template>
+  <canvas id="star-sky" :style="{height: height, width: width}"></canvas>
+</template>
+
+<script>
+import methods from '../../../templates/listingInformation/methods'
+export default {
+  name: 'StarSky',
+  data: function () {
+    return {
+      height: '1080px',
+      width: '1920px'
+    }
+  },
+  mounted () {
+    this.animate()
+  },
+  methods: {
+    animate () {
+      var canvas = document.getElementById('star-sky'),
+        ctx = canvas.getContext('2d'),
+        w = (canvas.width = window.innerWidth),
+        h = (canvas.height = window.innerHeight),
+        hue = 217,
+        stars = [],
+        count = 0,
+        maxStars = 1300 // 星星数量
+
+      var canvas2 = document.createElement('canvas'),
+        ctx2 = canvas2.getContext('2d')
+      canvas2.width = 100
+      canvas2.height = 100
+      var half = canvas2.width / 2,
+        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
+      gradient2.addColorStop(0.025, '#CCC')
+      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
+      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
+      gradient2.addColorStop(1, 'transparent')
+
+      ctx2.fillStyle = gradient2
+      ctx2.beginPath()
+      ctx2.arc(half, half, half, 0, Math.PI * 2)
+      ctx2.fill()
+
+      // End cache
+
+      function random (min, max) {
+        if (arguments.length < 2) {
+          max = min
+          min = 0
+        }
+
+        if (min > max) {
+          var hold = max
+          max = min
+          min = hold
+        }
+
+        return Math.floor(Math.random() * (max - min + 1)) + min
+      }
+
+      function maxOrbit (x, y) {
+        var max = Math.max(x, y),
+          diameter = Math.round(Math.sqrt(max * max + max * max))
+        return diameter / 2
+        // 星星移动范围，值越大范围越小，
+      }
+
+      var Star = function () {
+        this.orbitRadius = random(maxOrbit(w, h))
+        this.radius = random(60, this.orbitRadius) / 8
+        // 星星大小
+        this.orbitX = w / 2
+        this.orbitY = h / 2
+        this.timePassed = random(0, maxStars)
+        this.speed = random(this.orbitRadius) / 50000
+        // 星星移动速度
+        this.alpha = random(2, 10) / 10
+
+        count++
+        stars[count] = this
+      }
+
+      Star.prototype.draw = function () {
+        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
+          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
+          twinkle = random(10)
+
+        if (twinkle === 1 && this.alpha > 0) {
+          this.alpha -= 0.05
+        } else if (twinkle === 2 && this.alpha < 1) {
+          this.alpha += 0.05
+        }
+
+        ctx.globalAlpha = this.alpha
+        ctx.drawImage(
+          canvas2,
+          x - this.radius / 2,
+          y - this.radius / 2,
+          this.radius,
+          this.radius
+        )
+        this.timePassed += this.speed
+      }
+
+      for (var i = 0; i < maxStars; i++) {
+        new Star()
+      }
+
+      function animation () {
+        ctx.globalCompositeOperation = 'source-over'
+        ctx.globalAlpha = 0.5 // 尾巴
+        ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'
+        ctx.fillRect(0, 0, w, h)
+
+        ctx.globalCompositeOperation = 'lighter'
+        for (var i = 1, l = stars.length; i < l; i++) {
+          stars[i].draw()
+        }
+
+        window.requestAnimationFrame(animation)
+      }
+
+      animation()
+    }
+  }
+}
+</script>
+
+<style>
+#star-sky {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

src/templates/listingInformation/pages/rentHouse.vue

@@ -78,41 +78,41 @@
 </template>
 
 <script>
-import { swiper, swiperSlide } from "vue-awesome-swiper";
-import methods from "../methods";
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import methods from '../methods'
 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() {
+  mounted () {},
+  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: 'slider',
         speed: 1000,
         loop: true,
         autoplay: {
           delay: 5000
         }
       }
-    };
+    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>

src/templates/listingInformation/schemaData2.js

@@ -6,14 +6,14 @@ export default {
   templateInfo,
   // defaultData,
   pageList: [
-    // {
-    //   name: '租房页面',
-    //   thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb1.jpg',
-    //   component: 'rentHouse',
-    //   defaultData: defaultData.welcome,
-    //   schemaData: defaultData.welcome,
-    //   itemList: itemList.welcome
-    // },
+    {
+      name: '租房页面',
+      thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb1.jpg',
+      component: 'rentHouse',
+      defaultData: defaultData.welcome,
+      schemaData: defaultData.welcome,
+      itemList: itemList.welcome
+    },
     {
       name: '买房页面',
       thumb: 'http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/template-culture/thumb1.jpg',