<!--
 * @Author: your name
 * @Date: 2020-08-28 15:20:15
 * @LastEditTime: 2020-10-10 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /xfhd-vue-scaffold/src/page/index/Home/Index.vue
-->
<template>
  <div class="pushcoin" id="container" ref="container">
    <canvas ref="matter" class="matter"></canvas>
  </div>
</template>
<script>
// @ is an alias to /src
import gsap from "gsap";
import game from "./game/index";
export default {
  name: "ColorSort",
  components: {},
  data() {
    return {};
  },
  computed: {
    rennderCssHSL() {
      return function (item) {
        return `background-color: ${item.csshsl};`;
      };
    },
  },
  mounted() {
    this.game = new game();
    this.game.init(this);
  },
  methods: {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.pushcoin {
  .prLayout(100%,100%);
  overflow: hidden;
  background-color: #333;
  .matter {
    .paLayout(0,0,750px,1624px,1);
  }
  #stageCanvas {
    .paLayout(0,0,750px,1624px,0);
  }
}
</style>